:root {
    --honey: #F5A623;
    --honey-dark: #E8920F;
    --honey-light: rgba(245,166,35,.1);
    --navy: #0D0E2A;
    --navy-mid: #13154A;
    --purple: #6C35DE;
    --lime: #C8F135;
    --white: #FAFAFA;
    --gray: #8B8FA8;
    --card: #161830;
    --border: rgba(255,255,255,.09);
    --border-focus: rgba(245,166,35,.6);
    --error: #FF5A5A;
    --success: #4ADE80;
    --radius: 14px;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family:'Inter', sans-serif;
    background: var(--navy);
    color: var(--white);
    min-height: 100vh;
  }

  h1,h2,h3,h4,h5,label,button { font-family: 'Inter', sans-serif; }

  /* ── NAV ── */
  nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 60px;
    background: rgba(13,14,42,.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
  }
  .logo { font-family:'Inter',sans-serif; font-weight:800; font-size:1.4rem; letter-spacing:-1px; text-decoration:none; color:var(--white); }
  .logo span { color:var(--honey); }
  .nav-links { display:flex; gap:32px; list-style:none; }
  .nav-links a { color:rgba(255,255,255,.65); text-decoration:none; font-size:.88rem; font-weight:600; transition:color .2s; }
  .nav-links a:hover, .nav-links a.active { color:var(--honey); }
  .nav-partner {
    display:flex; align-items:center; gap:8px;
    background:var(--honey); color:var(--navy);
    border:none; padding:9px 20px; border-radius:50px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:.82rem;
    cursor:pointer;
  }

  /* ── PAGE LAYOUT ── */
  .page-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 24px 100px;
  }

  /* ── PAGE HEADER ── */
  .page-header {
    margin-bottom: 48px;
    animation: fadeUp .5s ease both;
  }
  .page-header .badge {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--honey-light); border:1px solid rgba(245,166,35,.25);
    color:var(--honey); padding:5px 14px; border-radius:50px;
    font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
    margin-bottom:16px;
  }
  .page-header h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800; letter-spacing: -1.5px; margin-bottom: 10px;
  }
  .page-header p { color:var(--gray); font-size:.95rem; line-height:1.7; max-width:540px; }

  /* ── PROGRESS STEPS ── */
  .progress {
    display:flex; align-items:center; gap:0;
    margin-bottom:48px;
    animation: fadeUp .5s .1s ease both;
  }
  .prog-step {
    display:flex; align-items:center; gap:10px; flex:1;
    padding:14px 20px;
    border-radius:12px;
    transition: background .3s;
    position:relative;
  }
  .prog-step.active { background:rgba(245,166,35,.08); }
  .prog-step.done .prog-num { background:var(--success); border-color:var(--success); color:var(--navy); }
  .prog-step.done .prog-num::after { content:'✓'; }
  .prog-step.active .prog-num { background:var(--honey); border-color:var(--honey); color:var(--navy); }

  .prog-num {
    width:32px; height:32px; border-radius:50%;
    border:2px solid rgba(255,255,255,.15);
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700; flex-shrink:0;
    color:var(--gray); transition:all .3s;
  }
  .prog-label { line-height:1.2; }
  .prog-label-title { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.9); }
  .prog-label-sub { font-size:.7rem; color:var(--gray); }
  .prog-connector {
    width:32px; height:2px; flex-shrink:0;
    background:rgba(255,255,255,.1);
    position:relative;
  }
  .prog-connector.done { background:var(--honey); }

  /* ── FORM CARD ── */
  .form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    animation: fadeUp .5s .2s ease both;
  }

  .section-block { padding:36px 40px; border-bottom:1px solid var(--border); }
  .section-block:last-child { border-bottom:none; }

  .section-head {
    display:flex; align-items:center; gap:12px;
    margin-bottom:28px;
  }
  .section-icon {
    width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
    flex-shrink:0;
  }
  .section-icon.orange { background:rgba(245,166,35,.15); }
  .section-icon.purple { background:rgba(108,53,222,.2); }
  .section-icon.green  { background:rgba(74,222,128,.12); }
  .section-icon.pink   { background:rgba(236,72,153,.12); }

  .section-head-text h3 { font-size:1rem; font-weight:700; }
  .section-head-text p { font-size:.78rem; color:var(--gray); margin-top:2px; }

  /* ── GRID ── */
  .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  .grid-1 { display:grid; grid-template-columns:1fr; gap:18px; }
  .col-span-2 { grid-column:span 2; }
  .col-span-3 { grid-column:span 3; }

  /* ── FIELD ── */
  .field { display:flex; flex-direction:column; gap:7px; }

  .field label {
    font-size:.78rem; font-weight:700;
    color:rgba(255,255,255,.65); letter-spacing:.3px;
    display:flex; align-items:center; gap:4px;
  }
  .required-dot { color:var(--error); font-size:.9rem; }

  .input-wrap { position:relative; }
  .input-icon {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    font-size:.9rem; pointer-events:none; color:var(--gray);
    transition:color .2s;
  }
  .has-icon input, .has-icon select, .has-icon textarea { padding-left:40px; }

  input, select, textarea {
    width:100%;
    background: rgba(255,255,255,.04);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: var(--radius);
    padding: 12px 16px;
    color: var(--white);
    font-family:'Inter', sans-serif;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    appearance: none;
  }

  input::placeholder, textarea::placeholder { color:rgba(255,255,255,.2); }
  select { cursor:pointer; }
  select option { background: var(--navy-mid); color: var(--white); }

  input:focus, select:focus, textarea:focus {
    border-color: var(--border-focus);
    background: rgba(245,166,35,.04);
    box-shadow: 0 0 0 3px rgba(245,166,35,.1);
  }

  input:focus ~ .input-icon,
  select:focus ~ .input-icon { color: var(--honey); }

  textarea { resize:vertical; min-height:100px; }

  /* Error state */
  .field.error input,
  .field.error select,
  .field.error textarea {
    border-color: var(--error);
    background: rgba(255,90,90,.04);
    box-shadow: 0 0 0 3px rgba(255,90,90,.1);
  }
  .error-msg {
    font-size:.72rem; color:var(--error);
    display:none; align-items:center; gap:4px;
    animation: fadeUp .2s ease;
  }
  .field.error .error-msg { display:flex; }

  /* Valid state */
  .field.valid input,
  .field.valid select {
    border-color: rgba(74,222,128,.4);
  }
  .valid-check {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    color:var(--success); font-size:.85rem; display:none;
  }
  .field.valid .valid-check { display:block; }

  /* ── FILE UPLOAD ── */
  .file-upload-area {
    border: 1.5px dashed rgba(255,255,255,.15);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    background: rgba(255,255,255,.02);
  }
  .file-upload-area:hover {
    border-color: rgba(245,166,35,.4);
    background: rgba(245,166,35,.04);
  }
  .file-upload-area.has-file {
    border-color: rgba(74,222,128,.4);
    background: rgba(74,222,128,.04);
  }
  .file-upload-area input[type="file"] {
    position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
  }
  .file-icon { font-size:1.6rem; margin-bottom:6px; }
  .file-label { font-size:.8rem; font-weight:700; color:rgba(255,255,255,.7); }
  .file-sub { font-size:.7rem; color:var(--gray); margin-top:3px; }
  .file-name {
    font-size:.75rem; color:var(--success); margin-top:6px;
    font-weight:600; display:none;
  }
  .file-upload-area.has-file .file-name { display:block; }
  .file-upload-area.has-file .file-icon { display:none; }
  .file-upload-area.has-file .file-label { color:var(--success); }

  /* ── CHARACTER COUNTER ── */
  .char-counter {
    font-size:.7rem; color:var(--gray); text-align:right; margin-top:4px;
  }
  .char-counter.warn { color:var(--honey); }
  .char-counter.over  { color:var(--error); }

  /* ── FORM FOOTER ── */
  .form-footer {
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,.15);
    gap:16px; flex-wrap:wrap;
  }
  .form-footer-left { font-size:.78rem; color:var(--gray); display:flex; align-items:center; gap:6px; }
  .form-actions { display:flex; gap:12px; }

  .btn-reset {
    background:transparent; border:1.5px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.6); padding:11px 24px; border-radius:10px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:.85rem;
    cursor:pointer; transition:all .2s;
  }
  .btn-reset:hover { border-color:rgba(255,255,255,.3); color:var(--white); }

  .btn-save {
    background:var(--honey); color:var(--navy);
    border:none; padding:11px 32px; border-radius:10px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:.85rem;
    cursor:pointer; transition:all .25s;
    display:flex; align-items:center; gap:8px;
  }
  .btn-save:hover { background:var(--honey-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(245,166,35,.35); }
  .btn-save:active { transform:translateY(0); }

  /* ── SUCCESS STATE ── */
  .success-overlay {
    display:none; position:fixed; inset:0; z-index:200;
    background:rgba(13,14,42,.95); backdrop-filter:blur(10px);
    align-items:center; justify-content:center; flex-direction:column;
    text-align:center; padding:40px;
  }
  .success-overlay.show { display:flex; animation: fadeIn .4s ease; }
  .success-anim { font-size:5rem; margin-bottom:24px; animation:bounce .6s ease; }
  .success-overlay h2 { font-size:2rem; font-weight:800; margin-bottom:12px; }
  .success-overlay p { color:var(--gray); max-width:400px; line-height:1.7; margin-bottom:32px; }
  .btn-home { background:var(--honey); color:var(--navy); border:none; padding:13px 32px; border-radius:50px; font-family:'Syne',sans-serif; font-weight:700; font-size:.9rem; cursor:pointer; }

  @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  @keyframes bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
  @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

  /* ── FOOTER ── */
  footer {
    background:var(--navy-mid); border-top:1px solid var(--border);
    padding:48px 60px 28px;
  }
  .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:48px; margin-bottom:40px; }
  .footer-logo { font-family:'Inter',sans-serif; font-weight:800; font-size:1.3rem; margin-bottom:12px; display:block; }
  .footer-logo span { color:var(--honey); }
  .footer-desc { color:var(--gray); font-size:.82rem; line-height:1.7; max-width:260px; margin-bottom:20px; }
  .footer-apps { display:flex; flex-direction:column; gap:8px; }
  .app-pill { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:7px 14px; font-size:.75rem; color:rgba(255,255,255,.7); text-decoration:none; transition:background .2s; }
  .app-pill:hover { background:rgba(255,255,255,.12); }
  .footer-col h4 { font-size:.88rem; font-weight:700; margin-bottom:16px; }
  .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
  .footer-col a { color:var(--gray); font-size:.82rem; text-decoration:none; transition:color .2s; }
  .footer-col a:hover { color:var(--honey); }
  .sub-input-wrap { display:flex; gap:0; }
  .sub-input-wrap input { border-radius:10px 0 0 10px; border-right:0; font-size:.82rem; }
  .sub-btn { background:var(--honey); color:var(--navy); border:none; padding:0 16px; border-radius:0 10px 10px 0; font-family:'Inter',sans-serif; font-weight:700; font-size:.75rem; cursor:pointer; white-space:nowrap; }
  .footer-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:24px; flex-wrap:wrap; gap:12px; }
  .footer-bottom p { color:var(--gray); font-size:.78rem; }
  .footer-socials { display:flex; gap:10px; }
  .soc { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:.8rem; cursor:pointer; text-decoration:none; color:var(--white); transition:all .2s; }
  .soc:hover { background:var(--honey); color:var(--navy); }

  @media(max-width:768px) {
    nav { padding:14px 20px; }
    .nav-links { display:none; }
    .page-wrapper { padding:40px 16px 80px; }
    .section-block { padding:24px 20px; }
    .grid-3, .grid-2 { grid-template-columns:1fr; }
    .col-span-2, .col-span-3 { grid-column:span 1; }
    .form-footer { padding:20px; }
    footer { padding:40px 20px 24px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
    .progress { overflow-x:auto; gap:4px; }
  }

.file-upload-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* --- 1. Main Selection Box (The closed state) --- */
.select2-container--default .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    height: 45px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease;
}

/* 2. Text Inside the Selection Box */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    padding-left: 45px !important; /* Space for the 🗺/🏙 icon */
    line-height: 45px !important;
    font-size: 14px;
}

/* 3. Placeholder Color */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 4. Dropdown Arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 45px !important;
    right: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent !important;
}

/* --- 5. The Opened Dropdown Menu (The list part) --- */
.select2-dropdown {
  background-color: rgba(255, 255, 255, 0.04) !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px);
    z-index: 9999 !important;
    overflow: hidden;
}

/* 6. Individual Options inside the list */
.select2-results__option {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 10px 15px !important;
    font-size: 14px;
}

/* 7. Hover / Highlight State */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
}

/* 8. Selected Item in the list */
.select2-container--default .select2-results__option[aria-selected=true] {
   background-color: rgba(255, 255, 255, 0.04) !important;
    color: #f5a623 !important; /* Emerald accent for selected items */
}

/* --- 9. Search Box inside Dropdown --- */
.select2-search--dropdown {
    background-color: transparent !important;
    padding: 10px !important;
}

.select2-search--dropdown .select2-search__field {
   background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    color: white !important;
    padding: 6px !important;
}

/* --- 10. Icon and Layout Fixes --- */
.input-wrap.has-icon .input-icon {
    z-index: 11 !important; /* Ensures icon stays above Select2 */
    pointer-events: none;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

.input-wrap {
    position: relative;
    width: 100%;
}