*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --sky-blue:#0770e3;
  --sky-blue-dark:#0558c4;
  --sky-blue-light:#e8f2ff;
  --night-sky:#0e1b4d;
  --night-sky-dark:#0a1230;
  --white:#ffffff;
  --off-white:#f7f8fa;
  --light-gray:#e9ecf0;
  --mid-gray:#c8cdd6;
  --text-gray:#8b95a8;
  --text-dark:#1a202c;
  --text-medium:#4a5568;
  --green:#00875a;
  --green-light:#e8f5e9;
  --orange:#ff6600;
  --red:#e53e3e;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 2px 8px rgba(0,0,0,.1);
  --shadow-lg:0 4px 20px rgba(0,0,0,.12);
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --font-primary:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-secondary:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

body{
  font-family:var(--font-primary);
  background:var(--off-white);
  color:var(--text-dark);
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ═══ NAVBAR ═══ */
.site-nav{
  background:var(--night-sky);
  height:56px;
  position:sticky;
  top:0;
  z-index:200;
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  gap:20px;
}
.logo{
  color:var(--white);
  font-weight:800;
  font-size:18px;
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:-0.5px;
  white-space:nowrap;
  text-decoration:none;
}
.logo-icon{width:28px;height:28px;flex-shrink:0}
.nav-tabs{display:flex;gap:4px}
.ntab{
  color:rgba(255,255,255,.72);
  padding:8px 16px;
  border-radius:20px;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:6px;
  border:none;
  background:none;
  font-family:var(--font-primary);
  transition:all .15s ease;
  white-space:nowrap;
}
.ntab:hover{background:rgba(255,255,255,.12);color:var(--white)}
.ntab.active{background:var(--sky-blue);color:var(--white);font-weight:600}
.ntab svg{flex-shrink:0}
.nav-right{margin-left:auto}
.btn-login{
  background:var(--white);
  color:var(--night-sky);
  border:none;
  padding:8px 18px;
  border-radius:20px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:var(--font-primary);
  transition:all .15s;
  white-space:nowrap;
}
.btn-login:hover{background:var(--sky-blue-light);color:var(--sky-blue-dark)}

.hamburger{
  display:none;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  padding:4px;
  background:none;
  border:none;
  margin-left:auto;
}
.hamburger span{
  width:22px;height:2.5px;background:var(--white);border-radius:2px;transition:all .3s;
}
.mobile-menu{
  display:none;
  position:fixed;
  top:56px;left:0;right:0;bottom:0;
  background:var(--night-sky);
  z-index:199;
  padding:20px;
  flex-direction:column;
  gap:8px;
  animation:slideIn .2s ease;
}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.mobile-menu .ntab{
  font-size:16px;
  padding:14px 20px;
  border-radius:12px;
  width:100%;
  justify-content:flex-start;
}
.mobile-menu.open{display:flex}

/* ═══ HERO SECTION ═══ */
.hero{
  background:#0e1b4d;
  padding:40px 24px 36px;
  position:relative;
  overflow:visible;
}
.hero-headline{
  color:var(--white);
  font-size:clamp(22px,3vw,34px);
  font-weight:800;
  letter-spacing:-0.6px;
  margin-bottom:24px;
  line-height:1.2;
  text-align:center;
}

/* ── Flight-result style search box ── */
.search-box{
  max-width:980px;
  margin:0 auto;
}

/* Top pill row (trip type + travellers) */
.search-top-row{
  display:flex;
  gap:8px;
  margin-bottom:12px;
  align-items:center;
  flex-wrap:wrap;
}
.trip-type-btn{
  display:flex;align-items:center;gap:6px;
  border:1.5px solid rgba(255,255,255,.25);
  border-radius:20px;padding:7px 14px;
  font-size:13px;font-weight:500;
  background:rgba(255,255,255,.08);color:var(--white);
  cursor:pointer;font-family:var(--font-primary);
  transition:all .15s;position:relative;
}
.trip-type-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.45)}
.baggage-btn{
  display:flex;align-items:center;gap:6px;
  border:1.5px solid rgba(255,255,255,.25);
  border-radius:20px;padding:7px 14px;
  font-size:13px;font-weight:500;
  background:rgba(255,255,255,.08);color:var(--white);
  cursor:pointer;font-family:var(--font-primary);
  transition:all .15s;
}
.baggage-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.45)}

/* Trip type dropdown */
.tt-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);left:0;
  background:var(--white);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);border:1px solid var(--light-gray);
  min-width:150px;z-index:100;overflow:hidden;
}
.tt-dropdown.open{display:block}
.tt-opt{
  padding:10px 16px;font-size:13px;cursor:pointer;color:var(--text-dark);
  transition:background .1s;
}
.tt-opt:hover{background:var(--off-white)}
.tt-opt.selected{color:var(--sky-blue);font-weight:600}

/* Overlay + sheet header — inert on desktop, activated only in the mobile media query below */
.tt-overlay{display:none}
.tt-sheet-header{display:none}

/* Main pill search bar – exactly like flight_result */
.search-fields{
  background:var(--white);
  border-radius:15px;
  display:flex;
  align-items:center;
  box-shadow:0 4px 24px rgba(0,0,0,.22);
  overflow:visible;
  border:1px solid var(--light-gray);
  position:relative;
}
.sfield{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:12px 18px;
  flex:1;
  cursor:pointer;
  position:relative;
  min-width:0;
  transition:background .15s;
  border-radius:40px;
}
.sfield:hover{background:var(--off-white)}
.sfield:focus-within{background:var(--sky-blue-light);}
.sfield-label{
  font-size:10px;font-weight:600;
  color:var(--text-gray);
  text-transform:uppercase;letter-spacing:0.4px;
  margin-bottom:2px;
}
.sfield-input{
  font-size:14px;font-weight:700;
  color:var(--text-dark);
  border:none;outline:none;
  background:transparent;
  width:100%;font-family:var(--font-primary);
  cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sfield-input::placeholder{color:var(--mid-gray);font-weight:400}
.sfield-date{
  font-size:14px;font-weight:700;
  color:var(--text-dark);
  white-space:nowrap;
}
.sfield-sub{font-size:11px;color:var(--text-gray);margin-top:1px}

/* Vertical divider between fields */
.sdivider{
  width:1px;height:40px;background:var(--light-gray);flex-shrink:0;
}

/* Swap btn – sits on top of the divider between FROM and TO */
.swap-btn{
  position:relative;
  flex-shrink:0;
  width:28px;height:28px;
  margin:0 -14px;
  background:var(--white);
  border:2px solid var(--light-gray);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;
  font-size:13px;color:var(--sky-blue);
  transition:all .2s;
  box-shadow:var(--shadow-sm);
}
.swap-btn:hover{background:var(--sky-blue);color:var(--white);border-color:var(--sky-blue)}

.from-to-wrap{display:contents}

/* Travellers field (inline in the pill bar) */
.sfield-travellers{
  display:flex;flex-direction:column;justify-content:center;
  padding:12px 18px;
  cursor:pointer;position:relative;
  transition:background .15s;white-space:nowrap;flex-shrink:0;
  border-radius:40px;
}
.sfield-travellers:hover{background:var(--off-white)}

/* Travellers dropdown */
.tr-dropdown{
  display:none;position:absolute;top:calc(100% + 8px);left:0;
  background:var(--white);border-radius:var(--radius-md);
  box-shadow:0 8px 32px rgba(0,0,0,.2);border:1px solid var(--light-gray);
  min-width:280px;z-index:500;padding:16px;
}
.tr-dropdown.open{display:block}

/* Overlay + sheet header — inert on desktop, activated only in the mobile media query below */
.tr-overlay{display:none}
.tr-sheet-header{display:none}
.tr-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--off-white);
}
.tr-row:last-of-type{border-bottom:none}
.tr-info span{display:block}
.tr-type{font-size:14px;font-weight:600;color:var(--text-dark)}
.tr-sub{font-size:12px;color:var(--text-gray)}
.counter{display:flex;align-items:center;gap:12px}
.counter a{
  width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:8px;
  background:var(--light-gray);color:var(--text-dark);
  transition:all .15s;
}
.counter a .icn-minus,
.counter a .icn-plus{
  font-style:normal;line-height:1;
  font-size:16px;font-weight:700;
}
.counter a:hover{background:var(--sky-blue);color:var(--white)}
.counter a:hover .icn-minus,
.counter a:hover .icn-plus{color:var(--white)}
.cnt-input{
  width:24px;flex-shrink:0;text-align:center;
  font-size:14px;font-weight:700;border:none;background:transparent;
}
.cnt-btn{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--sky-blue);
  background:var(--white);color:var(--sky-blue);
  font-size:18px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.cnt-btn:hover{background:var(--sky-blue);color:var(--white)}
.cnt-btn:disabled{border-color:var(--mid-gray);color:var(--mid-gray);cursor:not-allowed}
.cnt-num{font-size:16px;font-weight:700;min-width:20px;text-align:center}
.cabin-wrap{margin-top:12px}
.cabin-lbl{font-size:13px;font-weight:600;color:var(--text-dark);margin-bottom:6px}
.cabin-sel{
  width:100%;padding:8px 12px;
  border:1.5px solid var(--light-gray);border-radius:var(--radius-sm);
  font-family:var(--font-primary);font-size:13px;
  color:var(--text-dark);background:var(--white);
}
.tr-done{
  width:100%;margin-top:14px;padding:10px;
  background:var(--sky-blue);color:var(--white);
  border:none;border-radius:var(--radius-sm);
  font-size:14px;font-weight:700;cursor:pointer;
  font-family:var(--font-primary);transition:background .15s;
}
.tr-done:hover{background:var(--sky-blue-dark)}

/* Search button inside the pill */
.search-btn {
    background: linear-gradient(135deg,#0770e3 0%,#0558c4 100%);
    background-size: 160% 160%;
    background-position: 0% 0%;
    color: var(--white);
    border: none;
    padding: 0 38px;
    margin: 0;
    align-self: stretch;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-primary);
    letter-spacing: .2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 0 15px 15px 0;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: background-position .35s ease,box-shadow .25s ease,transform .18s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(7,112,227,.4),0 1px 2px rgba(7,112,227,.3) inset;
}
.search-btn,
.search-btn:link,
.search-btn:visited,
.search-btn:hover,
.search-btn:active,
.search-btn:focus,
#flight_submit,
#flight_submit:link,
#flight_submit:visited,
#flight_submit:hover,
#flight_submit:active,
#flight_submit:focus{color:#ffffff !important;text-decoration:none !important;opacity:1 !important}
.search-btn:hover{background-position:100% 100%;box-shadow:0 8px 22px rgba(7,112,227,.5);transform:translateY(-2px)}
.search-btn:active{transform:translateY(0) scale(.97);box-shadow:0 3px 8px rgba(7,112,227,.35)}
.search-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.search-btn svg,
#flight_submit svg{flex-shrink:0;transition:transform .25s ease;stroke:#ffffff !important}
.search-btn:hover svg,
.search-btn:active svg,
.search-btn:focus svg,
#flight_submit:hover svg,
#flight_submit:active svg,
#flight_submit:focus svg{stroke:#ffffff !important}
.search-btn:hover svg{transform:scale(1.12) rotate(-8deg)}

/* Wrapper around From/To/Depart/Return — invisible on desktop, becomes a card on mobile */
.field-group{display:contents}

/* Extra checkboxes row injected inside the pill bar, only shown on mobile (see media query) */
.mobile-extras{display:none}

/* Direct flights checkbox below the bar */
.search-extras{
  display:flex;gap:20px;flex-wrap:wrap;
  margin-top:12px;
  padding-left:4px;
}
.check-label{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:rgba(255,255,255,.8);
  cursor:pointer;
}
.check-label input[type=checkbox]{
  width:15px;height:15px;
  accent-color:var(--sky-blue);cursor:pointer;
}

/* ═══ FEATURES STRIP ═══ */
.features{
  background:var(--white);
  padding:28px 24px;
  border-bottom:1px solid var(--light-gray);
  width:100%;
  box-sizing:border-box;
}
.features-inner{
  display:flex;
  gap:24px;
  justify-content:space-between;
  flex-wrap:nowrap;
  max-width:1100px;
  margin:0 auto;
}
.feat{
  display:flex;align-items:flex-start;gap:14px;
  flex:1;
  min-width:0;
}
.feat-icon{font-size:32px;flex-shrink:0;margin-top:2px}
.feat-title{font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:4px}
.feat-desc{font-size:13px;color:var(--text-gray);line-height:1.5}

/* ═══ POPULAR FLIGHTS ═══ */
.section{padding:40px 24px;max-width:1100px;margin:0 auto}
.section-title{font-size:22px;font-weight:800;color:var(--text-dark);margin-bottom:4px}
.section-sub{font-size:14px;color:var(--text-gray);margin-bottom:20px}

.dest-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid var(--light-gray)}
.dest-tab{
  padding:8px 20px;font-size:14px;font-weight:600;
  color:var(--text-gray);cursor:pointer;
  border:none;background:none;
  font-family:var(--font-primary);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;transition:all .15s;
}
.dest-tab.active{color:var(--sky-blue);border-bottom-color:var(--sky-blue)}
.dest-tab:hover:not(.active){color:var(--text-dark)}

.dest-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.dest-card{
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  background:var(--white);
  box-shadow:var(--shadow-sm);
}
.dest-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.dest-img{
  width:100%;height:160px;
  object-fit:cover;
  display:block;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.dest-img-placeholder{
  width:100%;height:160px;
  display:flex;align-items:center;justify-content:center;
  font-size:48px;
}
.dest-info{padding:12px}
.dest-route{font-size:14px;font-weight:700;color:var(--text-dark)}
.dest-dates{font-size:12px;color:var(--text-gray);margin-top:2px}

/* ═══ STAY BANNER ═══ */
.stay-banner{
  background:linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  margin:0;
  padding:60px 24px;
  position:relative;
  overflow:hidden;
}
.stay-banner-inner{
  max-width:1100px;
  margin:0 auto;
  width:100%;
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:40px;
}
.stay-banner::before{
  content:'';
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1540202404-a2f29016b523?w=1200&q=80') center/cover no-repeat;
  opacity:0.4;
}
.stay-banner-inner::before{display:none;}
.stay-content{position:relative;z-index:1;max-width:500px}
.stay-title{
  font-size:clamp(28px,4vw,44px);
  font-weight:900;color:var(--white);
  line-height:1.1;margin-bottom:12px;
  letter-spacing:-0.5px;
}
.stay-desc{
  font-size:14px;color:rgba(255,255,255,.8);
  margin-bottom:24px;line-height:1.6;max-width:380px;
}
.stay-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;
  background:var(--white);color:var(--night-sky);
  border:none;border-radius:var(--radius-sm);
  font-size:14px;font-weight:700;
  font-family:var(--font-primary);
  cursor:pointer;transition:all .2s;
}
.stay-btn:hover{background:var(--sky-blue-light);color:var(--sky-blue-dark)}

/* ═══ ABOUT / TEXT SECTION ═══ */
.about-section{
  background:var(--white);
  padding:48px 24px;
  text-align:center;
}
.about-title{font-size:24px;font-weight:800;color:var(--text-dark);margin-bottom:20px}
.about-text{
  max-width:800px;margin:0 auto;
  font-size:14px;color:var(--text-medium);
  line-height:1.8;
}
    .about-text p {
        margin-bottom: 12px;
        text-align: justify;
    }
.about-text p:last-child{margin-bottom:0}
.about-text a{color:var(--sky-blue);text-decoration:none}

/* ═══ FAQ ═══ */
.faq-section{
  padding:40px 24px;
  max-width:1100px;margin:0 auto;
}
.faq-title{font-size:30px;font-weight:800;color:var(--text-dark);margin-bottom:28px;letter-spacing:-0.5px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;row-gap:0}
.faq-item{
  border-bottom:1px solid var(--light-gray);
  padding:16px 0;
  cursor:pointer;
}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  font-size:15px;font-weight:700;color:var(--text-dark);
  gap:16px;
  line-height:1.4;
}
.faq-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;height:20px;
  flex-shrink:0;
  color:var(--text-dark);
  transition:transform .2s ease;
  transform-origin:center;
}
.faq-icon svg{
  width:16px;height:16px;
  display:block;
}
.faq-a{
  display:none;
  font-size:13px;color:var(--text-medium);
  margin-top:10px;line-height:1.6;
}
.faq-item.open .faq-icon{transform:rotate(180deg)}
.faq-item.open .faq-a{display:block}

/* ═══ FOOTER ═══ */
footer{
  background:#0e1b4d;
  border-top:1px solid var(--light-gray);
  padding:40px 24px 20px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  max-width:1100px;margin:0 auto 32px;
}
.footer-col-title{
  font-size:13px;font-weight:700;
  color:var(--text-dark);margin-bottom:12px;
}
.footer-links{list-style:none}
.footer-links li{margin-bottom:8px}
.footer-links a{
  font-size:13px;color:var(--text-medium);
  text-decoration:none;transition:color .15s;
}
.footer-links a:hover{color:var(--sky-blue)}
.footer-bottom{
  max-width:1100px;margin:0 auto;
  border-top:1px solid var(--light-gray);
  padding-top:20px;
  display:flex;align-items:center;gap:10px;
}
.footer-flag{font-size:22px}
.footer-currency{font-size:13px;font-weight:600;color:var(--text-dark)}
.footer-copy{
  font-size:12px;color:var(--text-gray);
  margin-top:12px;text-align:center;
  max-width:1100px;margin:12px auto 0;
}

/* ═══ TOAST ═══ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--night-sky);color:var(--white);
  padding:12px 24px;border-radius:var(--radius-md);
  font-size:14px;font-weight:600;
  z-index:9999;transition:transform .3s ease;pointer-events:none;
  white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .dest-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr;column-gap:0}
  /* Stack the pill bar vertically on tablet */
  .search-fields{
    border-radius:var(--radius-lg);
    flex-direction:column;
    align-items:stretch;
  }
  .sdivider{width:100%;height:1px;margin:0}
  .sfield, .sfield-travellers{border-radius:0}
  .sfield:first-child{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .search-btn{
    border-radius:var(--radius-lg);
    margin:6px;
    padding:14px;
    justify-content:center;
  }
  .swap-btn{display:none}
  .features-inner{flex-wrap:wrap;justify-content:center;gap:20px}
  .feat{flex:1 1 45%;min-width:260px;max-width:none}
}
@media(max-width:600px){
  .nav-tabs,.nav-right{display:none}
  .hamburger{display:flex}
  .hero{padding:24px 14px 28px}
  .hero-headline{font-size:20px;text-align:center}
  .dest-grid{grid-template-columns:1fr 1fr}
  .stay-banner{padding:40px 24px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .features-inner{flex-direction:column;align-items:center;flex-wrap:wrap;gap:20px}
  .feat{flex:none;max-width:100%;width:100%}
  .search-top-row{gap:6px}
  .trip-type-btn,.baggage-btn{font-size:12px;padding:6px 11px}

  /* ── Card-style form on mobile (Skyscanner-app look) ── */
  .search-fields{
    display:flex;
    flex-direction:column;
    background:transparent;
    border:none;
    box-shadow:none;
    gap:12px;
  }
  .field-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "from   from"
      "to     to"
      "depart return";
    gap:0;
    background:var(--white);
    border-radius:16px;
    border:1px solid var(--light-gray);
    box-shadow:0 4px 20px rgba(0,0,0,.15);
    overflow:hidden;
    position:relative;
  }
  .sdivider{display:none}
  .sfield{
    background:transparent;
    border:none;
    border-radius:0;
    padding:12px 16px;
  }
  .sfield:hover{background:transparent}
  #fromField{grid-area:from;border-bottom:1px solid var(--light-gray)}
  #toField{grid-area:to;border-bottom:1px solid var(--light-gray)}
  #departField{grid-area:depart;border-right:1px solid var(--light-gray)}
  #returnField{grid-area:return}

  /* One Way selected: depart field takes the full row, no empty box on the right */
  .field-group.one-way{
    grid-template-areas:
      "from   from"
      "to     to"
      "depart depart";
  }
  .field-group.one-way #departField{
    border-right:none;
  }
  .mobile-extras{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    padding:0 4px;
  }
  .search-btn{
    width:100%;
    border-radius:14px;
    margin:0;
    padding:14px;
    justify-content:center;
  }

  /* ── Trip type: bottom sheet (matches native app pattern) ── */
  .tt-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(10,15,30,.55);
    z-index:998;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
  }
  .tt-overlay.open{
    opacity:1;
    visibility:visible;
  }

  .tt-dropdown{
    position:fixed;
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    min-width:0;
    max-height:75vh;
    overflow-y:auto;
    background:var(--white);
    border-radius:20px 20px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,.28);
    border:none;
    z-index:999;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
  }
  .tt-dropdown.open{
    display:block;
    transform:translateY(0);
  }

  .tt-sheet-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    padding:14px 12px 14px 12px;
    border-bottom:1px solid var(--light-gray);
  }
  .tt-close{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;
    font-size:16px;color:var(--text-dark);
    cursor:pointer;border-radius:50%;
    transition:background .15s;
  }
  .tt-close:hover{background:var(--off-white)}
  .tt-close-spacer{width:32px}
  .tt-sheet-title{
    position:absolute;
    left:50%;transform:translateX(-50%);
    font-size:15px;font-weight:700;
    color:var(--text-dark);
  }

  .tt-opt{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 20px;
    font-size:15px;font-weight:500;
    color:var(--text-dark);
  }
  .tt-opt:hover{background:var(--off-white)}
  .tt-opt.selected{color:var(--text-dark);font-weight:500;background:transparent}
  .tt-icon{
    width:22px;flex-shrink:0;
    font-size:17px;text-align:center;
    color:var(--text-dark);
  }
  .tt-text{flex:1}

  /* ── Travellers & cabin: bottom sheet (same pattern as trip type) ── */
  .tr-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(10,15,30,.55);
    z-index:998;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
  }
  .tr-overlay.open{
    opacity:1;
    visibility:visible;
  }

  .tr-dropdown{
    display:none;
    position:fixed;
    inset:0;
    width:100%;
    min-width:0;
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    background:var(--white);
    border-radius:0;
    box-shadow:none;
    border:none;
    z-index:999;
    flex-direction:column;
    padding:0 20px max(16px, env(safe-area-inset-bottom));
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
  }
    .tr-dropdown.open {
        display: flex;
        transform: translateX(0);
        min-width: stretch;
    }

  .tr-sheet-header{
    display:flex;
    align-items:center;
    gap:14px;
    position:sticky;
    top:0;
    order:-2;
    background:var(--white);
    margin:0 -20px 8px;
    padding:16px 16px 14px;
    z-index:2;
  }
  .tr-close{
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;
    font-size:19px;color:var(--text-dark);
    cursor:pointer;border-radius:50%;
    flex-shrink:0;
    transition:background .15s;
  }
  .tr-close:hover{background:var(--off-white)}
  .tr-close-spacer{display:none}
  .tr-sheet-title{
    position:static;
    transform:none;
    font-size:16px;font-weight:700;
    color:var(--text-dark);
    white-space:normal;
    line-height:1.3;
  }

  /* Cabin class shown first, styled as a bordered field like the reference design */
  .cabin-wrap{order:-1;margin-top:8px;margin-bottom:20px}
  .cabin-lbl{font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:10px}
  .cabin-sel{
    padding:14px 16px;
    border:1.5px solid var(--light-gray);
    border-radius:10px;
    font-size:15px;
    font-weight:400;
    -webkit-appearance:none;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a202c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
  }

  .tr-row{padding:18px 0;border-bottom:none;align-items:flex-start}
  .tr-type{font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px}
  .tr-info-icon{
    width:15px;height:15px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;background:var(--text-gray);color:var(--white);
    font-size:10px;font-style:normal;font-weight:700;
    flex-shrink:0;
  }
  .tr-sub{font-size:13px;color:var(--text-gray);margin-top:2px}
  .counter{gap:14px}
  .counter a{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    border:none;
    background:var(--light-gray);
    border-radius:8px;
    color:var(--text-dark);
    font-size:16px;
    transition:all .15s;
  }
  .counter a:active{background:var(--sky-blue);color:var(--white)}
  .cnt-input{font-size:15px;font-weight:700;width:24px;text-align:center;background:transparent}

  .tr-done{
    position:sticky;
    bottom:0;
    padding:15px;
    font-size:15px;
    border-radius:10px;
    margin-top:auto;
    margin-bottom:4px;
  }
}