:root {
      --brand:        #047857;
      --brand-dark:   #065f46;
      --brand-light:  #ecfdf5;
      --brand-mid:    #6ee7b7;
      --brand-border: #a7f3d0;
      --teal:         #047857;
    }
    * { font-family: 'DM Sans', sans-serif; box-sizing: border-box; }

    /* ── HERO ── */
    .hero {
      position: relative;
      min-height: 92vh;
      display: flex; align-items: center;
      overflow: visible; /* IMPORTANT: was hidden, caused z-index clipping */
    }
    .hero-bg {
      position: absolute; inset: 0; z-index: 0;
      overflow: hidden;
      background: linear-gradient(160deg, #022c22 0%, #064e3b 40%, #047857 80%, #059669 100%);
    }
    .hero-bg::after {
      content: '';
      position: absolute; inset: 0;
      background-image: repeating-linear-gradient(-45deg,transparent,transparent 60px,rgba(255,255,255,.018) 60px,rgba(255,255,255,.018) 61px);
    }
    .hero-photos {
      position: absolute; right: 0; top: 0; bottom: 0; z-index: 1;
      width: 52%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 5px;
      opacity: .32;
      mask-image: linear-gradient(to left, rgba(0,0,0,.9) 40%, transparent 100%);
      -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.9) 40%, transparent 100%);
      overflow: hidden;
    }
    .hero-photos img { width:100%; height:100%; object-fit:cover; display:block; }
    .hero-photos .hp-tall { grid-row: 1 / 3; }
    @media (max-width: 1023px) { .hero-photos { display: none; } }

    .hero-stat {
      background: rgba(255,255,255,.1);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 16px; padding: 14px 20px;
    }

    /* ══════════════════════════════════
       FIX #1 — SEARCH TABS
       No underline. Pill/button style.
    ══════════════════════════════════ */
    .search-tab {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 18px; border-radius: 12px; font-size: 13px; font-weight: 600;
      cursor: pointer; transition: background .18s, color .18s;
      border: none; outline: none;
      /* Default: ghost */
      background: rgba(255,255,255,.12);
      color: rgba(255,255,255,.7);
    }
    .search-tab:hover:not(.active) {
      background: rgba(255,255,255,.2);
      color: rgba(255,255,255,.95);
    }
    .search-tab.active {
      background: var(--brand);
      color: #fff;
      box-shadow: 0 4px 14px rgba(4,120,87,.5);
    }

    /* ══════════════════════════════════
       FIX #2 — CUSTOM SELECT
       z-index: hero has overflow:visible so
       dropdown can escape. Dropdown uses
       position:fixed to always be on top.
    ══════════════════════════════════ */
    .custom-select { position: relative; }
    .sel-box {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 16px; height: 56px;
      background: #fff; border: 1.5px solid #e2e8f0;
      border-radius: 14px; cursor: pointer; user-select: none;
      transition: border-color .15s, box-shadow .15s;
      font-size: 14px; font-weight: 500; color: #475569;
    }
    .sel-box:hover { border-color: var(--brand-border); box-shadow: 0 0 0 3px rgba(110,231,183,.2); }
    .custom-select.open .sel-box { border-color: var(--brand-border); box-shadow: 0 0 0 3px rgba(110,231,183,.2); }
    .sel-icon { transition: transform .2s; font-size: 11px; color: #94a3b8; }
    .custom-select.open .sel-icon { transform: rotate(180deg); }

    /* Dropdown — JS controls display + position (portal to body) */
    .sel-dropdown {
      display: none;
      background: #fff; border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      box-shadow: 0 24px 64px rgba(0,0,0,.18);
      overflow: hidden;
    }

    .sel-search {
      padding: 10px 12px; border-bottom: 1px solid #f1f5f9; position: relative;
    }
    .sel-search .search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 12px; }
    .sel-search input {
      width: 100%; padding: 8px 10px 8px 30px; font-size: 13px;
      border: 1.5px solid #e2e8f0; border-radius: 10px; outline: none;
      background: #f8fafc; color: #334155;
      transition: border-color .15s;
    }
    .sel-search input:focus { border-color: var(--brand-border); }

    #region-options { max-height: 340px; overflow-y: auto; padding: 6px 0; }
    #region-options::-webkit-scrollbar { width: 4px; }
    #region-options::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

    .sel-section-header {
      padding: 8px 14px 4px;
      font-size: 10px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: #94a3b8;
    }
    .sel-option {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 14px; cursor: pointer; transition: background .12s;
      font-size: 13px;
    }
    .sel-option:hover { background: var(--brand-light); }
    .sel-option.selected { background: var(--brand-light); }
    .sel-option.hidden-opt { display: none; }
    .opt-thumb {
      width: 36px; height: 36px; border-radius: 8px; object-fit: cover;
      flex-shrink: 0; border: 1.5px solid #f1f5f9;
    }
    .opt-info { flex: 1; min-width: 0; }
    .opt-name { font-weight: 600; color: #1e293b; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .opt-sub  { font-size: 11px; color: #94a3b8; margin-top: 1px; }

    /* ══════════════════════════════════
       SEARCH FIELDS
    ══════════════════════════════════ */
    .search-field {
      display: flex; align-items: center; gap: 12px;
      padding: 0 16px; height: 56px;
      background: #fff; border-radius: 14px;
      border: 1.5px solid #e2e8f0;
      transition: border-color .15s, box-shadow .15s;
    }
    .search-field:focus-within {
      border-color: var(--brand-border);
      box-shadow: 0 0 0 3px rgba(110,231,183,.2);
    }
    .search-field input {
      flex: 1; border: none; outline: none; font-size: 14px;
      color: #334155; background: transparent; font-weight: 500;
    }
    .search-field .field-icon { color: var(--brand); font-size: 15px; flex-shrink: 0; }
    .search-field .field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; white-space: nowrap; }

    /* ══════════════════════════════════
       FIX #3 — FLATPICKR CALENDAR
       Custom theme to match design.
       appendTo: body so it's never clipped.
    ══════════════════════════════════ */
    .flatpickr-calendar {
      font-family: 'DM Sans', sans-serif !important;
      border-radius: 18px !important;
      border: 1.5px solid #e2e8f0 !important;
      box-shadow: 0 24px 64px rgba(0,0,0,.16) !important;
      padding: 12px !important;
      z-index: 99999 !important;
      background: #fff !important;
    }
    .flatpickr-calendar.arrowTop:before,
    .flatpickr-calendar.arrowTop:after { display: none !important; }
    .flatpickr-months { margin-bottom: 8px; }
    .flatpickr-months .flatpickr-month { background: transparent !important; color: #1e293b !important; height: 36px; }
    .flatpickr-current-month { font-size: 14px !important; font-weight: 700 !important; color: #1e293b !important; }
    .flatpickr-current-month .flatpickr-monthDropdown-months,
    .flatpickr-current-month input.cur-year { font-family: 'DM Sans', sans-serif !important; font-weight: 700 !important; color: #1e293b !important; font-size: 14px !important; }
    .flatpickr-prev-month, .flatpickr-next-month { color: #64748b !important; fill: #64748b !important; padding: 6px 10px !important; }
    .flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: var(--brand) !important; fill: var(--brand) !important; background: var(--brand-light) !important; border-radius: 8px !important; }
    .flatpickr-weekday { color: #94a3b8 !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
    .flatpickr-day {
      border-radius: 10px !important; font-size: 13px !important; color: #334155 !important;
      border: none !important; height: 36px !important; line-height: 36px !important; max-width: 36px !important;
    }
    .flatpickr-day:hover { background: var(--brand-light) !important; color: var(--brand) !important; }
    .flatpickr-day.selected, .flatpickr-day.selected:hover {
      background: var(--brand) !important; color: #fff !important;
      box-shadow: 0 4px 12px rgba(4,120,87,.35) !important;
    }
    .flatpickr-day.today { border: 1.5px solid var(--brand-border) !important; color: var(--brand) !important; font-weight: 700 !important; }
    .flatpickr-day.flatpickr-disabled { color: #cbd5e1 !important; }
    .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #e2e8f0 !important; }
    .numInputWrapper span { display: none !important; }
    .flatpickr-innerContainer { border: none !important; }

    /* ── DATE FIELD CURSOR ── */
    #fp-date { cursor: pointer; caret-color: transparent; }

    /* ══════════════════════════════════
       REST OF STYLES (unchanged)
    ══════════════════════════════════ */
    .region-card {
      position: relative; overflow: hidden; border-radius: 20px; cursor: pointer; background: #1e293b;
    }
    .region-card img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
    .region-card:hover img { transform: scale(1.08); }
    .region-card .rc-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(4,30,22,.85) 0%, rgba(4,30,22,.2) 55%, transparent 100%);
      transition: opacity .3s;
    }
    .region-card:hover .rc-overlay { opacity: .9; }
    .region-card .rc-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 20px; }
    .region-card .rc-badge {
      display: inline-flex; align-items: center; gap: 4px;
      background: rgba(4,120,87,.8); color: #fff;
      font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 99px;
      margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase;
    }
    .region-card .rc-title { color: #fff; font-weight: 700; font-size: 17px; line-height: 1.2; }
    .region-card .rc-sub { color: rgba(255,255,255,.65); font-size: 12px; margin-top: 3px; }
    .region-card .rc-arrow {
      position: absolute; top: 16px; right: 16px;
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 11px;
      opacity: 0; transform: translateX(-6px);
      transition: opacity .25s, transform .25s;
    }
    .region-card:hover .rc-arrow { opacity: 1; transform: none; }

    .city-card {
      position: relative; overflow: hidden; border-radius: 14px; cursor: pointer; background: #1e293b;
    }
    .city-card img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .45s ease; }
    .city-card:hover img { transform: scale(1.07); }
    .city-card .cc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,30,22,.8) 0%, transparent 70%); }
    .city-card .cc-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 14px; }
    .city-card .cc-name { color: #fff; font-weight: 600; font-size: 14px; line-height: 1.2; }
    .city-card .cc-count { color: rgba(255,255,255,.6); font-size: 11px; margin-top: 2px; }

    .tour-card {
      background: #fff; border: 1.5px solid #e2e8f0; border-radius: 20px;
      overflow: hidden; transition: transform .22s, box-shadow .22s, border-color .22s;
      display: flex; flex-direction: column;
    }
    .tour-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(4,120,87,.12); border-color: var(--brand-border); }
    .tour-card .tc-img { position: relative; overflow: hidden; }
    .tour-card .tc-img img { width:100%; height:190px; object-fit:cover; transition: transform .45s ease; display: block; }
    .tour-card:hover .tc-img img { transform: scale(1.05); }
    .star-on  { color: var(--brand); }
    .star-off { color: #cbd5e1; }

    .cat-pill {
      display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px;
      border-radius: 99px; font-size: 13px; font-weight: 500;
      border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
      cursor: pointer; transition: all .15s; white-space: nowrap; user-select: none;
    }
    .cat-pill:hover { border-color: var(--brand-border); color: var(--brand); background: var(--brand-light); }
    .cat-pill.active { border-color: var(--brand); color: var(--brand); background: var(--brand-light); font-weight: 600; }

    .testimonial-card {
      background: #fff; border: 1.5px solid #e2e8f0; border-radius: 20px; padding: 24px; position: relative;
    }
    .testimonial-card::before {
      content: '\201C'; font-family: 'Montserrat', sans-serif;
      font-size: 80px; line-height: 1; color: var(--brand-border);
      position: absolute; top: 10px; left: 20px;
    }

    .guide-card {
      background: #fff; border: 1.5px solid #e2e8f0; border-radius: 20px;
      padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center;
      transition: transform .22s, box-shadow .22s;
    }
    .guide-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(4,120,87,.1); }

    .stat-item { text-align: center; }
    .stat-num { font-size: 2.5rem; font-weight: 900; color: var(--brand); line-height: 1; }
    .stat-label { font-size: 13px; color: #64748b; margin-top: 4px; }

    .section-label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
      color: var(--brand); margin-bottom: 8px;
    }
    .section-label::before, .section-label::after {
      content: ''; flex: 1; min-width: 20px; height: 1.5px; background: var(--brand-border);
    }

    .promo-banner {
      background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 60%, #059669 100%);
      border-radius: 24px; position: relative; overflow: hidden;
    }
    .promo-banner::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 80% 50%, rgba(255,255,255,.08), transparent 60%);
    }

    .fade-in { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; }
    .fade-in.visible { opacity: 1; transform: none; }

    .scroll-x { overflow-x: auto; }
    .scroll-x::-webkit-scrollbar { height: 0; }

    input:focus { outline: none; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

    @media (max-width: 640px) { .stat-num { font-size: 2rem; } }

    @keyframes bounce {
      0%,100% { transform: translateX(-50%) translateY(0); }
      50%      { transform: translateX(-50%) translateY(6px); }
    }