:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;

/* Section rhythm (from responsive override) */
--section-v: 80px;
--container-h: 24px;
}

/* ─── §1  RESPONSIVE ROOT TOKENS ───────────────────────── */
@media (max-width: 768px) {
:root { --section-v: 40px; --container-h: 16px; }
}
@media (max-width: 480px) {
:root { --section-v: 28px; --container-h: 12px; }
}
@media (max-width: 360px) {
:root { --section-v: 22px; --container-h: 10px; }
}

/* ─── §2  BASE RESETS (merged) ────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

body {
overflow-x: hidden;
font-family: Arial, sans-serif;
}

img,
canvas,
video,
svg {
max-width: 100%;
height: auto;
display: block;
}

/* iOS zoom guard - inputs must stay ≥16px on focus */
input,
select,
textarea {
font-size: max(16px, 1em) !important;
}

/* ─── §3  LAYOUT & BASE TYPOGRAPHY (from main.css) ─────── */
.container {
width: 100%;
padding: var(--space-md);
}

.flex {
display: flex;
gap: var(--space-md);
}

.grid {
display: grid;
gap: var(--space-md);
}

h1 { font-size: clamp(22px, 4vw, 42px); }
h2 { font-size: clamp(18px, 3vw, 32px); }
p  { font-size: clamp(14px, 2vw, 18px); }

button {
padding: 12px 16px;
font-size: clamp(14px, 2vw, 18px);
cursor: pointer;
}

/* ─── §4  RESPONSIVE LAYOUT BREAKPOINTS (main.css) ─────── */
@media (max-width: 480px) {
.flex { flex-direction: column; }
.grid { grid-template-columns: 1fr; }
}

@media (min-width: 481px) and (max-width: 1024px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
§5  TABLET  ≤ 768px  (responsive override system)
Collapses nav, stacks grids, tightens rhythm.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

/* Layout */
.container   { padding: 0 var(--container-h); }
.section     { padding: var(--section-v) 0; }
.section-sm  { padding: calc(var(--section-v) * 0.65) 0; }
.grid-2,
.grid-3      { grid-template-columns: 1fr; gap: 12px; }
.grid-4      { grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Navbar */
.navbar        { height: 58px; padding: 0 14px; }
.nav-links     { display: none; }
.hamburger     { display: flex; }
.nav-logo-text { font-size: 16px; }
.nav-logo-icon { width: 32px; height: 32px; font-size: 15px; }
.mobile-menu   { top: 58px; padding: 10px 12px; gap: 2px; }
.mobile-menu .nav-link { padding: 10px 14px; font-size: 13px; }
/* Hide desktop action buttons when hamburger is visible */
.nav-actions   { display: none; }

/* Typography */
.display-1 { font-size: clamp(22px, 5.5vw, 38px); line-height: 1.15; }
.display-2 { font-size: clamp(18px, 4.5vw, 30px); line-height: 1.2; }
.display-3 { font-size: clamp(15px, 3.5vw, 22px); line-height: 1.25; }
h1 { font-size: clamp(17px, 4vw, 26px); line-height: 1.2; }
h2 { font-size: clamp(15px, 3.5vw, 22px); line-height: 1.25; }
h3 { font-size: clamp(14px, 3vw, 18px);  line-height: 1.3; }
h4 { font-size: clamp(13px, 2.5vw, 15px); }
p  { font-size: clamp(13px, 2vw, 15px); line-height: 1.55; }

/* Buttons */
.btn    { padding: 9px 16px;  font-size: 13px; min-height: 40px; gap: 6px; }
.btn-sm { padding: 6px 12px;  font-size: 11px; min-height: 32px; }
.btn-lg { padding: 10px 20px; font-size: 13px; min-height: 42px; }
.btn-xl { padding: 11px 22px; font-size: 14px; min-height: 44px; }
.btn-icon { width: 36px; height: 36px; }

/* Cards */
.card       { padding: 14px; border-radius: 12px; }
.card-sm    { padding: 10px; }
.glass-card { padding: 14px; }

/* Forms */
.form-input { padding: 10px 13px; }
.form-group { margin-bottom: 12px; }
.form-row, .form-row-3 { grid-template-columns: 1fr; gap: 10px; }
.form-label { font-size: 11px; margin-bottom: 4px; }

/* Hero */
.hero         { text-align: center; }
.hero-content { padding-top: 76px; padding-bottom: 44px; text-align: center; }
.hero-tagline { font-size: 11px; padding: 4px 12px; margin-bottom: 14px; }
.hero-btns    { flex-direction: column; gap: 8px; margin-top: 18px; justify-content: center; }
.hero-btns .btn { width: 100%; justify-content: center; }
.hero-stats   { gap: 16px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.hero-stat    { min-width: 68px; }
.hero-stat-num { font-size: 20px; }
.hero-stat-label { font-size: 11px; }

/* Search box */
.search-box    { padding: 16px 12px; border-radius: 12px; }
.search-box h2 { font-size: 15px; }
.route-builder { grid-template-columns: 1fr; gap: 8px; }
.swap-btn      { margin: -4px auto; transform: rotate(90deg); width: 32px; height: 32px; }
.trip-type-tabs { flex-wrap: wrap; gap: 5px; }

/* Modals */
.overlay { padding: 0; align-items: flex-end; }
.modal   {
padding: 18px 14px;
border-radius: 16px 16px 0 0;
width: 100%; max-width: 100%;
max-height: 90vh; margin: 0;
}

/* Flight cards */
.flight-card         { padding: 12px; }
.flight-route-row    { flex-wrap: wrap; gap: 6px; }
.flight-time-big     { font-size: 18px; }
.flight-airport-code { font-size: 22px; }
.flight-price-amount { font-size: 18px; }
.flight-price-box    {
width: 100%; display: flex; align-items: center;
gap: 8px; flex-wrap: wrap;
border-top: 1px solid var(--border);
padding-top: 8px; margin-top: 4px;
}

/* Booking steps */
.booking-steps       { gap: 3px; padding-bottom: 8px; overflow-x: auto; }
.step-num            { width: 24px; height: 24px; font-size: 10px; }
.step-label-text     { display: none; }
.step-line-connector { width: 12px; }

/* Seat map */
.seat           { width: 24px; height: 24px; font-size: 8px; border-radius: 4px; }
.seat-row       { gap: 3px; margin-bottom: 3px; }
.seat-row-label { font-size: 8px; width: 14px; }
.seat-gap       { width: 8px; }

/* Stats */
.stats-grid     { grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Trust */
.trust-pills { gap: 6px; flex-wrap: wrap; justify-content: center; }
.trust-pill  { font-size: 11px; padding: 5px 10px; }

/* Reviews */
.review-card   { min-width: 240px; padding: 14px; }
.review-scroll { gap: 10px; }

/* Contact */
.contact-methods { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.contact-card    { padding: 12px 10px; }
.contact-icon    { font-size: 20px; }

/* Tracker */
.track-hero            { padding: 64px 0 24px; }
.track-hero .display-2 { font-size: clamp(16px, 5.5vw, 22px); }
.airport-big           { font-size: 28px !important; }
.track-stat-grid       { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.track-stat            { padding: 8px 6px; }

/* Chat widget */
.chat-window {
width: calc(100vw - 16px) !important;
right: 8px !important; left: 8px !important;
bottom: 72px !important;
max-height: 65vh;
}
.chat-fab { bottom: 12px; right: 12px; width: 48px; height: 48px; font-size: 19px; }

/* Ticket */
.t-city { font-size: 26px !important; }
.t-time { font-size: 15px !important; }

/* Misc */
.page-header    { flex-direction: column; align-items: flex-start; gap: 8px; }
.page-title-h   { font-size: 18px; }
.section-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.section-title-text { font-size: 15px; }
.divider        { margin: 12px 0; }
.price-summary  { margin-top: 12px; }
.upload-zone    { padding: 16px 12px; }
.backdoor-card  { width: calc(100vw - 28px); padding: 24px 16px; }

/* Dashboard / admin */
.dashboard-layout { display: block; }
.dashboard-main   { padding: 12px; margin-left: 0; }
.site-sidebar {
width: 264px; transform: translateX(-100%);
position: fixed; top: 0; bottom: 0; left: 0; z-index: 300;
transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.site-sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.5); }
.sidebar-toggle-btn {
display: flex !important; position: fixed;
bottom: 72px; left: 12px; z-index: 200;
width: 40px; height: 40px;
background: var(--card); border: 1px solid var(--border);
border-radius: 50%; align-items: center; justify-content: center;
font-size: 16px; cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.adm-side { width: 248px; transform: translateX(-100%); position: fixed; z-index: 300; }
.adm-side.open { transform: translateX(0); }
.adm-main { margin-left: 0 !important; padding: 12px !important; }
.adm-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
.adm-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Popular routes */
#popularRoutesBar {
overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#popularRoutesBar::-webkit-scrollbar { display: none; }
.route-pill { white-space: nowrap; flex-shrink: 0; }

/* Payment */
.payment-methods-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.payment-option       { padding: 9px 6px; }
.payment-opt-icon     { font-size: 20px; }
.payment-opt-name     { font-size: 11px; }
.payment-opt-desc     { font-size: 10px; }

/* Table */
.table-wrap { border-radius: 8px; }
table       { font-size: 12px; }
thead th    { padding: 9px 10px; font-size: 10px; }
tbody td    { padding: 10px 10px; }

/* Utility tightening */
.gap-24 { gap: 12px; }
.gap-16 { gap: 8px; }
.gap-12 { gap: 6px; }
.mt-32  { margin-top: 18px; }
.mt-24  { margin-top: 12px; }
.mb-32  { margin-bottom: 18px; }
.mb-24  { margin-bottom: 12px; }
}

/* ═══════════════════════════════════════════════════════════
§6  MOBILE  ≤ 480px  - CORE OVERRIDE
Dense optimisations for 375px viewports.
(includes flex/grid overrides from main.css)
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

/* ── Main.css layout overrides ── */
.flex { flex-direction: column !important; }
.grid { grid-template-columns: 1fr !important; }

/* ── Container & section rhythm ── */
.container  { padding: 0 var(--container-h) !important; }
.section    { padding: var(--section-v) 0 !important; }
.section-sm { padding: 18px 0 !important; }

/* ── Typography ── */
.display-1 { font-size: clamp(20px, 5.9vw, 22px) !important; line-height: 1.15; letter-spacing: -0.01em; }
.display-2 { font-size: clamp(17px, 4.8vw, 19px) !important; line-height: 1.2; }
.display-3 { font-size: clamp(14px, 4vw,   16px) !important; line-height: 1.25; }
h1 { font-size: clamp(15px, 4.3vw, 17px) !important; line-height: 1.2; }
h2 { font-size: clamp(14px, 3.8vw, 16px) !important; line-height: 1.25; }
h3 { font-size: clamp(13px, 3.4vw, 15px) !important; line-height: 1.3; }
h4 { font-size: 13px !important; }
h5 { font-size: 12px !important; }
p  { font-size: 13px !important; line-height: 1.5; }
small, .text-sm { font-size: 11px !important; }

/* ── Layout: force single column ── */
.grid-2,
.grid-3,
.grid-4     { grid-template-columns: 1fr !important; gap: 10px !important; }

/* ── Navbar ── */
.navbar        { height: 52px !important; padding: 0 12px !important; }
.nav-logo-text { font-size: 15px !important; letter-spacing: 1.5px; }
.nav-logo-icon { width: 28px !important; height: 28px !important; font-size: 13px !important; border-radius: 6px !important; }
.mobile-menu   { top: 52px !important; padding: 8px 10px; gap: 2px; }
.mobile-menu .nav-link { padding: 9px 12px; font-size: 13px; }

/* ── Buttons ── */
.btn    { padding: 8px 14px !important;  font-size: 12px !important;   min-height: 38px !important; gap: 5px; }
.btn-sm { padding: 5px 10px !important;  font-size: 11px !important;   min-height: 30px !important; }
.btn-lg { padding: 9px 16px !important;  font-size: 12px !important;   min-height: 40px !important; }
.btn-xl { padding: 10px 18px !important; font-size: 13px !important;   min-height: 42px !important; }
.btn-icon { width: 34px !important; height: 34px !important; }

/* ── Cards ── */
.card       { padding: 12px !important; border-radius: 10px !important; }
.card-sm    { padding: 9px  !important; border-radius: 8px  !important; }
.glass-card { padding: 12px !important; border-radius: 10px !important; }

/* ── Forms ── */
.form-input  { padding-top: 9px !important; padding-bottom: 9px !important; font-size: 16px !important; } /* horizontal padding left to the base rules so .input-group icon gutters survive */
.form-group  { margin-bottom: 10px !important; }
.form-label  { font-size: 10px !important; margin-bottom: 3px !important; }
.form-hint,
.form-error  { font-size: 11px !important; }

/* ── Hero ── */
.hero          { padding: 52px 0 28px !important; }
.hero-content  { padding-top: 58px !important; padding-bottom: 32px !important; text-align: center; }
.hero-tagline  { font-size: 10px !important; padding: 3px 10px !important; margin-bottom: 12px !important; border-radius: 14px; }
.hero-btns     { flex-direction: column !important; gap: 7px !important; margin-top: 14px !important; }
.hero-btns .btn { width: 100% !important; justify-content: center !important; }
.hero-stats    { gap: 12px !important; margin-top: 20px !important; flex-wrap: wrap; justify-content: center; }
.hero-stat-num { font-size: 18px !important; }
.hero-stat-label { font-size: 10px !important; }

/* ── Search box ── */
.search-box    { padding: 12px 10px !important; border-radius: 10px !important; }
.search-box h2 { font-size: 14px !important; }
.trip-tab      { font-size: 12px !important; padding: 6px 10px !important; }

/* ── Flight cards ── */
.flight-card         { padding: 10px !important; border-radius: 10px !important; }
.flight-time-big     { font-size: 16px !important; }
.flight-airport-code { font-size: 20px !important; }
.flight-price-amount { font-size: 16px !important; }
.flight-price-box    { padding-top: 7px !important; margin-top: 3px !important; gap: 6px; }

/* ── Modal: full-width bottom sheet ── */
.overlay { padding: 0 !important; align-items: flex-end !important; }
.modal {
padding: 16px 12px !important;
border-radius: 14px 14px 0 0 !important;
width: 100% !important; max-width: 100% !important;
max-height: 90vh; margin: 0 !important;
}

/* ── Seat map ── */
.seat           { width: 21px !important; height: 21px !important; font-size: 7px !important; border-radius: 4px !important; }
.seat-row       { gap: 2px !important; margin-bottom: 2px !important; }
.seat-row-label { font-size: 7px !important; width: 13px !important; }
.seat-gap       { width: 7px !important; }

/* ── Stats ── */
.stats-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.adm-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

/* ── Contact ── */
.contact-methods { grid-template-columns: 1fr !important; gap: 7px !important; }
.contact-card    { padding: 10px 9px !important; }
.contact-icon    { font-size: 18px !important; }

/* ── Tracker ── */
.track-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
.airport-big     { font-size: 22px !important; }
.track-stat      { padding: 7px 5px !important; }

/* ── Reviews ── */
.review-card { min-width: 220px !important; padding: 12px !important; }

/* ── Badges ── */
.badge    { padding: 2px 8px !important; font-size: 10px !important; }
.badge-lg { padding: 4px 10px !important; font-size: 11px !important; }

/* ── Ticket ── */
.t-city { font-size: 22px !important; }
.t-time { font-size: 14px !important; }

/* ── Booking steps ── */
.step-num            { width: 22px !important; height: 22px !important; font-size: 9px !important; }
.step-line-connector { width: 8px !important; flex-shrink: 0; }

/* ── Payment ── */
.payment-methods-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 7px !important; }
.payment-option       { padding: 8px 5px !important; min-height: 64px !important; }
.payment-opt-icon     { font-size: 18px !important; }
.payment-opt-name     { font-size: 10px !important; }
.payment-opt-desc     { font-size: 9px !important; }

/* ── Sidebar overlay ── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 299; }
.sidebar-overlay.active { display: block; }

/* ── Misc text ── */
.page-title-h    { font-size: 16px !important; }
.section-title-text { font-size: 14px !important; }
.route-pill      { font-size: 11px !important; padding: 5px 10px !important; }
.trust-pill      { font-size: 10px !important; padding: 4px 9px !important; }
.nav-logo-text   { font-size: 14px !important; }
.badge-cyan, .badge-green, .badge-gold, .badge-red,
.badge-purple, .badge-muted { font-size: 10px !important; }

/* ── Tables ── */
table    { font-size: 11px !important; }
thead th { padding: 8px 9px !important; font-size: 9px !important; }
tbody td { padding: 9px 9px !important; }

/* ── Sections ── */
.divider        { margin: 10px 0 !important; }
.section-header { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-bottom: 12px !important; }
.upload-zone    { padding: 14px 10px !important; }
.price-summary  { margin-top: 10px !important; }

/* ── Utility overrides ── */
.gap-24 { gap: 10px !important; }
.gap-16 { gap: 7px !important; }
.gap-12 { gap: 5px !important; }
.gap-8  { gap: 4px !important; }
.mt-32  { margin-top: 16px !important; }
.mt-24  { margin-top: 10px !important; }
.mt-16  { margin-top: 8px !important; }
.mb-32  { margin-bottom: 16px !important; }
.mb-24  { margin-bottom: 10px !important; }
.mb-16  { margin-bottom: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════
§7  NANO  ≤ 360px  - floor values
═══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

body { font-size: 12px !important; }

.display-1 { font-size: 19px !important; }
.display-2 { font-size: 16px !important; }
.display-3 { font-size: 14px !important; }
h1 { font-size: 15px !important; }
h2 { font-size: 13px !important; }
h3 { font-size: 12px !important; }
p  { font-size: 12px !important; }

.navbar        { height: 48px !important; padding: 0 10px !important; }
.nav-logo-text { font-size: 13px !important; }
.nav-logo-icon { width: 26px !important; height: 26px !important; font-size: 12px !important; }
.mobile-menu   { top: 48px !important; }

.card    { padding: 10px !important; border-radius: 9px !important; }
.card-sm { padding: 8px  !important; }

.btn    { padding: 7px 11px !important; font-size: 11px !important; min-height: 36px !important; }
.btn-sm { padding: 4px 9px  !important; font-size: 10px !important; min-height: 28px !important; }
.btn-lg { padding: 8px 13px !important; font-size: 11px !important; min-height: 38px !important; }
.btn-xl { padding: 9px 15px !important; font-size: 12px !important; min-height: 40px !important; }

.airport-big     { font-size: 20px !important; }
.flight-airport-code { font-size: 18px !important; }
.flight-time-big     { font-size: 15px !important; }

.hero-content  { padding-top: 52px !important; padding-bottom: 26px !important; }
.hero-stat-num { font-size: 16px !important; }

.seat      { width: 19px !important; height: 19px !important; font-size: 6px !important; }
.seat-gap  { width: 5px !important; }

.review-card { min-width: 200px !important; }

.t-city { font-size: 20px !important; }
.t-time { font-size: 13px !important; }

.payment-option { min-height: 58px !important; }
}

/* ═══════════════════════════════════════════════════════════
§8  TOUCH UX - applies to all mobile widths (≤768px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

/* WCAG 2.5.5 - min 44×44px for primary actions */
.btn-primary,
.btn-gold,
.trip-tab   { min-height: 44px; }

/* Remove iOS blue flash on tap */
.btn, .nav-link, .seat, .booking-step, .trip-tab,
.payment-option, .route-pill, .card-hover {
-webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on tappable UI */
.seat, .booking-step, .trip-tab, .payment-option {
user-select: none; -webkit-user-select: none;
}

/* Native momentum scrolling */
.table-wrap, .review-scroll, #popularRoutesBar,
.booking-steps, .modal {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}

/* Hide scrollbars on swipe containers */
.review-scroll::-webkit-scrollbar,
.booking-steps::-webkit-scrollbar,
#popularRoutesBar::-webkit-scrollbar { display: none; }
.review-scroll, .booking-steps, #popularRoutesBar { scrollbar-width: none; }

/* Focus ring without layout shift on iOS */
.form-input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0,212,255,0.2);
}

/* Body scroll lock helper (toggle via JS) */
body.nav-open { overflow: hidden; }
}

/* ═══════════════════════════════════════════════════════════
   §9  MISSING LAYOUT OVERRIDES  ≤ 1024px  (tablet/mobile)
   Grids that main.css defines at desktop sizes but never
   collapses properly on small screens.
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-layout        { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .split-grid         { grid-template-columns: 1fr; gap: 18px; }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 28px; }
  .features-grid      { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .hero-search-preview{ margin-top: 24px; }
  .booking-detail-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   §10  MOBILE LAYOUT  ≤ 768px  - grids & hero  (supplement)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero */
  .hero-layout        { grid-template-columns: 1fr !important; gap: 20px !important; text-align: center; }
  .hero-search-preview{ padding: 18px 14px !important; border-radius: 14px !important; margin-top: 0 !important; }
  .hero-search-preview > div:first-child { font-size: 15px !important; margin-bottom: 14px !important; }

  /* Feature grid */
  .features-grid      { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .feature-card-3d    { padding: 16px !important; border-radius: 14px !important; }
  .feature-icon       { width: 40px !important; height: 40px !important; font-size: 18px !important; margin-bottom: 10px !important; }
  .feature-title      { font-size: 14px !important; margin-bottom: 5px !important; }
  .feature-desc       { font-size: 12px !important; line-height: 1.55 !important; }

  /* Stat glow numbers (hero stats size themselves in §15) */
  .stat-glow-num      { font-size: 1.9rem; }

  /* Live activity cards */
  .split-grid > div > .card { padding: 14px !important; }

  /* Dashboard stat cards */
  .stat-value { font-size: 22px !important; }
  .stat-icon  { font-size: 22px !important; margin-bottom: 10px !important; }

  /* Ticket city codes */
  .ticket-city-code   { font-size: 32px !important; }
  .ticket-detail-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; margin-top: 16px !important; }

  /* Booking detail */
  .booking-detail-grid{ grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════
   §11  SMALL MOBILE  ≤ 480px  - layout floor values
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Hero search preview */
  .hero-search-preview{ padding: 14px 12px !important; border-radius: 12px !important; }
  .hero-search-preview > div:first-child { font-size: 14px !important; margin-bottom: 10px !important; }
  .trip-tab           { font-size: 11px !important; padding: 6px 10px !important; min-height: 38px !important; }

  /* Feature grid → compact 2-column cards (see §15) */
  .features-grid      { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .feature-card-3d    { padding: 10px !important; display: block !important; border-radius: 12px !important; }
  .feature-icon       { width: 30px !important; height: 30px !important; font-size: 15px !important; margin-bottom: 6px !important; border-radius: 9px !important; }
  .feature-title      { font-size: 12.5px !important; margin-bottom: 3px !important; }
  .feature-desc       { font-size: 11px !important; line-height: 1.4 !important; }

  /* Stat glow */
  .stat-glow-num      { font-size: 1.5rem; }

  /* Ticket */
  .ticket-city-code   { font-size: 26px !important; }
  .ticket-header, .ticket-body, .ticket-footer { padding: 14px !important; }
  .ticket-detail-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 12px !important; }

  /* Dashboard */
  .stat-value         { font-size: 20px !important; }
  .stat-card          { padding: 14px !important; }

  /* Booking detail */
  .booking-detail-grid{ grid-template-columns: 1fr !important; }

  /* Profile */
  .profile-header     { padding: 18px !important; }
  .profile-avatar     { width: 68px !important; height: 68px !important; font-size: 24px !important; border-radius: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════
   §12  FLIGHTGAME HUD  - mobile overrides
   Fixes oversized arrow-pad, powerups bar, and topbar
   on Pixel 1 / iPhone X / iPhone 7-8 / Samsung etc.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Topbar: tighten scoring row */
  #topbar             { padding: 6px 10px !important; gap: 6px !important; }
  .logo               { font-size: 11px !important; }
  .sc                 { padding: 3px 7px !important; font-size: 10px !important; border-radius: 6px !important; }
  #livesEl            { font-size: 14px !important; gap: 2px !important; }

  /* Left info panel - push below topbar */
  #left-info          { top: 44px !important; left: 10px !important; font-size: 10px !important; line-height: 1.8 !important; }

  /* Power-ups bar - shrink buttons */
  #powerups-bar       { top: 44px !important; right: 8px !important; gap: 3px !important; }
  .pu-btn             { padding: 4px 7px !important; font-size: 9px !important; min-width: 72px !important; border-radius: 6px !important; }
  .pu-cd              { font-size: 8px !important; }

  /* Control pad (arrow keys) */
  #ctrl-bar {
    bottom: 10px !important;
    gap: 5px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(42px, 60px)) !important;
    grid-template-rows: auto auto auto auto !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
  }
  #ctrl-bar > .ctrl-btn {
    width: 100% !important;
    min-width: unset !important;
  }
  #ctrl-bar > [data-dir="up"]    { grid-column: 2; grid-row: 1; }
  #ctrl-bar > [data-dir="left"]  { grid-column: 1; grid-row: 2; }
  #ctrl-bar > [data-dir="down"]  { grid-column: 2; grid-row: 2; }
  #ctrl-bar > [data-dir="right"] { grid-column: 3; grid-row: 2; }
  #ctrl-bar > #fireBtn           { grid-column: 1 / span 3; grid-row: 3; }
  #ctrl-bar > [data-pu="boost"] { grid-column: 1 / span 3; grid-row: 4; }
  .ctrl-btn           { padding: 9px 12px !important; font-size: 13px !important; min-width: 42px !important; border-radius: 8px !important; }

  /* Progress HUD bottom-left */
  #prog-hud           { bottom: 72px !important; left: 8px !important; padding: 6px 9px !important; min-width: 100px !important; font-size: 9px !important; border-radius: 8px !important; }
  .ph-rank            { font-size: 10px !important; margin-bottom: 3px !important; }

  /* Audio button */
  #audio-btn          { bottom: 72px !important; right: 8px !important; padding: 5px 8px !important; font-size: 10px !important; border-radius: 6px !important; }

  /* Combo meter */
  .cm-val             { font-size: 16px !important; }
  .cm-track           { width: 90px !important; }

  /* Overlay (start/game-over screen) */
  #overlay            { padding: 16px !important; }
  .ov-icon            { font-size: 42px !important; margin-bottom: 6px !important; }
  .ov-title           { font-size: 24px !important; margin-bottom: 4px !important; }
  .ov-sub             { font-size: 11px !important; max-width: 100% !important; margin-bottom: 14px !important; line-height: 1.6 !important; }
  .ovs-card           { padding: 6px 12px !important; }
  .ovs-val            { font-size: 16px !important; }
  .ovs-lbl            { font-size: 8px !important; }
  .ov-btn             { padding: 10px 22px !important; font-size: 13px !important; }

  /* Unlock toast */
  #unlock-toast       { padding: 12px 18px !important; min-width: 180px !important; border-radius: 10px !important; }
  .ut-body            { font-size: 16px !important; }

  /* Force-back button */
  #force-back         { padding: 5px 10px !important; font-size: 11px !important; border-radius: 7px !important; top: 8px !important; left: 8px !important; }
}

@media (max-width: 480px) {
  /* Powerups bar: 2-column grid to save vertical space */
  #powerups-bar       { display: grid !important; grid-template-columns: 1fr 1fr !important; top: 40px !important; right: 6px !important; gap: 3px !important; max-width: 160px !important; }
  .pu-btn             { min-width: unset !important; width: 100% !important; font-size: 8px !important; padding: 4px 5px !important; }

  /* Arrow pad: compact */
  #ctrl-bar           { bottom: 8px !important; gap: 4px !important; }
  .ctrl-btn           { padding: 8px 10px !important; font-size: 12px !important; min-width: 38px !important; border-radius: 7px !important; }

  /* Topbar: single-line fit */
  #topbar             { padding: 4px 8px !important; flex-wrap: nowrap !important; }
  .score-row          { gap: 3px !important; }
  .sc                 { padding: 2px 5px !important; font-size: 9px !important; }
  .logo               { font-size: 9px !important; letter-spacing: 0 !important; }

  /* Left info: hide on tiny screens (overlaps powerups) */
  #left-info          { display: none !important; }

  /* Force-back: even smaller */
  #force-back         { font-size: 10px !important; padding: 4px 8px !important; }

  /* Overlay */
  .ov-title           { font-size: 20px !important; }
  .ov-sub             { font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════
   §13  TRACK PAGE / AWARD CARDS  - mobile overrides
   Handles elements with inline font-size that can't be
   targeted by earlier rules (JavaScript-generated HTML).
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Award animation cards (track.html) */
  .award-anim-card    { min-width: 120px !important; padding: 18px 14px !important; }
  .award-icon-wrap    { width: 46px !important; height: 46px !important; font-size: 22px !important; margin-bottom: 10px !important; }
  .award-val          { font-size: 20px !important; }
  .award-lbl          { font-size: 11px !important; }

  /* Live booking stats (index.html inline font-size:28px) */
  #liveFlights,
  #liveCountries,
  #livePassengers     { font-size: clamp(20px, 5vw, 28px) !important; }

  /* Tracker inline font sizes */
  #trFlightNum        { font-size: clamp(16px, 4.5vw, 22px) !important; }
  #trDepTime,
  #trArrTime          { font-size: clamp(16px, 4.5vw, 22px) !important; }

  /* Globe 3D footer stats bar - prevent overflow */
  #globe3d-footer     { flex-wrap: wrap !important; gap: 6px !important; padding: 8px 10px !important; }
  .g3d-stat           { padding: 4px 8px !important; font-size: 10px !important; }
  .g3d-stat-val       { font-size: 11px !important; }

  /* 3D globe controls: reposition on mobile */
  #globe3d-controls   { top: auto !important; bottom: 44px !important; transform: none !important; right: 10px !important; flex-direction: row !important; }
  .g3d-ctrl           { width: 28px !important; height: 28px !important; font-size: 12px !important; }

  /* Review cards in scroller: narrower on mobile */
  .review-card-v2     { min-width: 260px !important; max-width: 280px !important; padding: 16px !important; }
}

@media (max-width: 480px) {
  /* Award cards: 3-per-row on small */
  .award-anim-card    { min-width: 90px !important; padding: 12px 8px !important; }
  .award-icon-wrap    { width: 36px !important; height: 36px !important; font-size: 18px !important; margin-bottom: 6px !important; }
  .award-val          { font-size: 15px !important; }
  .award-lbl          { font-size: 9px !important; }

  /* Globe footer: hide some stats */
  #globe3d-footer .g3d-stat:nth-child(3),
  #globe3d-footer .g3d-stat:nth-child(4) { display: none !important; }

  /* Track hero search stacks fully */
  #trackInput         { font-size: 14px !important; letter-spacing: 0.5px !important; }

  /* Review card in scroller: smaller */
  .review-card-v2     { min-width: 220px !important; padding: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════
   §15  REVIEW SCROLLER - reduced card sizes on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .review-card           { min-width: 220px !important; max-width: 250px !important; padding: 14px !important; }
  .review-card .review-text { font-size: 12px !important; line-height: 1.6 !important; margin-bottom: 10px !important; }
  .review-card .review-stars { font-size: 12px !important; margin-bottom: 8px !important; }
  .review-scroll-inner   { gap: 12px !important; }
  /* track.html v2 review cards */
  .review-card-v2        { min-width: 230px !important; max-width: 260px !important; padding: 14px !important; }
  .review-infinite-track { gap: 12px !important; }
}

@media (max-width: 480px) {
  .review-card           { min-width: 180px !important; max-width: 210px !important; padding: 12px !important; }
  .review-card .review-text { font-size: 11px !important; }
  .review-card-v2        { min-width: 180px !important; padding: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════
   §16  BOOKING - "Choose Your Journey Type" flight guide cards
   Also: payment methods grid, booking steps, price summary
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Flight type guide cards (minmax 180px) → single col */
  [style*="minmax(180px"] { grid-template-columns: 1fr !important; }
  /* Payment method grid */
  .payment-methods-grid   { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .payment-option         { padding: 10px 6px !important; }
  .payment-opt-icon       { font-size: 20px !important; }
  .payment-opt-name       { font-size: 11px !important; }
  .payment-opt-desc       { font-size: 9px !important; }
  /* Price summary sidebar */
  .price-summary          { padding: 14px !important; border-radius: 12px !important; }
  /* Confirmation action buttons */
  .fw-action-strip        { flex-wrap: wrap !important; gap: 8px !important; }
  .fw-action-btn:not(.fw-action-icon) { flex: 1 1 calc(50% - 4px) !important; min-width: 120px !important; padding: 10px 8px !important; font-size: 12px !important; }
  /* Ticket wrap */
  .ticket-wrap            { margin: 16px 0 !important; border-radius: 16px !important; }
  .ticket-top             { padding: 18px !important; }
  .ticket-mid             { padding: 16px !important; }
  .ticket-bot             { padding: 14px !important; }
  .t-city                 { font-size: clamp(28px, 8vw, 44px) !important; }
  .t-time                 { font-size: clamp(16px, 4vw, 22px) !important; }
}

@media (max-width: 480px) {
  .payment-methods-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .fw-action-btn:not(.fw-action-icon) { flex: 1 1 100% !important; }
  .price-summary          { padding: 12px !important; }
  [style*="minmax(160px"] { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   §17  DASHBOARD + ALL SIDEBAR PAGES - element sizing
   Covers: dashboard.html, bookings.html, profile.html,
   transactions.html, notifications.html
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebar layout */
  .site-sidebar           { width: 260px !important; }
  .dashboard-main         { padding: 16px !important; }

  /* Stats grid: 2-col */
  .stats-grid             { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .stat-card              { padding: 14px !important; }
  .stat-value             { font-size: 20px !important; }
  .stat-label             { font-size: 11px !important; }
  .stat-icon              { font-size: 20px !important; margin-bottom: 8px !important; }

  /* Admin tabs */
  .admin-tabs             { flex-wrap: wrap !important; gap: 4px !important; margin-bottom: 16px !important; }
  .admin-tab              { padding: 7px 12px !important; font-size: 12px !important; }

  /* Section header */
  .section-header         { flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 14px !important; }
  .section-title-text     { font-size: 15px !important; }

  /* Table overflows → scroll */
  .table-wrap, table      { overflow-x: auto !important; display: block !important; width: 100% !important; }
  table                   { min-width: 520px !important; }
  td, th                  { padding: 8px 10px !important; font-size: 12px !important; white-space: nowrap !important; }

  /* Profile cards */
  .profile-header         { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 18px !important; }
  .profile-avatar         { width: 64px !important; height: 64px !important; font-size: 22px !important; }

  /* Notification / booking item rows */
  .notif-item, .booking-item { padding: 12px !important; }
  .notif-icon             { width: 36px !important; height: 36px !important; font-size: 16px !important; }

  /* 3D map page */
  #mapCanvas, #threeCanvas { min-height: 280px !important; }
  .map-hud                { padding: 8px 10px !important; font-size: 10px !important; gap: 4px !important; }
  .map-controls           { right: 8px !important; bottom: 8px !important; gap: 4px !important; }
  .map-ctrl-btn           { width: 32px !important; height: 32px !important; font-size: 14px !important; }

  /* Contact page */
  .contact-methods        { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .contact-card           { padding: 16px 12px !important; }
  .contact-icon           { font-size: 24px !important; margin-bottom: 8px !important; }
  .contact-name           { font-size: 14px !important; }

  /* Flight card results */
  .flight-card            { padding: 12px !important; }
  .flight-airport-code    { font-size: clamp(20px, 6vw, 28px) !important; }
  .flight-time-big        { font-size: clamp(15px, 4.5vw, 20px) !important; }
  .flight-price-amount    { font-size: clamp(16px, 4.5vw, 22px) !important; }
}

@media (max-width: 480px) {
  /* Stats: single col on very small */
  .stats-grid             { grid-template-columns: 1fr 1fr !important; }
  .stat-card              { padding: 12px !important; }

  /* Contact: 1 col */
  .contact-methods        { grid-template-columns: 1fr !important; }

  /* Dashboard header */
  .dashboard-header       { padding: 14px 12px !important; }
  .dashboard-title        { font-size: 16px !important; }

  /* Booking item details */
  .ticket-city-code       { font-size: 22px !important; }
}

/* ═══════════════════════════════════════════════════════════
   §18  MOBILE MENU - hide Sign In link when user is logged in
   JS sets body.fw-logged-in; CSS hides the sign-in link.
═══════════════════════════════════════════════════════════ */
body.fw-logged-in .mobile-menu a[href="/login"],
body.fw-logged-in .mobile-menu a[href="/register"] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   §15  COMPACT HOME LAYOUT  (replaces the old vertical stacks)
   Desktop values below match the previous inline styles.
   Breakpoints: ≤1024 tablet · ≤768 phone/large · ≤599 phone · ≤359 small phone
═══════════════════════════════════════════════════════════ */

/* - Hero stats - */
.hero-stats { gap: clamp(12px, 3vw, 24px); }

/* - Quick Flight Search grid - */
.qs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.qs-grid .qs-from, .qs-grid .qs-to { grid-column: 1 / -1; }   /* desktop: From / To full width, like before */
.qs-grid .form-group { min-width: 0; }
.qs-grid .form-input { text-overflow: ellipsis; }

/* - Booking assurances - */
.assure-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.assure-row > span { white-space: nowrap; }

/* - Hot routes - */
.hot-routes { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.hot-routes-title { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.hot-routes-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.hot-route { display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.hr-flag { font-size: 14px; }
.hr-label { font-weight: 600; }
.hr-price { font-size: 11px; color: var(--emerald); }

/* - Trust indicators - */
.trust-row-strip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 32px; }
.trust-row-inline { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.tb-icon { font-size: 20px; line-height: 1; }
.trust-row-inline .tb-icon { font-size: 1em; }
.tb-title { font-weight: 700; font-size: 13px; }
.tb-sub { font-size: 11px; color: var(--muted); }

/* - Footer - */
.site-footer { background: var(--navy2); border-top: 1px solid var(--border); padding: 48px 0 24px; }
.footer-blurb { color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 280px; }
.footer-col-title { font-weight: 700; margin-bottom: 14px; font-size: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.footer-links a { color: var(--muted); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a { color: var(--muted); }

/* ── ≤1024px: tablet - four search fields in one row once there is room ── */
@media (min-width: 600px) and (max-width: 1024px) {
  .qs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
  .qs-grid .qs-from, .qs-grid .qs-to { grid-column: auto; }
}

/* ── ≤768px: phones and small tablets ── */
@media (max-width: 768px) {
  /* Book / Track side by side */
  .hero-btns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; margin-top: 16px !important; flex-direction: row !important; }
  .hero-btns .btn { width: 100% !important; min-width: 0; min-height: 46px; padding: 10px 8px; gap: 6px; white-space: nowrap; justify-content: center !important; font-size: clamp(12.5px, 3.7vw, 15px); }

  /* Stats: one compact row of four */
  .hero-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; margin-top: 16px !important; justify-content: stretch !important; }
  .hero-stat-item { min-width: 0; padding: 8px 3px; text-align: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; }
  .hero-stats .stat-glow-num { font-size: clamp(15px, 4.8vw, 22px) !important; line-height: 1.1; }
  .hero-stats .hero-stat-label { font-size: clamp(8.5px, 2.5vw, 11px) !important; line-height: 1.2; margin-top: 2px; }

  /* Quick search */
  .hero-search-preview .form-label { font-size: 10px !important; margin-bottom: 3px !important; text-align: left; }
  .qs-grid .form-group { margin-bottom: 10px !important; }
  .hero-search-preview .btn-lg { padding-top: 10px; padding-bottom: 10px; }
  .assure-row { margin-top: 10px; font-size: clamp(9.5px, 2.9vw, 12px); gap: 1px 5px; }

  /* Trust strip: 3 + 2 compact tiles */
  .trust-row-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .trust-row-strip .trust-badge-3d { grid-column: span 2; }
  .trust-row-strip .trust-badge-3d:nth-child(n+4) { grid-column: span 3; }
  .trust-row-strip .trust-badge-3d { flex-direction: column; justify-content: center; text-align: center; gap: 2px; padding: 8px 6px; border-radius: 10px; min-width: 0; }
  .trust-row-strip .tb-icon { font-size: 16px; }
  .trust-row-strip .tb-title { font-size: 12px; }
  .trust-row-strip .tb-sub { font-size: 10px; line-height: 1.25; }
  .trust-row-inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .trust-row-inline .trust-badge-3d { flex-direction: column; justify-content: center; text-align: center; gap: 3px; padding: 8px 6px; border-radius: 10px; font-size: 10.5px; line-height: 1.25; min-width: 0; }
  .trust-row-inline .tb-icon { font-size: 16px; }

  /* Footer: brand on top, three compact link columns */
  .site-footer { padding: 28px 0 16px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; margin-bottom: 20px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-blurb { max-width: none; font-size: 12.5px; line-height: 1.55; }
  .footer-col-title { margin-bottom: 6px; font-size: 13px; }
  .footer-links { gap: 2px; font-size: 12.5px; }
  .footer-links a { display: block; padding: 5px 0; }
  .footer-bottom { padding-top: 14px; gap: 8px; justify-content: center; text-align: center; }
  .footer-legal { justify-content: center; gap: 6px 16px; }
}

/* ── ≤599px: phones - 2 × 2 search grid, 2-column hot routes ── */
@media (max-width: 599px) {
  .qs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  .qs-grid .qs-from, .qs-grid .qs-to { grid-column: auto; }

  .hot-routes { margin-top: 10px; padding-top: 10px; }
  .hot-routes-title { margin-bottom: 6px; }
  .hot-routes-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #hotRoutesBar .hot-route { gap: 5px; min-height: 38px; padding: 5px 8px !important; font-size: 11px !important; font-family: var(--font); white-space: normal; line-height: 1.2; }
  .hr-flag { font-size: 12px; flex-shrink: 0; }
  .hr-price { display: none; }   /* price remains in data-price/title; booking logic never read it */
}

/* ── ≤359px: very small phones ── */
@media (max-width: 359px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 299px) {
  .hero-btns { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   §16  BOOKING PAGE - search header + collapsible flight-type guide
═══════════════════════════════════════════════════════════ */
.search-sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
@media (max-width: 768px) {
  .search-sub { font-size: clamp(9px, 2.9vw, 13px); line-height: 1.35; margin-bottom: 12px; }
}

.ft-guide { margin-top: 24px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,0.04); overflow-anchor: none; }
.ft-guide-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 16px 22px; min-height: 52px; background: none; border: 0; border-radius: 20px;
  color: inherit; font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ft-guide-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.ft-guide-chevron { color: var(--cyan); transition: transform 0.2s ease; }
.ft-guide.is-open .ft-guide-chevron { transform: rotate(180deg); }
.ft-guide-panel { padding: 0 22px 22px; }
.ft-guide-panel[hidden] { display: none; }
.ft-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ft-card { padding: 16px; border-radius: 16px; background: rgba(4,14,34,0.9); }
.ft-card-title { font-weight: 700; margin-bottom: 8px; }
.ft-card-desc { color: var(--muted); font-size: 13px; }
@media (max-width: 480px) {
  .ft-guide { margin-top: 16px; border-radius: 14px; }
  .ft-guide-toggle { padding: 12px 14px; min-height: 48px; font-size: 14px; border-radius: 14px; }
  .ft-guide-panel { padding: 0 14px 14px; }
  .ft-guide-grid { gap: 8px; }
  .ft-card { padding: 12px; border-radius: 12px; }
  .ft-card-title { margin-bottom: 4px; font-size: 13px; }
  .ft-card-desc { font-size: 12px; }
}