/* =========================================================
   The Travel Home — site stylesheet
   ---------------------------------------------------------
   Layers, in cascade order:
     1. Core design system  — tokens, typography, components
     2. Header / footer
     3. Booking: hero, search card, destination + results cards
     4. Pages: booking layout, payment, about / contact / legal
     5. App layer  — components that exist in our Razor views but
                     not in the supplied HTML (filter sidebar,
                     server-rendered result cards, search polling,
                     model-validation states)
     6. Responsive — breakpoints last so they win

   Layers 1-4 and 6 come from the client's supplied design; the
   app layer restyles our own tested components to match it.
   ========================================================= */

/* ============ 1. CORE DESIGN SYSTEM ============ */

:root{
  /* Brand palette */
  --navy-950:#070E1D;
  --navy-900:#0B1830;
  --navy-800:#0E1F3D;
  --navy-700:#16264A;
  --blue-600:#2F5FFF;
  --blue-500:#4A73FF;
  --sky-400:#6FC3FF;
  --sky-300:#9ED8FF;
  --ice-100:#F5F8FC;
  --white:#FFFFFF;
  --gray-500:#7C8AA3;
  --gray-300:#B9C3D6;
  --gray-100:#E7ECF5;
  --amber:#FFB35C;
  --success:#2FBE7A;
  --danger:#FF5B6E;

  /* Surfaces */
  --surface-glass: rgba(255,255,255,0.62);
  --surface-glass-dark: rgba(11,24,48,0.55);
  --border-glass: rgba(255,255,255,0.45);

  /* Typography */
  --font-display:'Sora', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;

  /* Radii */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-full:999px;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(11,24,48,0.08);
  --shadow-md: 0 12px 32px rgba(11,24,48,0.12);
  --shadow-lg: 0 24px 60px rgba(11,24,48,0.18);
  --shadow-glow: 0 10px 40px rgba(47,95,255,0.35);

  /* Layout */
  --container: 1240px;
  --header-h: 84px;
  --transition: 0.28s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--navy-900);
  background:var(--ice-100);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-900);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:700;
}
h1{ font-size:clamp(2.2rem,4vw,3.4rem); letter-spacing:-0.02em; }
h2{ font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-0.01em; }
h3{ font-size:1.4rem; }
p{ margin:0 0 1em; color:var(--gray-500); }

:focus-visible{
  outline:3px solid var(--blue-500);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }

.section-head{
  max-width:640px;
  margin:0 auto 48px;
  text-align:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-600);
  background:rgba(47,95,255,0.08);
  padding:8px 16px;
  border-radius:var(--r-full);
  margin-bottom:16px;
}
.eyebrow::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--blue-600);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  border-radius:var(--r-full);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.98rem;
  border:none;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{
  background:linear-gradient(135deg,var(--blue-600),var(--sky-400));
  color:var(--white);
  box-shadow:var(--shadow-glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 46px rgba(47,95,255,0.45); }
.btn-dark{
  background:var(--navy-900);
  color:var(--white);
}
.btn-dark:hover{ background:var(--navy-950); transform:translateY(-2px); }
.btn-outline{
  background:transparent;
  color:var(--navy-900);
  border:1.5px solid var(--gray-300);
}
.btn-outline:hover{ border-color:var(--blue-600); color:var(--blue-600); }
.btn-ghost{
  background:rgba(255,255,255,0.14);
  color:var(--white);
  border:1px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.24); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 20px; font-size:.86rem; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ---------- Cards ---------- */
.card{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:28px;
  transition:transform var(--transition), box-shadow var(--transition);
}
.card-hover:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.card-glass{
  background:var(--surface-glass);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-glass);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
}
.card-3d{
  transform-style:preserve-3d;
  perspective:1000px;
}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:var(--r-full);
  font-size:.78rem;
  font-weight:600;
  font-family:var(--font-display);
}
.badge-blue{ background:rgba(47,95,255,0.1); color:var(--blue-600); }
.badge-amber{ background:rgba(255,179,92,0.16); color:#B96B10; }
.badge-success{ background:rgba(47,190,122,0.14); color:#1D8A5A; }
.badge-dark{ background:var(--navy-900); color:var(--white); }

/* ---------- Forms / Inputs ---------- */
.field{ margin-bottom:20px; }
.field label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--navy-900);
  margin-bottom:8px;
  font-family:var(--font-display);
}
.field .hint{ font-size:.78rem; color:var(--gray-500); margin-top:6px; }
.field .error-text{ font-size:.78rem; color:var(--danger); margin-top:6px; display:none; }
.field.has-error .error-text{ display:block; }
.field.has-error input,
.field.has-error select{ border-color:var(--danger) !important; }

.input,
select.input,
textarea.input{
  width:100%;
  padding:14px 16px;
  border-radius:var(--r-md);
  border:1.5px solid var(--gray-100);
  background:var(--white);
  font-size:.96rem;
  color:var(--navy-900);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.input:focus, select.input:focus, textarea.input:focus{
  border-color:var(--blue-500);
  box-shadow:0 0 0 4px rgba(47,95,255,0.12);
  outline:none;
}
.input::placeholder{ color:var(--gray-300); }
textarea.input{ resize:vertical; min-height:120px; }

.input-group{ position:relative; }
.input-group .input{ padding-left:44px; }
.input-group .input-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--gray-500); pointer-events:none;
}
.input-group .toggle-visibility{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--gray-500); padding:4px;
}

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--gray-500); }
.checkbox-row input{ margin-top:3px; width:18px; height:18px; accent-color:var(--blue-600); }

.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }

/* ---------- Dropdowns ---------- */
.dropdown{ position:relative; }
.dropdown-panel{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  min-width:280px;
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:20px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index:60;
}
.dropdown.open .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- Alerts ---------- */
.alert{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-radius:var(--r-md);
  font-size:.9rem;
  margin-bottom:18px;
}
.alert svg{ width:20px; height:20px; flex-shrink:0; }
.alert-success{ background:rgba(47,190,122,0.12); color:#1D8A5A; }
.alert-error{ background:rgba(255,91,110,0.12); color:#C6303F; }
.alert-info{ background:rgba(47,95,255,0.1); color:var(--blue-600); }

/* ---------- Modals ---------- */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(7,14,29,0.55);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity var(--transition), visibility var(--transition);
  z-index:200;
  padding:20px;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{
  background:var(--white);
  border-radius:var(--r-xl);
  padding:32px;
  max-width:440px;
  width:100%;
  transform:translateY(20px) scale(.97);
  transition:transform var(--transition);
}
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:20px; right:20px;
  background:var(--gray-100); border:none; border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
}

/* ---------- Utility ---------- */
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.text-muted{ color:var(--gray-500); }
.text-blue{ color:var(--blue-600); }
.w-full{ width:100%; }
.divider{ height:1px; background:var(--gray-100); margin:24px 0; border:none; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- Floating decor ---------- */
.floaty{ animation:floaty 6s ease-in-out infinite; }
.floaty-slow{ animation:floaty 9s ease-in-out infinite; }
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-18px) rotate(2deg); }
}
.spin-slow{ animation:spin 40s linear infinite; }
@keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

/* ---------- Page hero banners (inner pages) ---------- */
.page-hero{
  position:relative;
  overflow:hidden;
  background:
    url('/img/backgrounds/page-hero-pattern.svg'),
    linear-gradient(135deg,var(--navy-950) 0%,var(--navy-900) 45%,#16305F 100%);
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  color:var(--white);
  padding:150px 0 90px;
  text-align:center;
}
.page-hero h1{ color:var(--white); }
.page-hero p{ color:rgba(255,255,255,0.78); max-width:560px; margin:0 auto; }
.page-hero .decor-pin{ position:absolute; opacity:.5; }

/* Breadcrumb-ish tag under header on inner pages */
.crumb{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; color:rgba(255,255,255,0.7);
  margin-bottom:18px;
}

/* ============ 2. HEADER ============ */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:transparent;
  transition:background var(--transition), box-shadow var(--transition), height var(--transition);
}
.site-header.solid{
  background:rgba(245,248,252,0.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 6px 24px rgba(11,24,48,0.06);
  height:76px;
}
.header-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.header-logo img{ height:38px; width:auto; }
.header-logo{ display:flex; align-items:center; flex-shrink:0; }

.main-nav{ display:flex; align-items:center; gap:8px; }
.main-nav a{
  padding:10px 16px;
  border-radius:var(--r-full);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  color:var(--navy-900);
  transition:background var(--transition), color var(--transition);
}
.site-header:not(.solid) .main-nav a,
.site-header:not(.solid) .header-logo span{ color:var(--white); }
.main-nav a:hover, .main-nav a.active{
  background:rgba(47,95,255,0.1);
  color:var(--blue-600);
}
.site-header:not(.solid) .main-nav a:hover,
.site-header:not(.solid) .main-nav a.active{
  background:rgba(255,255,255,0.16);
  color:var(--white);
}

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.header-pref{
  display:flex; align-items:center; gap:4px;
  font-size:.85rem; font-weight:600;
  padding:8px 12px;
  border-radius:var(--r-full);
  color:var(--navy-900);
  background:rgba(11,24,48,0.05);
}
.site-header:not(.solid) .header-pref{
  color:var(--white);
  background:rgba(255,255,255,0.14);
}
.header-actions .btn-outline{
  border-color:rgba(11,24,48,0.18);
}
.site-header:not(.solid) .header-actions .btn-outline{
  border-color:rgba(255,255,255,0.5);
  color:var(--white);
}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border-radius:50%;
  border:none;
  background:rgba(11,24,48,0.06);
  color:var(--navy-900);
}
.site-header:not(.solid) .nav-toggle{ background:rgba(255,255,255,0.16); color:var(--white); }
.nav-toggle svg{ width:22px; height:22px; }

.mobile-nav{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(340px,86vw);
  background:var(--white);
  box-shadow:-10px 0 40px rgba(11,24,48,0.18);
  transform:translateX(100%);
  transition:transform var(--transition);
  z-index:150;
  padding:28px 24px;
  overflow-y:auto;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.mobile-nav a{
  display:block;
  padding:14px 6px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  color:var(--navy-900);
  border-bottom:1px solid var(--gray-100);
}
.mobile-nav .header-pref{ color:var(--navy-900); background:var(--gray-100); }
.mobile-nav-actions{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.mobile-nav-scrim{
  position:fixed; inset:0; background:rgba(7,14,29,0.45);
  opacity:0; visibility:hidden; transition:opacity var(--transition), visibility var(--transition);
  z-index:140;
}
.mobile-nav-scrim.open{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }

/* ============ 2. FOOTER ============ */
.site-footer{
  background:var(--navy-900);
  color:rgba(255,255,255,0.72);
  padding:72px 0 28px;
  position:relative;
  overflow:hidden;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;
  gap:32px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand .header-logo{ margin-bottom:16px; }
.footer-brand p{ color:rgba(255,255,255,0.6); max-width:280px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08);
  transition:background var(--transition), transform var(--transition);
}
.footer-social a:hover{ background:var(--blue-600); transform:translateY(-3px); }
.footer-social svg{ width:16px; height:16px; color:#fff; }

.footer-col h4{
  color:#fff;
  font-size:.95rem;
  letter-spacing:.02em;
  margin-bottom:18px;
}
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ color:rgba(255,255,255,0.62); font-size:.92rem; transition:color var(--transition); }
.footer-col a:hover{ color:var(--sky-400); }

.footer-newsletter form{ display:flex; gap:8px; margin-top:6px; }
.footer-newsletter input{
  flex:1;
  padding:12px 14px;
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:.88rem;
}
.footer-newsletter input::placeholder{ color:rgba(255,255,255,0.45); }
.footer-newsletter button{
  padding:12px 16px;
  border-radius:var(--r-md);
  border:none;
  background:linear-gradient(135deg,var(--blue-600),var(--sky-400));
  color:#fff;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-top:24px;
  font-size:.82rem;
  color:rgba(255,255,255,0.5);
}
.payment-icons{ display:flex; gap:10px; }
.payment-icons span{
  padding:6px 12px;
  border-radius:8px;
  background:rgba(255,255,255,0.08);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.03em;
}

/* ============ 3. BOOKING / HERO / RESULTS ============ */
/* ================= HERO ================= */
.hero{
  position:relative;
  /* Client-supplied banner, cropped from 1942x809 to the hero's ratio at
     1440x699 — no upscaling at any common viewport width. The gradient runs
     left-to-right rather than diagonally: the headline and CTAs sit on the
     left, so that side needs the contrast, while the right stays clear enough
     to read as photography. hero-bg.svg underneath covers ultra-wide screens
     where the raster runs out. */
  background:
    linear-gradient(90deg,
      rgba(7,14,29,0.90) 0%,
      rgba(8,18,42,0.78) 34%,
      rgba(11,24,48,0.52) 62%,
      rgba(16,38,88,0.40) 100%),
    url('/img/backgrounds/hero-london.jpg'),
    url('/img/backgrounds/hero-bg.svg');
  background-size:cover, cover, cover;
  background-position:center, center center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  /* Vertical only. The supplied rule used a single value, which applied the
     same 140px to left and right: on a phone that left ~150px of usable width,
     so the copy overflowed the viewport. Horizontal spacing belongs to
     .container, which also lines the hero copy up with the header logo. */
  padding:calc(var(--header-h) + 56px) 0 120px;
  overflow:hidden;
  color:var(--white);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr;
  align-items:center;
  gap:40px;
  position:relative;
  z-index:5;
}
.hero-copy .eyebrow{ background:rgba(255,255,255,0.12); color:var(--sky-300); }
.hero-copy .eyebrow::before{ background:var(--sky-300); }
.hero-copy h1{ color:var(--white); }
.hero-copy p.lead{ color:rgba(255,255,255,0.78); font-size:1.12rem; max-width:480px; }
.hero-cta-row{ display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:32px; margin-top:44px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family:var(--font-display); font-size:1.6rem; color:#fff; }
.hero-stats div span{ font-size:.82rem; color:rgba(255,255,255,0.6); }

.hero-scene{
  position:relative;
  height:460px;
  perspective:1400px;
}
.hero-scene .scene-globe{
  position:absolute; right:0; top:10%;
  width:78%;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,0.35));
  animation:spin 50s linear infinite;
}
.hero-scene .scene-plane{
  position:absolute; left:-6%; top:18%;
  width:64%;
  z-index:4;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,0.35));
}
.hero-scene .scene-cloud-a{ position:absolute; left:0; bottom:14%; width:44%; z-index:3; }
.hero-scene .scene-cloud-b{ position:absolute; right:6%; bottom:0; width:38%; z-index:2; opacity:.85; }
.hero-scene .scene-pin{ position:absolute; width:34px; z-index:5; }
.pin-1{ top:8%; left:38%; }
.pin-2{ top:52%; left:8%; }
.pin-3{ bottom:18%; right:12%; }

.hero-bg-orb{
  position:absolute;
  width:600px; height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,195,255,0.25),transparent 70%);
  top:-200px; left:-120px;
  z-index:1;
}

/* ================= SEARCH CARD ================= */
.search-wrap{
  position:relative;
  z-index:20;
  margin-top:-110px;
}
.search-card{
  padding:14px 28px 28px;
}
.search-tabs{
  display:flex;
  gap:6px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.search-tabs button{
  border:none;
  background:transparent;
  padding:10px 20px;
  border-radius:var(--r-full);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.9rem;
  color:var(--gray-500);
  transition:background var(--transition), color var(--transition);
}
.search-tabs button.active{
  background:var(--navy-900);
  color:#fff;
}

.search-fields{
  display:grid;
  grid-template-columns:1fr 56px 1fr 1fr 1fr 1fr auto;
  gap:0;
  align-items:stretch;
  background:var(--white);
  border-radius:var(--r-lg);
  border:1.5px solid var(--gray-100);
  overflow:visible;
}
.search-fields.multi-city{ grid-template-columns:1fr; }

.field-block{
  padding:14px 18px;
  position:relative;
  border-right:1px solid var(--gray-100);
}
.search-fields > .field-block:last-of-type{ border-right:none; }
.field-block .fb-label{
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-500); margin-bottom:6px;
}
.field-block .fb-label svg{ width:14px; height:14px; }
.field-block .fb-value{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--navy-900); }
.field-block .fb-sub{ font-size:.78rem; color:var(--gray-500); margin-top:2px; }
.field-block button.fb-trigger{
  all:unset; cursor:pointer; display:block; width:100%;
}

.swap-btn{
  align-self:center;
  justify-self:center;
  width:44px; height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue-600),var(--sky-400));
  color:#fff;
  border:4px solid var(--white);
  box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
  z-index:5;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.swap-btn svg{ width:18px; height:18px; }
.swap-btn:hover{ transform:rotate(180deg); }

.search-submit{
  display:flex; align-items:center; justify-content:center;
  padding:10px;
}
.search-submit .btn{ height:100%; padding:16px 30px; }

.search-extra-row{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  margin-top:16px;
}
.chip-toggle{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding:8px 16px; border-radius:var(--r-full);
  background:var(--gray-100); color:var(--navy-900);
  font-size:.82rem; font-weight:600;
  border:none;
  display:flex; align-items:center; gap:6px;
}
.chip input{ accent-color:var(--blue-600); }

/* Multi city rows */
.multi-city-row{
  display:grid;
  grid-template-columns:1fr 56px 1fr 1fr auto;
  align-items:stretch;
  border-bottom:1px solid var(--gray-100);
}
.multi-city-row:last-child{ border-bottom:none; }
.remove-city{
  align-self:center; justify-self:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--gray-100); border:none; color:var(--danger);
  display:flex; align-items:center; justify-content:center;
}
.add-city-btn{ margin-top:14px; }

/* ============== Dropdown panels for airport/date/travellers ============== */
.airport-panel{ width:340px; max-height:360px; overflow-y:auto; }
.airport-search{ margin-bottom:14px; }
.airport-option{
  display:flex; align-items:center; gap:12px;
  padding:10px 8px; border-radius:var(--r-md);
  transition:background var(--transition);
}
.airport-option:hover{ background:var(--gray-100); }
.airport-option .code-badge{
  width:44px; height:44px; border-radius:12px;
  background:rgba(47,95,255,0.1); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  flex-shrink:0;
}
.airport-option strong{ font-family:var(--font-display); font-size:.94rem; }
.airport-option span{ display:block; font-size:.78rem; color:var(--gray-500); }

.traveller-panel{ width:300px; }
.traveller-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--gray-100); }
.traveller-row:last-of-type{ border-bottom:none; }
.traveller-row strong{ display:block; font-size:.92rem; }
.traveller-row span{ font-size:.78rem; color:var(--gray-500); }
.stepper{ display:flex; align-items:center; gap:12px; }
.stepper button{
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid var(--gray-300); background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--navy-900);
}
.stepper button:disabled{ opacity:.35; }
.class-options{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.class-options button{
  padding:8px 14px; border-radius:var(--r-full); border:1.5px solid var(--gray-100);
  background:#fff; font-size:.82rem; font-weight:600;
}
.class-options button.active{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }

/* ============== Calendar ============== */
.calendar-panel{ width:320px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-head strong{ font-family:var(--font-display); }
.cal-nav{ display:flex; gap:6px; }
.cal-nav button{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--gray-100); background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.cal-nav button svg{ width:16px; height:16px; }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:.72rem; color:var(--gray-500); margin-bottom:6px; font-weight:700; }
.cal-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-days button{
  aspect-ratio:1;
  border:none; background:transparent; border-radius:10px;
  font-size:.86rem; color:var(--navy-900);
}
.cal-days button:hover:not(:disabled){ background:var(--gray-100); }
.cal-days button.today{ border:1.5px solid var(--blue-600); }
.cal-days button.selected{ background:var(--blue-600); color:#fff; font-weight:700; }
.cal-days button.in-range{ background:rgba(47,95,255,0.12); border-radius:0; }
.cal-days button.empty, .cal-days button:disabled{ color:var(--gray-300); pointer-events:none; }
.cal-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.cal-footer button.today-btn{ background:none; border:none; color:var(--blue-600); font-weight:600; font-size:.86rem; }

/* ============== Section: destination / offer / deal cards ============== */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

.dest-card{ overflow:hidden; padding:0; position:relative; }
.dest-card img{ width:100%; height:200px; object-fit:cover; }
.dest-card .dest-body{ padding:20px; }
.dest-card .dest-fare{ font-family:var(--font-display); font-weight:700; color:var(--blue-600); font-size:1.05rem; }
.dest-card .dest-fare span{ font-size:.76rem; color:var(--gray-500); font-weight:500; display:block; }
.dest-card .dest-body .flex-between{ margin-top:14px; }

.offer-card{ overflow:hidden; padding:0; color:#fff; position:relative; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; }
.offer-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.offer-card .offer-overlay{ position:relative; z-index:1; padding:26px; background:linear-gradient(0deg,rgba(7,14,29,0.75),transparent 70%); }
.offer-card h3{ color:#fff; margin-bottom:6px; }
.offer-card p{ color:rgba(255,255,255,0.82); margin-bottom:14px; }

.why-card{ text-align:left; }
.why-card .icon-wrap{
  width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg,rgba(47,95,255,0.12),rgba(111,195,255,0.16));
  display:flex; align-items:center; justify-content:center; color:var(--blue-600);
  margin-bottom:18px;
}
.why-card .icon-wrap svg{ width:26px; height:26px; }

.blog-card{ overflow:hidden; padding:0; }
.blog-card img{ width:100%; height:260px; object-fit:cover; }
.blog-card .blog-body{ padding:22px; }
.blog-card .blog-meta{ font-size:.78rem; color:var(--gray-500); margin-bottom:8px; }

.trust-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  background:var(--navy-900);
  border-radius:var(--r-xl);
  padding:44px;
  color:#fff;
}
.trust-item{ display:flex; align-items:center; gap:14px; }
.trust-item .icon-wrap{
  width:52px; height:52px; border-radius:14px;
  background:rgba(255,255,255,0.1); color:var(--sky-400);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.trust-item .icon-wrap svg{ width:24px; height:24px; }
.trust-item strong{ display:block; font-family:var(--font-display); }
.trust-item span{ font-size:.82rem; color:rgba(255,255,255,0.62); }

/* ============== Section: search results ============== */
.results-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  margin-top:-56px; position:relative; z-index:10;
}
.results-bar .rb-route{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.results-bar .rb-route strong{ font-family:var(--font-display); font-size:1.15rem; }
.results-bar .rb-route span{ font-size:.84rem; color:var(--gray-500); }
.results-bar .rb-route svg{ width:16px; height:16px; color:var(--blue-600); vertical-align:-2px; }

.results-layout{ display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:flex-start; margin-top:24px; }

.filters-card{ position:sticky; top:calc(var(--header-h) + 16px); }
.filters-card .fc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.filters-card .fc-head button{ background:none; border:none; color:var(--blue-600); font-size:.82rem; font-weight:600; }
.filter-group{ padding:16px 0; border-top:1px solid var(--gray-100); }
.filter-group:first-of-type{ border-top:none; padding-top:0; }
.filter-group h4{ font-family:var(--font-display); font-size:.9rem; margin-bottom:12px; }
.filter-option{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:.88rem; color:var(--gray-500); }
.filter-option label{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.filter-option input{ accent-color:var(--blue-600); width:16px; height:16px; }
.filter-option .fo-count{ font-size:.76rem; color:var(--gray-300); }
.price-range{ width:100%; accent-color:var(--blue-600); margin-top:6px; }
.price-range-value{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--gray-500); margin-top:4px; }

.sort-tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.sort-tabs button{
  padding:10px 18px; border-radius:var(--r-full); border:1.5px solid var(--gray-100); background:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.84rem; color:var(--gray-500);
}
.sort-tabs button.active{ border-color:var(--blue-600); color:var(--blue-600); background:rgba(47,95,255,0.06); }
.results-count{ font-size:.86rem; color:var(--gray-500); margin-bottom:16px; }

.flight-card{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.flight-card .fc-airline{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:150px; flex-shrink:0; }
.flight-card .fc-airline img{ height:34px; width:auto; border-radius:8px; }
.flight-card .fc-airline span{ font-size:.76rem; color:var(--gray-500); }
.flight-card .fc-route{ display:flex; align-items:center; gap:16px; flex:1; min-width:260px; }
.flight-card .fc-route .pt{ text-align:center; min-width:64px; }
.flight-card .fc-route .pt strong{ display:block; font-family:var(--font-display); font-size:1.15rem; }
.flight-card .fc-route .pt span{ font-size:.76rem; color:var(--gray-500); }
.flight-card .fc-mid{ flex:1; text-align:center; min-width:120px; }
.flight-card .fc-mid .dur{ font-size:.78rem; color:var(--gray-500); margin-bottom:4px; }
.flight-card .fc-mid .line{ position:relative; height:2px; background:var(--gray-100); }
.flight-card .fc-mid .line svg{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; color:var(--blue-600); background:#fff; }
.flight-card .fc-mid .stop-label{ font-size:.74rem; color:var(--gray-300); margin-top:4px; }
.flight-card .fc-price{ text-align:right; flex-shrink:0; width:150px; }
.flight-card .fc-price strong{ display:block; font-family:var(--font-display); font-size:1.35rem; color:var(--navy-900); }
.flight-card .fc-price span{ font-size:.76rem; color:var(--gray-500); }
.flight-card .fc-price .btn{ margin-top:10px; }
.flight-card .fc-tags{ display:flex; gap:6px; flex-wrap:wrap; width:100%; padding-top:14px; margin-top:4px; border-top:1px dashed var(--gray-100); }

.no-results{ text-align:center; padding:60px 20px; color:var(--gray-500); }
.no-results svg{ width:64px; height:64px; color:var(--gray-300); margin-bottom:16px; }

/* ============ 4. PAGES ============ */
/* ============ Shared inner-page layout ============ */
.booking-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:32px;
  align-items:flex-start;
  margin-top:-70px;
  position:relative;
  z-index:10;
}
.summary-card{ position:sticky; top:calc(var(--header-h) + 16px); }
.summary-card .route-line{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; margin-bottom:4px; }
.summary-card .route-line svg{ width:16px; height:16px; color:var(--blue-600); }
.summary-row{ display:flex; justify-content:space-between; padding:10px 0; font-size:.9rem; border-bottom:1px dashed var(--gray-100); }
.summary-row.total{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; border-bottom:none; color:var(--navy-900); }

/* ============ Flight details ============ */
.flight-summary-card{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.flight-route-visual{ display:flex; align-items:center; gap:18px; flex:1; min-width:280px; }
.flight-route-visual .pt{ text-align:center; }
.flight-route-visual .pt strong{ font-family:var(--font-display); font-size:1.6rem; display:block; }
.flight-route-visual .pt span{ font-size:.8rem; color:var(--gray-500); }
.route-line-visual{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-width:120px; }
.route-line-visual .line{ height:2px; background:var(--gray-100); width:100%; position:relative; }
.route-line-visual svg{ position:absolute; width:22px; height:22px; color:var(--blue-600); background:#fff; }
.route-line-visual .duration{ position:absolute; top:-26px; font-size:.78rem; color:var(--gray-500); font-weight:600; }

.detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:20px; }
.detail-item{ display:flex; gap:12px; align-items:flex-start; }
.detail-item .icon-wrap{ width:42px; height:42px; border-radius:12px; background:var(--gray-100); color:var(--blue-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.detail-item .icon-wrap svg{ width:20px; height:20px; }
.detail-item strong{ display:block; font-size:.92rem; }
.detail-item span{ font-size:.82rem; color:var(--gray-500); }

.accordion-item{ border-bottom:1px solid var(--gray-100); }
.accordion-item:last-child{ border-bottom:none; }
.accordion-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; background:none; border:none; width:100%; text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:.98rem; color:var(--navy-900);
}
.accordion-head svg{ width:18px; height:18px; transition:transform var(--transition); }
.accordion-item.open .accordion-head svg{ transform:rotate(180deg); }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height var(--transition); }
.accordion-item.open .accordion-body{ max-height:400px; }
.accordion-body p{ padding-bottom:16px; font-size:.9rem; }

.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

/* ============ Passenger details ============ */
.form-section-title{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.form-section-title .num{
  width:30px; height:30px; border-radius:50%; background:var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.82rem;
}

/* ============ Payment ============ */
.pay-tabs{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.pay-tabs button{
  flex:1; min-width:120px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; border-radius:var(--r-md); border:1.5px solid var(--gray-100); background:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--gray-500);
}
.pay-tabs button svg{ width:18px; height:18px; }
.pay-tabs button.active{ border-color:var(--blue-600); color:var(--blue-600); background:rgba(47,95,255,0.06); }
.pay-panel{ display:none; }
.pay-panel.active{ display:block; }

.secure-banner{
  display:flex; align-items:center; gap:14px;
  background:rgba(47,190,122,0.08); border-radius:var(--r-md);
  padding:16px 18px; margin-top:20px;
}
.secure-banner .icon-wrap{ width:40px; height:40px; border-radius:10px; background:rgba(47,190,122,0.16); color:var(--success); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.secure-banner strong{ font-family:var(--font-display); font-size:.9rem; display:block; }
.secure-banner span{ font-size:.8rem; color:var(--gray-500); }

.card-preview{
  border-radius:20px;
  padding:26px;
  color:#fff;
  background:linear-gradient(135deg,var(--navy-900),var(--blue-600));
  margin-bottom:26px;
  position:relative;
  overflow:hidden;
  min-height:170px;
}
.card-preview::after{
  content:'';
  position:absolute; width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,0.08); right:-60px; top:-80px;
}
.card-preview .cp-number{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:.14em; margin:34px 0 18px; }
.card-preview .cp-row{ display:flex; justify-content:space-between; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; opacity:.8; }
.card-preview .cp-row strong{ display:block; font-size:.92rem; text-transform:none; letter-spacing:0; margin-top:4px; font-family:var(--font-body); font-weight:600; }

/* ============ About ============ */
.about-hero{ position:relative; }
.stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat-box{ text-align:center; }
.stat-box strong{ display:block; font-family:var(--font-display); font-size:2.2rem; color:var(--blue-600); }
.stat-box span{ font-size:.88rem; color:var(--gray-500); }
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.mission-vision-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mv-card{ position:relative; overflow:hidden; }
.mv-card .icon-wrap{ width:52px; height:52px; border-radius:14px; background:rgba(47,95,255,0.1); color:var(--blue-600); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }

/* ============ Contact ============ */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px; }
.contact-card{ text-align:center; }
.contact-card .icon-wrap{ width:60px; height:60px; border-radius:18px; background:linear-gradient(135deg,rgba(47,95,255,0.12),rgba(111,195,255,0.18)); color:var(--blue-600); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }

/* ============ Auth (login / register) ============ */
.auth-split{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.auth-visual{
  background:linear-gradient(160deg,var(--navy-950),var(--blue-600) 140%);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:0px;
  overflow:hidden;
}
.auth-visual img{ position:relative; z-index:2; max-width: 100%; }
.auth-visual .auth-copy{ position:absolute; bottom:60px; left:60px; right:60px; z-index:3; color:#fff; }
.auth-visual .auth-copy h2{ color:#fff; }
.auth-visual .auth-copy p{ color:rgba(255,255,255,0.75); }
.auth-form-side{
  display:flex; align-items:center; justify-content:center;
  padding:60px 40px;
}
.auth-box{ width:100%; max-width:420px; }
.auth-box .header-logo{ margin-bottom:32px; }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--gray-500); font-size:.82rem; }
.auth-divider::before,.auth-divider::after{ content:''; flex:1; height:1px; background:var(--gray-100); }
.strength-meter{ height:6px; border-radius:4px; background:var(--gray-100); overflow:hidden; margin-top:8px; }
.strength-meter span{ display:block; height:100%; width:0%; transition:width var(--transition), background var(--transition); }
.strength-label{ font-size:.76rem; margin-top:6px; color:var(--gray-500); }
.back-home-link{
  position:fixed; top:24px; left:24px; z-index:50;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.86rem;
  color:var(--navy-900);
  background:#fff;
  padding:10px 16px; border-radius:var(--r-full);
  box-shadow:0 8px 24px rgba(11,24,48,0.14);
}
.back-home-link:hover{ color:var(--blue-600); }

/* ============ Terms ============ */
.legal-layout{ display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:flex-start; }
.legal-body{ max-width:820px; }
.legal-body h2{ margin-top:44px; font-size:1.4rem; display:flex; align-items:center; gap:12px; }
.legal-body h2 .num{ width:34px; height:34px; border-radius:10px; background:rgba(47,95,255,0.1); color:var(--blue-600); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; }
.legal-body p, .legal-body li{ color:var(--gray-500); font-size:.96rem; }
.legal-body ul{ padding-left:20px; list-style:disc; margin-bottom:16px; }
.legal-toc{ position:sticky; top:calc(var(--header-h) + 16px); }
.legal-toc a{ display:block; padding:8px 0; font-size:.86rem; color:var(--gray-500); border-bottom:1px solid var(--gray-100); }
.legal-toc a:hover{ color:var(--blue-600); }
.legal-updated{ font-size:.84rem; color:var(--gray-500); margin-bottom:0; }

/* ============ 5. APP LAYER ============ */
/* ---------------------------------------------------------------
   Token bridge.

   Our tested components (search panel, results filters, result
   cards, booking and confirmation screens) were authored against
   a --c-* / --ff-* / --radius-* token namespace. Rather than
   restyling several thousand lines of working CSS by hand — and
   risking the transactional screens — we re-point those tokens at
   the client's palette. Every component below then renders in The
   Travel Home's navy/blue, Sora/Inter and radii automatically.

   Change a colour in the :root block at the top of this file and
   it cascades through both layers.
   --------------------------------------------------------------- */
:root {
    --c-navy:       var(--navy-900);
    --c-navy-700:   var(--navy-700);
    --c-blue:       var(--blue-600);
    --c-blue-500:   var(--blue-500);
    --c-blue-100:   rgba(47, 95, 255, 0.10);
    --c-teal:       var(--sky-400);
    --c-teal-100:   rgba(111, 195, 255, 0.14);
    /* --c-accent lands on white surfaces: filter-group headings, the price
       slider thumbs and the small journey icons. The palest sky blue fails
       contrast badly there, so this maps to the brand blue. The one place that
       wanted a warm tone (the pending-booking dot) is overridden below. */
    --c-accent:     var(--blue-600);
    --c-link:       var(--blue-600);
    --c-text:       var(--navy-900);
    --c-text-muted: var(--gray-500);
    --c-bg:         var(--ice-100);
    --c-surface:    var(--white);
    --c-border:     var(--gray-100);
    --c-danger:     var(--danger);
    --c-success:    var(--success);

    --shadow:       var(--shadow-md);

    --radius-sm:    var(--r-sm);
    --radius:       var(--r-md);
    --radius-lg:    var(--r-lg);
    --radius-pill:  var(--r-full);

    --ff-body:      var(--font-body);
    --ff-display:   var(--font-display);
}

/* ---- Search panel, passenger popover, airport autocomplete, date picker ---- */
.search-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
}
.checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--ff-display);
    font-weight: 600;
    color: var(--c-navy);
    cursor: pointer;
    line-height: 1.45;
}
.checkbox input { accent-color: var(--c-blue); width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* Consent line: keep the wording flowing as one sentence beside the box
   (the text + links must live in a single span, not as bare flex children)
   and nudge the box to line up with the first row of text. */
.checkbox--consent { align-items: flex-start; }
.checkbox--consent input { margin-top: 3px; }
.consent-text { font-weight: 500; }
.consent-text a { white-space: nowrap; font-weight: 600; }

.search-submit { min-width: 220px; }

@media (max-width: 1080px) { .search-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px)  {
    .search-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .search-panel { padding: 20px; }
    .search-submit { width: 100%; min-width: 0; }
    .search-grid-bottom { flex-direction: column; align-items: stretch; }
    .search-grid-bottom .search-options { width: 100%; gap: 12px; }
    .search-grid-bottom .search-options .field { width: 100%; }
    .search-grid-bottom select { width: 100%; }
}
@media (max-width: 480px)  {
    .search-grid { grid-template-columns: 1fr; }
    .search-panel { padding: 16px; }
}

/* Passenger popover ----------------------------------------------------- */

.pax-trigger {
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pax-trigger > span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.pax-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;          /* anchor to the right edge of the field so growth is leftward */
    left: auto;
    width: 340px;
    max-width: 90vw;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    z-index: 30;
    display: none;
}
.pax-popover.is-open { display: block; }
@media (max-width: 720px) {
    /* On narrow screens, anchor to the field's full width so it never overflows */
    .pax-popover {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
    }
}
.pax-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}
.pax-row + .pax-row { border-top: 1px solid var(--c-border); }
.pax-row .label { font-family: var(--ff-display); font-weight: 600; color: var(--c-navy); }
.pax-row .label small { display: block; font-weight: 500; color: var(--c-text-muted); font-size: .8rem; }
.pax-counter {
    display: inline-flex; align-items: center; gap: 8px;
}
.pax-counter button {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-navy);
    font-size: 1.1rem;
    cursor: pointer;
}
.pax-counter button:disabled { opacity: .4; cursor: not-allowed; }
.pax-counter .val { min-width: 22px; text-align: center; font-weight: 700; color: var(--c-navy); }
.pax-popover .pax-done { width: 100%; margin-top: 12px; }

/* Autocomplete --------------------------------------------------------- */

.autocomplete {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 40;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}
.autocomplete.is-open { display: block; animation: ac-pop .15s ease; }
@keyframes ac-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.autocomplete::-webkit-scrollbar { width: 8px; }
.autocomplete::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 8px; }

.ac-item {
    display: grid;
    grid-template-columns: 52px 1fr auto 18px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
    border: 1px solid transparent;
}
.ac-item + .ac-item { margin-top: 2px; }
.ac-item:hover,
.ac-item.is-active {
    background: var(--c-blue-100);
    border-color: rgba(242, 169, 0,0.18);
    transform: translateX(2px);
}

.ac-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 30px;
    padding: 0 8px;
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
    color: #fff;
    border-radius: 8px;
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .04em;
    box-shadow: 0 2px 6px rgba(24, 26, 46,0.18);
}
.ac-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ac-city {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-navy);
    font-size: .98rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-name {
    color: var(--c-text-muted);
    font-size: .8rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-country {
    color: var(--c-text-muted);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-icon {
    width: 18px;
    height: 18px;
    color: var(--c-blue);
    opacity: .35;
    transition: opacity .15s ease, transform .25s ease;
}
.ac-item:hover .ac-icon,
.ac-item.is-active .ac-icon { opacity: 1; transform: translateX(3px) rotate(8deg); }

@media (max-width: 480px) {
    .ac-item { grid-template-columns: 44px 1fr auto; }
    .ac-country { display: none; }
    .ac-icon    { display: none; }
}

/* Flatpickr brand theme ------------------------------------------------ */
/* Surgical overrides only — never touch flatpickr's structural sizing/positioning,
   only colours, fonts, and the inner content of cells. */

.flatpickr-calendar {
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--c-border);
    font-family: var(--ff-body);
    background: var(--c-surface);
    padding: 6px 6px 10px;
    width: 320px;
}
.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--c-border); }
.flatpickr-calendar.arrowTop::after  { border-bottom-color: var(--c-surface); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--c-border); }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--c-surface); }

/* Header bar -------------------------------------------------------- */
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--c-navy);
    fill: var(--c-navy);
}

.flatpickr-months {
    background: transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-top: 4px;
}

.flatpickr-current-month {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-navy);
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-navy);
    background: transparent;
    font-size: 1rem;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    border-radius: 6px;
    padding: 2px 8px 2px 4px;
    transition: background .12s ease;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--c-blue-100); }
.flatpickr-current-month .numInputWrapper { width: 5ch; }
.flatpickr-current-month input.cur-year { padding: 0 0 0 4px; }

.flatpickr-prev-month,
.flatpickr-next-month {
    border-radius: 8px;
    transition: background .12s ease;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { width: 14px; height: 14px; }
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: var(--c-blue-100);
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--c-navy); }

/* Weekday row ------------------------------------------------------- */
.flatpickr-weekdays { background: transparent; padding: 6px 0 2px; }
span.flatpickr-weekday {
    color: var(--c-text-muted);
    background: transparent;
    font-family: var(--ff-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .05em;
}

/* Day cells --------------------------------------------------------- */
.flatpickr-day {
    color: var(--c-text);
    border-radius: 10px;
    border-color: transparent;
    font-weight: 500;
    transition: background .12s ease, color .12s ease, transform .1s ease;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: var(--c-blue-100);
    color: var(--c-navy);
    border-color: transparent;
}
.flatpickr-day.today {
    border: 1px solid var(--c-blue);
    color: var(--c-blue);
    font-weight: 700;
    background: transparent;
}
.flatpickr-day.today:hover { background: var(--c-blue-100); color: var(--c-blue); }
.flatpickr-day.selected,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange.endRange {
    background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-navy) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(24, 26, 46,0.25);
}
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background: var(--c-blue-100);
    color: var(--c-navy);
    box-shadow: none;
    border-color: transparent;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--c-text-muted);
    opacity: .42;
}
.flatpickr-day.flatpickr-disabled:hover { background: transparent; cursor: not-allowed; }

/* Year wrapper arrows */
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--c-navy); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--c-navy); }
.numInputWrapper:hover { background: var(--c-blue-100); border-radius: 6px; }

/* Mobile sizing: keep calendar usable on small screens */
@media (max-width: 380px) {
    .flatpickr-calendar { width: calc(100vw - 32px) !important; left: 16px !important; right: 16px !important; }
    .flatpickr-day { max-width: none; }
}


/* ---- Booking lookup, errors, forms, enquiry, FAQ, results, booking, confirmation ---- */
/* Booking lookup form -------------------------------------------------- */
.lookup-form { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.lookup-form .field { display: flex; flex-direction: column; gap: 6px; }
.lookup-form label { font-family: var(--ff-display); font-weight: 700; color: var(--c-navy); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.lookup-form input { width: 100%; border: 1px solid var(--c-border); background: var(--c-bg); border-radius: var(--radius); padding: 14px; font-size: 1rem; }
.lookup-form input:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.lookup-form .field-error { color: #B91C1C; font-size: .82rem; }
.lookup-form__help { color: var(--c-text-muted); font-size: .9rem; margin: 4px 0 0; text-align: center; }

/* Error / session-expired pages ---------------------------------------- */
.page-hero--error { padding: 96px 0 72px; text-align: center; }
.page-hero--error .crumbs { display: inline-block; }
.page-hero--error .error-code {
    display: inline-block;
    font-family: var(--ff-display);
    font-size: 4rem;
    font-weight: 800;
    color: rgba(255,255,255,0.45);
    margin: 0 0 8px;
    line-height: 1;
}
.page-hero--error h1 { font-size: 2.2rem; }
.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 32px 0;
}
@media (max-width: 720px) {
    .page-hero--error { padding: 56px 0 44px; }
    .page-hero--error .error-code { font-size: 3rem; }
    .page-hero--error h1 { font-size: 1.6rem; }
    .error-actions { flex-direction: column; align-items: stretch; }
}

/* Content article ------------------------------------------------------- */

.prose {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 36px;
    max-width: 880px;
    margin: 0 auto;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) { .prose { padding: 22px; } }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.4em; }
.prose li { margin-bottom: 6px; }

/* Forms ----------------------------------------------------------------- */

.form-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) { .form-card { padding: 22px; } }
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field label {
    display: block;
    font-family: var(--ff-display);
    font-weight: 600;
    color: var(--c-navy);
    margin-bottom: 6px;
    font-size: .9rem;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 1rem;
    font-family: var(--ff-body);
    color: var(--c-text);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--c-blue);
    background: #fff;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field .span-2 { grid-column: span 2; }
.field-validation-error,
.text-danger { color: var(--c-danger); font-size: .85rem; display: block; margin-top: 4px; }

/* Alerts ---------------------------------------------------------------- */

.alert {
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
    font-weight: 500;
}
.alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* Flight enquiry page --------------------------------------------------- */

.enquiry-hero {
    background:
        radial-gradient(circle at 80% -10%, rgba(43,187,192,0.35) 0%, transparent 50%),
        radial-gradient(circle at 0% 110%, rgba(242, 169, 0,0.45) 0%, transparent 55%),
        linear-gradient(135deg, var(--c-navy) 0%, #102D7A 70%, var(--c-blue) 100%);
    color: #fff;
    padding: 72px 0 56px;
}
.enquiry-hero h1 {
    color: #fff;
    margin-bottom: 14px;
    max-width: 820px;
}
.enquiry-hero .hero-accent {
    color: rgba(255,255,255,0.78);
    font-weight: 600;
    display: inline-block;
}
.enquiry-hero__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.enquiry-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .85rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.enquiry-section { padding-top: 56px; padding-bottom: 64px; }

.enquiry-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
@media (max-width: 980px) { .enquiry-grid { grid-template-columns: 1fr; } }

.enquiry-form-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
@media (max-width: 640px) { .enquiry-form-card { padding: 24px; } }

.enquiry-form-card__head { margin-bottom: 18px; }
.enquiry-query {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-blue-100);
    color: var(--c-navy);
    border: 1px solid rgba(242, 169, 0,0.18);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    margin-bottom: 18px;
    font-size: .9rem;
}

.enquiry-step {
    border: none;
    padding: 0;
    margin: 0 0 26px;
}
.enquiry-step legend {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-display);
    font-weight: 800;
    color: var(--c-navy);
    font-size: 1.05rem;
    margin-bottom: 14px;
    padding: 0;
}
.step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-navy) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(24, 26, 46,0.20);
}

.route-row {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    align-items: end;
    gap: 8px;
}
@media (max-width: 560px) {
    .route-row { grid-template-columns: 1fr; }
    .route-arrow { display: none !important; }
}
.route-leg label { display: block; }
.route-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-blue);
    padding-bottom: 12px;
}

.input-with-icon {
    position: relative;
}
.input-with-icon svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-blue);
    pointer-events: none;
}
.input-with-icon input { padding-left: 42px !important; }

.pax-strip {
    display: grid;
    /* Auto-fit ensures cards never clip — each card needs at least 260px,
       otherwise it wraps to the next row. On the enquiry form (constrained
       to ~600px) this naturally stacks to 1 column. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.pax-strip__row {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}
.pax-strip__label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}
.pax-strip__label > div { min-width: 0; }
.pax-strip__label .ic {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--c-blue-100);
    color: var(--c-navy);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pax-strip__label strong { display: block; font-family: var(--ff-display); color: var(--c-navy); }
.pax-strip__label small  { display: block; color: var(--c-text-muted); font-size: .8rem; }

.stepper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: 4px;
}
.stepper button {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--c-navy);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.stepper button:hover { background: var(--c-blue-100); }
.stepper button:active { transform: scale(0.94); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper .val { min-width: 24px; text-align: center; font-weight: 800; color: var(--c-navy); font-family: var(--ff-display); }

.time-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.time-pill {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    color: var(--c-text);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: all .15s ease;
}
.time-pill:hover { background: var(--c-blue-100); border-color: rgba(242, 169, 0,0.25); }
.time-pill.is-active {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy);
    box-shadow: 0 4px 10px rgba(24, 26, 46,0.20);
}

.enquiry-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--c-border);
}

.enquiry-aside { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 980px) { .enquiry-aside { position: static; } }

.enquiry-aside__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}
.enquiry-aside__card h3 { margin: 0 0 14px; }

.enquiry-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.enquiry-perks li { display: flex; gap: 12px; align-items: flex-start; }
.enquiry-perks .ic {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--c-teal-100);
    color: var(--c-teal);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.enquiry-perks strong { display: block; font-family: var(--ff-display); color: var(--c-navy); }
.enquiry-perks small  { display: block; color: var(--c-text-muted); font-size: .85rem; }

.enquiry-aside__cta {
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
}
.enquiry-aside__cta h3 { color: #fff; }
.enquiry-aside__cta p.text-muted { color: rgba(255,255,255,0.78); }
.enquiry-aside__cta .eyebrow {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--radius-pill);
    color: #fff;
    padding: 3px 12px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
}
.enquiry-aside__cta .btn-primary { background: #fff; color: var(--c-navy); box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
.enquiry-aside__cta .btn-primary:hover { background: #fff; color: var(--c-navy); }
.enquiry-aside__cta .btn-secondary { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.22); }
.enquiry-aside__cta .btn-secondary:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* Two-column contact ---------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 32px;
}
.contact-card h3 { color: #fff; }
.contact-card .row {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.12);
}
.contact-card .row:first-of-type { border-top: 0; }
.contact-card .row .ic {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.contact-card .row a { color: #fff; font-weight: 600; }
.contact-card .row small { color: rgba(255,255,255,0.78); display: block; margin-top: 2px; }

/* FAQ ------------------------------------------------------------------- */

.faq { max-width: 820px; margin: 0 auto; }
.faq details {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 12px;
    transition: box-shadow .15s ease;
}
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-navy);
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '+';
    font-size: 1.4rem; color: var(--c-blue);
    transition: transform .2s ease;
}
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 12px 0 0; color: var(--c-text-muted); }

/* ======================================================================
   Flight results page
   ====================================================================== */

.results-summary {
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
    color: #fff;
    padding: 18px 0;
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    box-shadow: 0 6px 18px rgba(24, 26, 46,0.18);
}
.results-summary .container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.results-back {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.18);
    flex-shrink: 0;
    transition: background .15s ease;
}
.results-back:hover { background: rgba(255,255,255,0.2); color: #fff; }

.results-summary__route {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.05rem;
}
.results-summary__route .route-code {
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    margin-left: 4px;
    font-size: .85em;
}

.results-summary__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: rgba(255,255,255,0.88);
    font-size: .88rem;
    font-family: var(--ff-display);
    font-weight: 500;
}
.results-summary__meta span { display: inline-flex; align-items: center; gap: 6px; }
.results-summary__sep { opacity: .5; }

.btn-edit-search {
    margin-left: auto;
    background: #fff;
    color: var(--c-navy);
    border-color: transparent;
}
.btn-edit-search:hover { background: rgba(255,255,255,0.92); color: var(--c-navy); }
.btn-edit-search svg { transition: transform .2s ease; }
.btn-edit-search[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 720px) {
    .results-summary { padding: 14px 0; }
    .results-summary .container { gap: 10px; }
    .results-summary__route { font-size: .95rem; }
    .results-summary__route svg { width: 14px; height: 14px; }
    .results-summary__meta { font-size: .8rem; flex-basis: 100%; }
    .btn-edit-search { margin-left: 0; margin-top: 4px; padding: 8px 14px; font-size: .85rem; }
}

/* Search progress overlay ---------------------------------------- */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(24, 26, 46,0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 200;
    animation: search-overlay-in .2s ease;
}
@keyframes search-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.search-overlay__card {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    text-align: center;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 24px 50px rgba(0,0,0,0.25);
}
.search-overlay__card h3 { margin: 8px 0 6px; }
.search-overlay__card p  { color: var(--c-text-muted); margin: 0 0 18px; font-size: .92rem; }
.search-overlay__card .search-overlay__phone { color: var(--c-navy); font-size: .98rem; }
.search-overlay__card .search-overlay__phone a { color: var(--c-blue); text-decoration: none; white-space: nowrap; }
.search-overlay__card .search-overlay__phone a:hover { text-decoration: underline; }
.search-overlay__plane {
    width: 72px; height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--c-blue-100);
    color: var(--c-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: search-plane-bob 1.6s ease-in-out infinite;
}
@keyframes search-plane-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(8deg); }
}
.search-overlay__bar {
    height: 4px;
    background: var(--c-bg);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.search-overlay__bar span {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--c-blue) 40%, var(--c-navy) 60%, transparent 100%);
    transform: translateX(-100%);
    animation: search-bar-slide 1.4s ease-in-out infinite;
}
@keyframes search-bar-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* Edit-search collapsible panel ----------------------------------- */
.edit-search-section {
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    padding: 16px 0 20px;
    animation: edit-search-in .25s ease;
    scroll-margin-top: calc(var(--header-h) + 80px);
}
.edit-search-section[hidden] { display: none; }

/* Compact variant of the search form for the results page */
.edit-search-section .search-panel {
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.edit-search-section .search-tabs { margin-bottom: 12px; padding: 3px; }
.edit-search-section .search-tabs button { padding: 6px 14px; font-size: .85rem; }
.edit-search-section .search-grid { gap: 10px; }
.edit-search-section .search-grid label {
    font-size: .68rem;
    margin-bottom: 4px;
}
.edit-search-section .search-grid input,
.edit-search-section .search-grid select,
.edit-search-section .search-grid .pax-trigger {
    padding: 10px 12px;
    font-size: .92rem;
    border-radius: 10px;
}
.edit-search-section .field--from input,
.edit-search-section .field--to input {
    padding-left: 38px;
    background-position: 11px center;
    background-size: 16px 16px;
}
.edit-search-section .search-grid-bottom { margin-top: 12px; gap: 12px; }
.edit-search-section .search-grid-bottom select { padding: 8px 14px !important; font-size: .88rem; }
.edit-search-section .checkbox { font-size: .88rem; }
.edit-search-section .search-submit { min-width: 180px; padding: 12px 22px; font-size: .95rem; }

@keyframes edit-search-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Page layout ------------------------------------------------------- */
.results-section { padding: 28px 0 80px; }

.results-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
@media (max-width: 1024px) {
    .results-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Filters sidebar --------------------------------------------------- */
.results-sidebar {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 18px 18px 14px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: calc(var(--header-h) + 24px);
    max-height: calc(100vh - var(--header-h) - 40px);
    display: flex;
    flex-direction: column;
}

.filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--c-navy);
    color: #fff;
    margin: -18px -18px 14px;
    padding: 14px 18px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-shrink: 0;
}
.filters-head h3 { margin: 0; font-size: 1rem; color: #fff; }
.filters-close {
    display: none;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.filter-scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    margin-right: -8px;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}
.filter-scroll::-webkit-scrollbar { width: 6px; }
.filter-scroll::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

.filter-group {
    padding: 4px 0 14px;
    border: 0;
}
.filter-group > summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-accent);
    font-size: .95rem;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--c-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::after {
    content: "−";
    color: var(--c-accent);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: .8;
}
.filter-group:not([open]) > summary::after { content: "+"; }

.filter-group__actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.link-btn {
    background: transparent;
    border: 0;
    padding: 2px 0;
    color: var(--c-blue);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
}
.link-btn:hover { color: var(--c-navy); text-decoration: underline; }

.filter-group__body { display: block; }

.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    color: var(--c-text);
    font-size: .92rem;
}
.filter-row input[type="checkbox"] { accent-color: var(--c-blue); width: 16px; height: 16px; flex-shrink: 0; }
.filter-row span { flex: 1; line-height: 1.3; }
.filter-row span small { color: var(--c-text-muted); font-weight: 500; }
.filter-count { color: var(--c-text-muted); font-size: .78rem; flex-shrink: 0; }

.filter-list { /* no inner scroll — outer .filter-scroll handles overflow */ }

/* Price dual-handle range slider ------------------------------------ */
.price-range {
    position: relative;
    height: 36px;
    margin: 6px 0 2px;
}
.price-range__track {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    transform: translateY(-50%);
    height: 4px;
    background: var(--c-border);
    border-radius: 999px;
}
.price-range__highlight {
    position: absolute;
    top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-navy) 100%);
    border-radius: 999px;
}
.price-range input[type="range"] {
    position: absolute;
    width: 100%;
    height: 36px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    top: 0; left: 0;
    margin: 0;
}
.price-range input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--c-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(24, 26, 46,0.25);
    cursor: pointer;
    margin-top: 0;
}
.price-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--c-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(24, 26, 46,0.25);
    cursor: pointer;
}
.price-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 36px; }
.price-range input[type="range"]::-moz-range-track { background: transparent; height: 36px; }
.price-range__labels {
    font-size: .82rem;
    color: var(--c-text);
    margin-top: 4px;
}
.price-range__labels strong { color: var(--c-navy); font-family: var(--ff-display); font-weight: 700; }

/* Time-of-day band buttons ----------------------------------------- */
.time-bands {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.time-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 8px 4px 6px;
    color: var(--c-navy);
    cursor: pointer;
    transition: all .15s ease;
}
.time-band svg { color: var(--c-text-muted); }
.time-band small { font-family: var(--ff-display); font-weight: 700; font-size: .72rem; color: var(--c-navy); }
.time-band:hover { background: var(--c-blue-100); border-color: rgba(242, 169, 0,0.3); }
.time-band:hover svg { color: var(--c-blue); }
.time-band.is-active {
    background: var(--c-navy);
    border-color: var(--c-navy);
    box-shadow: 0 4px 10px rgba(24, 26, 46,0.18);
}
.time-band.is-active svg,
.time-band.is-active small { color: #fff; }

/* Filter drawer (mobile) ------------------------------------------- */
@media (max-width: 1024px) {
    .results-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 320px;
        max-width: 88vw;
        z-index: 90;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
    }
    .results-sidebar.is-open { transform: translateX(0); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
    .filters-close { display: inline-flex; }
    .results-sidebar::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(24, 26, 46,0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        z-index: -1;
    }
    .results-sidebar.is-open::before { opacity: 1; pointer-events: auto; }
}

/* Toolbar ---------------------------------------------------------- */
.results-main { min-width: 0; }

.results-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.btn-filters-toggle {
    display: none;
    padding: 9px 14px;
    font-size: .9rem;
}
@media (max-width: 1024px) { .btn-filters-toggle { display: inline-flex; } }

.results-meta {
    color: var(--c-text-muted);
    font-size: .9rem;
}
.results-meta strong { color: var(--c-navy); font-family: var(--ff-display); }

.loading-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-blue-100);
    color: var(--c-navy);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    margin-left: 8px;
    font-size: .8rem;
    font-weight: 600;
}
.loading-pill .dot {
    width: 8px; height: 8px;
    background: var(--c-blue);
    border-radius: 50%;
    animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(0.6); }
}

.results-sort {
    margin-left: auto;
    display: inline-flex;
    background: var(--c-bg);
    border-radius: var(--radius-pill);
    padding: 4px;
    gap: 2px;
}
.sort-tab {
    background: transparent;
    border: 0;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    color: var(--c-text-muted);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    transition: all .15s ease;
}
.sort-tab.is-active {
    background: var(--c-surface);
    color: var(--c-navy);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 560px) {
    .results-sort {
        margin-left: 0;
        flex-basis: 100%;
        overflow-x: auto;
    }
    .sort-tab { padding: 8px 12px; font-size: .82rem; }
}

/* Results list ----------------------------------------------------- */
.results-list { display: flex; flex-direction: column; gap: 14px; }

.result-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.result-card:hover { box-shadow: var(--shadow); }

/* Lazy-load sentinel & skeleton cards ------------------------------- */
.results-load-sentinel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}
.skeleton-card {
    height: 124px;
    background: linear-gradient(
        90deg,
        var(--c-surface) 0%,
        var(--c-bg) 50%,
        var(--c-surface) 100%);
    background-size: 200% 100%;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

.result-card__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 22px;
    padding: 18px;
    align-items: stretch;
}
@media (max-width: 720px) {
    .result-card__top { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
}

.result-card__journeys { display: flex; flex-direction: column; gap: 12px; }

.journey-row {
    display: grid;
    grid-template-columns:
        minmax(0, 0.75fr)          /* airline (logo only) */
        minmax(0, 0.6fr)           /* date */
        minmax(0, 1fr)             /* depart */
        minmax(0, 1.4fr)           /* stops */
        minmax(0, 1fr);            /* arrive */
    gap: 14px;
    align-items: center;
}
.journey-row + .journey-row { border-top: 1px dashed var(--c-border); padding-top: 12px; }

.journey-airline {
    display: flex;
    align-items: center;
    min-width: 0;
    cursor: help;
}
.journey-airline img {
    max-height: 32px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.journey-airline__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 8px;
    background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
    color: #fff;
    border-radius: 6px;
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .04em;
}

.journey-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-text-muted);
    font-size: .85rem;
    font-weight: 500;
}
.journey-date svg { color: var(--c-accent); }

.journey-time { line-height: 1.2; }
.journey-time strong {
    display: block;
    color: var(--c-navy);
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: 1.15rem;
}
.journey-time strong sup {
    font-size: .65em;
    color: var(--c-blue);
    vertical-align: top;
    margin-left: 2px;
}
.journey-time small {
    display: block;
    color: var(--c-text-muted);
    font-size: .8rem;
    line-height: 1.25;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Airport code drops to its own line so long city names ("Bangkok") can't
   push the code off the right edge as "(BK...". */
.journey-time .apt-code {
    display: block;
    color: var(--c-text);
    font-weight: 600;
    margin-left: 0;
    margin-top: 1px;
    font-size: .78rem;
}
.journey-time--arrive { text-align: right; }

.journey-stops {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.journey-duration {
    color: var(--c-text-muted);
    font-size: .8rem;
    font-weight: 600;
}
.journey-line {
    display: block;
    height: 1.5px;
    width: 100%;
    background: linear-gradient(90deg, var(--c-border) 0%, var(--c-blue) 50%, var(--c-border) 100%);
    position: relative;
}
.journey-line::before, .journey-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-blue);
    transform: translateY(-50%);
}
.journey-line::before { left: 0; }
.journey-line::after  { right: 0; }
.journey-stops__label {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-navy);
    font-size: .82rem;
    text-align: center;
}
.journey-stops__label.is-direct { color: var(--c-teal); }
.journey-stops__label em {
    font-style: normal;
    font-weight: 500;
    color: var(--c-text-muted);
    margin-left: 4px;
}

.result-card__price {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(24, 26, 46,0.04);
}
.price-amount {
    font-family: var(--ff-display);
    font-weight: 800;
    color: var(--c-navy);
    font-size: 1.6rem;
    line-height: 1;
    text-align: center;
}
.price-label {
    color: var(--c-teal);
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
}
.price-actions { display: flex; flex-direction: column; gap: 8px; }
.price-actions .btn { padding: 10px 14px; font-size: .9rem; justify-content: center; }
.price-actions .btn-details { background: var(--c-surface); }
.price-actions .btn-details[aria-expanded="true"] svg { transform: rotate(180deg); }
.price-actions .btn-details svg { transition: transform .15s ease; }

@media (max-width: 720px) {
    .result-card__price {
        padding: 14px;
    }
    .price-actions { flex-direction: row; }
    .price-actions .btn { flex: 1; }
}

/* Mobile journey row ----------------------------------------------- */
@media (max-width: 720px) {
    .journey-row {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "airline airline date"
            "depart  stops   arrive";
        gap: 8px 10px;
        align-items: center;
    }
    .journey-airline      { grid-area: airline; min-width: 0; }
    .journey-date         { grid-area: date; justify-self: end; margin: 0; }
    .journey-time--depart { grid-area: depart; }
    .journey-stops        { grid-area: stops; }
    .journey-time--arrive { grid-area: arrive; }

    .journey-row + .journey-row { padding-top: 10px; }

    .journey-airline img   { max-height: 24px; }
    .journey-date          { font-size: .78rem; white-space: nowrap; }

    .journey-time strong { font-size: 1.05rem; }
    .journey-time small  { font-size: .7rem; }
    .journey-time--depart small,
    .journey-time--arrive small { line-height: 1.2; }
    .journey-time .apt-code { display: block; margin-left: 0; }
    .journey-time--arrive { text-align: right; }

    .journey-duration, .journey-stops__label { font-size: .7rem; }
    .journey-stops__label em { display: none; }
}

/* Expanded details ------------------------------------------------- */
.result-card__details {
    border-top: 1px solid var(--c-border);
    background: linear-gradient(180deg, #F4F7FC 0%, #ECF1FA 100%);
    padding: 20px;
}
@media (max-width: 720px) { .result-card__details { padding: 14px; } }

.detail-tabs {
    display: flex;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 18px;
}
.detail-tab {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 12px 16px;
    border-bottom: 3px solid transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    text-align: left;
    transition: all .15s ease;
    font-family: var(--ff-body);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.detail-tab + .detail-tab { border-left: 1px solid var(--c-border); }
.detail-tab:hover { background: var(--c-bg); }
.detail-tab.is-active {
    background: var(--c-surface);
    color: var(--c-navy);
    border-bottom-color: var(--c-blue);
}
.detail-tab__label {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
}
.detail-tab.is-active .detail-tab__label { color: var(--c-blue); }
.detail-tab__route {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-navy);
    font-size: .95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.detail-tab__route svg { color: var(--c-accent); }
.detail-tab__duration {
    color: var(--c-text-muted);
    font-size: .82rem;
    line-height: 1;
    margin-left: auto;
    font-weight: 600;
}
@media (max-width: 480px) {
    .detail-tab { gap: 8px; padding: 10px 12px; }
    .detail-tab__duration { margin-left: 0; flex-basis: 100%; }
}

.detail-panel { display: none; }
.detail-panel.is-active { display: block; }

.leg-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 200px;
    gap: 18px;
    align-items: stretch;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 18px;
}
.leg-row + .leg-row { margin-top: 12px; }
@media (max-width: 880px) {
    .leg-row { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
}

.leg-airline {
    display: flex;
    align-items: center;
    gap: 10px;
}
.leg-airline img { max-height: 32px; width: auto; }
.leg-airline__meta { display: flex; flex-direction: column; min-width: 0; }
.leg-airline__meta strong {
    color: var(--c-navy);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: .98rem;
}
.leg-airline__meta small { color: var(--c-text-muted); font-size: .82rem; }

.leg-timeline { display: grid; grid-template-columns: 28px 1fr; gap: 10px; min-width: 0; }
.leg-timeline__line {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
}
.leg-timeline__line .dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--c-blue);
    background: var(--c-surface);
    flex-shrink: 0;
}
.leg-timeline__line .bar {
    flex: 1;
    width: 2px;
    background: linear-gradient(180deg, var(--c-blue) 0%, var(--c-teal) 100%);
    margin: 4px 0;
    min-height: 36px;
}

.leg-timeline__points { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.point__title {
    margin: 0;
    color: var(--c-navy);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: .95rem;
}
.point__time {
    margin: 2px 0 0;
    color: var(--c-text-muted);
    font-size: .85rem;
    line-height: 1.4;
}
.point__time strong { color: var(--c-navy); font-weight: 700; margin-right: 2px; }
.point__duration {
    margin: 0;
    color: var(--c-text-muted);
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
}
.point__duration svg { color: var(--c-blue); }

.leg-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--c-navy);
    font-size: .85rem;
    border-left: 1px solid var(--c-border);
    padding-left: 18px;
}
.leg-facts span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.leg-facts svg { color: var(--c-blue); flex-shrink: 0; }
.leg-facts__operated { color: var(--c-teal); font-weight: 600; }
.leg-facts__operated svg { color: var(--c-teal); }
@media (max-width: 880px) {
    .leg-facts {
        border-left: 0;
        border-top: 1px solid var(--c-border);
        padding-left: 0;
        padding-top: 12px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
    }
}

.leg-stopover {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(43,187,192,0.10);
    border: 1px solid rgba(43,187,192,0.28);
    border-radius: var(--radius);
    color: var(--c-teal);
    font-family: var(--ff-display);
    font-weight: 600;
    padding: 10px 14px;
    margin: 12px 0;
    font-size: .9rem;
}

.detail-footer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(24, 26, 46,0.18);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.detail-fare-breakdown {
    display: grid;
    gap: 2px;
    font-size: .88rem;
    color: var(--c-text);
}
.detail-fare-breakdown strong { color: var(--c-navy); font-family: var(--ff-display); font-size: .92rem; }
.detail-fare-breakdown .grand-total { color: var(--c-blue); font-weight: 700; font-family: var(--ff-display); }

@media (max-width: 720px) {
    .detail-footer { flex-direction: column; align-items: stretch; }
    .detail-footer .btn { width: 100%; justify-content: center; }
}

/* No results card -------------------------------------------------- */
.no-results-card {
    text-align: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 56px 28px;
    box-shadow: var(--shadow-sm);
}
.no-results-illustration {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--c-blue-100);
    color: var(--c-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.no-results-card h3 { margin: 0 0 8px; }
.no-results-card p  { color: var(--c-text-muted); max-width: 480px; margin: 0 auto 24px; }
.no-results-cta { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.results-empty-filtered {
    text-align: center;
    padding: 40px 20px;
    color: var(--c-text-muted);
}
.results-empty-filtered p { margin-bottom: 16px; }

/* ======================================================================
   Booking page
   ====================================================================== */
/* Slim breadcrumb strip — replaces the old big booking-hero block. */
.booking-strip {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 12px 0;
}
.booking-strip .container {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.booking-strip__back {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--c-blue-100);
    color: var(--c-navy);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
    flex-shrink: 0;
}
.booking-strip__back:hover { background: var(--c-blue); color: #fff; }
.booking-strip__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: var(--c-text-muted);
    font-family: var(--ff-display);
    font-weight: 500;
}
.booking-strip__crumbs a { color: var(--c-text-muted); }
.booking-strip__crumbs a:hover { color: var(--c-blue); }
.booking-strip__crumbs span { opacity: .5; }
.booking-strip__crumbs .is-current { color: var(--c-navy); opacity: 1; font-weight: 700; }
.booking-strip__step {
    margin-left: auto;
    background: var(--c-blue-100);
    color: var(--c-navy);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .03em;
}
@media (max-width: 560px) {
    .booking-strip__step { display: none; }
}

.booking-section { padding: 28px 0 80px; }
.booking-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
@media (max-width: 980px) { .booking-grid { grid-template-columns: 1fr; } }

.booking-flight-summary {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
}
.booking-flight-summary h2 { margin: 0 0 14px; font-size: 1.15rem; }
.booking-journey + .booking-journey { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--c-border); }
.booking-journey__head { font-family: var(--ff-display); font-weight: 700; color: var(--c-navy); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.booking-journey__meta { color: var(--c-text-muted); font-weight: 500; font-size: .9rem; }
.booking-leg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 12px 14px;
    background: var(--c-bg);
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
}
.booking-leg + .booking-leg { margin-top: 8px; }
.booking-leg__airline { display: flex; align-items: center; gap: 12px; min-width: 0; }
.booking-leg__airline img { max-height: 26px; flex-shrink: 0; }
.booking-leg__airline strong { display: block; color: var(--c-navy); font-family: var(--ff-display); font-size: .95rem; }
.booking-leg__airline small { color: var(--c-text-muted); font-size: .8rem; }
.booking-leg__times { display: flex; align-items: center; gap: 12px; font-family: var(--ff-display); color: var(--c-navy); }
.booking-leg__times strong { font-size: 1rem; }
.booking-leg__times span { display: block; color: var(--c-text-muted); font-size: .78rem; font-weight: 500; }
.booking-leg__arrow { color: var(--c-blue); font-weight: 700; }
@media (max-width: 720px) {
    .booking-leg { grid-template-columns: 1fr; }
}

.booking-form-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Compact booking card — separate card per section (contact, passenger N). */
.booking-form { background: transparent; padding: 0; border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 14px; }

.bk-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) { .bk-card { padding: 16px; } }

.bk-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.bk-card__head svg { color: var(--c-blue); flex-shrink: 0; }
.bk-card__head h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--c-navy);
    font-family: var(--ff-display);
    font-weight: 800;
}
.bk-pax-tag {
    color: var(--c-blue);
    font-weight: 700;
    font-size: .85rem;
    margin-left: 4px;
}
.bk-pax-age {
    margin-left: auto;
    color: var(--c-text-muted);
    font-size: .78rem;
    font-weight: 500;
}

.bk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}
.bk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-field { display: flex; flex-direction: column; min-width: 0; }
.bk-field--full { grid-column: 1 / -1; }
.bk-field label {
    display: block;
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-text-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 5px;
}
.bk-field label small { color: var(--c-text-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.bk-field input,
.bk-field select,
.bk-field textarea {
    width: 100%;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: .92rem;
    font-family: var(--ff-body);
    color: var(--c-text);
    transition: border-color .12s ease, background .12s ease;
}
.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
    outline: none;
    border-color: var(--c-blue);
    background: #fff;
}
.bk-field span.field-validation-error { color: var(--c-danger); font-size: .78rem; margin-top: 3px; display: block; }

@media (max-width: 640px) {
    .bk-grid, .bk-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .bk-pax-age { display: none; }
}

.phone-row { display: flex; gap: 6px; align-items: stretch; }
.phone-row input { flex: 1; min-width: 0; }

.bk-passport { margin-top: 14px; }
.bk-passport > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    background: var(--c-bg);
    border: 1px dashed var(--c-border);
    border-radius: 10px;
    font-family: var(--ff-display);
    font-weight: 600;
    color: var(--c-navy);
    font-size: .9rem;
    display: flex; justify-content: space-between; align-items: center;
}
.bk-passport > summary::-webkit-details-marker { display: none; }
.bk-passport > summary::after { content: '+'; color: var(--c-blue); font-size: 1.3rem; line-height: .8; font-weight: 700; }
.bk-passport[open] > summary::after { content: '−'; }
.bk-passport[open] > summary { margin-bottom: 12px; }
.bk-passport small { color: var(--c-text-muted); font-weight: 500; }

.passport-toggle { margin-top: 14px; }
.passport-toggle > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
    border-radius: 10px;
    font-family: var(--ff-display);
    font-weight: 600;
    color: var(--c-navy);
    display: flex; justify-content: space-between; align-items: center;
}
.passport-toggle > summary::-webkit-details-marker { display: none; }
.passport-toggle > summary::after { content: '+'; color: var(--c-blue); font-size: 1.4rem; line-height: .8; }
.passport-toggle[open] > summary::after { content: '−'; }
.passport-toggle[open] > summary { margin-bottom: 14px; }
.passport-toggle small { color: var(--c-text-muted); font-weight: 500; margin-left: 6px; }

.booking-submit-bar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid var(--c-border);
    padding-top: 18px;
    margin-top: 8px;
}
.booking-submit-btn { width: 100%; }
@media (min-width: 720px) {
    .booking-submit-bar { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .booking-submit-btn { width: auto; }
}

.booking-side-col { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 980px) { .booking-side-col { position: static; } }

.booking-fare-card,
.booking-support-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.booking-fare-card h3,
.booking-support-card h4 { margin: 0 0 12px; }

.fare-row { display: flex; justify-content: space-between; padding: 6px 0; color: var(--c-text); font-size: .92rem; }
.fare-row strong { color: var(--c-navy); font-family: var(--ff-display); }
.fare-row--total { border-top: 1px solid var(--c-border); margin-top: 6px; padding-top: 12px; font-size: 1.05rem; }
.fare-row--total strong { color: var(--c-blue); font-size: 1.15rem; }
.fare-row--discount { color: var(--c-teal); font-weight: 600; }
.fare-row--discount span:last-child { color: var(--c-teal); }
.fare-foot { color: var(--c-text-muted); font-size: .78rem; margin: 8px 0 0; }

.booking-support-card { background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%); color: #fff; }
.booking-support-card h4 { color: #fff; }
.booking-support-card p { color: rgba(255,255,255,0.85); margin: 0 0 12px; }
.booking-support-card .eyebrow {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--radius-pill);
    color: #fff;
    padding: 3px 12px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
}
.booking-support-card .btn-primary { background: #fff; color: var(--c-navy); }
.booking-support-card .btn-primary:hover { background: rgba(255,255,255,0.92); color: var(--c-navy); }

.alert-warning { background: #FFF7E6; color: #92400E; border: 1px solid #FCD34D; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }

/* ======================================================================
   Confirmation page
   ====================================================================== */
.conf-hero {
    background:
        radial-gradient(circle at 85% -10%, rgba(43,187,192,0.30) 0%, transparent 50%),
        radial-gradient(circle at 0% 110%, rgba(242, 169, 0,0.40) 0%, transparent 55%),
        linear-gradient(135deg, var(--c-navy) 0%, #102D7A 70%, var(--c-blue) 100%);
    color: #fff;
    padding: 48px 0;
}
.conf-hero__row { display: flex; align-items: flex-start; gap: 18px; }
.conf-hero__icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.28);
    flex-shrink: 0;
}
.conf-hero__eyebrow { color: rgba(255,255,255,0.75); margin: 0 0 4px; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.conf-hero h1 { color: #fff; margin: 0 0 4px; font-size: clamp(1.8rem, 2.4vw + 1rem, 2.3rem); }
.conf-hero__sub { color: rgba(255,255,255,0.88); margin: 0; }
.conf-hero__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: 22px;
}
@media (max-width: 560px) { .conf-hero__meta { grid-template-columns: 1fr; } }
.conf-hero__meta small { color: rgba(255,255,255,0.7); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.conf-hero__meta strong { display: block; font-family: var(--ff-display); font-size: 1.05rem; color: #fff; margin-top: 2px; }

.conf-status { display: inline-flex; align-items: center; gap: 8px; }
.conf-status span { width: 9px; height: 9px; border-radius: 50%; }
.conf-status--pending span { background: var(--c-accent); box-shadow: 0 0 0 4px rgba(255,179,65,0.25); animation: conf-pulse 1.6s ease-in-out infinite; }
@keyframes conf-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.conf-section { padding: 36px 0 80px; }
.conf-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 980px) { .conf-grid { grid-template-columns: 1fr; } }

.conf-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.conf-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.conf-card h2 { margin: 0 0 16px; font-size: 1.2rem; }
.conf-card--references { background: linear-gradient(135deg, var(--c-blue-100) 0%, #ffffff 100%); border-color: var(--c-blue); }
.conf-refs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.conf-ref { display: flex; flex-direction: column; gap: 4px; }
.conf-ref small { color: var(--c-text-muted); font-family: var(--ff-display); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.conf-ref strong { color: var(--c-navy); font-size: 1.25rem; font-weight: 800; letter-spacing: .3px; }
.conf-card__foot { color: var(--c-text-muted); font-size: .85rem; margin-top: 12px; }
@media (max-width: 640px) { .conf-card { padding: 20px; } }

.conf-journey + .conf-journey { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--c-border); }
.conf-journey__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; color: var(--c-navy); font-family: var(--ff-display); }
.conf-journey__chip {
    background: var(--c-blue-100);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    color: var(--c-navy);
    font-size: .78rem;
    font-weight: 600;
}

.conf-leg {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 180px;
    gap: 18px;
    align-items: stretch;
    padding: 16px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    margin-bottom: 10px;
}
@media (max-width: 880px) { .conf-leg { grid-template-columns: 1fr; gap: 14px; } }
.conf-leg__airline { display: flex; align-items: center; gap: 12px; }
.conf-leg__airline img { max-height: 32px; }
.conf-leg__airline-meta strong { display: block; color: var(--c-navy); font-family: var(--ff-display); }
.conf-leg__airline-meta small { color: var(--c-text-muted); }

.conf-leg__timeline { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.conf-leg__timeline .line { display: flex; flex-direction: column; align-items: center; padding: 4px 0; }
.conf-leg__timeline .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c-blue); background: var(--c-surface); }
.conf-leg__timeline .bar { flex: 1; width: 2px; background: linear-gradient(180deg, var(--c-blue), var(--c-teal)); margin: 4px 0; min-height: 36px; }
.conf-leg__timeline .points { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.conf-leg__timeline .point strong { display: block; color: var(--c-navy); font-family: var(--ff-display); }
.conf-leg__timeline .point span { color: var(--c-text-muted); font-size: .85rem; }
.conf-leg__timeline .duration { margin: 0; color: var(--c-text-muted); font-size: .8rem; padding-left: 2px; }

.conf-leg__facts {
    display: flex; flex-direction: column; gap: 8px;
    border-left: 1px solid var(--c-border);
    padding-left: 18px;
    font-size: .85rem;
    color: var(--c-navy);
}
@media (max-width: 880px) {
    .conf-leg__facts { border-left: 0; border-top: 1px solid var(--c-border); padding-left: 0; padding-top: 12px; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
}

.conf-stopover {
    display: flex; align-items: center; gap: 10px;
    background: rgba(43,187,192,0.10);
    border: 1px solid rgba(43,187,192,0.28);
    border-radius: var(--radius);
    color: var(--c-teal);
    font-family: var(--ff-display); font-weight: 600;
    padding: 10px 14px; margin: 8px 0;
    font-size: .9rem;
}

.conf-pax-table { display: flex; flex-direction: column; }
.conf-pax-row { display: grid; grid-template-columns: 1.4fr 0.7fr 1fr 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-border); align-items: center; }
.conf-pax-row--head { color: var(--c-text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-family: var(--ff-display); font-weight: 700; border-bottom: 2px solid var(--c-border); }
.conf-pending { color: var(--c-text-muted); font-style: italic; font-size: .9rem; }
@media (max-width: 640px) {
    .conf-pax-row { grid-template-columns: 1fr 1fr; }
    .conf-pax-row--head { display: none; }
    .conf-pax-row span:nth-child(3)::before { content: "PNR: "; color: var(--c-text-muted); font-size: .8rem; }
    .conf-pax-row span:nth-child(4)::before { content: "Ticket: "; color: var(--c-text-muted); font-size: .8rem; }
}

.conf-baggage { padding-left: 20px; color: var(--c-text); }
.conf-baggage li { margin-bottom: 6px; }

.conf-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 980px) { .conf-side { position: static; } }

.conf-fare-card, .conf-support-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.conf-fare-card h3, .conf-support-card h4 { margin: 0 0 12px; }
.conf-payment-note {
    background: var(--c-blue-100);
    color: var(--c-navy);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: .82rem;
    text-align: center;
    margin-top: 12px;
}

.conf-support-card { background: linear-gradient(135deg, var(--c-navy), var(--c-blue)); color: #fff; }
.conf-support-card h4 { color: #fff; }
.conf-support-card p { color: rgba(255,255,255,0.88); margin: 0 0 12px; }
.conf-support-card .eyebrow {
    display: inline-block; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--radius-pill); color: #fff; padding: 3px 12px;
    font-family: var(--ff-display); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px;
}
.conf-support-card .btn-primary { background: #fff; color: var(--c-navy); }
.conf-support-card .btn-primary:hover { background: rgba(255,255,255,0.92); color: var(--c-navy); }
.conf-support-card .btn-secondary { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.22); }
.conf-support-card .btn-secondary:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* Utility --------------------------------------------------------------- */

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0 !important; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

/* ---- Button variants our views use that the supplied design didn't define ---- */
.btn-secondary {
    background: var(--white);
    color: var(--navy-900);
    border: 1.5px solid var(--gray-100);
    box-shadow: none;
}
.btn-secondary:hover { border-color: var(--blue-600); color: var(--blue-600); transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 1.04rem; }

/* ---- Search panel -------------------------------------------------------
   Our markup (and the JS that drives flatpickr, the airport autocomplete and
   the traveller stepper) is unchanged; only the skin is. These rules give
   .search-panel the glass card, pill tabs and divided field blocks from the
   supplied .search-card design.
   ------------------------------------------------------------------------ */
.search-panel {
    background: var(--surface-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 26px;
}
.search-panel-wrap { margin-top: -64px; position: relative; z-index: 10; }

.search-panel .search-tabs {
    display: inline-flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.6);
    padding: 6px;
    border-radius: var(--r-full);
    margin-bottom: 22px;
}
.search-panel .search-tabs button {
    padding: 10px 22px;
    border-radius: var(--r-full);
    border: none;
    background: transparent;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--gray-500);
    transition: background var(--transition), color var(--transition);
}
.search-panel .search-tabs button.is-active {
    background: var(--navy-900);
    color: var(--white);
}

.search-panel .search-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 6px;
    box-shadow: var(--shadow-sm);
}
.search-panel .search-grid > .field {
    position: relative;
    padding: 14px 18px;
    border-right: 1px solid var(--gray-100);
    margin: 0;
}
.search-panel .search-grid > .field:last-child { border-right: none; }
.search-panel .search-grid > .field > label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 6px;
}
.search-panel .search-grid > .field > input,
.search-panel .search-grid > .field > .pax-trigger {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--navy-900);
}
.search-panel .search-grid > .field > input:focus,
.search-panel .search-grid > .field > .pax-trigger:focus { outline: none; }
.search-panel .search-grid > .field > input::placeholder { color: var(--gray-300); font-weight: 500; }
.search-panel .search-grid > .field:focus-within { background: rgba(47, 95, 255, 0.04); border-radius: var(--r-md); }

.search-panel .search-grid-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.search-panel .search-options { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; }
.search-panel .search-options .checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.72);
    font-size: .86rem;
    font-weight: 600;
    color: var(--navy-900);
}
.search-panel select {
    border: 1.5px solid var(--gray-100);
    background: var(--white);
    border-radius: var(--r-full);
    padding: 10px 18px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .86rem;
    color: var(--navy-900);
}
.search-panel .search-submit { min-width: 220px; }

/* ---- Page hero: our inner pages reuse the supplied .page-hero treatment ---- */
.page-hero .crumbs { color: rgba(255, 255, 255, 0.72); }
.page-hero .crumbs a { color: rgba(255, 255, 255, 0.72); }
.page-hero .crumbs a:hover { color: var(--white); }

/* ---- Prose blocks on the legal / policy pages ---- */
.prose { max-width: 820px; }
.prose h2 { margin-top: 2em; font-size: 1.45rem; }
.prose h3 { margin-top: 1.6em; font-size: 1.12rem; }
.prose p, .prose li { color: var(--gray-500); }
.prose ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--blue-600); font-weight: 600; }

/* ---- Transparent header over photography --------------------------------
   While the header overlays the hero its links and chips are white, which
   relies on whatever the photo happens to put behind them. The supplied
   banner is bright on the right, so the currency and language chips washed
   out. This scrim gives the header its own contrast floor independent of the
   image, and disappears once the header goes solid on scroll.
   -------------------------------------------------------------------------- */
.site-header:not(.solid)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 14, 29, 0.55) 0%, rgba(7, 14, 29, 0.18) 70%, transparent 100%);
    pointer-events: none;
}
.site-header > .container { position: relative; z-index: 1; }
.site-header:not(.solid) .header-pref { background: rgba(7, 14, 29, 0.34); }

/* ---- Offer cards ---------------------------------------------------------
   The supplied overlay fades to transparent at 70%, which works for a one-line
   blurb but leaves a two-line one sitting on bare photography. These cards run
   to two lines, so the scrim is deepened and carried to the top of the card,
   and the badge is given its own backing rather than relying on the image
   behind it.
   -------------------------------------------------------------------------- */
.offer-card .offer-overlay {
    background: linear-gradient(0deg,
        rgba(7, 14, 29, 0.94) 0%,
        rgba(7, 14, 29, 0.82) 55%,
        rgba(7, 14, 29, 0.45) 100%);
}
.offer-card img { filter: saturate(.9) brightness(.92); }
.offer-card .badge-amber {
    background: rgba(255, 179, 92, 0.22);
    color: #FFD9A8;
    backdrop-filter: blur(4px);
    margin-bottom: 10px;
}
.offer-card p { margin-bottom: 16px; }

/* ---- Airline strip -------------------------------------------------------
   The supplied design has no equivalent component, so this is ported from the
   base project and recoloured. Without it the logos fall back to `img{display:
   block}` from the design system's reset and stack in a single column.
   -------------------------------------------------------------------------- */
.airline-strip {
    background: var(--white);
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    padding: 28px 0;
}
.airline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px 40px;
}
/* Shown in colour rather than greyscale: for an Indian audience the IndiGo,
   Air India and Emirates marks are the trust signal, and desaturating them at
   this size left them barely legible. The fixed height keeps the row from
   reflowing as the logos load. */
.airline-row img {
    height: 34px;
    max-height: 34px;
    width: auto;
    object-fit: contain;
    transition: transform .2s ease;
}
.airline-row img:hover { transform: scale(1.08); }

/* ---- CTA banner ----------------------------------------------------------
   Also ported from the base project. The design system colours every <p> with
   --gray-500, which is unreadable on this gradient, so the text colours are
   set explicitly rather than inherited.
   -------------------------------------------------------------------------- */
.cta-banner {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--blue-600) 100%);
    color: var(--white);
    border-radius: var(--r-lg);
    padding: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: var(--shadow-lg);
}
.cta-banner h2,
.cta-banner h3 { color: var(--white); max-width: 640px; }
.cta-banner p { color: rgba(255, 255, 255, 0.82); }
.cta-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 720px) {
    .cta-banner { padding: 26px; }
    .cta-banner__actions { width: 100%; }
    .cta-banner__actions .btn { flex: 1 1 auto; }
}

/* The pending-booking dot is the one --c-accent site that wanted a warm tone:
   it sits inside an amber halo. */
.conf-status--pending span { background: var(--amber); }

/* A one-way result has a single journey row, but the card's height is set by
   the price column beside it (fare, label, two stacked buttons). Centring the
   journeys spreads that slack above and below instead of leaving it all
   pooled under the flight times. */
.result-card__journeys { align-self: center; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ 6. RESPONSIVE ============ */
/* =========================================================
   RESPONSIVE — tablet ≤ 1024px, mobile ≤ 640px
   ========================================================= */

@media (max-width: 1180px){
  .search-fields{ grid-template-columns:1fr 56px 1fr; grid-template-areas:
    "from swap to" "dep dep ret" "trav trav go"; }
  .footer-top{ grid-template-columns:1fr 1fr 1fr; }
  .footer-newsletter{ grid-column:1 / -1; }
}

@media (max-width: 1024px){
  .main-nav{ display:none; }
  .header-pref{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-outline{ display:none; }

  .hero{ padding-bottom:200px; }
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy p.lead{ margin-inline:auto; }
  .hero-cta-row{ justify-content:center; }
  .hero-stats{ justify-content:center; }
  .hero-scene{ height:340px; margin-top:20px; }

  .search-wrap{ margin-top:-160px; }
  .search-fields{ grid-template-columns:1fr 1fr; }
  .swap-btn{ display:none; }
  .search-submit{ grid-column:1 / -1; }

  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .trust-strip{ grid-template-columns:repeat(2,1fr); }

  .booking-layout{ grid-template-columns:1fr; }
  .summary-card{ position:relative; top:0; order:-1; }

  .detail-grid{ grid-template-columns:repeat(2,1fr); }
  .story-grid, .mission-vision-grid, .contact-split{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr 1fr; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); gap:32px; }

  .auth-split{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }

  .footer-top{ grid-template-columns:1fr 1fr; }
  .legal-toc{ display:none; }

  .row-3{ grid-template-columns:1fr 1fr; }

  .results-layout{ grid-template-columns:1fr; }
  .filters-card{ position:relative; top:0; }
}

@media (max-width: 720px){
  .container{ padding:0 18px; }
  .section{ padding:64px 0; }

  .hero{ padding-top:calc(var(--header-h) + 30px); }
  h1{ font-size:2rem; }
  h2{ font-size:1.6rem; }

  .search-wrap{ margin-top:-120px; }
  .search-card{ padding: 4px !important; }
  .search-fields{ grid-template-columns:1fr; border-radius:var(--r-md); }
  .field-block{ border-right:none; border-bottom:1px solid var(--gray-100);    padding: 9px 8px !important; }
  .field-block .fb-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    color: var(--navy-900);
}
.field-block .fb-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}
.field-block .fb-sub {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 2px;
}
  .search-fields > .field-block:last-of-type{ border-bottom:none; }
  .search-submit .btn{ width:100%; }
  .search-tabs{ overflow-x:auto; flex-wrap:nowrap; }

  .grid-4, .grid-3, .grid-2, .detail-grid, .contact-grid, .stats-strip, .trust-strip, .row-2{
    grid-template-columns:1fr;
  }
  .row-3{ grid-template-columns:1fr; }

  .flight-summary-card{ flex-direction:column; align-items:stretch; }
  .flight-route-visual{ flex-direction:column; gap:10px; }
  .route-line-visual{ width:100%; transform:rotate(90deg); margin:10px 0; }

  .footer-top{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }

  .pay-tabs{ flex-wrap:wrap; }
  .pay-tabs button{ min-width:calc(50% - 5px); }

  .mobile-nav{ width:100%; }

  .header-logo img{ height:30px; }
  .auth-form-side{ padding:96px 22px 40px; }
  .back-home-link{ top:16px; left:16px; padding:8px 14px; font-size:.8rem; }
  .back-home-link svg{ width:14px; height:14px; }

  .page-hero{ padding:130px 0 70px; }

  .results-bar{ margin-top:-30px; flex-direction:column; align-items:flex-start; }
  .flight-card{ flex-direction:column; align-items:stretch; }
  .flight-card .fc-airline{ flex-direction:row; align-items:center; width:100%; justify-content:space-between; }
  .flight-card .fc-route{ width:100%; }
  .flight-card .fc-price{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; }
  .flight-card .fc-price .btn{ margin-top:0; }
  .sort-tabs{ overflow-x:auto; flex-wrap:nowrap; }
}

@media (max-width: 420px){
  .hero-stats{ gap:20px; }
  .search-tabs button{ padding:9px 14px; font-size:.84rem; }

  .header-logo img{ height:26px; }
  .header-actions{ gap:6px; }
  .header-actions .btn-primary.btn-sm{ padding:9px 14px; font-size:.8rem; }
  .nav-toggle{ width:38px; height:38px; }
  .nav-toggle svg{ width:19px; height:19px; }

  .results-bar .rb-route{ gap:8px; font-size:.9rem; }
}

/* ---- Responsive rules for the app layer ---- */
@media (max-width: 1080px) {
    .search-panel .search-grid { grid-template-columns: repeat(3, 1fr); }
    .search-panel .search-grid > .field:nth-child(3n) { border-right: none; }
}
@media (max-width: 720px) {
    .search-panel { padding: 16px; }
    .search-panel-wrap { margin-top: -36px; }
    .search-panel .search-grid { grid-template-columns: 1fr 1fr; padding: 4px; }
    .search-panel .search-grid > .field { border-right: none; border-bottom: 1px solid var(--gray-100); padding: 12px 14px; }
    .search-panel .search-grid > .field:nth-last-child(-n+1) { border-bottom: none; }
    .search-panel .search-grid-bottom { flex-direction: column; align-items: stretch; }
    .search-panel .search-options { width: 100%; }
    .search-panel select, .search-panel .search-submit { width: 100%; }
}
@media (max-width: 480px) {
    .search-panel .search-grid { grid-template-columns: 1fr; }
}

/* ---- Small-screen header + hero --------------------------------------
   The header has to fit a logo, a call CTA and the menu button inside 430px.
   With the phone number spelled out it overflowed and the menu button was
   pushed off-screen, leaving no way to open the navigation.
   ---------------------------------------------------------------------- */
@media (max-width: 620px) {
    .header-actions .btn-primary.btn-sm { padding: 10px 12px; }
    .cta-phone-text { display: none; }
    .header-logo img { height: 32px; }
    .hero { padding: calc(var(--header-h) + 28px) 0 150px; }
}