/* =====================================================================
   Globitude Travels — main stylesheet
   Fresh, modern travel UI. Azure blue + navy palette. Mobile-first, responsive.
   (The --lemon* variable names are kept for continuity; they now hold the
    Globitude azure-blue accent so every existing rule re-themes in one place.)
   ===================================================================== */

:root {
  /* Primary action colour. The --lemon* names are kept so every existing rule
     re-themes from one place; they now hold Globitude azure. */
  --lemon: #2F6BFF;
  --lemon-soft: #5B8CFF;
  --lemon-tint: #EDF3FF;
  /* Deep midnight navy — richer and cooler than the old #0B2740 */
  --navy: #07162E;
  --navy-2: #10305C;
  --navy-3: #0B2145;
  /* Warm sand: the counterweight to all that blue (eyebrows, rules, accents) */
  --accent: #F0A44B;
  --accent-soft: #F7C489;
  --green: #17A673;
  --ink: #0B1729;
  --muted: #5A6B82;
  --line: #E4EAF3;
  --bg: #F7F9FC;
  --card: #FFFFFF;
  --shadow: 0 8px 30px rgba(7, 22, 46, .07);
  --shadow-lg: 0 30px 70px rgba(7, 22, 46, .16);
  --radius: 18px;
  --radius-sm: 12px;
  --sans: 'Manrope', 'Inter', 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Prevent CSS-grid children from forcing horizontal overflow (min-content). */
.form-grid > *, .book-layout > *, .results-layout > *, .search-grid > *,
.grid2 > *, .grid3 > *, .grid-3 > *, .grid-4 > *, .footer-grid > * { min-width: 0; }
input, select, textarea { max-width: 100%; }

/* ---- Date/time inputs: Safari & iOS normalisation ----------------------
   Safari does not size <input type="date"> from the box model. The value lives
   in a shadow element (::-webkit-date-and-time-value) that is centred and free
   to grow WIDER than the field, so on iPhone the date spills past the rounded
   border and the Depart / Return boxes visually collide. Safari also adds its
   own inner padding and a clear button that eat horizontal space.
   These rules make a date field behave exactly like a text field everywhere. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  background-clip: padding-box;   /* iOS otherwise bleeds fill under the border */
}
/* The value: keep it inside the box, left-aligned like every other field.
   min-height stops the field collapsing when the value is empty, which is what
   -webkit-appearance:none does to date inputs on older iOS. */
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  width: 100%;
  min-width: 0;
  min-height: 1.35em;
  margin: 0;
  padding: 0;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
/* Controls that steal width on iOS/Safari. */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button { display: none; -webkit-appearance: none; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; opacity: .5; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
/* The results page carries three columns (filters · results · summary); 1180px
   leaves the middle one too narrow to hold a flight card comfortably. */
.container-wide { max-width: 1460px; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 700; font-size: 15px; border: 0; cursor: pointer;
  padding: 13px 22px; border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease, background .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--lemon); color: #fff; box-shadow: 0 8px 20px rgba(30,136,229,.35); }
.btn-primary:hover { background: var(--lemon-soft); box-shadow: 0 10px 26px rgba(30,136,229,.45); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--lemon); background: var(--lemon-tint); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 30px; font-size: 16px; border-radius: 14px; }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.site-header .logo img { height: 40px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-weight: 600; color: var(--navy); font-size: 15px; }
.nav a:hover { color: var(--lemon); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-phone { font-weight: 800; color: var(--navy); display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 15px; }
.header-phone .pi { color: var(--lemon); }

/* Install-app button — a friendly lemon pill instead of the flat dark block.
   Overrides the generic .btn styling it also carries. */
.install-btn { background: linear-gradient(135deg, var(--lemon-soft), var(--lemon)) !important;
  color: var(--navy) !important; border: 0; border-radius: 100px; font-weight: 800; font-size: 14px;
  padding: 9px 18px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(30,136,229,.35); transition: transform .15s ease, box-shadow .15s ease; }
.install-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(30,136,229,.5); }
.install-btn::before { content: "📲"; font-size: 15px; line-height: 1; }
.cur-switch { display:flex; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:3px; }
.cur-switch a { padding:5px 11px; border-radius:7px; font-size:13px; font-weight:700; color:var(--muted); }
.cur-switch a.active { background:var(--navy); color:#fff; }
.burger { display: none; background: none; border: 0; font-size: 24px; line-height:1; color: var(--navy); cursor: pointer; padding:6px; }

/* Mobile slide-in drawer */
.mdrawer-backdrop { position:fixed; inset:0; background:rgba(8,20,35,.5); z-index:60; opacity:0; visibility:hidden; transition:.25s; }
.mdrawer-backdrop.open { opacity:1; visibility:visible; }
.mdrawer { position:fixed; top:0; right:0; height:100%; width:290px; max-width:84vw; background:#fff; z-index:70;
  box-shadow:-14px 0 40px rgba(0,0,0,.18); transform:translateX(100%); transition:transform .28s ease; padding:18px 20px;
  display:flex; flex-direction:column; overflow-y:auto; }
.mdrawer.open { transform:translateX(0); }
.mdrawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line); }
.mdrawer-close { background:var(--bg); border:0; width:36px; height:36px; border-radius:10px; font-size:16px; cursor:pointer; color:var(--navy); }
.mdrawer-nav { display:flex; flex-direction:column; margin-top:10px; }
.mdrawer-nav a { padding:13px 8px; font-weight:700; font-size:16px; color:var(--navy); border-bottom:1px solid var(--bg); }
.mdrawer-nav a:hover { color:var(--lemon); }
.mdrawer-cur { margin-top:16px; }
.mdrawer-label { display:block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:7px; }
.mdrawer-cur .cur-switch { width:100%; }
.mdrawer-cur .cur-switch a { flex:1; text-align:center; padding:9px; font-size:14px; }

/* ---- Hero ---- */
.hero { position: relative; padding: 56px 0 130px; overflow: hidden;
  background: linear-gradient(160deg, #0B2740 0%, #123a63 55%, #0e4f6e 100%); color: #fff; }
.hero::after { content:''; position:absolute; right:-120px; top:-80px; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(30,136,229,.35), transparent 65%); }
.hero-bg { position:absolute; inset:0; object-fit: cover; width:100%; height:100%; opacity:.16; }
.hero .container { position: relative; z-index: 2; }
.hero .eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); padding:7px 15px; border-radius:100px; font-weight:700; font-size:13px; margin-bottom:18px; }
.hero h1 { font-size: clamp(30px, 5vw, 52px); max-width: 760px; }
.hero h1 span { color: var(--lemon-soft); }
.hero p.lead { font-size: 18px; opacity: .9; max-width: 560px; margin-top: 10px; }
.trust-row { display:flex; flex-wrap:wrap; gap: 26px; margin-top: 26px; opacity:.92; font-size:14px; }
.trust-row div { display:flex; align-items:center; gap:8px; }

/* ---- Search widget ---- */
.search-wrap { position: relative; z-index: 5; margin-top: -78px; }
.search-card { background: var(--card); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 22px; }
.trip-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.trip-tabs button { border:1.5px solid var(--line); background:#fff; color:var(--muted); font-weight:700;
  padding:9px 16px; border-radius:100px; cursor:pointer; font-family:var(--sans); font-size:14px; }
.trip-tabs button.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.search-grid { display:grid; grid-template-columns: 1.1fr 1.1fr 1fr 1fr .9fr auto; gap:12px; align-items:end; }
.field { position: relative; min-width: 0; }
.field label { display:block; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.field input, .field select { width:100%; min-width:0; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink); background:#fff; transition:border .15s; }
.field input:focus, .field select:focus { outline:none; border-color:var(--lemon); }
.pax-toggle { cursor:pointer; }

/* ---- Date fields + range picker (Google-Flights style) -----------------
   These replace <input type="date"> in the search widget. A custom control has
   no Safari shadow DOM, so the value can never escape its box the way it did on
   iPhone, and one calendar takes BOTH dates instead of two OS pickers. */
.datefield { width:100%; min-width:0; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink); background:#fff;
  text-align:left; cursor:pointer; display:flex; align-items:center; gap:8px; transition:border .15s;
  -webkit-appearance:none; appearance:none; box-sizing:border-box; line-height:1.35; }
.datefield:hover { border-color:#cfd8e3; }
.datefield:focus-visible { outline:none; border-color:var(--lemon); }
.datefield.filled { border-color:#cfd8e3; }
.datefield .dfval { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.datefield .dfval.ph { color:#98a6b5; font-weight:600; }
.datefield::before { content:"🗓"; font-size:14px; line-height:1; opacity:.65; }

.fldp-backdrop { position:fixed; inset:0; background:rgba(11,39,64,.35); z-index:998; display:none; }
.fldp-backdrop.show { display:block; }
body.fldp-lock { overflow:hidden; }

.fldp { position:absolute; z-index:999; display:none; width:min(680px, calc(100vw - 24px));
  background:#fff; border-radius:18px; box-shadow:var(--shadow-lg); border:1px solid var(--line);
  padding:16px 18px 12px; font-family:var(--sans); }
.fldp.show { display:block; }
.fldp-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.fldp-fields { display:flex; gap:10px; flex:1; min-width:0; }
.fldp-f { flex:1; min-width:0; text-align:left; background:#fff; border:1.5px solid var(--line);
  border-radius:12px; padding:8px 12px; cursor:pointer; font-family:var(--sans); }
.fldp-f.on { border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); }
.fldp-f span { display:block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); }
.fldp-f b { display:block; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fldp.oneway .fldp-f[data-side="end"] { display:none; }
.fldp-x { border:0; background:transparent; font-size:17px; color:var(--muted); cursor:pointer; padding:6px 8px; border-radius:50%; }
.fldp-x:hover { background:var(--bg); }

/* Weekday header sits above BOTH month grids on desktop. */
.fldp-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:0; width:100%;
  font-size:11.5px; font-weight:800; color:var(--muted); text-align:center; padding-bottom:6px; }
.fldp-dow span { padding:2px 0; }
.fldp-body { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.fldp-body.scroll { grid-template-columns:1fr; gap:18px; max-height:none; }
.fldp-m { min-width:0; }
.fldp-mt { font-size:14px; font-weight:800; color:var(--navy); text-align:center; margin:2px 0 8px; }
.fldp-g { display:grid; grid-template-columns:repeat(7,1fr); }
.fldp-p { height:38px; }

/* A day cell: the coloured band is the CELL, the circle is the inner <i>, so a
   continuous range reads as one bar with rounded ends (Google Flights). */
.fldp-d { position:relative; height:38px; border:0; background:transparent; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); }
.fldp-d i { position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin:2px auto; border-radius:50%; font-style:normal; }
.fldp-d:hover:not(.off) i { background:var(--lemon-tint); }
.fldp-d.off { color:#c3ccd6; cursor:default; }
.fldp-d.mid::before { content:""; position:absolute; inset:2px 0; background:var(--lemon-tint); z-index:1; }
.fldp-d.mid.prev::before { background:#F1F5F9; }
.fldp-d.sel i { background:var(--navy); color:#fff; }
.fldp-d.s1::before { content:""; position:absolute; inset:2px 0 2px 50%; background:var(--lemon-tint); z-index:1; }
.fldp-d.s2::before { content:""; position:absolute; inset:2px 50% 2px 0; background:var(--lemon-tint); z-index:1; }
.fldp-d.only::before { display:none; }

.fldp-nav { position:absolute; top:78px; border:1px solid var(--line); background:#fff; width:32px; height:32px;
  border-radius:50%; cursor:pointer; font-size:17px; color:var(--navy); line-height:1; z-index:3; }
.fldp-prev { left:14px; } .fldp-next { right:14px; }
.fldp-nav:disabled { opacity:.3; cursor:default; }
.fldp-foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }
.fldp-hint { font-size:13px; color:var(--muted); font-weight:600; }
.fldp-reset, .fldp-done { border:0; border-radius:10px; padding:9px 18px; font-family:var(--sans);
  font-weight:800; font-size:14px; cursor:pointer; }
.fldp-reset { background:transparent; color:var(--muted); }
.fldp-done { background:var(--lemon); color:var(--navy); margin-left:6px; }

/* ---- Single-day picker (date of birth, passport expiry) ----------------
   Typed entry is the primary path; the month/year dropdowns exist because
   paging a calendar back to 1978 is not usable. */
.fldd { display:none; position:absolute; z-index:60; top:100%; left:0; margin-top:6px; width:280px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:10px; }
.fldd.show { display:block; }
.fldd-head { display:flex; gap:8px; margin-bottom:8px; }
.fldd-head select { flex:1; min-width:0; border:1.5px solid var(--line); border-radius:10px; padding:7px 8px;
  font-family:var(--sans); font-weight:700; font-size:13.5px; background:#fff; }
.fldd-dow { display:grid; grid-template-columns:repeat(7,1fr); font-size:11px; font-weight:800;
  color:var(--muted); text-align:center; margin-bottom:2px; }
.fldd-g { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.fldd-d { height:32px; border:0; background:transparent; border-radius:8px; cursor:pointer;
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink); }
.fldd-d:hover:not(.off) { background:var(--lemon-tint); }
.fldd-d.on { background:var(--navy); color:#fff; }
.fldd-d.off { color:#c9d2dc; cursor:default; }
.fld.bad { border-color:var(--red); }

/* Phones: a full-height sheet with a continuous scroll of months. */
@media (max-width: 760px) {
  .fldp { position:fixed; inset:0; width:100%; max-width:none; border-radius:0; border:0;
    padding:12px 14px 0; display:none; flex-direction:column; }
  .fldp.show { display:flex; }
  .fldp-nav { display:none; }
  .fldp-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:12px; }
  .fldp-dow { position:sticky; top:0; background:#fff; z-index:4; }
  .fldp-foot { position:sticky; bottom:0; background:#fff; padding-bottom:14px; }
  .fldp-done { flex:0 0 auto; }
}
.ac-list { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); margin-top:6px; z-index:30; max-height:280px; overflow:auto; display:none; }
.ac-list.show { display:block; }
.ac-item { padding:10px 14px; cursor:pointer; display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--bg); }
.ac-item:hover, .ac-item.active { background:var(--lemon-tint); }
.ac-item .code { font-weight:800; color:var(--navy); }
.ac-item small { color:var(--muted); }
.pax-pop { position:absolute; top:100%; right:0; margin-top:6px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:14px; width:280px; z-index:30; display:none; }
.pax-pop.show { display:block; }
.pax-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.pax-row .stepper { display:flex; align-items:center; gap:12px; }
.stepper button { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); background:#fff;
  font-size:18px; font-weight:700; cursor:pointer; color:var(--navy); }

/* ---- Sections ---- */
.section { padding: 64px 0; }
.section h2 { font-size: clamp(24px, 3.4vw, 36px); }
.section .sub { color: var(--muted); font-size: 17px; max-width: 620px; }
.section-head { margin-bottom: 34px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* deal cards */
.deal { background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease; }
.deal:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.deal .img { height:170px; position:relative; background:#dde5ee; }
.deal .img img { width:100%; height:100%; object-fit:cover; }
.deal .tag { position:absolute; top:12px; left:12px; background:var(--lemon); color:var(--navy);
  font-weight:800; font-size:12px; padding:5px 11px; border-radius:100px; }
.deal .body { padding:16px 18px; }
.deal .route { font-weight:800; font-size:18px; color:var(--navy); }
.deal .price { color:var(--green); font-weight:800; font-size:22px; margin-top:6px; }
.deal .price small { color:var(--muted); font-weight:600; font-size:13px; }

/* feature cards */
.feature { background:var(--card); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.feature .ico { width:52px; height:52px; border-radius:14px; background:var(--lemon-tint); color:var(--lemon);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:14px; }
.feature h3 { font-size:19px; }

/* ---- Footer ---- */
.site-footer { background: var(--navy); color: #cdd8e4; padding: 56px 0 26px; margin-top: 40px; }
.site-footer .logo img { height: 38px; margin-bottom: 14px; }
.footer-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.site-footer h4 { color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.site-footer a { display:block; color:#a9bacb; padding:5px 0; font-size:14.5px; }
.site-footer a:hover { color: var(--lemon-soft); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:20px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#8ba0b5; }

/* ---- Results page ---- */
.results-top { background:var(--navy); color:#fff; padding:18px 0; }
.results-summary { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-weight:700; }
.results-summary .pill { background:rgba(255,255,255,.12); padding:6px 12px; border-radius:100px; font-size:13px; }
/* No align-items:start here. A sticky element can only travel inside its own
   grid area, and `start` shrinks that area to the card's height — the summary
   would scroll away after ~450px. The columns stretch to the row height instead
   (.filter-card keeps its own align-self:start, so it is unaffected). */
.results-layout { display:grid; grid-template-columns: 250px 1fr 330px; gap:22px; padding:28px 0; }
.sumcol { min-width:0; }

/* ---- "Best flights" section head ---- */
.res-head { display:flex; align-items:baseline; gap:10px; margin:0 0 10px; }
.res-head h3 { margin:0; font-size:18px; color:var(--navy); }
.res-head small { color:var(--muted); font-size:12.5px; }
.res-sep { margin:26px 0 10px; }
.fb-best { background:#e5f6d3; color:#3f7a10; }

/* ---- Dual-handle time-range filter (Google-Flights style) ---- */
.trange { margin:10px 0 4px; }
.trange-val { font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.trange-wrap { position:relative; height:26px; }
.trange-track { position:absolute; top:11px; left:0; right:0; height:4px; background:var(--line); border-radius:4px; }
.trange-fill  { position:absolute; top:11px; height:4px; background:var(--navy); border-radius:4px; }
.trange input[type=range] { position:absolute; top:0; left:0; width:100%; margin:0; height:26px;
  -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none; }
.trange input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; pointer-events:auto;
  width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--navy);
  box-shadow:0 1px 4px rgba(11,39,64,.3); cursor:pointer; margin-top:0; }
.trange input[type=range]::-moz-range-thumb { pointer-events:auto; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--navy); box-shadow:0 1px 4px rgba(11,39,64,.3); cursor:pointer; }
.trange input[type=range]::-webkit-slider-runnable-track { height:26px; background:transparent; }
.trange input[type=range]::-moz-range-track { height:26px; background:transparent; }

/* ---- Sticky selection summary ----------------------------------------
   The card is taller than most viewports, so it is a flex column pinned to the
   viewport: the chosen flight stays at the top, the total + Continue button
   stay at the bottom, and only the middle scrolls. That way the button is
   reachable wherever the traveller is on the page. */
.sumcard { position:sticky; top:88px; max-height:calc(100vh - 108px); display:flex; flex-direction:column;
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.sumcard .sc-top { flex:0 0 auto; background:linear-gradient(160deg,var(--navy),#12365A); color:#fff; padding:14px 16px; }
.sumcard .sc-top h4 { margin:0 0 8px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:#FFD84B; }
/* Top-aligned so the label, logo and the multi-line route text all start on the
   same line — centring them left the tag/logo floating against a 3-line block. */
.sc-leg { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-top:1px solid rgba(255,255,255,.13); }
.sc-leg:first-of-type { border-top:0; }
/* Pill sizes to its own text (no fixed width) so "DEPARTING"/"RETURNING" can
   never spill outside the rounded background. Both labels are the same length,
   so the rows still line up. */
.sc-leg .tag { font-size:9px; font-weight:800; letter-spacing:.03em; background:rgba(255,255,255,.16);
  padding:4px 10px; border-radius:100px; flex:0 0 auto; margin-top:2px; text-align:center;
  white-space:nowrap; line-height:1; box-sizing:border-box; }
.sc-leg .rt { font-size:13.5px; font-weight:700; line-height:1.35; min-width:0; flex:1; }
.sc-leg .rt small { display:block; font-weight:500; color:#C8D6E4; font-size:11.5px; margin-top:1px; }
.sc-al { width:32px; height:32px; border-radius:9px; object-fit:contain; background:#fff;
  padding:2px; flex:0 0 auto; margin-top:1px; }

/* Low-seat nudge above the Select button on a result card. */
.seats-left { background:#fdeee9; color:#c0341a; font-weight:800; font-size:12.5px; text-align:center;
  border-radius:9px; padding:6px 8px; margin:2px 0 8px; }
.sumcard .sc-mid { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 16px; min-height:0; }
.sumcard .sc-bot { flex:0 0 auto; border-top:1px solid var(--line); padding:12px 16px 14px; background:#fff; }
.sc-row { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:4px 0; }
.sc-row.total { border-top:2px solid var(--line); margin-top:6px; padding-top:9px; font-size:19px; font-weight:800; color:var(--navy); }
.sc-empty { padding:26px 18px; text-align:center; color:var(--muted); font-size:14px; }
.fcard.chosen { border-color:var(--navy); box-shadow:0 0 0 2px var(--navy), var(--shadow); }

@media (max-width: 1100px) {
  .results-layout { grid-template-columns: 240px 1fr; }
  /* Summary drops to a fixed bar at the bottom of the screen. */
  .sumcard { position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60; border-radius:16px 16px 0 0;
    max-height:70vh; box-shadow:0 -12px 40px rgba(11,39,64,.22); grid-column:1 / -1; }
  .sumcard:not(.has) { display:none; }
  .sumcard .sc-mid { max-height:26vh; }
  body.has-sumcard { padding-bottom:200px; }
}
/* The filter list is taller than most viewports. Pinning it alone would leave
   the lower filters (arrival time, airlines, reset) permanently off-screen, so
   the panel scrolls its own content once it runs out of room. */
.filter-card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
  align-self:start; position:sticky; top:90px;
  max-height:calc(100vh - 110px); overflow-y:auto; overscroll-behavior:contain; }
/* A quiet scrollbar so the panel does not look like a second page. */
.filter-card::-webkit-scrollbar { width:8px; }
.filter-card::-webkit-scrollbar-thumb { background:#d7dfe8; border-radius:8px; }
.filter-card::-webkit-scrollbar-thumb:hover { background:#c3ccd6; }
.filter-card { scrollbar-width:thin; scrollbar-color:#d7dfe8 transparent; }
.filter-toggle { display:none; width:100%; background:var(--navy); color:#fff; border:0; font-family:var(--sans); font-weight:800; font-size:15px; padding:13px; border-radius:12px; cursor:pointer; justify-content:space-between; align-items:center; }
.filter-card h4 { font-size:14px; text-transform:uppercase; color:var(--muted); letter-spacing:.04em; }
.flight-card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px;
  display:grid; grid-template-columns: 1fr auto; gap:18px; align-items:center; transition:box-shadow .15s; }
.flight-card:hover { box-shadow:var(--shadow-lg); }
.leg { display:flex; align-items:center; gap:16px; padding:8px 0; }
.leg .al { display:flex; align-items:center; gap:10px; min-width:120px; }
.leg .al img { width:34px; height:34px; border-radius:8px; object-fit:contain; background:#fff; border:1px solid var(--line); }
.leg .al b { font-size:14px; }
.leg .times { display:flex; align-items:center; gap:14px; flex:1; }
.leg .time { text-align:center; }
.leg .time b { font-size:20px; display:block; }
.leg .time small { color:var(--muted); }
.leg .path { flex:1; text-align:center; color:var(--muted); font-size:13px; position:relative; }
.leg .path .line { height:2px; background:var(--line); margin:6px 0; position:relative; }
.leg .path .line::after { content:'✈'; position:absolute; right:-2px; top:-9px; color:var(--lemon); font-size:14px; }
.flight-price { text-align:right; border-left:1px solid var(--line); padding-left:20px; min-width:170px; }
.flight-price .amt { font-size:26px; font-weight:800; color:var(--navy); }
.flight-price .per { color:var(--muted); font-size:12px; }
.stops-badge { font-size:12px; font-weight:700; color:var(--green); }
.stops-badge.stops { color:var(--muted); }

/* ---- Booking / forms ---- */
/* No align-items:start: a sticky child can only travel inside its own grid
   area, and `start` shrinks that area to the card's height. */
.book-layout { display:grid; grid-template-columns: 1fr 360px; gap:24px; padding:28px 0; }
.panel { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; margin-bottom:20px; }
.panel h3 { font-size:18px; display:flex; align-items:center; gap:10px; }
.panel h3 .n { width:26px; height:26px; border-radius:50%; background:var(--lemon); color:var(--navy); font-size:14px;
  display:inline-flex; align-items:center; justify-content:center; }
.form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
.form-grid .full { grid-column: 1 / -1; }
/* Booking sidebar: flight box pinned at the top, total + Continue pinned at the
   bottom, only the fare rows scroll — so the button is always reachable. */
.summary-card { position:sticky; top:90px; max-height:calc(100vh - 110px);
  display:flex; flex-direction:column; overflow:hidden; }
.summary-card .sp-top { flex:0 0 auto; }
.summary-card .sp-mid { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; min-height:0;
  margin:0 -4px; padding:0 4px; }
.summary-card .sp-bot { flex:0 0 auto; border-top:2px solid var(--line); margin-top:8px; padding-top:10px; }
.summary-card .sp-mid::-webkit-scrollbar { width:7px; }
.summary-card .sp-mid::-webkit-scrollbar-thumb { background:#dfe6ee; border-radius:8px; }
/* Coupon / points / terms fold away once the page is scrolled. Animating
   max-height (not height) keeps it smooth without measuring anything. */
.summary-card [data-fold] { max-height:520px; opacity:1; overflow:hidden;
  transition:max-height .35s ease, opacity .22s ease, margin .35s ease; }
.summary-card.compact [data-fold] { max-height:0; opacity:0; margin-top:0; margin-bottom:0; }
.sp-hint { display:none; font-size:11.5px; color:var(--muted); text-align:center; padding:6px 0 0;
  background:none; border:0; width:100%; cursor:pointer; font-family:var(--sans); font-weight:700; }
.summary-card.compact .sp-hint { display:block; }

/* ---- Fare hold countdown ------------------------------------------------ */
/* In-panel variant: a full-width bar at the top of the booking summary, above
   the flight box. This is the normal placement — the floating pill below is
   only a fallback for pages with no summary panel (it overlapped the chat
   bubble bottom-right). */
.faretimer.inpanel { position:static; width:100%; justify-content:center; border-radius:12px;
  padding:9px 12px; margin:0 0 12px; box-shadow:none; font-size:13px; }
.ft-slot { flex:0 0 auto; }

.faretimer { position:fixed; right:18px; bottom:18px; z-index:900; display:flex; align-items:center; gap:8px;
  background:var(--navy); color:#fff; border-radius:100px; padding:10px 16px; font-family:var(--sans);
  font-size:13.5px; font-weight:700; box-shadow:0 10px 30px rgba(11,39,64,.3); transition:background .3s ease; }
.faretimer .ft-clock { font-variant-numeric:tabular-nums; color:var(--lemon-soft); }
.faretimer.warn { background:#8a3b12; }
.faretimer.warn .ft-clock { color:#FFD84B; }
.faretimer.out { background:var(--red); }
.ft-modal { display:none; position:fixed; inset:0; z-index:1200; background:rgba(11,39,64,.55);
  align-items:center; justify-content:center; padding:20px; }
.ft-modal.show { display:flex; }
body.ft-lock { overflow:hidden; }
.ft-box { background:#fff; border-radius:20px; padding:30px 28px; max-width:420px; width:100%; text-align:center;
  box-shadow:var(--shadow-lg); }
.ft-emoji { font-size:42px; line-height:1; margin-bottom:6px; }
.ft-box h3 { margin:0 0 6px; color:var(--navy); font-size:22px; }
.ft-box p { color:var(--muted); margin:0 0 18px; font-size:14.5px; }
.ft-actions { display:flex; flex-direction:column; gap:8px; }
@media (max-width: 760px) {
  /* Keep clear of the mobile summary bar. */
  .faretimer { right:12px; bottom:auto; top:70px; padding:8px 13px; font-size:12.5px; }
}
.sum-row { display:flex; justify-content:space-between; padding:7px 0; font-size:15px; }
.sum-row.total { border-top:2px solid var(--line); margin-top:8px; padding-top:12px; font-size:20px; font-weight:800; color:var(--navy); }
.chip { display:inline-block; background:var(--lemon-tint); color:#8a6d00; font-weight:700; font-size:12px; padding:3px 10px; border-radius:100px; }

/* =====================================================================
   Search loading popup ("Please wait / call us")
   ===================================================================== */
.search-overlay{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(8,20,35,.72);backdrop-filter:blur(6px)}
.search-overlay.show{display:flex}
.search-modal{background:#fff;border-radius:22px;width:100%;max-width:520px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.4);
  animation:pop .3s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.sm-head{background:linear-gradient(150deg,#0B2740,#123a63 60%,#0e4f6e);color:#fff;padding:26px 26px 22px;text-align:center;position:relative;overflow:hidden}
.sm-head::after{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(30,136,229,.35),transparent 65%)}
.sm-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  padding:6px 14px;border-radius:100px;font-weight:800;font-size:12px;letter-spacing:.04em;position:relative;z-index:2}
.sm-route{font-size:26px;font-weight:800;margin:12px 0 4px;letter-spacing:-.02em;position:relative;z-index:2}
.sm-dates{opacity:.85;font-size:14px;position:relative;z-index:2}
.sm-usps{margin-top:12px;font-size:12.5px;color:#bfe0ff;position:relative;z-index:2}
.sm-trust{margin:14px 0 0;background:rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;font-size:13px;position:relative;z-index:2}
.sm-trust b{color:#FFD84B}
.sm-body{padding:24px}
.sm-body h3{font-size:22px;text-align:center;margin:0}
.sm-body p{text-align:center;color:var(--muted);margin:4px 0 14px}
.sm-body p b{color:var(--navy)}
.sm-progress{height:8px;border-radius:100px;background:var(--line);overflow:hidden}
.sm-progress i{display:block;height:100%;width:20%;border-radius:100px;background:linear-gradient(90deg,var(--lemon),var(--green));
  animation:load 2.4s ease-in-out infinite}
@keyframes load{0%{width:8%;margin-left:0}50%{width:70%}100%{width:96%;margin-left:0}}
.sm-chips{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 6px}
.sm-chip{text-align:center}.sm-chip b{display:block;font-size:22px;color:var(--navy);font-weight:800}
.sm-chip small{color:var(--muted)}
.sm-swap{width:42px;height:42px;border-radius:50%;border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.sm-call{display:block;margin-top:18px;background:linear-gradient(135deg,#0e9f6e,#0891b2);color:#fff;border-radius:14px;
  padding:14px;text-align:center;box-shadow:0 12px 28px rgba(8,145,178,.35)}
.sm-call small{display:block;font-size:12px;letter-spacing:.06em;opacity:.9;font-weight:700}
.sm-call b{font-size:24px;font-weight:800;letter-spacing:.5px}

/* =====================================================================
   Redesigned flight result cards
   ===================================================================== */
.result-count{margin:0 0 16px;color:var(--muted)}
.result-count b{color:var(--navy)}
.fcard{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
  transition:box-shadow .18s ease,transform .18s ease}
.fcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
/* min-width:0 on the flexible track is essential: without it the leg row's
   min-content width (fixed 132px + 96px columns + the times block) keeps the
   1fr track from shrinking, so the 210px price/Select panel is pushed outside
   the card and clipped by overflow:hidden — the Select button simply vanished. */
.fcard-body{display:grid;grid-template-columns:minmax(0,1fr) 210px}
.fcard-legs{padding:6px 22px;min-width:0}
.fcard-side{background:linear-gradient(160deg,#fbfdff,#f2f6fb);border-left:1px solid var(--line);padding:20px;
  display:flex;flex-direction:column;justify-content:center;text-align:center;min-width:0}
.fleg{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr) minmax(0,96px);gap:14px;align-items:center;padding:16px 0;min-width:0}
.fleg-mid{min-width:0}
.fleg + .fleg{border-top:1px dashed var(--line)}
.fleg-tag{position:absolute;transform:translateY(-10px);font-size:11px;font-weight:800;color:var(--lemon);letter-spacing:.05em}
.fleg-al{display:flex;align-items:center;gap:10px}
.fleg-al .al-mono,.fleg-al img{width:40px;height:40px;border-radius:10px}
.al-logo{width:40px;height:40px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:2px}
.al-mono{width:40px;height:40px;border-radius:10px}
.fleg-al b{font-size:14px;display:block;line-height:1.2}
.fleg-al small{color:var(--muted);font-size:12px}
.fleg-mid{text-align:center}
.fleg-times{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fleg-pt{text-align:center;min-width:64px}
.fleg-pt b{font-size:22px;color:var(--navy);display:block;line-height:1}
.fleg-pt small{color:var(--muted);font-size:12px;font-weight:700}
.fleg-line{flex:1;position:relative;padding:0 4px}
.fleg-line .bar{height:2px;background:var(--line);position:relative}
.fleg-line .bar::after{content:'✈';position:absolute;right:-3px;top:-9px;color:var(--lemon);font-size:15px}
.fleg-line .dur{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:4px}
.fleg-stop{font-size:11px;font-weight:800;margin-top:4px}
.fleg-stop.non{color:var(--green)}.fleg-stop.has{color:#b3701a}
.fleg-meta{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 14px}
.fmeta{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--muted)}
.fmeta.n{color:var(--navy)}
.fbadges{display:flex;gap:8px;flex-wrap:wrap;padding:14px 0 4px}
.fb{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:100px}
.fb-flight{background:#eef4fb;color:#245c8f}.fb-cabin{background:#eaf7f0;color:#1c7a45}
.fb-seats{background:#fff3d6;color:#8a6d00}.fb-refund{background:#fde8e2;color:#b23a1a}
.fcard-side .price{font-size:30px;font-weight:800;color:var(--navy);line-height:1}
.fcard-side .per{color:var(--muted);font-size:12px;margin:4px 0 12px}
.fcard-details-btn{background:none;border:0;color:var(--accent);font-weight:700;font-size:13px;cursor:pointer;padding:8px 0 4px}
.fcard-details{display:none;padding:0 22px 18px;border-top:1px solid var(--line);background:#fbfdff}
.fcard-details.show{display:block}

/* Below ~1360px the three-column results layout leaves the middle column too
   tight for a 210px price panel beside the flight legs. Lay the fare and the
   Select button out as a full-width footer bar instead of squeezing them.
   (Must sit AFTER the base .fcard rules above, or it loses the cascade.) */
@media (max-width: 1360px) {
  .fcard-body { grid-template-columns: 1fr; }
  .fcard-side { border-left:0; border-top:1px solid var(--line);
    flex-direction:row; align-items:center; justify-content:flex-end; gap:14px;
    text-align:left; padding:14px 22px; flex-wrap:wrap; }
  .fcard-side .price { font-size:26px; margin-right:auto; }
  .fcard-side .per { margin:0; align-self:flex-end; padding-bottom:4px; }
  .fcard-side .btn { width:auto; min-width:160px; }
  .fcard-details-btn { flex:0 0 auto; padding:0; }
}
.seg{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.seg:last-child{border-bottom:0}
.seg .dot{width:10px;height:10px;border-radius:50%;background:var(--lemon);margin-top:5px}
.skeleton{height:150px;border-radius:18px;background:linear-gradient(90deg,#eef2f7,#f7fafc,#eef2f7);background-size:200% 100%;
  animation:sk 1.2s infinite;margin-bottom:16px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
#loadMoreSentinel{height:40px}
@media(max-width:720px){
  .fcard-body{grid-template-columns:1fr}
  .fcard-side{border-left:0;border-top:1px solid var(--line);flex-direction:row;justify-content:space-between;text-align:left}
  .fleg{grid-template-columns:1fr;gap:8px}
}

/* ---- International phone field ---- */
.intl-phone { position:relative; display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:12px; overflow:visible; background:#fff; margin-top:5px; }
.intl-phone.valid { border-color:var(--green); }
.intl-phone.invalid { border-color:var(--red); }
.intl-phone .ip-sel { display:flex; align-items:center; gap:6px; border:0; background:var(--bg); border-right:1.5px solid var(--line);
  padding:0 12px; font-family:var(--sans); font-weight:700; font-size:14px; color:var(--navy); cursor:pointer; border-radius:11px 0 0 11px; white-space:nowrap; }
.intl-phone .ip-sel .ip-fl { font-size:18px; line-height:1; }
.intl-phone .ip-sel i { font-style:normal; color:var(--muted); font-size:11px; }
.intl-phone .ip-num { flex:1; border:0; outline:none; padding:12px 14px; font-family:var(--sans); font-size:15px; font-weight:600; background:transparent; min-width:0; }
.intl-phone .ip-dd { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); max-height:280px; overflow:auto; z-index:40; display:none; }
.intl-phone .ip-dd.open { display:block; }
.intl-phone .ip-opt { padding:10px 14px; cursor:pointer; font-size:14px; display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--bg); }
.intl-phone .ip-opt:hover { background:var(--lemon-tint); }
.intl-phone .ip-opt b { margin-left:auto; color:var(--muted); font-weight:700; }
.fld.err, .intl-phone.invalid { box-shadow:0 0 0 3px rgba(228,87,46,.12); }
/* Required marker. Only mandatory fields carry it, so its absence is the signal
   that a field is optional — no "(optional)" noise on every other label. */
.req { color:var(--red); font-weight:800; }
.field-err { color:var(--red); font-size:12px; font-weight:600; margin-top:5px; display:none; }
.field-err.show { display:block; }

/* ---- Utility / responsive ---- */
.hide-sm { display:initial; }

/* Tablet & below */
@media (max-width: 960px) {
  .results-layout { grid-template-columns: 1fr; }
  .filter-card { position:static; padding:0; background:transparent; box-shadow:none; }
  .filter-toggle { display:flex; }
  .filter-body { display:none; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-top:12px; }
  .filter-card.open .filter-body { display:block; }
  .book-layout { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .nav { display:none; }
  .cur-desktop { display:none; }
  .install-btn { display:none !important; }
  .burger { display:block; }
  .flight-card { grid-template-columns: 1fr; }
  .flight-price { border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:12px; text-align:left; display:flex; justify-content:space-between; align-items:center; }
}

/* Phones: header = logo · phone · burger; forms = 2 columns */
@media (max-width: 640px) {
  .site-header .container { height: 62px; }
  .site-header .logo img { height: 34px; }
  .header-phone { font-size: 13.5px; }
  .search-wrap { margin-top: -60px; }
  .search-card { padding: 16px; border-radius: 16px; }
  /* search form: two fields per row */
  .search-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* 16px, not 14px: iOS auto-zooms the page when a focused field is smaller,
     which shifts the whole card and makes the date boxes look misaligned. */
  .search-grid .field input, .search-grid .field select { padding: 11px 12px; font-size: 16px; }
  input, select, textarea { font-size: 16px; }
  /* A date reads "5 Aug 2026" on iOS but "05/08/2026" elsewhere — give the two
     date fields a little more room and stop the glyphs jittering. */
  .search-grid .field input[type="date"] { padding-left: 10px; padding-right: 6px; font-variant-numeric: tabular-nums; }
  .search-grid .field:nth-last-child(2),  /* travellers */
  .search-grid .field:last-child { grid-column: 1 / -1; } /* search button */
  .form-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-3, .grid-4, .footer-grid { grid-template-columns: repeat(2,1fr); }
  .section { padding: 44px 0; }
  .hero { padding: 40px 0 120px; }
  .hero h1 { font-size: 30px; }
  .trust-row { gap: 12px 22px; }
  /* flight card: stack legs full-width, footer with price + full Select */
  .fleg { grid-template-columns: 1fr; gap: 10px; padding: 12px 0; }
  .fleg > div:last-child { display:none; }            /* hide right date col */
  .fleg-times { max-width: 100%; }
  .fleg-pt { min-width: 56px; }
  .fleg-stop, .fleg-line .dur { white-space: nowrap; }
  .fcard-side { flex-direction: column; align-items: stretch; text-align: center; gap: 2px; padding: 16px 18px; }
  .fcard-side .price { font-size: 26px; }
  .fcard-side .per { margin-bottom: 10px; }
  .fcard-side .btn { width: 100%; }
  .fcard-details-btn { margin-top: 6px; }
}

/* Small phones */
@media (max-width: 400px) {
  .header-phone { font-size: 12.5px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .fleg-pt b { font-size:19px; }
}
/* Only drop the number on truly tiny screens */
@media (max-width: 330px) {
  .header-phone .pn { display:none; }
  .header-phone .pi { font-size:20px; }
}

/* =====================================================================
   THEME 2026 — editorial modern layer
   ---------------------------------------------------------------------
   Appended last on purpose: it re-skins the components above via the
   cascade, so the original rules stay intact as a fallback. Design notes:
     · deep midnight navy + azure, warmed by a sand accent
     · Fraunces (serif) for display headlines, Inter for everything else
     · motion is opt-in via .reveal + js/motion.js, and is fully disabled
       under prefers-reduced-motion
   ===================================================================== */

/* ---- Typography ---- */
body { font-size: 16.5px; letter-spacing: -.005em; }
h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
}
h3, h4 { letter-spacing: -.015em; }
/* Italic serif emphasis — the "Private skies" treatment */
.em, h1 em, h2 em, h1 span.em, h2 span.em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.eyebrow-line {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.eyebrow-line::before { content: ''; width: 34px; height: 1px; background: currentColor; opacity: .6; }

/* ---- Header: transparent over the hero, solid once you scroll ---- */
.site-header {
  background: transparent; border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.site-header .container { height: 84px; }
.site-header.scrolled {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 30px rgba(7, 22, 46, .07);
}
.nav a { font-size: 14.5px; font-weight: 500; position: relative; padding: 4px 0; }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px;
  background: var(--lemon); transition: right .35s var(--ease);
}
.nav a:hover { color: var(--lemon); }
.nav a:hover::after { right: 0; }

/* Over the dark hero the header text is white until scrolled */
body.has-hero .site-header:not(.scrolled) .nav a,
body.has-hero .site-header:not(.scrolled) .header-phone { color: #fff; }
body.has-hero .site-header:not(.scrolled) .burger { color: #fff; }

/* ---- Hero ---- */
.hero {
  padding: 132px 0 190px;
  background: radial-gradient(120% 120% at 15% 0%, #123566 0%, var(--navy) 55%, #050F22 100%);
}
.hero::after {
  right: -220px; top: -160px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(47, 107, 255, .30), transparent 68%);
}
.hero-bg { opacity: .22; transform: scale(1.06); }
.hero h1 { font-size: clamp(40px, 6.4vw, 84px); max-width: 15ch; }
.hero h1 span { color: #fff; }
.hero .eyebrow {
  background: rgba(240, 164, 75, .12); border-color: rgba(240, 164, 75, .35);
  color: var(--accent-soft); letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px;
}
.hero p.lead { font-size: 19px; opacity: .78; max-width: 52ch; }
.trust-row { gap: 34px; margin-top: 40px; font-size: 13.5px; letter-spacing: .01em; opacity: .8; }

/* ---- Search card ---- */
.search-wrap { margin-top: -104px; }
.search-card {
  border-radius: 24px; padding: 26px;
  box-shadow: 0 40px 90px rgba(7, 22, 46, .22);
  border: 1px solid rgba(255, 255, 255, .7);
}
.trip-tabs button { border-radius: 100px; transition: all .3s var(--ease); }
.trip-tabs button.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- Buttons ---- */
.btn { border-radius: 100px; font-weight: 600; letter-spacing: .01em; transition: all .35s var(--ease); }
.btn-primary { background: var(--lemon); box-shadow: 0 10px 26px rgba(47, 107, 255, .28); }
.btn-primary:hover { background: #1B57F0; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(47, 107, 255, .38); }
.btn-navy:hover { transform: translateY(-2px); }
.btn-ghost:hover { border-color: var(--lemon); background: var(--lemon-tint); transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; }

/* ---- Sections ---- */
.section { padding: 104px 0; }
.section h2 { font-size: clamp(30px, 4.4vw, 52px); }
.section .sub { font-size: 17.5px; line-height: 1.65; max-width: 58ch; }
.section-head { margin-bottom: 52px; }

/* ---- Cards ---- */
.deal {
  border-radius: 20px; box-shadow: 0 4px 20px rgba(7, 22, 46, .05);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.deal:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(7, 22, 46, .16); }
.deal .img { height: 208px; overflow: hidden; }
.deal .img img { transition: transform 1.1s var(--ease); }
.deal:hover .img img { transform: scale(1.07); }
.deal .tag {
  background: rgba(7, 22, 46, .72); color: #fff; backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18);
}
.deal .route { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.deal .body { padding: 20px 22px 24px; }

.feature {
  border-radius: 20px; padding: 32px 28px; border: 1px solid var(--line);
  box-shadow: none; background: var(--card);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.feature:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 50px rgba(7, 22, 46, .12); }
.feature .ico { border-radius: 16px; font-size: 22px; }
.feature h3 { font-size: 18px; margin-bottom: 8px; }

/* ---- Scroll reveal (js/motion.js adds .in) ---- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .deal:hover, .feature:hover, .btn:hover { transform: none !important; }
  .deal .img img, .hero-bg { transition: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
  .hero { padding: 104px 0 150px; }
  .section { padding: 68px 0; }
  .site-header .container { height: 68px; }
  body.has-hero .site-header:not(.scrolled) { background: rgba(7,22,46,.6); backdrop-filter: blur(10px); }
}

/* ---- Header overlay fix -------------------------------------------------
   The transparent header only works if the hero actually sits UNDERNEATH it.
   Taking it out of flow (fixed) pulls the hero to the top of the page; without
   this the white nav text lands on the white strip above the hero and vanishes.
   Pages with no hero keep the normal sticky solid header. */
body.has-hero .site-header { position: fixed; top: 0; left: 0; right: 0; }
body.has-hero .site-header:not(.scrolled) .logo img { filter: brightness(0) invert(1); }
body.has-hero .site-header:not(.scrolled) .header-phone .pi { color: var(--accent); }

/* Install pill: white label on the blue gradient (navy-on-blue was unreadable) */
.install-btn { color: #fff !important; box-shadow: 0 6px 18px rgba(47,107,255,.32); }
body.has-hero .site-header:not(.scrolled) .install-btn {
  background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
}

/* ---- No-JS safety: reveals must never hide content permanently ---------- */
.reveal { opacity: 1; transform: none; }          /* default = visible */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- Airport autocomplete: Google-Flights style --------------------------
   The old panel was pinned to the (narrow) field width, so long airport names
   wrapped and the list grew BOTH scrollbars. It now breaks out of the column,
   overlaps its neighbours, and truncates instead of wrapping. */
.ac-list {
  left: 0; right: auto;
  width: max-content;
  min-width: 380px;
  max-width: min(560px, calc(100vw - 32px));
  top: calc(100% + 10px);
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(7, 22, 46, .20);
  max-height: 396px;
  overflow-y: auto;
  overflow-x: hidden;            /* never a horizontal scrollbar */
  z-index: 300;                  /* above the other search fields */
  padding: 6px;
  /* animate in */
  display: block;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.985);
  transform-origin: top left;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.ac-list.show { opacity: 1; visibility: visible; transform: none; }
/* The last two columns would push the panel off-screen — anchor them right. */
.search-grid .field:nth-child(n+4) .ac-list { left: auto; right: 0; transform-origin: top right; }

.ac-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0; border-radius: 11px;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.ac-item + .ac-item { box-shadow: inset 0 1px 0 var(--bg); }
.ac-item:hover, .ac-item.active { background: var(--lemon-tint); box-shadow: none; }
.ac-item .ac-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.ac-item.active .ac-ico, .ac-item:hover .ac-ico { background: #fff; color: var(--lemon); }
.ac-item .ac-txt { min-width: 0; }
.ac-item .ac-name {
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-item .ac-sub {
  font-size: 12.5px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-item .code {
  font-weight: 700; font-size: 12px; letter-spacing: .06em;
  color: var(--muted); background: var(--bg);
  padding: 4px 9px; border-radius: 7px;
}
.ac-item.active .code, .ac-item:hover .code { background: #fff; color: var(--navy); }
.ac-empty { padding: 18px 14px; color: var(--muted); font-size: 14px; text-align: center; }

@media (max-width: 760px) {
  .ac-list, .search-grid .field:nth-child(n+4) .ac-list {
    left: 0; right: 0; width: auto; min-width: 0; transform-origin: top center;
  }
}

/* ---- Install pill: quieter (no bold, no colour emoji) ---- */
.install-btn { font-weight: 500 !important; letter-spacing: .01em; }
.install-btn::before { content: ""; display: none; }

/* ac-name / ac-sub are spans → must be block or they run together on one line */
.ac-item .ac-name, .ac-item .ac-sub { display: block; }

/* ---- Header phone: sits in its own pill ---- */
.header-phone {
  font-weight: 600; font-size: 14.5px;
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--line); background: #fff;
  transition: all .3s var(--ease);
}
.header-phone:hover { border-color: var(--lemon); color: var(--lemon); }
.header-phone .pi { color: var(--lemon); }
body.has-hero .site-header:not(.scrolled) .header-phone {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); color: #fff;
  backdrop-filter: blur(8px);
}
body.has-hero .site-header:not(.scrolled) .header-phone:hover { background: rgba(255,255,255,.18); color: #fff; }

/* (superseded page-transition block removed — see "Page transitions, take 2" below) */

/* ---- Search overlay: centre in the VIEWPORT, scroll only if too tall -----
   align-items:center on a too-tall modal overflows in both directions and
   becomes unreachable. flex-start + margin:auto centres it when it fits and
   lets the overlay scroll when it doesn't. */
.search-overlay{ align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.search-modal{ margin:auto; max-height:none; }

/* ---- Page transitions, take 2 -------------------------------------------
   The previous version faded the outgoing page to opacity:0 and waited before
   navigating, and the incoming page animated up FROM opacity:0 — which is
   exactly what produced the white flash. Now:
     · the outgoing page only DIMS (stays painted) and navigation is immediate
     · the incoming page does not start invisible
     · supporting browsers get a real cross-document cross-fade
   Net effect: the old page stays on screen until the new one paints. */
@view-transition { navigation: auto; }

.js body { animation: none; }                 /* no fade-from-blank on arrival */
.js body.page-leave {
  animation: none;
  opacity: .62;
  filter: saturate(.85);
  transition: opacity .18s var(--ease), filter .18s var(--ease);
  pointer-events: none;                        /* ignore clicks mid-navigation */
}

/* Slim progress bar so a slow page still feels responsive */
#navbar-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0;
  background:linear-gradient(90deg,var(--lemon),var(--accent));
  z-index:2147483000; opacity:0; pointer-events:none;
  box-shadow:0 0 10px rgba(47,107,255,.6);
}
#navbar-progress.go{ opacity:1; width:82%; transition:width 1.4s cubic-bezier(.1,.8,.2,1), opacity .2s; }
#navbar-progress.done{ width:100%; opacity:0; transition:width .2s, opacity .35s .1s; }

@media (prefers-reduced-motion: reduce){
  .js body.page-leave{ opacity:1; filter:none; transition:none; }
  #navbar-progress{ display:none; }
}

/* ---- Fold discipline ----------------------------------------------------
   The editorial hero looked great at 1440x1200 but pushed the search card off
   a 900px laptop screen. Everything here is viewport-relative so the card is
   reachable without scrolling on any realistic screen, while still feeling
   generous on a large one. */
.hero { padding: clamp(84px, 11vh, 132px) 0 clamp(124px, 16vh, 190px); }
.hero h1 { font-size: clamp(34px, 4.6vw, 68px); max-width: 16ch; }
.hero p.lead { font-size: clamp(15.5px, 1.15vw, 18px); margin-top: 12px; }
.trust-row { margin-top: clamp(18px, 2.6vh, 34px); gap: clamp(18px, 2vw, 34px); }
.hero .eyebrow { margin-bottom: clamp(10px, 1.6vh, 18px); }
.search-wrap { margin-top: clamp(-104px, -9vh, -68px); }

/* Short viewports (laptops, split screens): tighten further. */
@media (max-height: 820px) {
  .hero { padding: 76px 0 112px; }
  .hero h1 { font-size: clamp(30px, 3.9vw, 50px); }
  .hero p.lead { display: none; }        /* the card matters more than the blurb */
  .trust-row { margin-top: 16px; }
}

/* ---- Results page: get the summary + CTA above the fold -----------------
   .sumcard already pins its Continue button internally (.sc-bot) and scrolls
   .sc-mid, so the fix is not more stickiness — it is starting the card higher.
   Trimming the layout padding and sticking a little tighter lifts the whole
   card ~40px, which is what pushed Continue off a 900px screen.
   NOTE: do NOT target .results-layout > aside — that is the FILTERS panel. */
.results-layout { padding-top: 14px; }
.sumcard { top: 92px; max-height: calc(100vh - 104px); }
.summary-card { top: 92px; max-height: calc(100vh - 104px); }
@media (max-height: 820px) {
  .results-layout { padding-top: 10px; }
  .sumcard, .summary-card { top: 88px; max-height: calc(100vh - 96px); }
}

/* ---- One rule for every centred full-screen modal -----------------------
   align-items:center silently breaks when the dialog is taller than the
   viewport: it overflows in BOTH directions and the top becomes unreachable,
   so the user has to scroll to reach content that is above the scroll origin.
   flex-start + margin:auto centres when it fits and scrolls when it doesn't.
   Applied to the fare-hold dialog and the search overlay. */
.ft-modal { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ft-modal .ft-box { margin: auto; }