/* =========================================================
   careers.css — Careers page styling (page-specific)
   ========================================================= */

.page-head { padding-top: 54px; }



.hero-actions{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

/* ✅ Fix: "Why Work With Us" section spacing + layout */
.why-work{
  padding-top: 36px;
  padding-bottom: 36px; /* reduces the big empty height */
}

.why-work .center{
  max-width: 820px;   /* prevents text from stretching too wide */
  margin: 0 auto;
}

.why-work .h2{
  margin-bottom: 10px; /* tighter heading spacing */
}

.why-work .lead{
  margin-top: 0;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text), transparent 25%);
}

.why-work .grid-3{
  margin-top: 22px !important; /* reduces huge gap before cards */
}

/* ✅ Fix: Apply section spacing (removes big empty band) */
.apply-section{
  padding-top: 36px;
  padding-bottom: 36px;
}

/* This is the big card wrapper in Apply section */
.apply-section .apply-surface{
  padding: 24px !important;
  border-radius: 22px;

  /* ✅ Allow dropdowns to escape */
  overflow: visible !important;
}


/* Reduce extra top-space before form */
.apply-section .apply-form{
  margin-top: 12px;
}

/* Tighten title/subtitle spacing */
.apply-section .h2{
  margin-bottom: 10px;
}

.apply-section .lead{
  margin-top: 0;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text), transparent 25%);
}

/* Optional: keep the centered header from stretching too wide */
.apply-section .center{
  max-width: 820px;
  margin: 0 auto;
}

/* ✅ Fix: Open Roles spacing */
.openings-section{
  padding-top: 36px;
  padding-bottom: 36px;
}

.openings-section .center{
  max-width: 820px;
  margin: 0 auto;
}

.openings-section .h2{
  margin-bottom: 10px;
}

.openings-section .lead{
  margin-top: 0;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text), transparent 25%);
}


/* Filters */
.career-filters{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:14px;
}

.career-filters .filter-btn{
  appearance:none;
  -webkit-appearance:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  border: 1px solid color-mix(in srgb, var(--border), transparent 25%);
  background: color-mix(in srgb, var(--surface), transparent 10%);
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}

.career-filters .filter-btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand), transparent 35%);
}

.career-filters .filter-btn.is-active{
  background: linear-gradient(135deg, rgba(124,58,237,.92), rgba(6,182,212,.92));
  border-color: transparent;
  color: #fff;
}

.career-filters .filter-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand), transparent 75%);
}

/* Jobs grid */
.jobs-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.job-card{
  border-radius:22px;
  padding:18px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 20%);
  background:
    radial-gradient(circle at 30% 30%, rgba(6,182,212,.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(124,58,237,.10), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow-1);
}

.job-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}

.job-title{
  margin:0 0 6px;
  letter-spacing:-0.01em;
}

.job-meta{
  margin:0;
  color: color-mix(in srgb, var(--text), transparent 35%);
  line-height:1.6;
  font-size: 14px;
}

/* Details */
.job-details{
  margin-top:10px;
  border-top: 1px solid color-mix(in srgb, var(--border), transparent 30%);
  padding-top:10px;
}

.job-details summary{
  cursor:pointer;
  user-select:none;
  font-weight:700;
  padding:10px 12px;
  border-radius:14px;
  background: color-mix(in srgb, var(--surface), transparent 15%);
  border: 1px solid color-mix(in srgb, var(--border), transparent 25%);
}

.job-details[open] summary{
  background:
    radial-gradient(circle at 30% 30%, rgba(124,58,237,.14), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(6,182,212,.12), transparent 55%),
    color-mix(in srgb, var(--surface), transparent 8%);
}

.job-body{
  margin-top:12px;
  color: color-mix(in srgb, var(--text), transparent 12%);
  line-height:1.75;
}

.jd-list{
  margin: 10px 0 12px;
  padding-left: 18px;
}

/* Apply form */
.apply-form{ margin-top:16px; }

.apply-surface{
  padding:28px;
  border-radius:22px;

  /* ✅ Allow floating UI */
  overflow: visible !important;
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  /* ✅ Prevent clipping */
  overflow: visible;
  position: relative;
  z-index: 1;
}


.field{ display:block; }

.field__label{
  display:block;
  font-weight:700;
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--text), transparent 8%);
}

/* Inputs */
.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 20%);
  background: color-mix(in srgb, var(--surface), transparent 10%);
  color: var(--text);
  outline: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.input::placeholder{
  color: color-mix(in srgb, var(--text), transparent 55%);
}

.input:focus{
  border-color: color-mix(in srgb, var(--brand), transparent 20%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand), transparent 75%);
}

textarea.input{
  resize: vertical;
  min-height: 120px;
}

/* -----------------------
   ✅ Custom Select
   ----------------------- */
.select-wrap{
  position: relative;
}

.select-native{
  /* keep in DOM for form submission, but hide visually */
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.select-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  user-select:none;
}

.select-value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding-right: 10px;
}

.select-caret{
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  opacity: .8;
  background:
    linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--text), transparent 30%) 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--text), transparent 30%) 50%, transparent 50%);
  background-position:
    2px 4px,
    6px 4px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.select-menu{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 15%);
  background:
    radial-gradient(circle at 30% 30%, rgba(124,58,237,.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(6,182,212,.10), transparent 55%),
    color-mix(in srgb, var(--surface), transparent 4%);
  box-shadow: var(--shadow-2, 0 12px 30px rgba(0,0,0,.35));
  padding: 6px;
  max-height: 280px;
  overflow:auto;
  display:none;
}

.select-wrap.is-open .select-menu{
  display:block;
}

.select-option{
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  color: var(--text);
  line-height: 1.3;
}

.select-option:hover,
.select-option.is-focused{
  background: color-mix(in srgb, var(--brand), transparent 85%);
}

.select-option.is-selected{
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(6,182,212,.25));
  border: 1px solid color-mix(in srgb, var(--brand), transparent 60%);
}

/* -----------------------
   ✅ Custom File Input
   ----------------------- */
.file-wrap{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border), transparent 20%);
  background: color-mix(in srgb, var(--surface), transparent 10%);
}

.file-native{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.file-btn{
  border: 1px solid color-mix(in srgb, var(--border), transparent 25%);
  background:
    radial-gradient(circle at 30% 30%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(6,182,212,.16), transparent 60%),
    color-mix(in srgb, var(--surface), transparent 2%);
  color: var(--text);
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}

.file-btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand), transparent 35%);
}

.file-btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand), transparent 75%);
}

.file-name{
  color: color-mix(in srgb, var(--text), transparent 20%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex: 1;
  min-width: 0;
}

/* Actions */
.apply-actions{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top: 6px;
}

.apply-alt-email{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
}

/* Responsive */
@media (max-width: 920px){
  .jobs-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .apply-actions{
    align-items: stretch;
  }
  .apply-actions .btn{
    width: 100%;
  }
}

/* -----------------------
   Intl Phone Input Fix
------------------------ */

.iti{
  width: 100%;
}

.iti__flag-container{
  margin-right: 6px;
}

.iti input{
  padding-left: 60px !important;
}

/* =====================================
   Intl Tel Input - Dark Theme Fix
===================================== */

.iti {
  width: 100%;
  display: block;
}

/* Main input */
.iti input {
  width: 100% !important;

  padding-left: 80px !important; /* more space */

  height: 46px;

  background: color-mix(in srgb, var(--surface), transparent 10%) !important;

  border: 1px solid color-mix(in srgb, var(--border), transparent 20%) !important;

  border-radius: 14px !important;

  color: var(--text) !important;
}


/* Focus state */
.iti input:focus {
  border-color: color-mix(in srgb, var(--brand), transparent 20%) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand), transparent 75%) !important;
}

/* Flag container */
.iti__flag-container {
  background: transparent !important;
  border-right: 1px solid color-mix(in srgb, var(--border), transparent 30%);
  padding: 0 8px;
}

/* Selected flag area */
.iti__selected-flag {
  padding: 0 10px;
  border-radius: 12px 0 0 12px;
}

.iti__country-list {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--border), transparent 25%);
  border-radius: 14px;

  box-shadow: var(--shadow-2);

  max-height: 260px;

  /* ✅ VERY IMPORTANT */
  z-index: 9999 !important;
  position: absolute !important;
}


/* Country rows */
.iti__country {
  padding: 10px 12px;
  border-radius: 10px;
}

/* Hover */
.iti__country:hover,
.iti__country.iti__highlight {
  background: color-mix(in srgb, var(--brand), transparent 85%) !important;
}

/* Dial code */
.iti__dial-code {
  color: color-mix(in srgb, var(--text), transparent 15%);
}

/* Country name */
.iti__country-name {
  color: var(--text);
}

/* Search box */
.iti__search-input {
  background: color-mix(in srgb, var(--surface), transparent 6%) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--border), transparent 30%);
  border-radius: 10px;
  padding: 8px 10px;
}

/* Placeholder */
.iti input::placeholder {
  color: color-mix(in srgb, var(--text), transparent 55%);
}


/* ===============================
   FIX PHONE DROPDOWN LAYER
================================ */

.iti__country-list {
  z-index: 999999 !important;
  position: absolute !important;
}

/* =====================================
   DROPDOWN VISIBILITY FIX (IMPORTANT)
===================================== */

/* Phone country dropdown */
.iti__country-list {
  background: #0f172a !important;   /* Solid dark */
  color: #ffffff !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Country rows */
.iti__country {
  color: #ffffff !important;
}

/* Hover */
.iti__country:hover,
.iti__country.iti__highlight {
  background: rgba(124,58,237,0.25) !important;
}


/* Role select dropdown */
.select-menu {
  background: #0f172a !important;  /* Solid dark */
  color: #ffffff !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Role options */
.select-option {
  color: #ffffff !important;
}

/* Hover */
.select-option:hover,
.select-option.is-focused {
  background: rgba(124,58,237,0.25) !important;
}


/* Light mode support */
html[data-theme="light"] .iti__country-list,
html[data-theme="light"] .select-menu {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .iti__country,
html[data-theme="light"] .select-option {
  color: #0f172a !important;
}