/* =====================================================================
   Flight Fares Now — 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
    FlightFaresNow azure-blue accent so every existing rule re-themes in one place.)
   ===================================================================== */

.pd-mobile-flight-card,
.pd-mobile-details-toggle {
  display: none;
}

:root {
  /* Primary action colour. The --lemon* names are kept so every existing rule
     re-themes from one place; they now hold FlightFaresNow azure. */
  --lemon: #1B74CE;
  --lemon-soft: #4E9BE0;
  --lemon-tint: #E9F2FB;
  /* Deep midnight navy — richer and cooler than the old #122946 */
  --navy: #0E0930;
  --navy-2: #1B3A66;
  --navy-3: #12294A;
  /* Warm sand: the counterweight to all that blue (eyebrows, rules, accents) */
  --accent: #4C89C8;
  --accent-soft: #A7CDEE;
  --green: #17A673;
  --ink: #0E0930;
  --muted: #6A6971;
  --line: #E8E7F0;
  --bg: #F6F6F7;
  --card: #FFFFFF;
  --shadow: 0 8px 30px rgba(14, 9, 48, .07);
  --shadow-lg: 0 30px 70px rgba(14, 9, 48, .16);
  --radius: 20px;
  --radius-sm: 14px;
  --sans: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --serif: 'Schibsted Grotesk', 'DM Sans', 'Segoe UI', system-ui, sans-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 {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 6px;
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  border-bottom: 1px solid var(--bg);
}

.mdrawer-nav a .mi {
  color: var(--muted);
  flex: 0 0 auto;
  transition: color .2s ease;
}

.mdrawer-nav a:hover {
  color: var(--lemon);
}

.mdrawer-nav a:hover .mi {
  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, #122946 0%, #1C3D6B 55%, #1F4573 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);
}

/* Travellers & class summary: keep "1 Adult · Economy" on one line and fit the
   narrow field — smaller text + tidy ellipsis instead of clipping mid-letter. */
.pax-toggle {
  cursor: pointer;
  font-size: 13.5px;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 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(14, 9, 48, .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;
}

/* ---- Search-form step feedback (owner 2026-07-28) ------------------------
   Choosing "From" used to hand straight over to "To" so fast that it looked
   like nothing had been selected. The chosen field now flashes green with a ✓
   for a moment, and the field that is next gently pulses, so the hand-off is
   something you SEE rather than something that just happens. */
.search-grid .field {
  position: relative;
}

/* Small numbered chip beside the From/To labels — "1" then "2". */
.search-grid .step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  transition: background .25s ease, color .25s ease;
}

.search-grid .field.step-done .step-dot {
  background: #1c9d5b;
  color: #fff;
}

/* The confirmation: a green wash + tick that fades out on its own. */
@keyframes fl-step-done {
  0% {
    box-shadow: 0 0 0 0 rgba(28, 157, 91, .34);
    background-color: rgba(28, 157, 91, .10);
  }

  55% {
    box-shadow: 0 0 0 6px rgba(28, 157, 91, 0);
    background-color: rgba(28, 157, 91, .10);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(28, 157, 91, 0);
    background-color: transparent;
  }
}

.search-grid .field.step-done input {
  animation: fl-step-done 1.5s ease-out;
  border-color: #1c9d5b;
}

.search-grid .field.step-done::after {
  content: '✓';
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: #1c9d5b;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  animation: fl-step-tick 1.5s ease-out forwards;
  pointer-events: none;
}

@keyframes fl-step-tick {
  0% {
    opacity: 0;
    transform: scale(.5);
  }

  18% {
    opacity: 1;
    transform: scale(1.15);
  }

  30% {
    transform: scale(1);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* The field being handed TO — a soft pulse that says "you are here next". */
@keyframes fl-step-next {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(30, 136, 229, 0);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(30, 136, 229, .20);
  }
}

.search-grid .field.step-next input,
.datefield.step-next {
  animation: fl-step-next 1.1s ease-in-out 2;
  border-color: #1B74CE;
}

@media (prefers-reduced-motion: reduce) {

  .search-grid .field.step-done input,
  .search-grid .field.step-done::after,
  .search-grid .field.step-next input,
  .datefield.step-next {
    animation: none;
  }

  .search-grid .field.step-done::after {
    opacity: 1;
  }
}

/* Trip-type toggle inside the calendar (owner 2026-07-28) — switch to one way
   (or add a return) without closing the picker. */
.fldp-trip {
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.fldp-trip:hover {
  border-color: var(--navy);
}

.fldp-trip[hidden] {
  display: none !important;
}

/* The hint would squeeze the toggle off a narrow calendar — the toggle wins. */
@media (max-width:520px) {
  .fldp-foot .fldp-hint {
    display: none;
  }
}

/* ---- 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;
  max-height: min(72vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.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: 22px 0 12px;
  margin-top: 22px;
}

.site-footer .logo img {
  height: 30px;
  margin-bottom: 8px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 14px 28px;
}

.site-footer h4 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.site-footer a {
  display: block;
  color: #a9bacb;
  padding: 2.5px 0;
  font-size: 13.5px;
}

.site-footer a:hover {
  color: var(--lemon-soft);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 14px;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  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(14, 9, 48, .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(14, 9, 48, .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), #193762);
  color: #fff;
  padding: 14px 16px;
}

.sumcard .sc-top h4 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #A7CDEE;
}

/* 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(14, 9, 48, .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(--bg);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

  .form-grid > div {
    min-height: auto;
  }

  .form-grid label {
    margin-bottom: 4px;
  }

  .form-grid .fld {
    padding: 10px 12px;
    font-size: 14px;
  }

  .form-grid .full {
    grid-column: 1 / -1;
  }
  
.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). */
/* Big, senior-friendly countdown (owner, 2026-07-26): large numerals with a
   colour stage — blue 15-10 min, amber 10-5 min, red under 5 min. */
.faretimer.inpanel {
  position: static;
  width: 100%;
  justify-content: center;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  box-shadow: none;
  font-size: 16px;
}

.faretimer.inpanel .ft-clock {
  font-size: 30px;
}

.ft-slot {
  flex: 0 0 auto;
}

.faretimer {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  border-radius: 100px;
  padding: 12px 20px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(14, 9, 48, .3);
  transition: background .3s ease;
}

/* Icon + text + big clock sit on ONE optical line (the icon floated high before). */
.faretimer .ft-ico {
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.faretimer .ft-txt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.faretimer .ft-clock {
  font-variant-numeric: tabular-nums;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
}

/* Hurry line ABOVE the timer: highlighted pill, blinks 3× then holds. */
.ft-hurry {
  display: none;
  text-align: center;
  font-size: 14.5px;
  font-weight: 800;
  color: #b00020;
  background: #FFF3CD;
  border: 1.5px solid #F0C674;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 0 8px;
  letter-spacing: .02em;
}

.ft-hurry.show {
  display: block;
}

.ft-hurry.blink {
  animation: ftHurryBlink .6s ease-in-out 3;
}

@keyframes ftHurryBlink {
  50% {
    opacity: 0.1;
  }
}

.faretimer.stage-blue {
  background: #134a9c;
}

.faretimer.stage-amber {
  background: #b96a00;
}

.faretimer.stage-red {
  background: #c0392b;
  animation: ftPulse 1s ease-in-out infinite;
}

@keyframes ftPulse {
  50% {
    box-shadow: 0 0 0 6px rgba(192, 57, 43, .25);
  }
}

.faretimer.out {
  background: var(--red);
}

.ft-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(14, 9, 48, .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, #122946, #1C3D6B 60%, #1F4573);
  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: #A7CDEE
}

.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: 12px;
  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: 6px;
  flex: 0 0 auto
}

.seg-body {
  flex: 1;
  min-width: 0
}

.seg-hd {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline
}

.seg-hd b {
  font-size: 14.5px;
  color: var(--navy)
}

.seg-hd .seg-fl {
  font-size: 12.5px;
  color: var(--muted)
}

.seg-tm {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 13px;
  color: var(--ink)
}

.seg-tm b {
  font-variant-numeric: tabular-nums
}

.seg-tm .seg-dur {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap
}

/* Layover chip between connecting segments */
.seg-lay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 2px 22px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--lemon-tint);
  color: #8a6d00;
  font-size: 12px;
  font-weight: 700
}

@media (max-width:560px) {
  .seg-tm {
    gap: 6px 10px
  }
}

.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;
}

/* Date of birth: MM / DD / YYYY side by side (owner 2026-07-31). The year gets
   the extra room because it holds four digits; month and day are two. */
.dobsels {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 8px;
}

.dobsels .dobsel {
  width: 100%;
  min-width: 0;
}

.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) {
  /* Passenger details: boarding-pass itinerary shown only on phones. */
  .pd-flight-desktop-head,
  .pd-flight-standard,
  /* …and the navy route box inside the fare summary, which on a phone just
     repeated the flights already shown above it (owner 2026-07-31). */
  .pd-sum-flightbox {
    display: none !important;
  }

  /* Opened by the matching card's More details button. The original shared
     renderer supplies the full segment details, airline logo and airline name. */
  .pd-flight-standard.show-details {
    display: block !important;
  }

  .pd-flight-standard.show-details .fc-mobile-summary {
    display: none !important;
  }

  .pd-mobile-flight-card {
    display: block;
    padding: 4px 0 0;
  }

  .pd-mobile-airline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 2px 12px 9px;
    color: #071a52;
  }

  .pd-mobile-airline-item {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
  }

  .pd-mobile-airline .al-logo {
    width: 30px;
    height: 30px;
    padding: 2px;
    border-radius: 6px;
    background: #0b2b73;
  }

  .pd-mobile-airline b,
  .pd-mobile-airline small {
    display: block;
  }

  .pd-mobile-airline b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.15; }
  .pd-mobile-airline small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; font-size: 9.5px; font-weight: 700; }

  .pd-mobile-leg {
    border: 1.5px solid #2f66dc;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    color: #0F223A;
  }

  .pd-mobile-leg--inbound {
    border-color: #42b28f;
    color: #00805e;
  }

  .pd-mobile-leg-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    padding: 8px 13px 6px;
    font-size: 12px;
  }

  .pd-mobile-leg-top b { font-size: 15px; }
  .pd-mobile-leg-top > span:last-child { margin-left: auto; font-weight: 800; }
  .pd-mobile-leg-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    color: #fff;
    background: #0d4fc3;
    font-size: 15px;
  }

  .pd-mobile-leg--inbound .pd-mobile-leg-icon { background: #07966f; }

  .pd-mobile-route {
    display: grid;
    grid-template-columns: .9fr 1fr 18px 1fr .9fr;
    align-items: start;
    gap: 4px;
    padding: 2px 13px 13px;
    text-align: center;
  }

  .pd-mobile-route > div:first-child { text-align: left; }
  .pd-mobile-route > div:last-child { text-align: right; }
  .pd-mobile-route strong,
  .pd-mobile-route small { display: block; }
  .pd-mobile-route strong { font-size: 19px; line-height: 1.1; letter-spacing: -.03em; }
  .pd-mobile-route small { margin-top: 3px; font-size: 10px; line-height: 1.15; font-weight: 700; color: #162555; }
  .pd-mobile-leg--inbound .pd-mobile-route small { color: #125f50; }
  .pd-mobile-route i { padding-top: 5px; font-size: 21px; font-style: normal; font-weight: 800; }

  .pd-mobile-leg-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 39px;
    padding: 5px 12px 5px 15px;
    border-top: 1px solid #dbe3f4;
    color: #0F223A;
    font-size: 12px;
    font-weight: 800;
  }

  .pd-mobile-leg-bottom button {
    border: 1px solid #bbcdf8;
    border-radius: 7px;
    padding: 5px 9px;
    color: #073eae;
    background: #f8fbff;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
  }

  .pd-mobile-change {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 0 12px;
    border: 0;
    background: transparent;
    color: #0642b4;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }

  .pd-mobile-leg--inbound + .pd-mobile-change { color: #058161; }

  /* Compact boarding-pass itinerary for the passenger page. */
  .pd-mobile-leg {
    margin: 0;
    border: 1px solid #dce3ef;
    border-radius: 0;
    box-shadow: none;
    color: #152E4F;
  }

  .pd-mobile-leg--outbound { border-top: 0; }

  .pd-mobile-leg-top {
    min-height: 44px;
    padding: 11px 13px;
    background: #215081;
    color: #fff;
    font-size: 12px;
  }

  .pd-mobile-leg--inbound .pd-mobile-leg-top { background: #215081; }
  .pd-mobile-leg-top b { font-size: 17px; }
  .pd-mobile-leg-top > span:last-child { font-size: 11px; color: #fff; }

  .pd-mobile-carrier {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px 0;
  }

  .pd-mobile-carrier .al-logo {
    width: 31px;
    height: 31px;
    padding: 2px;
    border: 1px solid #dce3ef;
    border-radius: 7px;
    background: #fff;
    object-fit: contain;
  }

  .pd-mobile-carrier b,
  .pd-mobile-carrier small { display: block; }
  .pd-mobile-carrier b { color: #152E4F; font-size: 13px; line-height: 1.15; }
  .pd-mobile-carrier small { color: #69758a; font-size: 10.5px; font-weight: 700; margin-top: 2px; }

  .pd-mobile-flight-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 14px 10px;
  }

  .pd-mobile-flight-meta small,
  .pd-mobile-stop-info small {
    display: block;
    color: #6d7381;
    font-size: 10px;
    font-weight: 700;
  }

  .pd-mobile-flight-meta b {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    color: #162352;
  }

  /* Extra room on the LEFT so the icons are not jammed against the card edge
     (owner 2026-07-31) — the whole timeline is indented, icons and connector
     line together, so nothing drifts out of alignment. */
  .pd-mobile-timeline {
    position: relative;
    padding: 10px 14px 8px 18px;
  }

  .pd-mobile-stop {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
  }

  /* Bigger plane icons (owner 2026-07-31): 30 → 38px. The connector line below
     is positioned off this size — see .pd-mobile-journey's margin-left. */
  .pd-mobile-stop-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #183358;
    color: #fff;
    font-size: 18px;
  }

  .pd-mobile-leg--inbound .pd-mobile-stop-icon { background: #00932e; }
  .pd-mobile-leg--inbound .pd-mobile-stop-icon { transform: rotate(180deg); }

  /* Everything about a stop reads down the LEFT (owner 2026-07-31): the label,
     then the time, then the airport right under it. Splitting the time and the
     airport into two columns meant your eye had to cross the card to pair
     "1:00 PM" with "JFK"; stacked, they read as one block. */
  .pd-mobile-stop-info {
    display: block;
    min-width: 0;
  }

  .pd-mobile-stop-info strong {
    display: block;
    color: #122843;
    font-size: 21px;
    line-height: 1.05;
    letter-spacing: -.04em;
  }

  .pd-mobile-stop-info sup { font-size: 9px; letter-spacing: 0; margin-left: 1px; }
  .pd-mobile-stop-info em { display: block; color: #008727; font-size: 10px; font-style: normal; font-weight: 800; }
  /* Airport sits under its time, same left edge. The code stays the biggest
     thing after the time so the pair "1:00 PM / JFK New York" scans at a
     glance; the city wraps rather than losing its tail to an ellipsis. */
  .pd-mobile-airport {
    text-align: left;
    min-width: 0;
    margin-top: 3px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
  }
  .pd-mobile-airport b {
    font-size: 17px;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #122843;
  }
  .pd-mobile-airport small {
    white-space: normal;
    line-height: 1.25;
    word-break: break-word;
    color: #6d7381;
    font-size: 12px;
    font-weight: 600;
  }

  /* The vertical line must run through the CENTRE of the icons above and below.
     A 3px border starting at margin-left M is centred on M+1.5, and the icon
     centre is now 38/2 = 19 — hence 17.5. Change one, change the other. */
  .pd-mobile-journey {
    position: relative;
    min-height: 50px;
    margin: -1px 0 -1px 17.5px;
    padding: 26px 0 30px 50px;
    border-left: 3px solid #b6c7ff;
  }

  .pd-mobile-leg--inbound .pd-mobile-journey { border-left-color: #9bd9ad; }
  .pd-mobile-journey::before {
    content: '';
    position: absolute;
    top: 35px;
    left: 18px;
    right: calc(50% + 5px);
    border-top: 1px solid #cbd3df;
  }

  .pd-mobile-journey span {
    display: inline-block;
    padding-left: 5px;
    background: #fff;
    color: #183358;
    font-size: 11px;
    font-style: italic;
    font-weight: 800;
  }

  .pd-mobile-leg-bottom {
    min-height: 38px;
    padding: 9px 14px;
    border-top: 1px solid #dce3ef;
    color: #152E4F;
    font-size: 11px;
    font-weight: 700;
  }

  .pd-mobile-details-toggle {
    display: block;
    width: 100%;
    margin: 2px 0 8px;
    padding: 8px 12px;
    border: 1px solid #b9cdf7;
    border-radius: 8px;
    background: #f7faff;
    color: #0844b7;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }

  .pd-modify-wrap {
    margin-top: 3px !important;
  }

  .pd-modify-wrap #modifyBtn {
    width: 100%;
    padding: 12px 16px !important;
    font-size: 16px !important;
    border-radius: 11px !important;
    /* Light tint, matching the inline style — the solid #0b48ba here was the
       heaviest thing on the phone view (owner 2026-07-31). */
    background: #EEF4FF !important;
    color: #183358 !important;
    border: 1.5px solid #cfe0ff !important;
    box-shadow: none !important;
  }

  .pd-modify-wrap .muted { display: none; }

  /* Guest details: the add-passenger action is easy to reach at the end of
     the passenger form, using the full available phone width. */
  .add-pax-wrap {
    display: block !important;
    margin: 2px 0 18px !important;
  }

  .add-pax-wrap .addPaxBtn {
    display: block;
    width: 100%;
    padding: 12px 14px;
  }

  .add-pax-wrap #removePaxBtn2,
  .add-pax-wrap .muted {
    display: none;
  }

  /* Passenger itinerary: keep the essential schedule information large enough
     to scan at a glance, while reducing secondary controls and spacing. */
  .fc-mobile-summary {
    gap: 8px !important;
    padding: 8px !important;
    margin: 6px 0 !important;
  }

  .fc-mobile-summary > img {
    width: 30px !important;
    height: 30px !important;
  }

  .fc-mobile-summary > div {
    line-height: 1.2;
  }

  .fc-mobile-summary > div > div:first-child {
    font-size: 11px !important;
    color: #6B7B8C !important;
    font-weight: 700 !important;
    margin-bottom: 2px;
  }

  /* Route, airport codes and times are the primary content on phones. */
  .fc-mobile-summary > div > div:nth-child(2) {
    font-size: 15px !important;
    color: #122946 !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
  }

  .fc-mobile-summary > div > div:nth-child(2)::first-line {
    font-size: 16px;
  }

  .fc-mobile-summary > button {
    padding: 5px 7px !important;
    font-size: 10.5px !important;
  }

  .flight-change-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    margin-left: auto !important;
  }

  .flight-change-direction {
    display: none;
  }

  .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;
  }

  /* Forms go ONE field per line on a phone (owner 2026-07-31). Two columns left
     every label and input at roughly half a screen wide, so titles, names and
     dates were all cramped and easy to mis-tap. One per line is slower to scroll
     but far easier to fill in on the way through checkout.
     Note: .dobsels (MM/DD/YYYY) is its own grid inside a field, so the three
     date dropdowns still sit side by side — only the OUTER fields stack. */
  .form-grid {
    grid-template-columns: 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;
  }

  /* (The old "hide right date col" rule lived here. After the 2026-08-16 card
     redesign the leg has only TWO children, so `div:last-child` was hiding
     .fleg-mid — the whole times/duration column — on phones. Never re-add a
     child-position selector here; target a class. */
  .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;
  }
}

/* Header crowding on phones: the wide logo + phone pill + burger didn't fit,
   so the pill overlapped the logo. Give the row a gap, cap the logo, and drop
   the phone NUMBER (keep the ☎ pill) below 560px so nothing collides. */
.site-header .container {
  gap: 10px;
}

@media (max-width: 560px) {
  .site-header .logo img {
    max-height: 30px;
  }

  .header-phone .pn {
    display: none;
  }

  .header-phone {
    padding: 8px 11px;
  }

  .header-phone .pi {
    font-size: 16px;
  }
}

/* =====================================================================
   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(14, 9, 48, .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%, #1C3D6B 0%, var(--navy) 55%, #081526 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(76, 137, 200, .12);
  border-color: rgba(76, 137, 200, .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(14, 9, 48, .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(14, 9, 48, .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(14, 9, 48, .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(14, 9, 48, .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(14, 9, 48, .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(14, 9, 48, .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;
}

/* Hero mode swaps in logo-light.svg (white text + purple-plane badge) via
   header.php — a brightness/invert filter here bleached the badge to a blank
   white circle (owner bug report 2026-08-21). Never filter the logo. */

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(14, 9, 48, .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;
}

/* ---- Mobile fare bar ----------------------------------------------------
   The summary used to drop to a fixed sheet up to 70vh tall. Touching it
   captured the scroll, so the page felt stuck — and it hid the results behind
   it. It is now a slim bar carrying only what matters (total + Continue), and
   the detail is opened deliberately. Nothing overlays the page until asked. */
@media (max-width: 1100px) {
  .sumcard {
    max-height: none;
    /* was 70vh — the cause of the trap */
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 34px rgba(14, 9, 48, .18);
    transition: transform .32s var(--ease);
  }

  /* Collapsed (default): header + details hidden, only the total/CTA row. */
  .sumcard:not(.expanded) .sc-top,
  .sumcard:not(.expanded) .sc-mid {
    display: none;
  }

  .sumcard .sc-bot {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* A grab handle doubles as the expand toggle. */
  .sumcard .sc-handle {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 8px 0 2px;
    cursor: pointer;
    text-align: center;
  }

  .sumcard .sc-handle::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 4px;
    background: var(--line);
    margin: 0 auto 4px;
  }

  .sumcard .sc-handle span {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .04em;
  }

  /* Expanded: capped and internally scrollable, with scroll chaining stopped
     so a flick inside the sheet never drags the page behind it. */
  .sumcard.expanded {
    max-height: 76vh;
  }

  .sumcard.expanded .sc-mid {
    display: block;
    max-height: 42vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sumcard.expanded .sc-top {
    display: block;
  }

  /* Backdrop only while expanded — tapping it closes the sheet. */
  .sc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 9, 48, .45);
    z-index: 59;
    opacity: 0;
    visibility: hidden;
    transition: .25s;
  }

  .sc-backdrop.on {
    opacity: 1;
    visibility: visible;
  }

  /* Just enough room for the collapsed bar — not 200px of dead space. */
  body.has-sumcard {
    padding-bottom: 132px;
  }
}

@media (min-width: 1101px) {

  .sumcard .sc-handle,
  .sc-backdrop {
    display: none;
  }
}

/* ---- Travellers popover: explicit Done / Cancel ---- */
.pax-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.pax-actions button {
  flex: 1;
  border-radius: 10px;
  padding: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
}

.pax-actions .pax-cancel {
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--muted);
}

.pax-actions .pax-done {
  background: var(--lemon);
  border: 0;
  color: #fff;
}

@media (max-width: 760px) {
  .pax-pop.show {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    width: auto;
    max-height: 76vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px;
    box-shadow: 0 -10px 40px rgba(14, 9, 48, .28);
    z-index: 7147482500;
  }

  /* .pax-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 9, 48, .45);
    z-index: 59999;
  } */
}

/* ---- Mobile airport picker — a real full-screen panel --------------------
   The first attempt only restyled the dropdown and pinned a search bar to the
   top, so the page stayed visible behind it and the field you were editing sat
   underneath: confusing, and there was nothing to tap to get back.
   This is a genuine overlay, modelled on Google Flights: it covers everything,
   owns the keyboard, and closes on pick / back / Escape. */
.ac-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147482600;
  background: var(--card);
  display: none;
  flex-direction: column;
}

.ac-sheet.open {
  display: flex;
}

/* Lock the page behind the airport sheet WITHOUT touch-action:none — that
   property froze scrolling inside the sheet too (and, if the class ever stuck,
   the whole site). overflow:hidden is enough; the sheet is a fixed overlay. */
body.ac-open {
  overflow: hidden;
}

.ac-sheet-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.ac-sheet-bar .ac-back {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--navy);
  padding: 10px 8px;
}

.ac-sheet-bar .ac-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ac-sheet-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
  /* 16px or iOS zooms the page */
  padding: 12px 0;
}

.ac-sheet-bar .ac-clear {
  border: 0;
  background: var(--bg);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  display: none;
}

.ac-sheet-bar .ac-clear.on {
  display: block;
}

.ac-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px 24px;
}

.ac-sheet-body .ac-item {
  padding: 15px 12px;
  border-radius: 12px;
}

.ac-sheet-body .ac-item+.ac-item {
  box-shadow: inset 0 1px 0 var(--bg);
}

.ac-sheet-body .ac-item .ac-name {
  font-size: 15.5px;
  white-space: normal;
}

.ac-sheet-body .ac-item .ac-sub {
  font-size: 13px;
  white-space: normal;
}

.ac-sheet-hint {
  padding: 34px 18px;
  text-align: center;
  color: var(--muted);
  font-size: 14.5px;
}

/* Desktop keeps the inline dropdown; the sheet is mobile-only. */
@media (min-width: 761px) {
  .ac-sheet {
    display: none !important;
  }
}

/* ---- Payment summary on mobile: never trap the scroll ---------------------
   On a phone the fare-summary card stacked below the form but stayed
   position:sticky with an inner overflow-y scroller, so a swipe over it moved
   the card instead of the page — the page felt stuck at the flight-details
   card. On mobile it becomes a plain block: it flows with the page, has no
   height cap and no inner scroller, so the whole page scrolls as one. */
@media (max-width: 1100px) {
  .summary-card {
    position: static !important;
    max-height: none !important;
    top: auto !important;
  }

  .summary-card .sp-mid {
    overflow: visible !important;
    max-height: none !important;
    overscroll-behavior: auto;
  }
}

/* =====================================================================
   MOBILE FIXES (authoritative — appended last so they win over the
   several overlapping @media blocks accumulated during iteration).
   ===================================================================== */
@media (max-width: 1100px) {

  /* (5) Results fare bar: a real bottom-pinned bar. A global `.sumcard{top:92px}`
     (from a desktop fold fix) was overriding the mobile top:auto and stretching
     the fixed card from 92px→bottom, floating its content mid-page. Forced. */
  .sumcard {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    max-height: none !important;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 34px rgba(14, 9, 48, .18);
    z-index: 60;
  }

  .sumcard:not(.expanded) .sc-top,
  .sumcard:not(.expanded) .sc-mid {
    display: none !important;
  }

  .sumcard.expanded {
    max-height: 82vh !important;
  }

  .sumcard.expanded .sc-mid {
    display: block !important;
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sumcard.expanded .sc-top {
    display: block !important;
  }

  .sumcard .sc-bot {
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  body.has-sumcard {
    padding-bottom: 150px;
  }

  /* (4) Filter: never trap the scroll, and keep it compact. */
  .filter-card.open .filter-body,
  .filter-body {
    max-height: 68vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    font-size: 13.5px;
  }

  .filter-card h4 {
    font-size: 12.5px;
    margin: 10px 0 6px;
  }

  .filter-card .frow,
  .filter-card label {
    padding: 5px 0;
  }
}

/* (8) Passport (and any [data-fldob]) calendar: on a phone it opened left:0 from
   a right-column field and ran off the right edge — right-side dates were
   unreachable. Clamp it to a centred sheet that always fits. */
@media (max-width: 760px) {
  .fldd.show {
    position: fixed !important;
    left: 12px;
    right: 12px;
    top: auto !important;
    bottom: 14px;
    width: auto !important;
    max-height: 78vh;
    overflow-y: auto;
    z-index: 2147483000;
    box-shadow: 0 -12px 44px rgba(14, 9, 48, .32);
  }

  .fldd-g {
    grid-template-columns: repeat(7, 1fr);
  }

  .fldd-d {
    height: 40px;
  }

  /* bigger tap targets */
}

/* (7) Footer: shorter on mobile so the payment button stays reachable. */
@media (max-width: 760px) {
  .site-footer {
    padding: 30px 0 18px;
    margin-top: 24px;
  }

  .site-footer .footer-grid {
    gap: 18px 20px;
  }

  .site-footer .logo img {
    height: 32px;
    margin-bottom: 10px;
  }

  .site-footer h4 {
    margin-bottom: 8px;
    font-size: 13px;
  }

  .site-footer a {
    padding: 4px 0;
    font-size: 14px;
  }

  .footer-bottom {
    margin-top: 18px;
    font-size: 12px;
  }
}

/* Passenger-details flight card: on a phone give it the full card width so the
   compact segment row (times + airports) fits on one line instead of wrapping
   the arrival block to a new line. */
@media (max-width: 560px) {

  .book-layout .sp-top,
  .summary-card .sp-top {
    padding-left: 0;
    padding-right: 0;
  }

  .sp-top .panel,
  .sp-top>div {
    padding-left: 0;
    padding-right: 0;
  }
}

/* =====================================================================
   2026-07-28 — mobile booking fixes
   ===================================================================== */

/* Form guard: the visible stand-in of a missing required entry turns red and
   the page scrolls to it (js/formguard.js). */
.fl-invalid {
  border-color: #e5484d !important;
  background: #fdece7 !important;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .18) !important;
  border-radius: 10px;
}

#flFormNote {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(20px);
  background: #a3341a;
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 11px 18px;
  border-radius: 100px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  z-index: 2200;
  opacity: 0;
  visibility: hidden;
  transition: .25s;
  max-width: 92vw;
  text-align: center;
}

#flFormNote.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* Searchable country/state combo (payment page): a real tappable dropdown —
   the old <datalist> never rendered on iOS and was a mile long on desktop. */
.fl-combo {
  position: relative;
}

.fl-combo-dd {
  display: none;
  position: absolute;
  z-index: 90;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(14, 9, 48, .18);
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fl-combo-dd.open {
  display: block;
}

.fl-combo-opt {
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-top: 1px solid var(--bg);
}

.fl-combo-opt:first-child {
  border-top: 0;
}

.fl-combo-opt:hover {
  background: var(--lemon-tint, #FFF7DE);
}

.fl-combo-free {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--muted);
}

/* Pinned bottom CTA (passenger + payment pages): PHONES ONLY.
   Hidden by default — declared BEFORE the phone block below so the phone rule
   wins there. CSS alone decides where it shows, so it can never leak onto
   desktop if a JS resize listener misses a change, and on a phone the bar is
   painted immediately rather than waiting for the script. */
.pd-stickycta {
  display: none;
}

/* Fare timer on phones (owner 2026-07-28): a slim bar pinned DIRECTLY BELOW the
   nav bar — the header keeps the top of the screen, the timer sits under it and
   stays put while the page scrolls. --ft-head is the header height (set by
   faretimer.js from the real element, so it survives any header change). */
@media (max-width: 760px) {
  .faretimer.ft-mobiletop {
    position: fixed;
    top: var(--ft-head, 62px);
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 45;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    font-size: 12px;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 32px;
    box-shadow: 0 4px 14px rgba(14, 9, 48, .25);
  }

  .faretimer.ft-mobiletop .ft-ico {
    font-size: 13px;
  }

  .faretimer.ft-mobiletop .ft-clock {
    font-size: 16px;
  }

  .faretimer.ft-mobiletop .ft-hurry {
    width: 100%;
    font-size: 11px;
    margin: 0;
    padding: 0 0 2px;
    color: black;
  }

  /* Push the page down by the header + timer height so nothing hides underneath them. */
  body.ft-toppad {
    padding-top: calc(var(--ft-head, 62px) + var(--ft-bar, 32px));
  }

  body.ft-toppad .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }

  /* Continue button pinned to the bottom of the screen on phones, so it is
     always one tap away however long the passenger form gets. */
  .pd-stickycta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(14, 9, 48, .12);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .pd-stickycta .pd-cta-total {
    font-weight: 800;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .pd-stickycta .pd-cta-total small {
    display: block;
    font-weight: 600;
    font-size: 10.5px;
    color: var(--muted);
  }

  .pd-stickycta .pd-cta-total em {
    font-style: normal;
    color: #0b7a52;
    font-weight: 800;
  }

  .pd-stickycta .btn {
    flex: 1;
    margin: 0 !important;
  }

  /* Show the pinned bar on phones (overrides the global display:none). */
  .pd-stickycta {
    display: flex;
  }

  /* The in-page buttons used to be hidden here in favour of a pinned bottom
     bar. That bar is gone (owner 2026-07-31) — Continue sits under the bags
     panel and Confirm Booking under Important Information — so both buttons
     must simply show. Nothing floats over the content any more. */
  #pdContinue,
  #payContinue {
    display: flex !important;
  }

  #ctaSlotMobile .pd-sum-cta {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    margin-top: 14px;
  }

  /* Checkout pages drop the footer on phones — see includes/footer.php. */
  .site-footer.footer-hide-mobile {
    display: none !important;
  }

  /* (The bottom padding that made room for the pinned bar is no longer needed —
     the bar was removed, owner 2026-07-31. The classes are left harmless in
     case a cached page still sets them.) */

  /* Chat opens from the nav bar on phones — the floating bubble and its teaser
     are hidden there (owner 2026-07-28). */
  .flc-bub,
  .flc-teaser {
    display: none !important;
  }

  .flc-win.open {
    z-index: 1500;
  }
}

/* "Chat" button in the header (phones only — chat.js unhides it). */
.hdr-chat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid var(--navy);
  background: #fff;
  color: var(--navy);
  border-radius: 999px;
  padding: 7px 13px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.hdr-chat.on {
  background: var(--navy);
  color: #fff;
}

.hdr-chat[hidden] {
  display: none !important;
}

/* Passenger form: give the baggage selector a dedicated mobile layout instead
   of squeezing its long heading and allowance onto one narrow line. */
@media (max-width: 640px) {
  .panel:has(#pdBagMinus) {
    padding: 16px !important;
  }

  .panel:has(#pdBagMinus) h3 {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.18;
  }

  .panel:has(#pdBagMinus) h3 .n {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .panel:has(#pdBagMinus) h3 small {
    grid-column: 2;
    display: block;
    margin-top: 3px;
    font-size: 12px !important;
    line-height: 1.15;
  }

  .panel:has(#pdBagMinus) > div:has(#pdBagPlus) {
    gap: 14px !important;
    margin: 8px 0 12px !important;
  }

  .panel:has(#pdBagMinus) #pdBagMinus,
  .panel:has(#pdBagMinus) #pdBagPlus {
    width: 40px !important;
    height: 40px !important;
  }

  .panel:has(#pdBagMinus) #pdBagN {
    font-size: 21px !important;
  }

  .panel:has(#pdBagMinus) #pdBagInput + div {
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  /* Connection cards: a long layover message must use the card width rather
     than trying to remain a tiny pill and breaking/clipping its last words. */
  .fc-mobile-details div[style*="text-align:center"] > span[style*="border-radius:100px"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }
}

/* The phone checkout action remains above every page element and has a clear,
   dependable tap target even when the long passenger form is being scrolled. */
@media (max-width: 760px) {
  .pd-stickycta {
    z-index: 120 !important;
    min-height: 66px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .pd-stickycta .btn {
    min-height: 46px;
    font-size: 15px;
    white-space: nowrap;
  }
}

/* ── Bottom bar: amount and button ALWAYS on one row (owner 2026-07-30) ──────
   On narrow phones the total could end up stacked above the button. The bar is
   a flex row, so it must never wrap and both children must be allowed to
   shrink — a flex item's default min-width:auto refuses to go below its
   content, which is what forced the break. The button label also shortens on
   the smallest screens (see .pd-cta-long / .pd-cta-short in the markup) so the
   row still fits instead of overflowing. */
@media (max-width: 760px) {
  .pd-stickycta {
    flex-wrap: nowrap !important;
  }

  .pd-stickycta .pd-cta-total {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* The "Total / + N bags" caption is the first thing allowed to give way. */
  .pd-stickycta .pd-cta-total small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pd-stickycta .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* The short label is hidden UNCONDITIONALLY, not inside a media query — if it
   were scoped to one, both labels would render together ("Continue to
   paymentContinue") at any width outside that query. */
.pd-cta-short {
  display: none;
}

@media (max-width: 430px) {
  .pd-stickycta {
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .pd-stickycta .pd-cta-total {
    font-size: 14px;
  }

  .pd-stickycta .pd-cta-total small {
    font-size: 9.5px;
  }

  .pd-stickycta .btn {
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* "Continue to payment" → "Continue", "Pay & confirm" → "Pay" */
  .pd-cta-long {
    display: none;
  }

  .pd-cta-short {
    display: inline;
  }
}

/* Very narrow (older/smaller phones, or a long INR amount): drop the caption
   entirely rather than let the amount squeeze the button out of the row. */
@media (max-width: 350px) {
  .pd-stickycta .pd-cta-total small {
    display: none;
  }
}

/* ── Results card: logo-only airline + tooltips (owner 2026-08-16) ────────
   The card no longer prints the airline name or flight number. The logo
   carries the airline (shown on hover), the day+date sits directly above it,
   and each IATA code is larger with an airport-name/city tooltip. */
.fleg-al {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.fleg-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #6B7B8C);
  white-space: nowrap;
  letter-spacing: .01em;
}
.fleg-logo { display: block; line-height: 0; }
.fleg-pt .fleg-code {
  display: inline-block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .6px;
  color: var(--navy, #122946);
  border-bottom: 1px dotted rgba(14, 9, 48, .35);
  cursor: help;
}
.fleg-pt .fleg-code:hover,
.fleg-pt .fleg-code:focus-visible { color: var(--accent, #1c6fd8); border-bottom-color: currentColor; outline: none; }

/* Shared hover/focus tooltip (airline logo + airport codes). */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #122946;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(14, 9, 48, .24);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 60;
}
[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #122946;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease;
  z-index: 61;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
[data-tip]:hover::before,
[data-tip]:focus-visible::before { opacity: 1; visibility: visible; }
@media (hover: none) {
  /* No hover on touch — the tooltip would stick open after a tap. */
  [data-tip]::after, [data-tip]::before { display: none; }
}
@media (max-width: 640px) {
  .fleg-date { font-size: 10px; }
  .fleg-pt .fleg-code { font-size: 13.5px; }
}

/* Strike-through "original price" anchor on the results card (owner 2026-08-16):
   net fare + GLOBAL markup crossed out, real % saved beside it. */
.fare-was { font-size: 13px; color: #98A6B8; }
.fare-was s { text-decoration-thickness: 1.5px; }
.fare-save {
  background: #E7F8F0; color: #0e9f6e;
  font-weight: 800; border-radius: 6px; padding: 1px 6px; font-size: 11.5px;
}

/* =========================================================================
   NEW search form skin v2 (owner 2026-08-21) — Admin → Site Settings →
   Flight search form design. Scoped under body.sf-modern; classic untouched.

   Desktop: ONE white pill bar — "Where from?" / "Where to?" (IATA chip +
   swap button) · combined "Dates" · "Passengers & Class" · round search
   button. The focused segment ENLARGES and floats above the bar. The trip
   tabs sit centred above the bar as a dark translucent pill.
   Mobile (<=900px): stacked rounded field boxes in the white card; the
   airport picker is the full-screen sheet (search.js keeps it above the
   keyboard and wires the phone Back button to close it).
   ========================================================================= */
body.sf-modern {
  --sf-font: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --sf-accent: #1B74CE;          /* search button + chips, from the approved sample */
  --sf-chip-bg: #E9F2FB;
  --sf-divider: #E9EDF4;
}

/* ---- Trip tabs: dark translucent pill, white active tab, centred ---- */
body.sf-modern .trip-tabs {
  display: flex;
  width: max-content;
  margin: 0 auto 16px;
  background: rgba(14, 9, 48, .42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
}
body.sf-modern .trip-tabs button {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .88);
  font-family: var(--sf-font);
  font-weight: 500;
  font-size: 14px;
  padding: 9px 20px;
  border-radius: 100px;
  transition: background .18s, color .18s;
}
body.sf-modern .trip-tabs button.active {
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(14, 9, 48, .25);
}

/* The sample bar has no numbered step chips — the hand-off is still shown by
   the green ring/tick on the segment itself. */
body.sf-modern .search-grid .step-dot { display: none; }

/* ---- Shared field internals (both layouts) ---- */
body.sf-modern .field label {
  font-family: var(--sf-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  color: #627083;
  margin-bottom: 2px;
}
body.sf-modern .field input,
body.sf-modern .field select,
body.sf-modern .datefield {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-family: var(--sf-font);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
body.sf-modern .field input:focus,
body.sf-modern .field select:focus,
body.sf-modern .datefield:focus-visible { outline: none; border: 0; }
body.sf-modern .field input::placeholder { color: #9AA8BB; font-weight: 500; }
body.sf-modern .datefield { gap: 0; }
body.sf-modern .datefield::before { content: none; }   /* the sample bar has no calendar glyph */
body.sf-modern .datefield .dfval.ph { color: #9AA8BB; font-weight: 500; }
body.sf-modern .datefield:hover, body.sf-modern .datefield.filled { border: 0; }

/* IATA code chip (search.js places <span class="sf-code"> in the field). */
body.sf-modern .sf-code {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sf-font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sf-accent);
  background: var(--sf-chip-bg);
  border-radius: 9px;
  padding: 5px 10px;
  pointer-events: none;
}
body.sf-modern #fromField input, body.sf-modern #toField input { padding-right: 58px; }

/* Swap button straddling the From | To divider (desktop only). */
body.sf-modern .sf-swap {
  position: absolute;
  right: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--sf-divider);
  background: #fff;
  color: #40566d;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  z-index: 7;
  box-shadow: 0 2px 8px rgba(14, 9, 48, .10);
  transition: transform .18s, box-shadow .18s;
}
body.sf-modern .sf-swap:hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 12px rgba(14, 9, 48, .18); }

/* Step feedback: ring the segment, never the borderless input. */
body.sf-modern .search-grid .field.step-done input { animation: none; border: 0; }
body.sf-modern .search-grid .field.step-next input { animation: none; border: 0; }
body.sf-modern .search-grid .field.step-next { animation: fl-step-next 1.1s ease-in-out 2; }
body.sf-modern .datefield.step-next { animation: none; }
body.sf-modern .search-grid .field.step-done::after { right: 14px; bottom: 12px; }

/* ---- Suggestion panel: flag · city · airport name · code chip ---- */
body.sf-modern .ac-list {
  border-radius: 18px;
  border-color: #E6ECF4;
  box-shadow: 0 28px 64px rgba(14, 9, 48, .22);
  padding: 6px;
}
body.sf-modern .ac-item { grid-template-columns: 34px 1fr auto; padding: 11px 12px; border-radius: 12px; }
body.sf-modern .ac-item .ac-ico {
  width: 34px; height: 25px; border-radius: 6px;
  background: #F1F4F9; font-size: 13px; overflow: hidden;
}
body.sf-modern .ac-flag {
  width: 34px; height: 25px; object-fit: cover; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(14, 9, 48, .10); display: block;
}
body.sf-modern .ac-item .ac-name { font-family: var(--sf-font); font-weight: 600; font-size: 15px; color: var(--ink); }
body.sf-modern .ac-item .ac-sub { font-family: var(--sf-font); font-size: 12.5px; font-weight: 400; color: #7C8BA1; }
body.sf-modern .ac-item .code {
  font-family: var(--sf-font); font-weight: 600; font-size: 12px;
  color: var(--sf-accent); background: var(--sf-chip-bg); border-radius: 8px; padding: 5px 9px;
}

body.sf-modern .pax-pop { border-radius: 16px; font-family: var(--sf-font); }

/* ---- Calendar face; datepicker.js pins it fully on screen ---- */
body.sf-modern .fldp {
  font-family: var(--sf-font);
  border-radius: 20px;
  border-color: #E6ECF4;
  box-shadow: 0 30px 70px rgba(14, 9, 48, .26);
}
body.sf-modern .fldp-f { border-radius: 12px; }
body.sf-modern .fldp-f.on { border-color: var(--sf-accent); box-shadow: inset 0 0 0 1px var(--sf-accent); }

/* =================== DESKTOP: the single pill bar =================== */
@media (min-width: 901px) {
  body.sf-modern .search-card {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
  }
  body.sf-modern .search-grid {
    background: #fff;
    border-radius: 100px;
    box-shadow: 0 26px 60px rgba(14, 9, 48, .28);
    padding: 8px;
    display: grid;
    grid-template-columns: 1.2fr 1.2fr .78fr .78fr 1.02fr auto;
    gap: 0;
    align-items: stretch;
  }
  body.sf-modern .search-grid .field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 20px 12px 24px;
    border-radius: 60px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  /* Hairline dividers between segments — drawn as ::before lines, NOT as a
     box-shadow: a shadow here would out-rank the focus lift's shadow, and
     the form's hidden inputs mean :first-child never matches a .field (the
     sibling combinator is what "not the first field" really is). Skipped
     around the merged Dates pair and before the round button. */
  body.sf-modern .search-grid .field ~ .field:not(.sf-date-b):not(:last-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--sf-divider);
    transition: opacity .15s ease;
  }
  /* The raised segment floats clear of its neighbouring dividers. */
  body.sf-modern .search-grid .field:focus-within::before,
  body.sf-modern .search-grid .field:focus-within + .field::before { opacity: 0; }
  /* The two date fields read as ONE "Dates" segment. */
  body.sf-modern .search-grid .field.sf-date-a { padding-right: 6px; }
  body.sf-modern .search-grid .field.sf-date-b { padding-left: 6px; }
  body.sf-modern .search-grid .field.sf-date-b label { visibility: hidden; }
  /* The pair reads as one range: "Sat 22 Aug – Wed 26 Aug". */
  body.sf-modern .search-grid .field.sf-date-b .dfval:not(.ph)::before { content: '– '; }
  body.sf-modern #returnField.rf-oneway { opacity: .45; }
  /* The signature move: the focused segment ENLARGES and floats above the bar. */
  body.sf-modern .search-grid .field:focus-within {
    background: #fff;
    transform: scale(1.06);
    box-shadow: 0 16px 40px rgba(14, 9, 48, .22);
    z-index: 6;
  }
  /* Round search button with a magnifier, vertically centred in the bar. */
  body.sf-modern .search-grid .field:last-child {
    padding: 0;
    box-shadow: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  body.sf-modern .search-grid .field:last-child label { display: none; }
  body.sf-modern .search-grid .btn-primary.btn-lg {
    width: 58px;
    height: 58px;
    min-width: 58px;
    padding: 0;
    border-radius: 50%;
    background: var(--sf-accent);
    color: #fff;
    font-size: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  body.sf-modern .search-grid .btn-primary.btn-lg::after {
    content: '';
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.5' y1='16.5' x2='21' y2='21'/></svg>") center / contain no-repeat;
  }
  body.sf-modern .search-grid .btn-primary.btn-lg:hover {
    background: #1560AE;
    transform: scale(1.06);
    box-shadow: 0 10px 26px rgba(27, 116, 206, .45);
  }
  /* Suggestion panels anchor to the enlarged segment. */
  body.sf-modern .ac-list { top: calc(100% + 14px); }
}

/* =================== MOBILE / NARROW: stacked field boxes =================== */
@media (max-width: 900px) {
  body.sf-modern .search-card {
    border-radius: 22px;
    padding: 16px;
    box-shadow: var(--shadow-lg);
  }
  body.sf-modern .trip-tabs {
    background: #EFF3F9;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    margin: 0 0 12px;
  }
  body.sf-modern .trip-tabs button { color: #5A6B82; }
  body.sf-modern .trip-tabs button.active { background: var(--navy); color: #fff; }
  body.sf-modern .search-grid .field {
    border: 1.5px solid #DCE4EF;
    border-radius: 15px;
    background: #fff;
    padding: 9px 14px;
    transition: border-color .16s ease, box-shadow .2s ease;
  }
  body.sf-modern .search-grid .field:focus-within {
    border-color: var(--sf-accent);
    box-shadow: 0 10px 26px rgba(14, 9, 48, .14);
  }
  body.sf-modern .search-grid .field.step-done { border-color: #1c9d5b; }
  body.sf-modern .search-grid .field.step-next { border-color: #1B74CE; }
  body.sf-modern .sf-swap { display: none; }
  body.sf-modern .search-grid .field:last-child { border: 0; padding: 0; background: transparent; box-shadow: none; }
  body.sf-modern .search-grid .field:last-child label { display: none; }
  body.sf-modern .search-grid .btn-primary.btn-lg {
    font-family: var(--sf-font);
    font-weight: 600;
    font-size: 15.5px;
    border-radius: 15px;
    padding: 15px 22px;
    width: 100%;
    background: var(--sf-accent);
    color: #fff;
  }
  body.sf-modern .field input { font-size: 16px; }   /* stops the iOS focus zoom */
}

@media (prefers-reduced-motion: reduce) {
  body.sf-modern .search-grid .field:focus-within,
  body.sf-modern .search-grid .btn-primary.btn-lg:hover,
  body.sf-modern .sf-swap:hover { transform: none; }
}


/* =====================================================================
   FLIGHTFARESNOW "CLEAR SKIES" LOOK (2026-08-21)
   Homepage hero + chrome tuned to the approved sample: sky photo-style
   backdrop, centred display headline, single pill search bar (sf-modern
   provides the bar itself), airy 100px+ section rhythm, DM Sans UI with
   Bricolage Grotesque display. Appended LAST on purpose - these rules
   out-rank every earlier layer without editing them.
   ===================================================================== */

/* ---- No italic-serif flourishes: the sample is all clean grotesque ---- */
h1 em, h2 em, .em, h1 span.em, h2 span.em {
  font-style: normal;
  font-family: inherit;
  color: inherit;
}

.container { max-width: 1140px; }

/* ---- Buttons: full pills ---- */
.btn { border-radius: 100px; }
.btn-primary { background: var(--lemon); color: #fff; }
.btn-primary:hover { background: #1560AE; color: #fff; }

/* ---- Sky hero (homepage only) ---- */
.home-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #245689 0%, #4C89C8 62%, #FFFFFF 100%);
  padding: clamp(96px, 13vh, 150px) 0 clamp(150px, 19vh, 215px);
  text-align: center;
}
.home-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
}
.home-hero .container { position: relative; z-index: 1; }
.home-hero h1 {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(14, 9, 48, .18);
}
.home-hero p.lead {
  display: block;
  margin: 16px auto 0;
  max-width: 52ch;
  font-size: clamp(16.5px, 1.6vw, 22px);
  font-weight: 600;
  color: #fff;
  opacity: .96;
  text-shadow: 0 1px 14px rgba(14, 9, 48, .16);
}

/* ---- Search bar rides up onto the sky; clouds continue behind it ---- */
.home-search { margin-top: clamp(-150px, -15vh, -100px); position: relative; z-index: 2; }

/* ---- Trust line under the bar (sits on the cloud fade) ---- */
.home-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  opacity: .85;
}

/* ---- Header over the sky: minimal white chrome, pill CTAs ---- */
body.has-hero .site-header .nav a { color: #fff; font-weight: 500; font-size: 14px; }
body.has-hero .site-header .header-phone {
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  border-radius: 100px;
  padding: 9px 16px;
  font-weight: 700;
  box-shadow: none;
}
body.has-hero .site-header .hdr-chat {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  border: 0;
  border-radius: 100px;
  padding: 9px 16px;
  font-weight: 600;
}
body.has-hero .site-header .burger { color: #fff; }

/* ---- Section rhythm: the sample breathes ---- */
.section { padding: clamp(76px, 9vw, 118px) 0; }
.section-head h2, .section h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.02em;
}
.section-head.center .sub { color: var(--muted); }

/* Tinted bands like the sample's lilac/grey sections */
.section#why { background: #E9F2FB !important; }
.section#faq { background: #F6F6F7 !important; }

/* Cards: calmer corners + softer shadows */
.deal, .feature, .panel { border-radius: 20px; }

/* Mobile hero */
@media (max-width: 640px) {
  .home-hero { padding: 84px 0 130px; }
  .home-hero h1 { font-size: 34px; }
  .home-hero p.lead { font-size: 15.5px; font-weight: 500; }
  .home-search { margin-top: -84px; }
  .home-trust { gap: 8px 18px; font-size: 12.5px; }
}

/* The sky fades to pure white; the strip under the search bar must be white
   too or a faint grey seam shows where the hero ends. */
body.has-hero { background: #fff; }
.home-search { padding-bottom: 34px; background: #fff; }

/* ---- Header logo variants: light over the hero sky, dark on white ---- */
.site-header .logo { position: relative; display: inline-flex; align-items: center; }
.site-header .logo .logo-light { display: none; }
body.has-hero .site-header:not(.scrolled) .logo .logo-dark { display: none; }
body.has-hero .site-header:not(.scrolled) .logo .logo-light { display: block; }

/* =====================================================================
   CLEAN INNER PAGES + ONE CONSISTENT MENU BAR (owner 2026-08-21)
   Every page that is not the homepage gets a light sky band instead of
   the old dark navy hero, so the (transparent) header reads identically
   everywhere: dark ink links on light ground, white links only over the
   homepage sky. Sky-blue accent family; no purple anywhere.
   ===================================================================== */

/* One header spec on every page */
.site-header .container { height: 72px; }
.site-header { background: rgba(255, 255, 255, 0); }
body:not(.has-hero) .site-header {
  background: #fff;
  border-bottom-color: var(--line);
}

/* Inner-page hero bands: light sky, ink text (inline-styled heroes like the
   deals photo hero keep their own inline background). */
.hero:not(.home-hero) {
  background: linear-gradient(180deg, #D9EAF9 0%, #F2F8FD 70%, #FFFFFF 100%);
}
.hero:not(.home-hero) h1 { color: var(--navy); }
.hero:not(.home-hero) p.lead { color: var(--muted); }
.hero:not(.home-hero) .eyebrow { color: var(--lemon); }
.hero:not(.home-hero) .trust-row { color: var(--muted); }

/* Content/policy pages: airy readable card */
.legal { border: 0; box-shadow: var(--shadow); border-radius: 22px; padding: 38px clamp(22px, 4vw, 48px) !important; }
.legal h2 { font-size: 22px !important; margin-top: 30px !important; }
.legal .note { border-radius: 14px !important; }

/* Lilac leftovers -> pale sky band names (safety net) */
.section#why { background: #E9F2FB !important; }

/* =====================================================================
   AA-STYLE MINIMAL HEADER + SEARCH ON THE SKY (owner round 3, 2026-08-21)
   ===================================================================== */

/* Inline nav retired everywhere; the Menu pill opens the drawer instead. */
.site-header .nav { display: none !important; }
.site-header .burger {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy);
}
.site-header .hdr-manage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy);
}
.site-header .header-phone {
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 9px 16px;
  font-weight: 700;
  background: #fff;
  color: var(--navy);
}
/* Over the homepage sky: frosted pills, Menu stays solid white like the sample */
body.has-hero .site-header:not(.scrolled) .hdr-manage,
body.has-hero .site-header:not(.scrolled) .header-phone {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.has-hero .site-header:not(.scrolled) .burger {
  background: #fff;
  border-color: transparent;
  color: var(--navy);
  font-size: 14px;
}
@media (max-width: 640px) {
  .site-header .hdr-manage span, .site-header .header-phone .pn { display: none; }
  .site-header .hdr-manage, .site-header .header-phone { padding: 9px 12px; }
}

/* The whole search block rides ON the sky, sample-style: taller hero,
   deeper pull-up, clouds visible around and below the pill bar. */
.home-hero { padding: clamp(108px, 14vh, 160px) 0 clamp(300px, 38vh, 420px); }
.home-hero h1 { text-shadow: 0 2px 26px rgba(14, 9, 48, .22); }
.home-search { margin-top: clamp(-330px, -33vh, -230px); background: transparent; padding-bottom: 10px; }
.home-trust { color: var(--navy); opacity: .92; text-shadow: 0 1px 10px rgba(255,255,255,.8); }

@media (max-width: 640px) {
  .home-hero { padding: 92px 0 250px; }
  .home-search { margin-top: -206px; }
}

/* ---- Airline strip under the hero (sample-style partner row) ---- */
.airline-strip { text-align: center; margin-top: 40px; }
.airline-strip .as-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.airline-strip .as-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 34px;
}
.airline-strip img {
  height: 26px;
  width: auto;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s, opacity .2s;
}
.airline-strip img:hover { filter: none; opacity: 1; }
@media (max-width: 640px) {
  .airline-strip .as-logos { gap: 14px 22px; }
  .airline-strip img:nth-child(n+7) { display: none; }
}

/* ---- Round 4 (owner 2026-08-21): bigger airline logos + clearer type ---- */
.airline-strip img { height: 38px; opacity: .7; }
.airline-strip .as-logos { gap: 20px 40px; }
.airline-strip .as-label { font-size: 13px; }
@media (max-width: 640px) { .airline-strip img { height: 30px; } }

/* Type clarity: the sample reads crisper because it has NO negative tracking
   on body text, darker secondary text, and default (subpixel) rendering.
   Match all three. */
body {
  letter-spacing: 0;
  -webkit-font-smoothing: auto;
}
h1, h2 { letter-spacing: -.012em; }
h3, h4 { letter-spacing: 0; }
:root { --muted: #4E4C6B; }
.section-head.center .sub, p.lead { font-weight: 500; }

/* Inner-page hero bands are LIGHT now, so text must inherit ink, not the old
   dark-hero white. Pages with their own dark/photo hero (deals destination
   pages) set color inline on their container and are unaffected. */
.hero:not(.home-hero) { color: var(--ink); }
.hero:not(.home-hero) .container { color: inherit; }

/* =====================================================================
   RESULTS PAGE REPAIR (owner 2026-08-21)
   The late "Clear Skies" .container cap (1140px) was out-ranking
   .container-wide purely by cascade order, squeezing the results grid by
   320px and making the flight-card columns collide. Re-assert the wide
   container here, and swap the near-black summary bar for the light sky
   band the rest of the site now uses.
   ===================================================================== */
.container-wide { max-width: 1460px; }

.results-top {
  background: linear-gradient(180deg, #D9EAF9 0%, #EFF6FC 100%);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.results-summary { color: var(--ink); }
.results-summary .pill {
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--navy);
}

/* Sidebar sort buttons: slim pills, not the full-size CTAs */
.filter-card .btn {
  padding: 9px 14px;
  font-size: 13.5px;
  justify-content: flex-start;
}

/* ---- Modify-booking popup: homepage-style search form (owner 2026-08-21) ---- */
.pdm-trip { display: flex; width: max-content; margin: 0 auto 16px; background: #EFF3F9; border-radius: 100px; padding: 4px; gap: 2px; }
.pdm-trip button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 20px; border-radius: 100px; cursor: pointer; }
.pdm-trip button.active { background: #fff; color: var(--navy); box-shadow: 0 2px 10px rgba(14,9,48,.12); }
.pdm-home { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pdm-home label { position: relative; font-size: 12px; font-weight: 600; color: var(--muted); display: block; }
.pdm-home label small { font-weight: 400; }
.pdm-fld, .pdm-home input, .pdm-home select {
  display: block; width: 100%; margin-top: 4px;
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 11px 14px; font-size: 15px; font-weight: 600; color: var(--ink);
  background: #fff; font-family: var(--sans);
}
.pdm-fld:focus { outline: none; border-color: var(--lemon); box-shadow: 0 0 0 3px rgba(27,116,206,.15); }
.pdm-acdrop { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(14,9,48,.18); margin-top: 4px; max-height: 250px; overflow-y: auto; display: none; }
.pdm-acdrop.show { display: block; }
.pdm-acitem { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font-size: 13.5px; }
.pdm-acitem small { color: var(--muted); }
.pdm-acitem .code { margin-left: auto; font-weight: 700; color: var(--lemon); background: #E9F2FB; border-radius: 8px; padding: 3px 8px; font-size: 12px; }
.pdm-acitem:hover, .pdm-acitem.hi { background: #F2F7FD; }
@media (max-width: 640px) { .pdm-home { grid-template-columns: 1fr; } }

/* =====================================================================
   MOBILE BOOKING FLOW (owner 2026-08-21) — passenger details + payment.
   Pattern: a SMALL flight-summary block up top, then a single calm column
   of one-field-per-line inputs sized for thumbs (50px targets, 16px text
   so iOS never auto-zooms). Shared classes, so BOTH pages inherit this.
   ===================================================================== */
@media (max-width: 900px) {

  /* A. Flight summary: compact card, one glance, no timeline furniture */
  .pd-mobile-leg-top { padding: 8px 12px; }
  .pd-mobile-leg-top b { font-size: 13.5px; }
  .pd-mobile-carrier { padding: 8px 12px 0; margin: 0; }
  .pd-mobile-carrier b { font-size: 12.5px; }
  .pd-mobile-flight-meta { display: none; }          /* FLIGHT / TOTAL TIME row */
  .pd-mobile-timeline { display: flex; align-items: center; gap: 10px; padding: 8px 12px 12px; }
  .pd-mobile-stop { flex: 0 0 auto; }
  .pd-mobile-stop-icon { display: none; }
  .pd-mobile-stop-info small { display: none; }      /* DEPARTS / ARRIVES labels */
  .pd-mobile-stop-info strong { font-size: 18px; letter-spacing: 0; }
  .pd-mobile-stop-info strong sup { font-size: 10px; }
  .pd-mobile-stop-info em { display: block; font-size: 10px; }
  .pd-mobile-airport { display: flex; gap: 5px; align-items: baseline; }
  .pd-mobile-airport b { font-size: 12px; }
  .pd-mobile-airport small { display: none; }        /* city name — code is enough here */
  .pd-mobile-journey { flex: 1 1 auto; text-align: center; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* B. The form: one calm column, thumb-sized targets */
  .book-layout .panel { padding: 18px 14px; border-radius: 18px; }
  .book-layout .panel h3 { font-size: 17px; }
  .form-grid { gap: 14px; }
  .form-grid .fld,
  .form-grid select {
    min-height: 50px;
    border-radius: 14px;
    font-size: 16px;
    padding: 12px 14px;
  }
  .form-grid label { font-size: 13px; }
  .field-err { font-size: 12.5px; }

  /* C. Primary actions: full-width pills you cannot miss */
  .book-layout .btn-block.btn-lg { min-height: 54px; font-size: 16.5px; border-radius: 100px; }
  .pd-modify-wrap button { width: 100%; padding: 13px 16px !important; border-radius: 100px !important; }
}

/* ---- Airline strip v2: bigger logos on an endless, gentle marquee ---- */
.airline-strip .as-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.airline-strip .as-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  padding: 4px 0;
  animation: as-scroll 36s linear infinite;
}
.airline-strip .as-track img {
  height: 46px;
  width: auto;
  flex: 0 0 auto;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .2s, opacity .2s;
}
.airline-strip .as-viewport:hover .as-track { animation-play-state: paused; }
.airline-strip .as-track img:hover { filter: none; opacity: 1; }
@keyframes as-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .airline-strip .as-track { gap: 30px; }
  .airline-strip .as-track img { height: 36px; display: inline-block; }
  /* the old nth-child hiding no longer applies — the marquee shows everyone */
  .airline-strip img:nth-child(n+7) { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  .airline-strip .as-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .airline-strip .as-track img[aria-hidden] { display: none; }
}

/* ---- Deal cards v2 (owner 2026-08-21): sample-style clean cards ----
   Inset rounded photo, quiet typography, ONE price (the image-corner
   "From $X" pill duplicated the price line and is hidden), ink price
   instead of green, lift on hover only. */
.deal {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 8px;
  box-shadow: none;
  overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.deal:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(14, 9, 48, .12); border-color: transparent; }
.deal .img { border-radius: 14px; overflow: hidden; }
.deal .img .tag { display: none; }
.deal .body { padding: 13px 8px 9px; }
.deal .route { font-size: 16.5px; font-weight: 700; color: var(--navy); }
.deal .body .muted { font-size: 12.5px; margin-top: 2px; }
.deal .price { color: var(--navy); font-size: 20px; font-weight: 800; margin-top: 9px; }
.deal .price small { color: var(--muted); font-weight: 500; font-size: 12.5px; }

/* ---- Split CTA section (sample-style, owner 2026-08-21) ---- */
.split-wrap {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}
.split-visual { position: relative; }
.sv-card {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  box-shadow: 0 24px 60px rgba(14, 9, 48, .14);
}
.sv-card svg { display: block; width: 100%; height: 100%; }
.sv-chip {
  position: absolute;
  left: 24px;
  bottom: 30px;
  background: #fff;
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 16px 40px rgba(14, 9, 48, .22);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 15px;
}
.sv-chip > b { color: var(--navy); font-size: 17px; letter-spacing: .02em; }
.sv-chip-line { height: 1px; background: var(--line); }
.sv-chip small { color: var(--muted); font-size: 12px; }
.sv-chip-phone { color: var(--lemon); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.split-copy h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; margin: 0 0 16px; color: var(--navy); }
.split-copy p { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0 0 26px; max-width: 56ch; }
@media (max-width: 860px) {
  .split-wrap { grid-template-columns: 1fr; }
  .sv-card { max-width: 100%; }
  .split-copy { text-align: center; }
  .split-copy p { margin-left: auto; margin-right: auto; }
}

/* ---- Type match, round 5 (owner 2026-08-21): the sample runs display
   type at weight 500 in a Pangea-like grotesque. Schibsted Grotesk is the
   closest licensed-free face; body stays DM Sans at the sample's 16px. ---- */
body { font-size: 16px; }
h1, h2 { font-family: var(--serif); font-weight: 500; }
h1 b, h2 b, .home-hero h1 { font-weight: 600; }
.section-head h2, .section h2, .split-copy h2 { font-weight: 500; }

/* =====================================================================
   MOBILE SIMPLICITY PASS (owner 2026-08-21)
   1) The MAIN search form goes one field per line on phones.
   2) Every form goes single-column with 48px+ touch fields.
   3) The header logo gets guaranteed room — pills shrink before it does.
   ===================================================================== */
@media (max-width: 900px) {
  /* Main search widget: one field per line (was 2-up) */
  .search-grid { grid-template-columns: 1fr !important; gap: 10px; }
}

@media (max-width: 640px) {
  /* Header: the logo never shrinks or clips; the pills give way instead */
  .site-header .container { gap: 8px; padding: 0 12px; }
  .site-header .logo { flex: 0 0 auto; }
  .site-header .logo img { height: 30px; max-height: 30px; width: auto; max-width: 46vw; object-fit: contain; object-position: left center; }
  .header-cta { gap: 6px; flex: 0 1 auto; min-width: 0; }
  .site-header .header-phone, .site-header .hdr-manage { padding: 8px 10px; }
  .site-header .burger { padding: 8px 12px; }

  /* Every form: single calm column, thumb-sized fields */
  .form-grid { grid-template-columns: 1fr !important; }
  .es-grid { grid-template-columns: 1fr !important; }
  .es-grid .es-acq, .es-acq { width: 100%; }
  .fld,
  .form-grid input:not([type="checkbox"]):not([type="radio"]),
  .form-grid select,
  .es-grid input:not([type="checkbox"]):not([type="radio"]),
  .es-grid select {
    font-size: 16px;
    min-height: 48px;
    border-radius: 12px;
    width: 100%;
  }
}

@media (max-width: 400px) {
  /* Tiny phones: Menu pill collapses to the icon, logo keeps its word-mark */
  .site-header .burger .mlabel { display: none; }
  .site-header .hdr-manage { display: none; }
}

/* ---- Search-loading popup, Clear-Skies edition (owner 2026-08-21) ---- */
.search-modal { border-radius: 24px; max-width: 480px; box-shadow: 0 40px 90px rgba(14, 9, 48, .38); }
.sm-head {
  background: linear-gradient(180deg, #2A5E93 0%, #4C89C8 78%, #7FB0DE 100%);
  padding: 26px 24px 22px;
}
.sm-head::after {
  right: -70px; top: auto; bottom: -90px;
  width: 260px; height: 170px; border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  filter: blur(26px);
}
.sm-badge, .sm-trust, .sm-usps { display: none; }
.sm-plane { display: inline-block; position: relative; z-index: 2; margin-bottom: 6px; }
.sm-route { font-family: var(--serif); font-weight: 600; font-size: 24px; margin: 4px 0 6px; }
.sm-route .sm-arrow { opacity: .75; font-weight: 400; }
.sm-dates {
  display: inline-block; position: relative; z-index: 2;
  background: rgba(255, 255, 255, .18); border-radius: 100px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600;
}
.sm-body h3 { font-family: var(--serif); font-weight: 600; color: var(--navy); }
.sm-progress { border-radius: 100px; background: #E9F2FB; }
.sm-progress i { background: linear-gradient(90deg, #3D93E6, #1B74CE); border-radius: 100px; }
.sm-chip { border: 1.5px solid var(--line); border-radius: 14px; }
.sm-call {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--lemon); color: #fff !important; border-radius: 100px;
  padding: 12px 22px; margin-top: 16px; text-align: center;
  box-shadow: 0 10px 26px rgba(27, 116, 206, .3);
}
.sm-call small { color: rgba(255, 255, 255, .85); font-size: 11.5px; letter-spacing: .02em; text-transform: none; }
.sm-call b { color: #fff; display: inline-flex; align-items: center; gap: 7px; font-size: 16px; }