/* ===========================================================================
   service-page.css — the shell shared by flights / hotels / cruises / packages
   ===========================================================================
   These are STANDALONE pages, not the V1 landing page. main.css is not loaded
   here, so nothing in this file can reach index.html and nothing there styles
   these. The cards themselves come from travel-explore.css.

   REAL DARK MODE LIVES HERE. The landing page is light by construction and had
   to keep an opt-in palette; these pages are new, self-contained, and follow
   the OS by default with an explicit toggle that overrides it. Both selectors
   below carry the same tokens: `[data-theme]` wins over the media query, which
   is what lets the toggle beat the system preference in both directions.
   =========================================================================== */

:root {
  /* THE BOOKING FLOW'S PAGE COLOUR, read from booking-shell.css so the
     standalone service pages and the booking pages cannot drift apart. The
     fallback is the same value, for a page that loads only this file. */
  --sp-bg:        var(--booking-page-bg, #F7F5F0);
  --sp-surface:   #FFFFFF;
  --sp-surface-2: #F1F5F9;
  --sp-ink:       #17323C;
  --sp-muted:     #6B7A80;
  --sp-line:      #E7E2DA;
  --sp-accent:    #C9482F;
  --sp-accent-dk: #A63A24;
  /* Deep navy — the sticky service header and, through booking-shell.css,
     the bar on every redirected page. Same one-definition rule as above. */
  --sp-header:    var(--booking-header-bg, #0B2239);
  --sp-header-ink:#FFFFFF;
  --sp-gold:      #C9A227;
  --sp-emerald:   #12855F;
  /* Both already lived as undeclared `var(x, fallback)` defaults throughout
     booking.css/travel-explore.css — every usage resolved to exactly these
     two values already. Declared here so they are real tokens rather than
     fallbacks nobody could see, and so dark mode can give the error shade
     the contrast it needs (see below) instead of silently inheriting a
     light-mode value that was never checked against a dark surface. */
  /* DANGER, and no longer a shade of the accent. It was named for coral
     because the accent was coral; with a gold accent an error message that
     followed it would come out gold. #C0392B is kept for its contrast
     (~5.0:1 on white) rather than for any relation to the brand. */
  --sp-coral-dark:  #C0392B;
  --sp-accent-soft: rgba(232,96,76,.16);
  /* Ink ON an accent fill. Gold is ~1.9:1 under white; the accent used to
     be coral, which is why the sheets below say color:#fff. */
  --sp-on-accent:   #FFFFFF;
  --sp-radius:    16px;
  --ff-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Consumed by travel-explore.css, which aliases the page tokens. */
  --bg: var(--sp-bg); --white: var(--sp-surface); --navy: var(--sp-ink);
  --muted: var(--sp-muted); --line: var(--sp-line); --coral: var(--sp-accent);
  --coral-dark: var(--sp-accent-dk); --gold: var(--sp-gold); --emerald: var(--sp-emerald);
  --on-accent: var(--sp-on-accent);
  /* Gold as TEXT on a light surface. The fill colour is ~1.9:1 there, so
     anything READ rather than clicked uses this instead. */
  --gold-ink: #6B5411;
}

/* Follow the system unless the visitor has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sp-bg:        #0B1220;
    --sp-surface:   #131C2E;
    --sp-surface-2: #1A2439;
    --sp-ink:       #E8EEF7;
    --sp-muted:     #93A3BA;
    --sp-line:      rgba(232,238,247,.14);
    --sp-header:    #070C16;
    /* #C0392B (the light-mode shade) reads as ~2.8:1 against these dark
       surfaces — under WCAG AA's 4.5:1 for text. The CTA red already clears
       it here (~5.2:1), so error/danger text borrows that instead of a third
       hand-picked shade. */
    --sp-coral-dark: #F2857E;
  }
}
/* An explicit choice beats the system, both ways. */
:root[data-theme="dark"] {
  --sp-bg:        #0B1220;
  --sp-surface:   #131C2E;
  --sp-surface-2: #1A2439;
  --sp-ink:       #E8EEF7;
  --sp-muted:     #93A3BA;
  --sp-line:      rgba(232,238,247,.14);
  --sp-header:    #070C16;
  --sp-coral-dark: #F2857E;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--sp-bg); color: var(--sp-ink);
  font-family: var(--ff-body); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.sp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 100; background: var(--sp-surface); color: var(--sp-ink); padding: 10px 16px; border-radius: 10px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.sp-header { position: sticky; top: 0; z-index: 60; background: var(--sp-header); color: var(--sp-header-ink); }
.sp-nav { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.sp-logo img { height: 44px; width: auto; display: block; }
.sp-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; flex: 1; flex-wrap: wrap; }
.sp-links a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 11px; border-radius: 9px; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.82); transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
/* The icon dims with the label and lifts with it on hover, so the pair reads as
   one control rather than a bright glyph next to grey text. */
.sp-links a .jpi { opacity: .8; transition: opacity .18s ease; }
.sp-links a:hover .jpi,
.sp-links a[aria-current="page"] .jpi { opacity: 1; }
.sp-links a:hover { background: rgba(255,255,255,.10); color: #fff; }
.sp-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.14); font-weight: 800; }
.sp-actions { display: flex; align-items: center; gap: 10px; }

.sp-icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff;
  cursor: pointer; transition: background .18s ease;
}
.sp-icon-btn:hover { background: rgba(255,255,255,.12); }
.sp-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sp-partner {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); font-size: 13.5px; font-weight: 700; color: #fff;
  transition: background .18s ease;
}
.sp-partner:hover { background: rgba(255,255,255,.12); }
.sp-partner svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.sp-bookings { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24); font-size: 13.5px; font-weight: 700; color: #fff;
  white-space: nowrap; transition: background .18s ease; }
.sp-bookings:hover { background: rgba(255,255,255,.12); }
.sp-bookings[aria-current="page"] { background: rgba(255,255,255,.16); }
@media (max-width: 760px) { .sp-bookings span { display: none; } .sp-bookings { padding: 9px 11px; } }

/* The outlined pill — identical to .pm-login in profile-menu.css, which the
   booking pages use; these content pages do not load that sheet. */
.sp-login { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 14px;
  border-radius: 999px; border: 1.5px solid rgba(255,255,255,.7); background: transparent;
  color: var(--sp-header-ink, #fff); font-size: 14px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; transition: background .18s ease, border-color .18s ease; }
.sp-login:hover { border-color: #fff; background: rgba(255,255,255,.10); }
.sp-login:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sp-login svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-login .sp-login-arrow { width: 18px; height: 18px; transition: transform .18s ease; }
.sp-login:hover .sp-login-arrow { transform: translateX(3px); }
@media (max-width: 480px) {
  .sp-login { gap: 7px; padding: 7px 12px 7px 10px; }
  .sp-login .sp-login-arrow { display: none; }
  .sp-login svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-login .sp-login-arrow { transition: none; }
  .sp-login:hover .sp-login-arrow { transform: none; }
}

.sp-chip { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; cursor: pointer; font-family: inherit; }
.sp-chip:hover { background: rgba(255,255,255,.12); }
.sp-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sp-accent); color: var(--on-accent, #12253F); font-size: 12px; font-weight: 800; }
.sp-chip-name { font-size: 13.5px; font-weight: 700; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp-burger { display: none; }

/* --------------------------------------------------------------------------
   Page hero strip — names the one service this page is about
   -------------------------------------------------------------------------- */
.sp-hero { background: var(--sp-header); color: #fff; padding: 34px 0 40px; }
.sp-crumb { font-size: 13px; color: rgba(255,255,255,.62); margin-bottom: 10px; }
.sp-crumb a:hover { color: #fff; text-decoration: underline; }
.sp-hero h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; }
.sp-hero p { margin: 0; font-size: 15px; color: rgba(255,255,255,.78); max-width: 640px; line-height: 1.6; }
.sp-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

/* THE SERVICE-SWITCH PILL ROW IS GONE. .sp-switch was a row of Flights /
   Hotels / Cruises / Tour Packages / Visa / Activities pills under this hero's
   H1 — the same product links the header above it already carries, a second
   time on the same screen. Product navigation is the header's, so the markup
   was removed from all six pages that carried it and these rules went with it
   rather than being left as dead selectors. The hero now ends at its
   description, which is what it is for: naming the one service this page is
   about. */

/* --------------------------------------------------------------------------
   Not-yet-live services
   -------------------------------------------------------------------------- */
.sp-soon { max-width: 620px; margin: 60px auto 80px; text-align: center; padding: 0 20px; }
.sp-soon-mark { font-size: 46px; line-height: 1; margin-bottom: 16px; }
.sp-soon h2 { margin: 0 0 10px; font-size: 24px; color: var(--sp-ink); }
.sp-soon p { margin: 0 0 22px; color: var(--sp-muted); font-size: 15px; line-height: 1.65; }
.sp-soon-cta { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sp-btn-solid { padding: 12px 22px; border-radius: 12px; background: var(--sp-accent); color: var(--on-accent, #12253F); font-weight: 800; font-size: 14px; }
.sp-btn-solid:hover { background: var(--sp-accent-dk); }
.sp-btn-line { padding: 12px 22px; border-radius: 12px; border: 1.5px solid var(--sp-line); color: var(--sp-ink); font-weight: 800; font-size: 14px; }
.sp-btn-line:hover { border-color: var(--sp-accent); color: var(--sp-accent); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sp-footer { background: var(--sp-header); color: rgba(255,255,255,.72); margin-top: 40px; padding: 34px 0; font-size: 13.5px; }
.sp-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-footer a:hover { color: #fff; text-decoration: underline; }
.sp-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sp-links {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--sp-header); flex-direction: column; align-items: stretch;
    gap: 2px; padding: 10px 16px 16px; border-top: 1px solid rgba(255,255,255,.12);
  }
  .sp-links.sp-open { display: flex; }
  .sp-burger { display: grid; }
  .sp-nav { position: relative; flex-wrap: nowrap; }
  .sp-partner span { display: none; }
  .sp-partner { padding: 9px 11px; }
}
@media (max-width: 560px) {
  .sp-chip-name { display: none; }
  .sp-hero { padding: 26px 0 30px; }
}

/* A signed-in CUSTOMER does not see the B2B "My Partner" door (service-shell.js
   sets html.jp-customer). Signed out it is shown exactly as before. */
html.jp-customer .sp-partner { display: none; }