/* ==========================================================================
   Heathrow Terminal Park GB — legacy token bridge
   The booking flow, forms and legacy pages read these variables; they now map
   to the GS design system (Runway Blue / Signal Amber / Midnight Navy).
   Fonts: Outfit (headings) + DM Sans (body). New components live in gs.css.
   ========================================================================== */

/* ── Design Tokens ──────────────────────────────────────────────────────────── */
:root {
  --bg:          #F5F7FB;
  --surface:     #FFFFFF;
  --surface-2:   #EAF0FF;
  --ink:         #0A1A33;
  --ink-2:       #22314D;
  --muted:       #5B677A;
  --line:        #DDE3EE;
  --accent:      #1E4FD8;
  --accent-hover:#163BA8;
  --accent-soft: #EAF0FF;
  --gold:        #FFB703;
  --green:       #0E9F6E;
  --green-soft:  #E3F6EE;
  --serif:       'Outfit', 'DM Sans', system-ui, sans-serif;
  --sans:        'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:      14px;
  --radius-sm:   10px;
  --shadow-sm:   0 1px 2px rgba(10,26,51,.06), 0 1px 3px rgba(10,26,51,.05);
  --shadow-md:   0 6px 16px rgba(10,26,51,.08), 0 2px 4px rgba(10,26,51,.05);
  --shadow-lg:   0 24px 60px -20px rgba(10,26,51,.28), 0 8px 24px -8px rgba(10,26,51,.12);
  --shadow-cta:  0 8px 22px -6px rgba(255,183,3,.55), 0 2px 4px rgba(255,183,3,.25);

  /* Override main.css tokens so booking-form.css inherits the new palette */
  --clr-primary:       #1E4FD8;
  --clr-primary-dark:  #163BA8;
  --clr-primary-mid:   #1E4FD8;
  --clr-primary-light: #EAF0FF;
  --clr-accent:        #FFB703;
  --clr-accent-dark:   #E6A100;
  --clr-accent-light:  #FFF4D6;
  --clr-bg:            #F5F7FB;
  --clr-bg-alt:        #EAF0FF;
  --clr-text:          #0A1A33;
  --clr-text-muted:    #5B677A;
  --clr-border:        #DDE3EE;
  --clr-white:         #FFFFFF;
  --clr-success:       #0E9F6E;
  --clr-success-bg:    #E3F6EE;
  --color-primary:       #1E4FD8;
  --color-primary-dark:  #163BA8;
  --color-primary-light: #EAF0FF;
  --color-accent:        #FFB703;
  --color-success:       #0E9F6E;
  --color-error:         #dc2626;
  --color-text:          #0A1A33;
  --color-text-muted:    #5B677A;
  --color-border:        #DDE3EE;
  --color-bg:            #F5F7FB;
  --color-white:         #FFFFFF;
  --transition:          200ms cubic-bezier(.4,0,.2,1);
}

/* ── Global overrides ───────────────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1240px;
  padding: 0 24px;
  margin: 0 auto;
}

/* Hide old trust bar */

/* ── Site Header ────────────────────────────────────────────────────────────── */

/* ── Nav dropdowns ──────────────────────────────────────────────────────────── */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Arrow notch — sits within the padding bridge area */

/* Services dropdown wider */

/* Small terminals dropdown */

/* Dropdown item rows */

/* Footer CTA inside services dropdown */

/* Plain terminal items */

/* Mobile-menu phone link — hidden on desktop (header phone shows there instead) */

@media (max-width: 900px) {
  /* Dropdowns: flat accordion on mobile */
  .nav-item { flex-direction: column; align-items: stretch; }
}

/* ── Pulse animation ────────────────────────────────────────────────────────── */

/* ── Hero ───────────────────────────────────────────────────────────────────── */

/* Stats strip */

/* Avatars row */

/* Static stats strip (replaces ticker) */

/* ── Booking Widget (new skin, same IDs) ────────────────────────────────────── */

/* Urgency strip */

/* Airport locked field */

/* Date/time grid 2x2 */

/* CTA search button */

/* Microtrust row */

/* ── Section shared styles ──────────────────────────────────────────────────── */

/* ── Services ───────────────────────────────────────────────────────────────── */

/* ── Tier card image ────────────────────────────────────────────────────────── */

/* ── How It Works ───────────────────────────────────────────────────────────── */

/* ── Trust ──────────────────────────────────────────────────────────────────── */

/* ── Trust photo strip ──────────────────────────────────────────────────────── */

/* ── Location ───────────────────────────────────────────────────────────────── */

/* Location map column (map + facility photo stacked) */

/* ── FAQ ────────────────────────────────────────────────────────────────────── */

/* ── Final CTA ──────────────────────────────────────────────────────────────── */

/* ── New Footer ─────────────────────────────────────────────────────────────── */
/* ── btn-cta override — use green instead of legacy amber ─────────────────── */
.btn-cta {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(14,159,110,.35) !important;
}
.btn-cta:hover {
  background: #167A4E !important;
  border-color: #167A4E !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(14,159,110,.45) !important;
}

/* ── Dark footer ─────────────────────────────────────────────────────────── */

/* ── SEO section (heathrow-info) ────────────────────────────────────────────── */

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Photo strip: 2 columns, wide item spans both */
  /* Location: map and facility photo stack */
}

@media (max-width: 480px) {
  /* Keep date+time side-by-side — tighten inputs to prevent grid blowout */
  /* Widget title: hide badge so title gets full width, reduce font to fit one line */
  /* Photos: single column on very small screens */
}

/* ═══════════════════════════════════════════════════════════════════════
   SERVICE PAGES — shared layout (meet-and-greet, park-and-ride, long-stay)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero price chip ── */

/* ── Full-width banner image ── */

/* ── Split grid (image + copy side by side) ── */

/* ── Compact feature cards (2-column within split layout) ── */

/* ── Trust row ── */

/* ── Review strip ── */

/* ── Price banner ── */

/* ── Responsive ── */

/* ═══════════════════════════════════════════════════════════════════════
   TERMINAL PAGE V2
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */

/* ── Stats bar ── */

/* ── Terminal info grid ── */

/* ── Section header ── */

/* ── Parking options ── */

/* ── Review strip ── */

/* ── Tips section ── */

/* ── Why grid ── */

/* ── Final CTA section ── */

/* ── Other terminals cards ── */

/* ═══════════════════════════════════════════════════════════════════════════
   Inline Payment Form (stripe_elements gateway) — .pay-* components
   ══════════════════════════════════════════════════════════════════════════ */

.pay-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
  font-family: var(--sans);
  color: var(--ink);
}
.pay-express-label {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted); margin: 0 0 12px;
}
.pay-express-label::before, .pay-express-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.pay-divider {
  position: relative; text-align: center;
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin: 14px 0;
}
.pay-divider::before, .pay-divider::after {
  content: ""; position: absolute; top: 50%; width: calc(50% - 80px); height: 1px; background: var(--line);
}
.pay-divider::before { left: 0; }
.pay-divider::after { right: 0; }

.pay-body { margin-bottom: 18px; }
.pay-form { display: flex; flex-direction: column; gap: 14px; }
.pay-field { display: flex; flex-direction: column; gap: 6px; }
.pay-label { font-size: 12px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.pay-hint { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 700; display: grid; place-items: center; cursor: help; flex-shrink: 0; }
.pay-input {
  width: 100%; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 10px; padding: 13px 14px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink);
  outline: none; transition: all .15s; box-sizing: border-box;
}
.pay-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,79,216,.12); }
.pay-input::placeholder { color: var(--muted); }
.pay-stripe-wrap {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 10px; padding: 13px 14px;
  transition: border-color .15s, box-shadow .15s;
  min-height: 46px;
}
.pay-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pay-detail { background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 18px; }
.pay-detail-row { display: flex; gap: 14px; align-items: flex-start; }
.pay-detail-row > svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.pay-detail-title { font-weight: 700; font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.pay-detail-sub { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0; }

.pay-cta {
  width: 100%; border: none; border-radius: 12px; padding: 16px 22px;
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .15s, box-shadow .15s, background .15s;
  margin-bottom: 18px;
}
.pay-cta:hover { transform: translateY(-1px); }
.pay-cta:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.pay-cta-primary { background: var(--accent); color: white; box-shadow: var(--shadow-cta); }
.pay-cta-primary:hover:not(:disabled) { background: var(--accent-hover); }

.pay-trust { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); }
.pay-trust-row { display: flex; flex-wrap: wrap; gap: 14px; }
.pay-trust-item { display: inline-flex; align-items: center; gap: 5px; }
.pay-trust-item svg { color: var(--green); flex-shrink: 0; }
.pay-trust-processors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Mobile adjustments */
@media (max-width: 600px) {
  .pay-card { padding: 20px 16px 24px; border-radius: 14px; }
  .pay-input { font-size: 16px; } /* prevents iOS zoom */
  .pay-stripe-wrap { padding: 12px; }
  .pay-row-2 { grid-template-columns: 1fr 1fr; }
  .pay-trust-row { flex-direction: column; gap: 6px; }
}

/* ── Terminal page responsive ── */