/* ═══════════════════════════════════════════════
   PazSkyFinder — Complete Stylesheet v6
   ═══════════════════════════════════════════════ */
:root {
  --navy:#0b1c45; --navy-mid:#132456; --navy-light:#1e3470;
  --accent:#ff4d6d; --accent-l:#ff8fa3; --accent-d:#c9374f;
  --teal:#00d4aa; --teal-l:#b3f5ea;
  --sky:#eef4ff; --text:#0d1b3e; --muted:#6b7fa3;
  --sur:#fff; --sur2:#f5f7ff; --bdr:#e0e8f4;
  --sh:0 2px 16px rgba(11,28,69,.07);
  --sh-md:0 6px 28px rgba(11,28,69,.11);
  --sh-lg:0 16px 56px rgba(11,28,69,.16);
  --r:14px; --r-sm:8px;
  --fh:'Raleway','Plus Jakarta Sans',sans-serif;
  --fb:'Plus Jakarta Sans',sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: var(--fb); background: var(--sur2); color: var(--text); min-height: 100vh; overflow-x: hidden; line-height: 1.6; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 3px; }

/* ═══ NAV ═══════════════════════════════════════ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: all .3s; }
.nav.scrolled { background: rgba(11,28,69,.97); backdrop-filter: blur(20px); box-shadow: 0 2px 24px rgba(0,0,0,.3); }
.nav-inner { max-width: 1300px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 20px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; flex-shrink: 0; }
.logo-icon { color: var(--accent); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-text { font-family: var(--fh); font-size: 20px; font-weight: 900; letter-spacing: -.5px; white-space: nowrap; }
.logo-text span { color: var(--accent-l); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: rgba(255,255,255,.75); text-decoration: none; font-size: 13px; font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: #fff; }
.hamburger { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; margin-left: auto; }
.mobile-menu { display: none; flex-direction: column; background: var(--navy); padding: 16px 24px; gap: 14px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 15px; font-weight: 500; }

/* ─── Currency dropdown ─────────────────────── */
.nav-currency { position: relative; flex-shrink: 0; }
.currency-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); border-radius: 50px; padding: 6px 14px; color: #fff; font-family: var(--fb); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.currency-btn:hover { background: rgba(255,255,255,.22); }
.caret { font-size: 10px; opacity: .7; }
.currency-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 310px; background: var(--sur); border: 1.5px solid var(--bdr); border-radius: var(--r); box-shadow: var(--sh-lg); z-index: 999; display: none; overflow: hidden; }
.currency-panel.open { display: block; animation: dropIn .15s ease; }
.cp-title { padding: 13px 18px 8px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--bdr); }
.cp-detected { padding: 8px 18px; font-size: 11px; color: var(--muted); background: var(--sur2); border-bottom: 1px solid var(--bdr); }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; max-height: 340px; overflow-y: auto; }
.cp-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--bdr); transition: background .12s; font-size: 12px; }
.cp-item:hover { background: var(--sky); }
.cp-item.selected { background: rgba(255,77,109,.07); color: var(--accent); font-weight: 700; }
.cp-flag { font-size: 17px; flex-shrink: 0; }
.cp-cur { font-weight: 600; font-size: 12px; }
.cp-country { font-size: 10px; color: var(--muted); }

/* ═══ HERO ═══════════════════════════════════════ */
.hero { position: relative; background: linear-gradient(150deg, var(--navy) 0%, var(--navy-mid) 55%, #0048ff 100%); min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 56px 16px 44px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .25; }
.orb1 { width: 600px; height: 600px; background: radial-gradient(circle, #ff4d6d, transparent); top: -180px; right: -80px; animation: f1 9s ease-in-out infinite; }
.orb2 { width: 420px; height: 420px; background: radial-gradient(circle, #b0bebc, transparent); bottom: 60px; left: -80px; animation: f2 11s ease-in-out infinite; }
.orb3 { width: 300px; height: 300px; background: radial-gradient(circle, #ffffff, transparent); top: 50%; left: 50%; animation: f3 8s ease-in-out infinite; }
@keyframes f1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-28px,18px)} }
@keyframes f2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,-28px)} }
@keyframes f3 { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.18)} }
.grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 48px 48px; }

/* ─── Cartoon world map + animated planes ──────────────────── */
.hero-world { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .32; }
.hc-ocean { fill: #0d2a52; }
.hc-land  { fill: #2e6eb5; stroke: #5a9fd4; stroke-width: 1.2; stroke-linejoin: round; }
.hc-grid  { fill: none; stroke: rgba(100,180,255,.18); stroke-width: 0.7; }
.hr-path  { fill: none; stroke: rgba(255,255,255,.65); stroke-width: 1.4; stroke-dasharray: 5 8; stroke-linecap: round; }
.h-apt    { fill: rgba(255,255,255,.92); }
/* Plane divs */
.h-plane { position: absolute; top: 0; left: 0; width: 38px; height: 38px; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.5)) drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.h-plane svg { width: 100%; height: 100%; }
.hp1 { animation: hfly1 15s ease-in-out infinite; }
.hp2 { animation: hfly2 13s ease-in-out 4.5s infinite; }
.hp3 { animation: hfly3 20s ease-in-out 9s infinite; }
.hp4 { animation: hfly4 11s ease-in-out 1.8s infinite; }
.hp5 { animation: hfly5 16s ease-in-out 6.5s infinite; }
/* plane 1: LHR→JFK — mostly westbound, northward arc */
@keyframes hfly1 {
  0%   { transform: translate(48vw,24vh) rotate(-88deg) scale(.4); opacity:0 }
  7%   { opacity:.78; transform: translate(42vw,18vh) rotate(-92deg) scale(.85) }
  35%  { transform: translate(30vw,13vh) rotate(-96deg) scale(1); opacity:.78 }
  65%  { transform: translate(20vw,16vh) rotate(-88deg) scale(.95); opacity:.78 }
  93%  { opacity:.78; transform: translate(11vw,26vh) rotate(-92deg) scale(.82) }
  100% { transform: translate(8vw,30vh) rotate(-88deg) scale(.4); opacity:0 }
}
/* plane 2: LHR→DXB — southeast */
@keyframes hfly2 {
  0%   { transform: translate(48vw,24vh) rotate(128deg) scale(.4); opacity:0 }
  8%   { opacity:.74; transform: translate(52vw,28vh) rotate(128deg) scale(.9) }
  55%  { transform: translate(63vw,40vh) rotate(124deg) scale(.95); opacity:.74 }
  92%  { opacity:.74; transform: translate(69vw,46vh) rotate(128deg) scale(.85) }
  100% { transform: translate(72vw,50vh) rotate(128deg) scale(.4); opacity:0 }
}
/* plane 3: LHR→BKK — eastbound, curving southeast */
@keyframes hfly3 {
  0%   { transform: translate(48vw,24vh) rotate(68deg) scale(.35); opacity:0 }
  7%   { opacity:.70; transform: translate(54vw,20vh) rotate(65deg) scale(.8) }
  45%  { transform: translate(68vw,26vh) rotate(70deg) scale(1); opacity:.70 }
  85%  { opacity:.70; transform: translate(82vw,50vh) rotate(76deg) scale(.85) }
  100% { transform: translate(88vw,60vh) rotate(72deg) scale(.38); opacity:0 }
}
/* plane 4: take-off — starts tiny, climbs northeast */
@keyframes hfly4 {
  0%   { transform: translate(46vw,36vh) rotate(38deg) scale(.15); opacity:0 }
  4%   { opacity:.82; transform: translate(47vw,33vh) rotate(38deg) scale(.45) }
  20%  { transform: translate(50vw,27vh) rotate(35deg) scale(.82); opacity:.82 }
  55%  { transform: translate(56vw,20vh) rotate(38deg) scale(1); opacity:.82 }
  88%  { opacity:.82; transform: translate(62vw,15vh) rotate(36deg) scale(.9) }
  100% { transform: translate(66vw,12vh) rotate(38deg) scale(.5); opacity:0 }
}
/* plane 5: LHR→JNB — southbound */
@keyframes hfly5 {
  0%   { transform: translate(48vw,24vh) rotate(178deg) scale(.38); opacity:0 }
  9%   { opacity:.66; transform: translate(48vw,30vh) rotate(180deg) scale(.85) }
  55%  { transform: translate(49vw,54vh) rotate(182deg) scale(.95); opacity:.66 }
  90%  { opacity:.66; transform: translate(49vw,68vh) rotate(178deg) scale(.8) }
  100% { transform: translate(49vw,78vh) rotate(180deg) scale(.42); opacity:0 }
}
/* Clouds */
.h-cloud { position: absolute; pointer-events: none; background: rgba(255,255,255,.042); border-radius: 80px; }
.h-cloud::before, .h-cloud::after { content:''; position:absolute; background:rgba(255,255,255,.042); border-radius:50%; }
.hc1 { width:185px; height:54px; top:19%; animation: cldDrift 40s linear infinite; left:-185px; }
.hc1::before { width:95px; height:85px; top:-46%; left:18%; }
.hc1::after  { width:72px; height:66px; top:-35%; left:52%; }
.hc2 { width:135px; height:40px; top:56%; animation: cldDrift 52s linear 15s infinite; left:-135px; }
.hc2::before { width:68px; height:60px; top:-42%; left:14%; }
.hc2::after  { width:55px; height:52px; top:-32%; left:47%; }
.hc3 { width:225px; height:64px; top:38%; animation: cldDrift 45s linear 8s infinite; left:-225px; }
.hc3::before { width:112px; height:98px; top:-49%; left:20%; }
.hc3::after  { width:88px; height:80px; top:-40%; left:56%; }
@keyframes cldDrift { from { left:-225px } to { left:108% } }

.hero-content { position: relative; z-index: 1; text-align: center; width: 100%; max-width: 1080px; }
.hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,77,109,.15); border: 1px solid rgba(255,77,109,.3); color: var(--accent-l); padding: 6px 18px; border-radius: 50px; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 18px; }
.hero-title { font-family: var(--fh); font-size: clamp(38px,7vw,70px); font-weight: 900; color: #fff; line-height: 1.05; letter-spacing: -2px; margin-bottom: 12px; }
.hero-sub { font-size: clamp(14px,2vw,17px); color: rgba(255,255,255,.65); margin-bottom: 26px; }
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 16px; }
.trust-badges span { color: rgba(255,255,255,.6); font-size: 13px; }

/* ─── Service tabs ──────────────────────────── */
.service-tabs { display: flex; gap: 4px; background: rgba(255,255,255,.1); padding: 5px; border-radius: 14px; width: fit-content; margin: 0 auto 18px; }
.svc-tab { background: none; border: none; padding: 9px 22px; border-radius: 10px; font-family: var(--fb); font-size: 14px; font-weight: 600; color: rgba(255,255,255,.75); cursor: pointer; transition: all .2s; white-space: nowrap; }
.svc-tab.active { background: #fff; color: var(--navy); }
.svc-tab:hover:not(.active) { color: #fff; background: rgba(255,255,255,.15); }

/* ═══ SEARCH BOX ════════════════════════════════ */
.search-box { background: #fff; border-radius: 20px; padding: 22px 24px 20px; box-shadow: 0 24px 70px rgba(0,0,0,.28); max-width: 1060px; margin: 0 auto; position: relative; }

/* ─── Top row: trip type + pax ─────────────── */
.search-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 14px; flex-wrap: wrap; }
.trip-tabs { display: flex; gap: 4px; background: var(--sur2); padding: 4px; border-radius: 10px; }
.ttab { background: none; border: none; padding: 7px 16px; border-radius: 7px; font-family: var(--fb); font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all .2s; }
.ttab.active { background: #fff; color: var(--navy); font-weight: 700; box-shadow: var(--sh); }
.pax-trigger { display: flex; align-items: center; gap: 8px; background: var(--sur2); border: 1.5px solid var(--bdr); border-radius: 10px; padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); transition: border-color .2s; user-select: none; }
.pax-trigger:hover { border-color: var(--accent); }
.pax-cabin-lbl { font-size: 12px; color: var(--muted); font-weight: 400; }

/* ─── Pax panel ─────────────────────────────── */
.pax-panel { background: var(--sur2); border: 1.5px solid var(--bdr); border-radius: var(--r); padding: 16px; margin-bottom: 14px; display: none; }
.pax-panel.open { display: block; animation: dropIn .15s ease; }
.pax-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--bdr); }
.pax-row:last-of-type { border-bottom: none; }
.pax-info { display: flex; flex-direction: column; }
.pax-type { font-size: 14px; font-weight: 600; }
.pax-age { font-size: 11px; color: var(--muted); }
.pax-ctrl { display: flex; align-items: center; gap: 14px; }
.pax-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--bdr); background: #fff; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--navy); transition: all .2s; }
.pax-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.pax-count { font-size: 17px; font-weight: 700; color: var(--navy); min-width: 20px; text-align: center; }
.cabin-row { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--bdr); }
.cabin-options { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cabin-opt { border: 1.5px solid var(--bdr); border-radius: 50px; padding: 6px 14px; background: #fff; font-family: var(--fb); font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all .2s; }
.cabin-opt.active, .cabin-opt:hover { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.pax-done-btn { margin-top: 13px; width: 100%; background: var(--navy); color: #fff; border: none; border-radius: 10px; padding: 10px; font-family: var(--fb); font-size: 14px; font-weight: 700; cursor: pointer; }

/* ─── Search fields row — the main fix ──────── */
/*
  This is a single horizontal bar with:
  [From field] [swap btn] [To field] [Depart] [Return]
  Fields sit flush against each other, separated by a thin border.
*/
.search-fields-row {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--bdr);
  border-radius: var(--r);
  overflow: visible;   /* allow dropdown to escape */
  margin-bottom: 14px;
  background: #fff;
}

/* Each field wrapper */
.sf-wrap {
  position: relative;
  padding: 12px 16px 10px;
  border-right: 1.5px solid var(--bdr);
  min-width: 0;
  transition: background .15s;
  flex: 1;
}
.sf-wrap:last-child { border-right: none; }
.sf-wrap:focus-within { background: var(--sky); z-index: 2; }

/* Size variants */
.sf-wide  { flex: 2 1 180px; }   /* From / To — wider */
.sf-date  { flex: 0 0 155px; }   /* Date fields — fixed width */
.sf-full  { flex: 3 1 260px; }   /* Hotel destination — fullest */

.sf-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; display: block; }
.sf-input { width: 100%; background: none; border: none; outline: none; font-family: var(--fb); font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; display: block; }
.sf-input::placeholder { color: #b0bcd4; font-weight: 400; font-size: 14px; }
.sf-date-input { cursor: pointer; font-size: 14px; color: var(--text); font-family: var(--fb); }
.sf-select { -webkit-appearance: none; appearance: none; cursor: pointer; font-size: 14px; }
.sf-sub { font-size: 11px; color: var(--muted); margin-top: 2px; min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Swap button (sits between From and To) ─ */
.swap-btn {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sur2);
  border: none;
  border-left: 1.5px solid var(--bdr);
  border-right: 1.5px solid var(--bdr);
  cursor: pointer;
  font-size: 18px;
  color: var(--navy);
  transition: all .25s;
  padding: 0;
}
.swap-btn:hover { background: var(--navy); color: #fff; }

/* ─── Airport autocomplete dropdown ─────────── */
.sf-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 400px;     /* wide enough for full airport names */
  max-width: 500px;
  background: #fff;
  border: 1.5px solid var(--bdr);
  border-radius: 14px;
  box-shadow: var(--sh-lg);
  z-index: 9999;
  display: none;
  overflow: hidden;
  max-height: 340px;
  overflow-y: auto;
}
.sf-dropdown.open { display: block; animation: dropIn .15s ease; }
@keyframes dropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

.dd-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--bdr); transition: background .12s; }
.dd-item:last-child { border-bottom: none; }
.dd-item:hover, .dd-item.focused { background: var(--sky); }
.dd-flag { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.dd-info { flex: 1; min-width: 0; }
.dd-name { font-size: 14px; font-weight: 600; color: var(--text); }
.dd-detail { font-size: 11px; color: var(--muted); }
.dd-code { font-family: var(--fh); font-size: 18px; font-weight: 800; color: var(--navy); flex-shrink: 0; }

/* ─── Search button ─────────────────────────── */
.search-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--accent), #ff1744); border: none; border-radius: 13px; color: #fff; font-family: var(--fh); font-size: 17px; font-weight: 800; padding: 15px; cursor: pointer; transition: all .3s; box-shadow: 0 8px 28px rgba(255,77,109,.38); }
.search-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255,77,109,.5); }
.search-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ═══ LOADING ════════════════════════════════════ */
.loading-section { display: none; padding: 80px 24px; text-align: center; }
.loading-section.active { display: block; }
.loading-inner { max-width: 480px; margin: 0 auto; }
.plane-loader { width: 100px; height: 56px; margin: 0 auto 20px; }
.plane { font-size: 48px; animation: flyplane 2s ease-in-out infinite; display: block; }
@keyframes flyplane { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-12px) rotate(5deg)} }
.loading-title { font-family: var(--fh); font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.loading-sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.loading-engines { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.engine-pill { display: flex; align-items: center; gap: 5px; background: #fff; border: 1.5px solid var(--bdr); border-radius: 50px; padding: 5px 13px; font-size: 12px; font-weight: 500; color: var(--muted); }
.engine-pill.scanning { border-color: var(--accent); color: var(--accent); animation: pulse 1.5s ease-in-out infinite; }
.engine-pill.done { border-color: var(--teal); color: var(--teal); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* ═══ PRICE DISCLAIMER ══════════════════════════ */
.price-disclaimer { background: linear-gradient(135deg,#fff3e0,#fff8e1); border-left: 4px solid #ff8f00; color: #5d3600; font-size: 13px; font-weight: 500; padding: 12px 24px; text-align: center; line-height: 1.5; }
.price-disclaimer strong { color: #e65100; }

/* ═══ RESULTS ════════════════════════════════════ */
.results-section { display: none; padding: 0 0 80px; }
.results-section.active { display: block; }

.results-header-bar { background: #fff; border-bottom: 1.5px solid var(--bdr); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: sticky; top: 64px; z-index: 100; box-shadow: var(--sh); }
.results-summary { font-size: 14px; color: var(--muted); }
.results-summary strong { color: var(--navy); font-weight: 700; }
.results-controls { display: flex; align-items: center; gap: 10px; }
.sort-sel { border: 1.5px solid var(--bdr); border-radius: 8px; padding: 7px 12px; font-family: var(--fb); font-size: 13px; color: var(--text); outline: none; background: #fff; cursor: pointer; }
.new-search-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-family: var(--fb); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; display: inline-flex; align-items: center; }
.new-search-btn:hover { background: var(--accent-d); }

.results-layout { max-width: 1300px; margin: 0 auto; padding: 22px 20px 0; display: grid; grid-template-columns: 255px 1fr; gap: 20px; align-items: start; }

/* ─── Sidebar ────────────────────────────────── */
.sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 11px; max-height: calc(100vh - 130px); overflow-y: auto; padding-right: 3px; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar-block { background: #fff; border: 1.5px solid var(--bdr); border-radius: var(--r); padding: 15px; box-shadow: var(--sh); }
.sidebar-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; }
.search-summary-block { background: linear-gradient(135deg, var(--navy), var(--navy-light)); border: none; }
.ss-route { font-family: var(--fh); font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.ss-dates { font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 10px; }
.ss-edit-btn { width: 100%; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 8px; font-family: var(--fb); font-size: 12px; font-weight: 600; color: #fff; cursor: pointer; }
.ss-edit-btn:hover { background: rgba(255,255,255,.25); }
.airline-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.al-item { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: 7px; cursor: pointer; transition: background .12s; }
.al-item:hover { background: var(--sky); }
.al-logo-sm { width: 28px; height: 22px; border-radius: 5px; overflow: hidden; flex-shrink: 0; background: var(--sur2); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; }
.al-logo-sm img { width: 100%; height: 100%; object-fit: contain; }
.al-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.al-count { font-size: 10px; color: var(--muted); }
.al-check { width: 14px; height: 14px; accent-color: var(--accent); flex-shrink: 0; }
/* Filter labels */
.sf-label { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 5px 6px; border-radius: 7px; transition: background .12s; font-size: 12px; font-weight: 500; color: var(--text); }
.sf-label:hover { background: var(--sky); }
.sf-label input { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; }
.sf-label span { display: flex; flex-direction: column; gap: 1px; }
.sf-label span small { font-size: 10px; color: var(--muted); font-weight: 400; }
.price-range { width: 100%; accent-color: var(--accent); cursor: pointer; margin-top: 6px; }
#maxPriceLabel { font-weight: 700; color: var(--accent); font-size: 11px; float: right; }

.results-main { min-width: 0; }
.error-box { text-align: center; padding: 50px 20px; background: #fff; border-radius: var(--r); border: 1.5px solid var(--bdr); margin-bottom: 14px; }
.error-icon { font-size: 48px; margin-bottom: 12px; }
.error-box h3 { font-family: var(--fh); font-size: 20px; font-weight: 800; margin-bottom: 8px; color: var(--navy); }
.error-box p { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ─── Two-column round-trip picker ──────────── */
.two-col-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.picker-col { background: #fff; border: 1.5px solid var(--bdr); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.picker-col-header { padding: 13px 16px; background: var(--navy); color: #fff; }
.pch-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 3px; }
.pch-route { font-family: var(--fh); font-size: 14px; font-weight: 800; }
.picker-col-return .picker-col-header { background: var(--navy-light); }
.picker-list { max-height: 480px; overflow-y: auto; }
.picker-list::-webkit-scrollbar { width: 4px; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bdr); cursor: pointer; transition: all .16s; }
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--sky); }
.pick-row.selected { background: rgba(255,77,109,.06); border-left: 3px solid var(--accent); }
.pick-logo { width: 34px; height: 26px; border-radius: 6px; overflow: hidden; background: var(--sur2); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ─── Selection bar ─────────────────────────── */
.selection-bar { background: linear-gradient(135deg, var(--navy), var(--navy-light)); border-radius: var(--r); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.sel-flights { display: flex; align-items: center; gap: 14px; flex: 1; flex-wrap: wrap; }
.sel-flight { display: flex; flex-direction: column; gap: 2px; }
.sel-leg { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.5); }
.sel-info { font-size: 13px; font-weight: 600; color: #fff; }
.sel-divider { font-size: 22px; color: rgba(255,255,255,.3); }
.sel-total-block { text-align: right; }
.sel-total-label { font-size: 10px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .5px; }
.sel-total { font-family: var(--fh); font-size: 26px; font-weight: 900; color: var(--teal-l); }
.sel-total-note { font-size: 10px; color: rgba(255,255,255,.45); }

/* ─── Combo agents ───────────────────────────── */
.combo-agents { background: #fff; border: 1.5px solid var(--bdr); border-radius: var(--r); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--sh); }
.ca-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.ca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px,1fr)); gap: 8px; margin-bottom: 10px; }
.ca-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; background: var(--sur2); border: 1.5px solid var(--bdr); border-radius: 10px; cursor: pointer; transition: all .16s; text-align: center; }
.ca-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh-md); }
.ca-tile.best { border-color: var(--accent); background: rgba(255,77,109,.05); }
.ca-logo { width: 38px; height: 28px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ca-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ca-name { font-size: 10px; font-weight: 600; color: var(--muted); }
.ca-price { font-family: var(--fh); font-size: 15px; font-weight: 800; color: var(--navy); }
.ca-badge { font-size: 9px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 50px; padding: 2px 7px; }
.ca-note { font-size: 11px; color: var(--muted); padding: 8px 12px; background: var(--sur2); border-radius: 8px; border: 1px solid var(--bdr); line-height: 1.5; }

/* ─── One-way flight cards ───────────────────── */
.flight-card { background: #fff; border: 1.5px solid var(--bdr); border-radius: var(--r); margin-bottom: 10px; box-shadow: var(--sh); transition: all .2s; position: relative; overflow: hidden; animation: cardIn .35s ease both; }
.flight-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh-md); }
@keyframes cardIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.best-deal-card { background: linear-gradient(135deg, var(--navy), var(--navy-light)); border: none; }
.best-deal-card:hover { transform: translateY(-2px); }
.best-deal-label { position: absolute; top: 0; left: 0; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: var(--r) 0 var(--r-sm) 0; }

.fc-top { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; padding: 16px 18px 12px; gap: 14px; }
.airline-info { display: flex; align-items: center; gap: 8px; }
.al-logo-card { width: 42px; height: 32px; border-radius: 8px; overflow: hidden; background: var(--sur2); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.al-logo-card img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.best-deal-card .al-logo-card { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
.al-nm { font-size: 13px; font-weight: 700; color: var(--text); }
.al-fn { font-size: 10px; color: var(--muted); font-family: monospace; }
.best-deal-card .al-nm { color: #fff; }
.best-deal-card .al-fn { color: rgba(255,255,255,.55); }
.route-display { display: flex; align-items: center; gap: 10px; }
.rp-time { font-family: var(--fh); font-size: 21px; font-weight: 800; line-height: 1; color: var(--text); }
.rp-code { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.best-deal-card .rp-time { color: #fff; }
.best-deal-card .rp-code { color: rgba(255,255,255,.5); }
.route-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px; }
.rm-dur { font-size: 11px; font-weight: 600; color: var(--muted); }
.rm-track { width: 100%; display: flex; align-items: center; gap: 2px; }
.rt-dot { width: 5px; height: 5px; background: var(--navy); border-radius: 50%; flex-shrink: 0; }
.rt-line { flex: 1; height: 1.5px; background: var(--bdr); }
.rt-plane { font-size: 12px; flex-shrink: 0; }
.best-deal-card .rt-dot { background: #fff; }
.best-deal-card .rt-line { background: rgba(255,255,255,.2); }
.rm-stops { font-size: 10px; font-weight: 600; color: var(--muted); }
.rm-stops.nonstop { color: var(--teal); font-weight: 700; }
.rm-stops.hasstops { color: var(--accent); }
.best-deal-card .rm-dur { color: rgba(255,255,255,.5); }
.best-deal-card .rm-stops.nonstop { color: var(--teal-l); }
.fc-top-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fc-from-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.fc-best-price { font-family: var(--fh); font-size: 24px; font-weight: 900; color: var(--navy); line-height: 1; }
.fc-best-note { font-size: 10px; color: var(--muted); }
.best-deal-card .fc-from-label, .best-deal-card .fc-best-note { color: rgba(255,255,255,.45); }
.best-deal-card .fc-best-price { color: var(--teal-l); }
.card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 50px; }
.tag-green { background: rgba(0,212,170,.1); color: #00a382; border: 1px solid rgba(0,212,170,.25); }
.tag-blue { background: rgba(11,28,69,.07); color: var(--navy); border: 1px solid rgba(11,28,69,.12); }
.tag-orange { background: rgba(255,152,0,.1); color: #e65100; border: 1px solid rgba(255,152,0,.25); }

/* ─── Price grid on cards ─────────────────────── */
.price-grid-section { border-top: 1.5px solid var(--bdr); padding: 12px 18px 10px; background: var(--sur2); border-radius: 0 0 calc(var(--r) - 2px) calc(var(--r) - 2px); }
.best-deal-card .price-grid-section { background: rgba(0,0,0,.12); border-color: rgba(255,255,255,.08); }
.price-grid-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.best-deal-card .price-grid-label { color: rgba(255,255,255,.4); }
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap: 6px; margin-bottom: 8px; }
.price-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px 7px; background: #fff; border: 1.5px solid var(--bdr); border-radius: 9px; cursor: pointer; transition: all .16s; }
.price-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh); }
.price-tile-best { border-color: var(--accent); background: rgba(255,77,109,.04); }
.pt-logo { width: 34px; height: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pt-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pt-name { font-size: 10px; font-weight: 600; color: var(--muted); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-price { font-family: var(--fh); font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1; }
.pt-badge { font-size: 9px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 50px; padding: 2px 6px; }
.best-deal-card .price-tile { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.best-deal-card .price-tile:hover { background: rgba(255,255,255,.16); }
.best-deal-card .pt-name { color: rgba(255,255,255,.45); }
.best-deal-card .pt-price { color: #fff; }
.price-grid-note { font-size: 11px; color: var(--muted); padding: 7px 10px; background: #fff; border: 1px solid var(--bdr); border-radius: 7px; line-height: 1.5; }
.best-deal-card .price-grid-note { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.38); }

/* ─── Load more ───────────────────────────────── */
.load-more-btn { display: block; width: 100%; max-width: 240px; margin: 16px auto 0; background: #fff; border: 2px solid var(--navy); border-radius: 50px; padding: 11px; font-family: var(--fb); font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; transition: all .2s; }
.load-more-btn:hover { background: var(--navy); color: #fff; }

/* ─── Travel insights ─────────────────────────── */
.insights-section { background: #fff; border: 1.5px solid var(--bdr); border-radius: var(--r); padding: 18px; margin-top: 14px; box-shadow: var(--sh); }
.insights-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bdr); }
.insights-icon { font-size: 20px; color: var(--accent); }
.insights-title { font-family: var(--fh); font-size: 16px; font-weight: 800; color: var(--navy); }
.insights-sub { font-size: 11px; color: var(--muted); }
.insight-card { background: var(--sur2); border-radius: 9px; padding: 11px 14px; margin-bottom: 8px; border-left: 3px solid var(--accent); }
.insight-card:last-child { margin-bottom: 0; }
.insight-card h4 { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.insight-card p { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ═══ HANDOFF MODAL ═════════════════════════════ */
.handoff-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(5,14,37,.85); backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 20px; }
.handoff-overlay.open { display: flex; animation: fadeInOv .25s ease; }
@keyframes fadeInOv { from{opacity:0} to{opacity:1} }
.handoff-modal { background: #fff; border-radius: 22px; width: 100%; max-width: 520px; box-shadow: 0 40px 100px rgba(0,0,0,.5); position: relative; overflow: hidden; animation: slideUp .3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes slideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.handoff-trust-bar { background: linear-gradient(135deg,#1a4a1a,#1f6b1f); color: #fff; padding: 11px 20px; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.handoff-trust-bar strong { color: #7fff7f; }
.handoff-close { position: absolute; top: 54px; right: 18px; background: var(--sur2); border: 1.5px solid var(--bdr); border-radius: 50%; width: 32px; height: 32px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all .2s; z-index: 1; }
.handoff-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.handoff-header { display: flex; align-items: center; gap: 16px; padding: 20px 24px 0; }
.handoff-logo { width: 56px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--sur2); border: 1.5px solid var(--bdr); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 26px; }
.handoff-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.handoff-going-to { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
.handoff-name { font-family: var(--fh); font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.handoff-type { font-size: 12px; color: var(--muted); margin-top: 2px; }
.handoff-flight { margin: 14px 24px; background: var(--sur2); border: 1.5px solid var(--bdr); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.handoff-message { padding: 0 24px; display: flex; flex-direction: column; gap: 9px; }
.hm-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); line-height: 1.5; }
.hm-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.handoff-price-row { margin: 14px 24px; background: rgba(11,28,69,.04); border: 1.5px solid var(--bdr); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.handoff-price-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.handoff-price-val { font-family: var(--fh); font-size: 26px; font-weight: 900; color: var(--navy); margin-right: auto; }
.handoff-price-note { font-size: 11px; color: var(--muted); max-width: 160px; text-align: right; line-height: 1.4; }
.handoff-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 0 24px 16px; }
.handoff-cancel { background: var(--sur2); border: 1.5px solid var(--bdr); border-radius: 12px; padding: 14px; font-family: var(--fb); font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .2s; }
.handoff-cancel:hover { border-color: var(--navy); color: var(--navy); }
.handoff-confirm { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,#1f6b1f,#2d9e2d); border: none; border-radius: 12px; padding: 14px 20px; font-family: var(--fh); font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; text-decoration: none; transition: all .2s; box-shadow: 0 6px 24px rgba(31,107,31,.35); }
.handoff-confirm:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(31,107,31,.45); }
.handoff-footer { background: var(--sur2); border-top: 1px solid var(--bdr); padding: 12px 24px; font-size: 11px; color: var(--muted); line-height: 1.5; text-align: center; }
.handoff-footer a { color: var(--accent); }

/* ═══ POPULAR ROUTES ════════════════════════════ */
.popular-section { padding: 60px 24px; background: var(--sur2); }
.section-inner { max-width: 1300px; margin: 0 auto; }
.popular-header { margin-bottom: 24px; }
.popular-header h2 { font-family: var(--fh); font-size: clamp(20px,3vw,26px); font-weight: 900; color: var(--navy); margin: 6px 0 4px; letter-spacing: -.4px; }
.popular-sub { font-size: 13px; color: var(--muted); margin: 0; }
.section-badge { display: inline-flex; align-items: center; background: rgba(255,77,109,.08); color: var(--accent-d); padding: 5px 15px; border-radius: 50px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.routes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 14px; }

/* Photo-based route cards */
.route-card { background: #fff; border: 1.5px solid var(--bdr); border-radius: var(--r); padding: 0; cursor: pointer; transition: all .22s; box-shadow: var(--sh); overflow: hidden; }
.route-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--sh-lg); }
.route-card:hover .route-img { transform: scale(1.06); }
.route-img-wrap { position: relative; height: 148px; overflow: hidden; background: linear-gradient(135deg,#0f2a4a,#1a4a7a); }
.route-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.route-tag { position: absolute; top: 9px; right: 9px; background: rgba(0,0,0,.48); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .6px; }
.route-trending-dot { position: absolute; top: 9px; left: 9px; width: 7px; height: 7px; border-radius: 50%; background: #ff8fa3; box-shadow: 0 0 0 2px rgba(255,143,163,.3); animation: trendPulse 2s infinite; }
@keyframes trendPulse { 0%,100%{box-shadow:0 0 0 2px rgba(255,143,163,.3)} 50%{box-shadow:0 0 0 6px rgba(255,143,163,0)} }
.route-info { padding: 12px 14px 14px; }
.route-destination { font-family: var(--fh); font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 1px; }
.route-from { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.route-price { font-size: 12px; color: var(--muted); }
.route-price strong { color: var(--accent); font-weight: 700; font-size: 13px; }

/* ═══ FOOTER ═════════════════════════════════════ */
.footer { background: #050e25; padding: 52px 24px 0; }
.footer-inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-brand p { color: rgba(255,255,255,.38); font-size: 13px; margin-top: 10px; line-height: 1.6; }

/* ── Geo widget ─────────────────────────────────── */
.geo-widget { margin-top: 18px; max-width: 280px; }
.geo-map-wrap { border-radius: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); line-height: 0; box-shadow: 0 2px 12px rgba(0,0,0,.4); }
#geoMap { display: block; width: 100%; height: auto; }
.geo-land { fill: #1e5fa0; stroke: #4a94d4; stroke-width: 0.7px; stroke-linejoin: round; }
.geo-info { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.45); }
.geo-dot { color: #ff8fa3; font-size: 8px; animation: geoFade 2.4s ease-in-out infinite; }
@keyframes geoFade { 0%,100%{opacity:1} 50%{opacity:.3} }
.geo-cur-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; background: rgba(255,143,163,.14); color: #ff8fa3; font-size: 10px; font-weight: 700; letter-spacing: .3px; margin-top: 5px; }
.geo-cur-label { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 5px; margin-left: 5px; }
#geoCurBadgeWrap { display: flex; align-items: center; }

.footer-links { display: flex; flex-direction: column; }
.footer-links h4 { color: rgba(255,255,255,.3); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
.footer-links a { color: rgba(255,255,255,.52); text-decoration: none; font-size: 13px; padding: 5px 0; transition: color .2s; }
.footer-links a:hover { color: #fff; }
.footer-bottom { max-width: 1300px; margin: 0 auto; padding: 18px 0; }
.footer-bottom p { color: rgba(255,255,255,.22); font-size: 11px; line-height: 1.6; }
.footer-bottom a { color: rgba(255,255,255,.4); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ═══ LEGAL PAGES ════════════════════════════════ */
.legal-page { max-width: 800px; margin: 100px auto 80px; padding: 0 24px; }
.legal-page h1 { font-family: var(--fh); font-size: 36px; font-weight: 900; color: var(--navy); margin-bottom: 6px; }
.legal-date { font-size: 13px; color: var(--muted); margin-bottom: 30px; }
.legal-page h2 { font-family: var(--fh); font-size: 18px; font-weight: 800; color: var(--navy); margin: 26px 0 9px; }
.legal-page p { font-size: 15px; line-height: 1.7; color: var(--text); margin-bottom: 12px; }
.legal-page ul { margin: 8px 0 12px 20px; }
.legal-page li { font-size: 15px; line-height: 1.7; color: var(--text); margin-bottom: 5px; }
.legal-page a { color: var(--accent); }
.legal-nav { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.legal-nav a { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 7px 14px; border: 1.5px solid var(--bdr); border-radius: 8px; transition: all .2s; }
.legal-nav a:hover, .legal-nav a.active { border-color: var(--accent); color: var(--accent); }

/* ═══ RESPONSIVE ════════════════════════════════ */
@media (max-width: 1060px) {
  .results-layout { grid-template-columns: 225px 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .results-layout { grid-template-columns: 1fr; }
  .two-col-picker { grid-template-columns: 1fr; }
  .sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: none; overflow: visible; }
  .nav-links { display: none; }
  .hamburger { display: flex; margin-left: auto; }
  /* On mobile, stack search fields vertically */
  .search-fields-row { flex-direction: column; border: none; gap: 8px; }
  .sf-wrap { border: 1.5px solid var(--bdr) !important; border-radius: var(--r-sm); background: var(--sur2); }
  .sf-wrap:focus-within { border-color: var(--accent) !important; background: #fff; }
  .sf-wide, .sf-date, .sf-full { flex: unset; width: 100%; }
  .swap-btn { width: 40px; height: 40px; border-radius: 50%; align-self: center; border: 1.5px solid var(--bdr) !important; }
  .fc-top { grid-template-columns: 1fr; gap: 10px; }
  .selection-bar { flex-direction: column; align-items: flex-start; }
  .sel-total-block { text-align: left; }
  .handoff-actions { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .search-box { padding: 16px 14px; border-radius: 14px; }
  .service-tabs { gap: 2px; }
  .svc-tab { padding: 8px 14px; font-size: 13px; }
  .sidebar { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .ca-grid { grid-template-columns: repeat(3,1fr); }
  .price-grid { grid-template-columns: repeat(3,1fr); }
  .routes-grid { grid-template-columns: repeat(2,1fr); }
}

/* ═══ SEO CONTENT SECTIONS ══════════════════════════════ */
.seo-content-section {
  background: #fff;
  padding: 64px 24px;
  border-top: 1px solid var(--bdr);
}
.seo-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.seo-content-section h2 {
  font-family: var(--fh);
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 28px;
  letter-spacing: -.5px;
}
.seo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 16px;
}
.seo-card {
  background: var(--sur2);
  border: 1.5px solid var(--bdr);
  border-radius: var(--r);
  padding: 24px 20px;
  transition: box-shadow .2s;
}
.seo-card:hover { box-shadow: var(--sh-md); }
.seo-card-icon { font-size: 28px; margin-bottom: 10px; }
.seo-card h3 {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
}
.seo-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }

.seo-tips { display: flex; flex-direction: column; gap: 16px; }
.seo-tip {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--sur2);
  border: 1.5px solid var(--bdr);
  border-radius: var(--r);
}
.seo-tip-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 900;
  margin-top: 2px;
}
.seo-tip strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.seo-tip p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }

/* ═══ FAQ SECTION ════════════════════════════════════════ */
.faq-section {
  background: var(--sur2);
  padding: 64px 24px;
  border-top: 1px solid var(--bdr);
}
.faq-section h2 {
  font-family: var(--fh);
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 28px;
  letter-spacing: -.5px;
}
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: #fff;
  border: 1.5px solid var(--bdr);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s;
}
.faq-item[open] { border-color: var(--accent); }
.faq-q {
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .2s;
}
.faq-item[open] .faq-q::after {
  content: '−';
}
.faq-a {
  padding: 0 22px 18px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  border-top: 1px solid var(--bdr);
  padding-top: 14px;
}