/* Wijha — "Cobalt Sky" design system (approved 2026-07-05, replaces "Dhow")
   Deep cobalt + navy, ice-blue surfaces, sunrise-orange accent.
   Display: Bahnschrift. Token names kept from Dhow so markup didn't change:
   --lagoon = primary (cobalt), --deep = navy, --glass = ice surface,
   --sand = page ground, --brass = accent (orange). */

:root {
  --lagoon: #1d4ed8;
  --deep: #172554;
  --glass: #eff4ff;
  --sand: #f8faff;
  --brass: #f97316;
  --brass-dark: #c2410c;
  --ink: #1b2540;
  --muted: #4f5d7a;
  /* Quietest text still passes WCAG AA (>=4.5:1) on every light surface:
     4.76 on --ground, 5.12 on --sand, 5.35 on white. Do not lighten. */
  --faint: #5f6b85;
  --line: #e2e7f2;
  --card: #ffffff;
  --ground: #eef2fa; /* page background — deeper than --sand so white panels stand out */
  /* Semantic tokens so a dark theme is a pure remap (no selector overrides): */
  --navy: #172554;      /* constant navy — hero/footer grounds in BOTH themes */
  --on-accent: #ffffff; /* text/icons sitting on colored fills, both themes */
  --on-lagoon: #ffffff; /* text on --lagoon fills: white passes on light cobalt (6.7:1) but fails on the dark theme's lighter #7c9cff — dark remaps to navy */
  --shadow-panel: 0 2px 8px rgba(23, 37, 84, 0.05);
  --surface: #ffffff;   /* brightest surface: focused inputs, calendar cells, hover rows */
  --tab-idle: #46598c;
  --chip-border: #c4d2f0;
  --ico-line: #cbd9f5;
  --ico-grad2: #dbe7ff;
  --focus-ring: rgba(29, 78, 216, 0.14);
  --disabled: #c6cbd8;
  --accent-text: #c2410c; /* orange used AS TEXT (notes/tips) — lighter in dark */
  --success: #15803d; --success-bg: #dcfce7; --success-line: #bbf7d0;
  --danger: #b91c1c; --danger-bg: #fee2e2; --danger-line: #fecaca;
  --warn-ink: #9a3412; --warn-bg: #fff7ed; --warn-line: #fed7aa; --warn-chip-bg: #ffedd5;
  --err-ink: #8a2f10; --err-bg: #fbe9e4; --err-line: #eec4b8;
  --cheap-bg: #ecfdf5; --cheap-line: #a7f3d0;
  --high-bg: #fef2f2; --high-line: #fecaca;
  /* Fare-calendar heat ramp: green (cheapest quintile) → neutral → red,
     anchored on the cheap/high pairs above. */
  --heat0-bg: var(--cheap-bg); --heat0-line: var(--cheap-line);
  --heat1-bg: #f4fbf5; --heat1-line: #cdeed6;
  --heat2-bg: #f8faff; --heat2-line: #dbe3f2;
  --heat3-bg: #fdf6f2; --heat3-line: #f3d9cd;
  --heat4-bg: var(--high-bg); --heat4-line: var(--high-line);
  --radius: 14px;
  --radius-lg: 18px;
  /* Kept tight (8px blur max): cards already carry a 1px border, and a wide
     soft shadow on a bordered element is the "ghost card" anti-pattern. */
  --shadow: 0 2px 8px rgba(23, 37, 84, 0.12);
  --display: Bahnschrift, "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  /* Motion: strong curves (built-in CSS easings are too weak for deliberate UI). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Dark theme — a head script stamps data-theme before first paint (system
   preference is the default, the topbar toggle overrides + persists). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --lagoon: #7c9cff;
  --deep: #dbe4ff;
  --glass: #1d2743;
  --sand: #161e35;
  --brass-dark: #ea6c13;
  --ink: #e7ecf9;
  --muted: #a3b0cc;
  /* AA on all dark surfaces: 5.05 on --surface, 5.48 on --card. */
  --faint: #8b97b5;
  --line: #2b365a;
  --card: #182138;
  --ground: #0e1425;
  --surface: #202b49;
  --tab-idle: #97a6cd;
  --chip-border: #364470;
  --ico-line: #2e3c66;
  --ico-grad2: #22305a;
  --focus-ring: rgba(124, 156, 255, 0.28);
  --disabled: #3c4767;
  --accent-text: #fdba74;
  --success: #57d187; --success-bg: #12301d; --success-line: #1d5434;
  --danger: #f87171; --danger-bg: #391518; --danger-line: #5f2328;
  --warn-ink: #fcbe8a; --warn-bg: #2f2210; --warn-line: #5c431c; --warn-chip-bg: #3a2a12;
  --err-ink: #ffb4a2; --err-bg: #351a13; --err-line: #5e2f22;
  --cheap-bg: #10291c; --cheap-line: #1d5434;
  --high-bg: #331519; --high-line: #5f2328;
  --heat1-bg: #132429; --heat1-line: #1e4340;
  --heat2-bg: #161e35; --heat2-line: #2b365a;
  --heat3-bg: #251a27; --heat3-line: #452c41;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --on-lagoon: #172554; /* navy on #7c9cff: 5.6:1 (white fails at 2.6:1) */
  --shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.3); /* navy-tinted shadow reads as a colored glow on dark grounds */
}

/* Edge/Chromium can keep the native <select> popup on the OS light scheme
   even with color-scheme: dark, while the option text inherits the page's
   light-on-dark color — near-white rows, pale text. Pin the rows directly. */
:root[data-theme="dark"] option {
  background-color: var(--card);
  color: var(--ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Inline stroke icons (replace emoji): sized to the surrounding text,
   colored by it, baseline-tucked. Directional glyphs mirror in RTL. */
.ic { display: inline-flex; vertical-align: -2px; }
.ic svg { width: 1em; height: 1em; font-size: 15px; }
[dir="rtl"] .ic svg, [dir="rtl"] .panel-ico svg { transform: scaleX(-1); }
.panel-ico svg { width: 19px; height: 19px; color: var(--lagoon); }
.load-emoji { display: grid; place-items: center; color: var(--lagoon); }
.load-emoji svg { width: 17px; height: 17px; }
#themeBtn svg { width: 15px; height: 15px; display: block; }

/* Keyboard users jump past the topbar + section nav; visually hidden until
   focused, then a clearly visible pill above everything. */
.skip-link {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px;
  z-index: 100; padding: 10px 16px; border-radius: 999px;
  background: var(--navy); color: #fff; font-weight: 600; font-size: 0.85rem;
  text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline: 2px solid var(--brass); outline-offset: 2px; }

/* Visually hidden but readable by screen readers — live announcements. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--ground);
  color: var(--ink);
  line-height: 1.55;
}

.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  /* Solid fallback first: browsers without color-mix() (Safari <16.2,
     Chrome <111) would otherwise paint no background at all. */
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 14px; padding: 10px 20px; }
.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 1.12rem;
  color: var(--deep); text-decoration: none; letter-spacing: 0.01em;
}
.brand svg { display: block; }
.brand-ar { font-family: "Sakkal Majalla", "Traditional Arabic", "Segoe UI"; font-weight: 400; color: var(--lagoon); font-size: 1.05rem; }

.seg { display: flex; background: var(--glass); border-radius: 999px; padding: 3px; margin: 0 auto; }
.seg-btn {
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
  color: var(--tab-idle); background: none; border: none; border-radius: 999px;
  padding: 6px 18px; transition: background 0.15s, color 0.15s, transform 0.16s var(--ease-out);
}
.seg-btn:hover { color: var(--deep); }
.seg-btn.active { background: var(--lagoon); color: var(--on-lagoon); }
.tab-badge {
  display: inline-block; min-width: 17px; margin-inline-start: 6px;
  background: var(--brass); color: var(--on-accent); border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; line-height: 17px; padding: 0 5px;
  text-align: center; vertical-align: 1px;
}
.seg-btn:disabled { color: #a6b1c6; cursor: default; }
.seg-btn:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }

.topbar-side { display: flex; gap: 7px; }
.chip {
  font-size: 0.74rem; font-weight: 600; color: var(--lagoon);
  border: 1px solid var(--chip-border); border-radius: 999px; padding: 4px 11px;
  background: none; white-space: nowrap;
}
.chip-select, .chip-btn { font-family: inherit; cursor: pointer; transition: background 0.15s, transform 0.16s var(--ease-out); }
.chip-select:focus-visible, .chip-btn:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.chip-btn:hover, .chip-select:hover { background: var(--glass); }

/* Touch targets: on coarse pointers every chip / tab / small control grows
   toward the 44pt floor without inflating desktop density. Chip text stays
   the same size; only the hit area grows. */
@media (pointer: coarse) {
  .chip, .chip-btn, .chip-select, .seg-btn, .btn-plan { min-height: 44px; padding-block: 10px; }
  .stop-x, .stop-mv { min-width: 44px; min-height: 44px; }
  .dp-prev, .dp-next { min-width: 44px; }
  .day-grip { padding-inline: 12px; }
  .book-one { padding: 10px 4px; display: inline-block; }
  .jump { padding-block: 11px; }
  .dp-cell { padding: 12px 0; }
  .to-top { width: 48px; height: 48px; }
  /* iOS Safari zooms the whole page on focus when a field is under 16px. */
  .grid input, .grid select, .refine-row input, .chip-select, .stops-row input { font-size: 1rem; }
}

/* ---------- Hero ---------- */
.hero {
  /* Constant navy in both themes — a dark hero already works in dark mode. */
  background: linear-gradient(165deg, #1d4ed8 0%, #1e3a8a 65%, var(--navy) 100%);
  color: #eef3ff;
  padding: 46px 0 82px;
  margin-bottom: -44px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -70%;
  height: 240px; border-radius: 50%; background: var(--sand); opacity: 0.07;
}
/* Soft glow orbs — pure decoration, sits behind the hero copy */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 260px at 85% 20%, rgba(249, 115, 22, 0.22), transparent 70%),
    radial-gradient(circle 320px at 8% 110%, rgba(59, 130, 246, 0.35), transparent 70%);
}
.hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  letter-spacing: -0.01em; text-wrap: balance;
  position: relative;
}
.tagline { color: #d2ddfa; margin-top: 6px; max-width: 58ch; position: relative; } /* 4.9:1 on the hero's lightest gradient stop */
.status-badge {
  display: inline-block; margin-top: 16px; margin-inline-end: 8px; padding: 4px 13px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; font-size: 0.78rem; position: relative;
}

/* ---------- Search dock (both forms) ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.search-card {
  position: relative; z-index: 2; box-shadow: var(--shadow);
  border-radius: var(--radius-lg); padding: 24px;
}

/* Trips/Profile swap in for the search card as the first thing under the
   hero, but .panel's margin-top is meant for spacing *between* stacked
   panels — left as-is here it adds an extra gap the search card doesn't
   have, so the hero looks taller only on these two tabs. Zero it so all
   three tabs tuck into the hero by the same amount, and match search-card's
   position/z-index: .hero is `position: relative` with no z-index, which
   puts it in the "positioned, z-index:auto" paint layer — above plain
   static siblings regardless of DOM order. Without an explicit stacking
   context of its own, the panel's heading would render *underneath* the
   hero wherever the two overlap. */
#tripsView > .panel, #profileView > .panel {
  margin-top: 0; position: relative; z-index: 2;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}
.grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
}
.grid input, .grid select {
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink);
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--sand);
  transition: border-color 0.15s, box-shadow 0.15s;
  /* A label that wraps to two lines (e.g. "Budget (OMR, optional)") must not
     push its field down — inputs bottom-align across the row. */
  margin-top: auto;
}
/* City names are English LTR text ("Cairo (CAI) — Egypt"); in the Arabic RTL
   UI a native select clips the START of the line ("o (CAI) — Egypt"). Render
   the select's own text LTR so long names truncate at the end instead. */
[dir='rtl'] .grid select { direction: ltr; }
/* From/To hold long city names: double width on desktop (dates and counters
   stay compact); ellipsis + chevron clearance for anything still too long.
   On phones the grid is single-column, so selects are already full width. */
.grid select { text-overflow: ellipsis; padding-inline-end: 26px; }
@media (min-width: 560px) {
  .grid label:has(select), .grid label:has(.dp-range) { grid-column: span 2; }
}
/* Phones still fit two 140px columns, which clipped the range display
   ("27-7-2026 – 31-7-…") — give Dates the whole row there instead. */
@media (max-width: 559px) {
  .grid label:has(.dp-range) { grid-column: 1 / -1; }
}
.grid input:hover, .grid select:hover { border-color: var(--chip-border); }
.grid input:focus, .grid select:focus {
  outline: none; border-color: var(--lagoon); background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Children's ages — appears under the form grid when children > 0. */
.ages-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-top: 12px; }
.ages-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
}
.ages-row select {
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink);
  padding: 8px 11px; padding-inline-end: 26px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--sand);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ages-row select:hover { border-color: var(--chip-border); }
.ages-row select:focus {
  outline: none; border-color: var(--lagoon); background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.ages-note {
  flex-basis: 100%; font-size: 0.78rem; font-weight: 400;
  letter-spacing: normal; text-transform: none; color: var(--faint);
}

.interests { border: none; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 8px; }
.interests legend {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}
.interests label { font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; accent-color: var(--lagoon); }
/* Interests as toggle pills (checkbox stays in the DOM for a11y / form logic) */
@supports selector(:has(input)) {
  .interests label {
    font-size: 0.85rem; font-weight: 600; color: var(--muted);
    background: var(--sand); border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 15px; transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .interests input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
  .interests label:hover { border-color: var(--chip-border); color: var(--deep); }
  .interests label:has(input:checked) {
    background: var(--glass); border-color: var(--lagoon); color: var(--lagoon);
  }
  .interests label:has(input:checked) span::before { content: "✓ "; }
  .interests label:has(input:focus-visible) { outline: 2px solid var(--lagoon); outline-offset: 2px; }
}

.btn-primary {
  margin-top: 18px; width: 100%; padding: 13px;
  font: inherit; font-weight: 700; font-size: 1.02rem;
  /* Navy-on-brass, same as the landing CTA: white-on-orange fails WCAG AA. */
  color: var(--navy); background: var(--brass); border: none; border-radius: 10px; cursor: pointer;
  transition: background 0.15s, transform 0.16s var(--ease-out);
}
.btn-primary:hover { background: #fb8b3c; }
.btn-primary:disabled { background: var(--disabled); color: var(--on-accent); cursor: wait; }
.btn-primary:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }

/* Press feedback: every pressable scales down slightly so the UI feels like it
   is listening. Tied to the user's own action, so it stays under reduced motion. */
.btn-primary:not(:disabled):active,
.seg-btn:not(:disabled):active,
.chip-btn:active, .chip-select:active,
.btn-plan:active, .day-move:active, .jump:active,
.fc-cell:not(.fc-empty):not(.fc-na):active,
.dp-cell:not([disabled]):not(.dp-empty):active { transform: scale(0.97); }

/* ---------- Multi-city stops (chips in the Plan form) ---------- */
.stops-field { margin-top: 14px; }
.stops-label {
  display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 7px;
}
.stops-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stops-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stop-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 6px; font-size: 0.86rem; font-weight: 600; color: var(--deep);
}
/* Gateway (arrival) city chip — not removable, dashed to read as "given" */
.gw-chip { border-style: dashed; background: var(--card); }
/* ‹ › reorder buttons — every chip (gateway included) can move in the route */
.stop-mv {
  border: none; background: none; cursor: pointer; color: var(--faint);
  font-size: 1rem; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 50%;
}
.stop-mv:hover:not(:disabled) { color: var(--lagoon); background: var(--card); }
.stop-mv:disabled { opacity: 0.25; cursor: default; }
.stop-mv:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 1px; }
/* Per-city nights picker inside a stop chip ("Antalya [2 nights ▾] ×") */
.stop-nights {
  font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--lagoon);
  background: var(--card); border: 1px solid var(--chip-border); border-radius: 999px;
  padding: 1px 7px; margin-inline-start: 6px; cursor: pointer; max-width: 110px;
}
.stop-nights:hover { border-color: var(--lagoon); }
.stop-nights:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 1px; }
.stops-nights-note {
  margin-top: 8px; font-size: 0.8rem; color: var(--warn-ink);
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 9px; padding: 6px 12px;
}
.stop-x {
  border: none; background: none; cursor: pointer; color: var(--faint);
  font-size: 0.95rem; line-height: 1; padding: 2px 5px; border-radius: 50%;
}
.stop-x:hover { color: var(--danger); background: var(--danger-bg); }
.stop-x:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 1px; }
#stopInput {
  flex: 1; min-width: 150px; max-width: 240px;
  font: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px;
}
#stopInput:focus-visible { outline: 2px solid var(--lagoon); outline-offset: -1px; }
.stops-order-hint { margin-top: 6px; font-size: 0.76rem; color: var(--faint); }
.stops-why {
  list-style: none; margin: 8px 2px 0; padding: 0;
  font-size: 0.8rem; color: var(--faint);
}
.stops-why li { margin: 2px 0; }
.popular-cities { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.popular-lbl { font-size: 0.78rem; color: var(--muted); }
.pop-city[disabled] { opacity: 0.45; cursor: default; }

/* ---------- Where you'll stay (per-city hotel legs) ---------- */
.stay-leg { margin-bottom: 18px; }
.stay-leg-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--deep);
  margin: 14px 0 8px;
}
.stay-leg-dates { font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.8rem; font-weight: 400; color: var(--faint); }
.stay-nights {
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.72rem; font-weight: 700;
  color: var(--lagoon); background: var(--glass); border-radius: 999px; padding: 2px 10px;
}

/* City badge on multi-city day cards */
.day-city {
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.7rem; font-weight: 700;
  color: var(--on-accent); background: var(--lagoon); border-radius: 999px; padding: 2px 10px;
  white-space: nowrap;
}

/* ---------- Loading / error ---------- */
.loading { padding: 34px 0; }
.load-card {
  max-width: 560px; margin: 0 auto; padding: 26px 28px 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Step tracker: flights → hotels → plan, checked off as phases complete */
.load-steps { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin-bottom: 22px; }
.load-steps.hidden { display: none; }
.load-step { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 86px; }
.load-ico {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.02rem;
  background: var(--glass); border: 2px solid var(--line);
  transition: background 0.3s, border-color 0.3s;
}
.load-check { display: none; color: var(--on-accent); font-size: 1.05rem; font-weight: 700; }
.load-step.active .load-ico {
  border-color: var(--lagoon); background: var(--surface);
  animation: loadPulse 1.6s ease-in-out infinite;
}
.load-step.done .load-ico { background: var(--lagoon); border-color: var(--lagoon); }
.load-step.done .load-emoji { display: none; }
.load-step.done .load-check { display: block; }
.load-lbl { font-size: 0.74rem; font-weight: 600; color: var(--faint); text-align: center; transition: color 0.3s; }
.load-step.active .load-lbl { color: var(--lagoon); }
.load-step.done .load-lbl { color: var(--muted); }
.load-sep { flex: 0 1 46px; height: 2px; border-radius: 2px; background: var(--line); margin-top: 19px; }
@keyframes loadPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.3); }
  50% { box-shadow: 0 0 0 9px rgba(29, 78, 216, 0); }
}

/* Progress bar: cobalt fill, shimmer, orange route-dot riding the head */
.load-track {
  position: relative; height: 9px; border-radius: 999px;
  background: var(--glass); margin: 4px 8px 14px;
}
.load-fill {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--deep), var(--lagoon) 55%, #3b82f6);
  /* impeccable-disable-next-line layout-transition -- absolutely positioned 9px bar (layout scope is itself); the overhanging route-dot rules out the overflow-hidden + translate fix */
  transition: width 0.3s ease;
}
[dir='rtl'] .load-fill { background: linear-gradient(270deg, var(--deep), var(--lagoon) 55%, #3b82f6); }
.load-fill::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: loadShimmer 1.8s linear infinite;
}
.load-fill::after {
  content: ''; position: absolute; inset-inline-end: -5px; top: 50%;
  width: 15px; height: 15px; margin-top: -7.5px; border-radius: 50%;
  background: var(--brass); border: 3px solid var(--card);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.22), 0 2px 6px rgba(23, 37, 84, 0.3);
}
@keyframes loadShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.load-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.load-foot p { color: var(--muted); font-size: 0.92rem; text-align: start; }
.load-pct {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  color: var(--lagoon); min-width: 4ch; text-align: end; font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .load-fill::before { animation: none; }
  .load-step.active .load-ico { animation: none; box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.18); }
}
@media (max-width: 480px) {
  .load-card { padding: 20px 16px 16px; }
  .load-step { min-width: 0; flex: 1; }
  .load-sep { flex: 0 1 18px; }
  .load-lbl { font-size: 0.68rem; }
}
.error {
  margin-top: 20px; padding: 14px 18px; border-radius: var(--radius);
  background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-ink);
}
/* Retry chip inside the error banner — inherits the error ink so it reads on
   the tinted surface in both themes. */
.error .err-retry {
  margin-inline-start: 10px; color: var(--err-ink); border-color: currentColor;
}
.hidden { display: none; }

/* ---------- Saved trips ---------- */
.trips-empty {
  text-align: center; padding: 46px 20px;
  border: 2px dashed var(--line); border-radius: var(--radius);
  color: var(--muted); background: var(--sand);
}
.trips-empty-ico { font-size: 2.4rem; margin-bottom: 8px; }
.trips-empty h3 { font-family: var(--display); color: var(--deep); margin-bottom: 4px; }
.trips-empty .btn-primary { width: auto; margin-top: 16px; padding: 10px 26px; }
.trip-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trip-del.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
#tripBarSave.saved {
  background: var(--success-bg); color: var(--success); border-color: var(--success-line);
  opacity: 1; cursor: default;
}
.stale-note.hidden { display: none; }
.stale-note {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin: 16px 0; padding: 10px 16px; border-radius: var(--radius);
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
  font-size: 0.9rem;
}

/* ---------- Section panels — each results section is a distinct card ---------- */
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 22px;
  margin-top: 22px; box-shadow: var(--shadow-panel);
  scroll-margin-top: 118px; /* clears topbar + sticky section nav on anchor jumps */
}
.panel-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.panel-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.25rem;
  background: linear-gradient(140deg, var(--glass), var(--ico-grad2));
  border: 1px solid var(--ico-line);
}
.panel-titles { flex: 1; min-width: 180px; }
.panel-head h2 {
  font-family: var(--display); font-weight: 600; font-size: 1.22rem;
  letter-spacing: -0.005em; color: var(--deep); margin: 0;
}
.panel-sub { font-size: 0.8rem; color: var(--faint); margin-top: 1px; max-width: 75ch; }
@media (max-width: 480px) { .panel { padding: 16px 14px; } }

/* Sticky jump-nav between the results sections */
.section-nav {
  position: sticky; top: 54px; z-index: 30;
  display: flex; gap: 4px; width: fit-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
  margin: 18px 0 2px; padding: 5px;
  background: var(--ground); /* color-mix fallback */
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 999px;
}
.section-nav::-webkit-scrollbar { display: none; }
.jump {
  flex: 0 0 auto; /* never shrink-truncate ("Your trip" → "You...") — the bar scrolls instead */
  font-size: 0.8rem; font-weight: 600; color: var(--muted);
  padding: 5px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background 0.15s, color 0.15s, transform 0.16s var(--ease-out);
}
@media (max-width: 430px) {
  .jump { padding: 5px 10px; font-size: 0.76rem; }
}
.jump:hover { color: var(--deep); background: var(--glass); }
.jump.active { background: var(--lagoon); color: var(--on-lagoon); }
.jump:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
#lodging { scroll-margin-top: 118px; }

.book-all { font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.85rem; color: var(--lagoon); text-decoration: none; font-weight: 600; }
.book-all:hover { text-decoration: underline; }

/* ---------- Explore grid ---------- */
.explore-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.dest-card {
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  cursor: pointer;
}
/* Hover lift gated to real pointers: touch devices tap-trigger :hover and the
   card would stay stuck 3px up. */
@media (hover: hover) and (pointer: fine) {
  .dest-card:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(23, 37, 84, 0.12); }
}
.dest-card:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) { .dest-card, .dest-card:hover, .dest-card:active { transform: none; transition: none; } }
.dest-card.over-budget { opacity: 0.62; }
.dest-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dest-name { font-family: var(--display); font-weight: 600; font-size: 1.06rem; color: var(--deep); }
.dest-country { font-family: "Segoe UI", system-ui, sans-serif; font-weight: 400; font-size: 0.78rem; color: var(--faint); }
.dest-total { font-weight: 700; color: var(--lagoon); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dest-total .est { font-size: 0.68rem; font-weight: 400; color: var(--faint); }
.live-chip {
  display: inline-block; font-size: 0.6rem; font-weight: 800; color: var(--success);
  letter-spacing: 0.05em; vertical-align: middle; margin-inline-start: 4px;
}
.dest-pitch { font-size: 0.86rem; color: var(--muted); }
.dest-detail { font-size: 0.8rem; color: var(--faint); }
.dest-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge {
  display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--lagoon); background: var(--glass); border-radius: 999px; padding: 3px 10px;
}
.badge.over { color: var(--accent-text); background: var(--warn-chip-bg); }
/* Cheap enough, but on other dates / a different trip length than asked. */
.badge.alt { color: var(--warn-ink); background: var(--warn-bg); }
.btn-plan {
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  color: var(--lagoon); background: none; border: 1px solid #c4d2f0;
  border-radius: 9px; padding: 6px 12px; margin-inline-start: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.16s var(--ease-out);
}
.btn-plan:hover { color: var(--on-lagoon); background: var(--lagoon); border-color: var(--lagoon); }
.btn-plan:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
/* Keyboard focus inside a card lights the whole card like hover does. */
.dest-card:has(:focus-visible) { box-shadow: 0 0 0 2px var(--lagoon), var(--shadow); }
#summary:focus-visible, #exploreHeading:focus-visible { outline: none; }
.explore-note { font-size: 0.8rem; color: var(--faint); margin-top: 12px; }
/* "Show N more / Show N over budget" row — spans the whole grid. */
.explore-more {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; padding-block: 6px;
}

/* ---------- Result rows (flights / hotels) ---------- */
.summary-card {
  margin-top: 16px; background: linear-gradient(150deg, var(--glass), var(--surface) 80%);
  border-color: var(--ico-line); border-radius: var(--radius-lg);
  scroll-margin-top: 118px;
}
.summary-card .total { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--deep); }
.summary-card .note { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }

.cards { display: grid; gap: 10px; }
.result-row {
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
  position: relative;
}
.result-row:hover { background: var(--surface); box-shadow: 0 3px 8px rgba(23, 37, 84, 0.08); }
/* Whole row is a link — clicking a flight opens Google Flights, a hotel opens
   Booking.com for that exact hotel. */
.row-link { text-decoration: none; color: inherit; cursor: pointer; }
.row-link:hover { border-color: var(--lagoon); }
.row-link:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.row-go {
  position: absolute; top: 10px; inset-inline-end: 12px;
  font-size: 0.85rem; font-weight: 700; color: var(--faint);
  opacity: 0; transition: opacity 0.15s;
}
.row-link:hover .row-go, .row-link:focus-visible .row-go { opacity: 1; color: var(--lagoon); }

/* Sort / filter toolbars above result lists */
.listbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 10px; }
.listbar .chip { background: var(--card); }
.listbar .chip.active { background: var(--lagoon); color: var(--on-accent); border-color: var(--lagoon); }
.listbar-hint { font-size: 0.74rem; color: var(--faint); margin-inline-start: auto; }
.filterbar { margin-bottom: 10px; }
.filter-lbl { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
.filterbar .filter-lbl:not(:first-child) { margin-inline-start: 10px; }
.list-note { font-size: 0.82rem; color: var(--accent-text); margin-bottom: 4px; }

/* Hotel name / area search box above the hotel list */
.hotel-search { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; }
.hotel-search-input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--sand);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hotel-search-input:hover { border-color: var(--chip-border); }
.hotel-search-input:focus {
  outline: none; border-color: var(--lagoon); background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.hotel-search .chip-btn { flex-shrink: 0; }

/* Selectable rows — tapping a flight/hotel adds it to "Your trip". The row is
   a <label> around a visually-hidden radio (same pattern as the interest
   pills), so keyboard arrows, RTL, and screen readers come free. The lagoon
   glow marks the SELECTED row; "best value" keeps only its badge. */
.select-row { cursor: pointer; }
.sel-input { position: absolute; opacity: 0; pointer-events: none; }
.select-row:has(.sel-input:focus-visible) { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.select-row.selected { border-color: var(--lagoon); box-shadow: 0 0 0 1px var(--lagoon); background: var(--surface); }
.sel-check {
  position: absolute; top: -9px; inset-inline-end: -7px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em;
  color: var(--on-accent); background: var(--lagoon); border-radius: 999px; padding: 2px 9px;
  box-shadow: 0 0 0 2px var(--card);
  opacity: 0; transition: opacity 0.15s;
}
.select-row.selected .sel-check { opacity: 1; }
.result-main { flex: 1; min-width: 200px; }
.result-title { font-weight: 700; color: var(--deep); }
.result-title .badge { margin-inline-start: 8px; vertical-align: middle; background: var(--lagoon); color: var(--on-lagoon); }
.result-sub { font-size: 0.85rem; color: var(--muted); }
/* Offer is for different dates than the search (month-widened cached fare) */
.off-dates { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
/* Full-sentence version in the summary / trip panel / print doc: the chosen
   flight and the priced hotel stay cover different weeks. */
.off-dates-warn {
  margin: 8px 0 0; padding: 8px 12px; font-size: 0.85rem; line-height: 1.45;
  color: var(--warn-ink); background: var(--warn-bg);
  border: 1px solid var(--warn-line); border-radius: 10px;
}
.result-price { text-align: right; }
.result-price .amount { font-size: 1.15rem; font-weight: 700; color: var(--lagoon); white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-price .per { font-size: 0.75rem; color: var(--faint); }
/* Directory-fallback hotels have no live rate — quieter "See price" instead. */
.result-price .amount-na { font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.stars { color: var(--brass); letter-spacing: 1px; }

/* ---------- Hotel rows: photo + review score + per-hotel booking ---------- */
.hotel-row { flex-wrap: nowrap; }
.hotel-photo {
  width: 96px; height: 72px; object-fit: cover; border-radius: 9px;
  flex: none; background: var(--glass);
}
.airline-logo {
  width: 40px; height: 40px; object-fit: contain; flex: none;
  border-radius: 9px; background: #fff; border: 1px solid var(--line); padding: 3px;
}
.score-chip {
  display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--on-accent);
  background: var(--lagoon); border-radius: 6px 6px 6px 0; padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] .score-chip { border-radius: 6px 6px 0 6px; }
.score-note { font-size: 0.78rem; color: var(--faint); }
.book-one {
  display: inline-block; margin-top: 4px; font-size: 0.78rem; font-weight: 700;
  color: var(--lagoon); text-decoration: none;
}
.book-one:hover { text-decoration: underline; }
/* Same quiet link look as .book-one, but a <button> (opens the detail sheet). */
.hotel-details-btn {
  display: inline-block; margin-top: 2px; font: inherit; font-size: 0.78rem; font-weight: 700;
  color: var(--muted); background: none; border: none; padding: 0; cursor: pointer;
}
.hotel-details-btn:hover { text-decoration: underline; color: var(--deep); }
@media (max-width: 560px) {
  .hotel-row { flex-wrap: wrap; }
  .hotel-photo { width: 100%; height: 130px; }
}
@media print { .hotel-details-btn { display: none !important; } }

/* ---------- Explore card photo ---------- */
.dest-photo {
  width: calc(100% + 36px); height: 120px; object-fit: cover;
  margin: -16px -18px 2px; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--glass);
}

/* ---------- Itinerary (expandable day cards) ---------- */
.itinerary { display: grid; gap: 12px; }
.plan-hint { font-size: 0.8rem; color: var(--faint); margin: -4px 0 12px; }
.plan-actions { display: inline-flex; align-items: center; gap: 7px; }
.plan-updating { font-size: 0.78rem; font-weight: 400; color: var(--accent-text); font-family: "Segoe UI", system-ui, sans-serif; }
.day-card { padding: 0; overflow: hidden; background: var(--sand); scroll-margin-top: 118px; }
.day-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: 15px 20px;
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--deep);
}
.day-head::-webkit-details-marker { display: none; }
.day-head:hover { background: var(--glass); }
.day-head:focus-visible { outline: 2px solid var(--lagoon); outline-offset: -2px; }
.day-num { color: var(--lagoon); white-space: nowrap; }
.day-grip {
  color: var(--faint); cursor: grab; user-select: none;
  font-size: 1rem; padding: 0 2px; align-self: center;
  transition: color 0.15s;
}
.day-grip:hover { color: var(--lagoon); }
.day-grip:active { cursor: grabbing; }
.day-card.dragging { opacity: 0.45; }
.day-card.drop-above { box-shadow: 0 -3px 0 0 var(--brass), var(--shadow); }
.day-card.drop-below { box-shadow: 0 3px 0 0 var(--brass), var(--shadow); }
.day-move {
  font-family: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--on-accent); background: var(--lagoon);
  border: none; border-radius: 8px; padding: 2px 7px;
  cursor: pointer; text-align: center;
  appearance: none; -webkit-appearance: none;
  transition: background 0.15s, transform 0.16s var(--ease-out);
}
.day-move:hover { background: var(--navy); }
.day-move:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.day-num::after { content: '▾'; font-size: 0.68em; color: var(--faint); margin-inline-start: 2px; }
.day-moved { animation: dayMoved 0.7s var(--ease-out); }
@keyframes dayMoved {
  0% { box-shadow: 0 0 0 3px var(--brass); background: var(--warn-bg); }
  100% { box-shadow: var(--shadow); background: var(--sand); }
}
@media (prefers-reduced-motion: reduce) { .day-moved { animation: none; } }
.day-title { flex: 1; min-width: 140px; }
.day-cost {
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.75rem; font-weight: 600;
  color: var(--accent-text); background: var(--warn-chip-bg); border-radius: 999px; padding: 2px 10px;
  white-space: nowrap;
}
.chev { color: var(--faint); transition: transform 0.18s var(--ease-in-out); }
.day-card[open] .chev { transform: rotate(180deg); }
.day-body { padding: 2px 20px 16px; }
.day-summary { font-size: 0.9rem; color: var(--muted); margin-bottom: 10px; }
.day-card .slot { margin: 5px 0; font-size: 0.92rem; }
.day-card .slot b { color: var(--lagoon); }
.rich-slot { padding: 9px 0; border-top: 1px dashed var(--line); }
.slot-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.slot-time { font-size: 0.78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.slot-cost {
  margin-inline-start: auto; font-size: 0.75rem; font-weight: 600; color: var(--lagoon);
  background: var(--glass); border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}
.slot-name { font-weight: 700; color: var(--deep); margin-top: 2px; }
.slot-desc { font-size: 0.9rem; color: var(--muted); margin-top: 2px; }
.slot-tip { font-size: 0.82rem; color: var(--accent-text); margin-top: 4px; }
.day-card .food {
  margin-top: 10px; font-size: 0.88rem; color: var(--accent-text);
  border-top: 1px dashed var(--line); padding-top: 9px; display: grid; gap: 4px;
}
.day-card .food b { color: inherit; }

.tips-card { margin-top: 16px; background: var(--glass); border-color: var(--ico-line); }
.tips-card h3 { font-family: var(--display); font-weight: 600; margin-bottom: 8px; color: var(--deep); }
.tips-card li { margin-inline-start: 20px; font-size: 0.92rem; }

/* ---------- "Your trip" panel + fixed bottom trip bar ---------- */
.trip-selections { display: grid; gap: 12px; }
.trip-sel-card {
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
}
.trip-sel-lbl {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint);
}
.trip-sel-dates { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); margin-inline-start: 6px; }
.trip-sel-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trip-sel-row .result-main { min-width: 160px; }
.trip-sel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.trip-sel-actions .chip { text-decoration: none; }
.trip-days { margin-top: 18px; display: grid; gap: 3px; }
.trip-days:empty { display: none; }
.trip-days-h { margin-bottom: 5px; }
.trip-day {
  display: flex; align-items: baseline; gap: 10px; text-align: start; width: 100%;
  font: inherit; font-size: 0.9rem; color: var(--ink); cursor: pointer;
  background: none; border: none; border-radius: 8px; padding: 6px 10px;
}
.trip-day:hover { background: var(--glass); }
.trip-day:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 1px; }
.trip-day-num { color: var(--lagoon); font-weight: 700; white-space: nowrap; }
.trip-day-title { flex: 1; }
.trip-day-cost { font-size: 0.78rem; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.trip-day-city {
  margin: 8px 0 4px; padding: 6px 12px; border-radius: 8px;
  background: var(--glass); font-size: 0.82rem; font-weight: 600; color: var(--deep);
}
.trip-total { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.trip-total:empty { display: none; }
.trip-total-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trip-total-lbl { font-weight: 700; color: var(--deep); }
.trip-total-amt {
  margin-inline-start: auto; font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  color: var(--deep); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.trip-total .note { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }

.trip-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
  background: var(--ground); /* color-mix fallback */
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.trip-bar-in { display: flex; align-items: center; gap: 12px; padding-top: 9px; padding-bottom: 9px; }
.trip-bar-label {
  font-size: 0.85rem; font-weight: 600; color: var(--muted);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trip-bar-total {
  margin-inline-start: auto; font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  color: var(--deep); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.trip-bar-total.fits { color: var(--success); }
.trip-bar-total.over { color: var(--danger); }
.trip-bar .btn-plan { margin-inline-start: 0; white-space: nowrap; text-decoration: none; }
.trip-bar .chip { flex: 0 0 auto; white-space: nowrap; }
#tripBarSave[disabled]:not(.saved) { opacity: 0.45; cursor: default; }
body.has-tripbar { padding-bottom: 66px; }
body.has-tripbar .to-top { bottom: 78px; }

/* Trip document (#tripPrint) exists only for printing — see @media print. */
#tripPrint { display: none; }

/* Hotel detail sheet — bottom sheet over a dimmed backdrop. */
#hotelSheet .sheet-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 16, 35, 0.45);
}
#hotelSheet .sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 81;
  max-width: 720px; margin: 0 auto; max-height: 82vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(10, 16, 35, 0.25);
}
#hotelSheet .sheet:focus { outline: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sheet-title { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--deep); }
.sheet-sub { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }
.sheet-gallery {
  display: flex; gap: 8px; overflow-x: auto; margin-top: 12px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.sheet-gallery img {
  height: 150px; width: auto; max-width: 78%; flex: 0 0 auto;
  border-radius: 10px; object-fit: cover; scroll-snap-align: start;
  background: var(--sand);
}
.sheet-desc { font-size: 0.88rem; color: var(--ink); line-height: 1.55; margin-top: 12px; }
.sheet-desc:empty { display: none; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.sheet-price .amount { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--deep); }
.sheet-price .per { display: block; font-size: 0.78rem; color: var(--muted); }
.sheet-book { text-decoration: none; }
@media print { #hotelSheet { display: none !important; } }

/* ---------- Account: topbar button, sign-in sheet, profile page ---------- */
.account-btn { display: inline-flex; align-items: center; justify-content: center; }
.account-btn .ic svg { width: 15px; height: 15px; display: block; }
.account-btn.signed-in { padding: 2px; border-color: var(--lagoon); }
.avatar-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--lagoon); color: var(--on-lagoon);
  font-size: 0.72rem; font-weight: 700;
}
@media (pointer: coarse) { .account-btn.signed-in { padding: 2px 6px; } }

/* Sign-in sheet reuses the hotel-sheet bottom-sheet shell; on wide screens it
   floats centered instead (a skinny form pinned to the bottom looks lost). */
#authSheet .sheet-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 16, 35, 0.45);
}
#authSheet .sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 81;
  max-width: 420px; margin: 0 auto; max-height: 88vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(10, 16, 35, 0.25);
}
#authSheet .sheet:focus { outline: none; }
@media (min-width: 640px) {
  #authSheet .sheet {
    bottom: auto; top: 50%; transform: translateY(-50%);
    border-bottom: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 20px 22px;
  }
}
.auth-note {
  margin-top: 10px; font-size: 0.85rem; color: var(--warn-ink);
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 10px; padding: 8px 12px;
}
.auth-seg { margin: 14px 0 0; width: 100%; }
.auth-seg .seg-btn { flex: 1; }
.auth-form { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.auth-form label, .profile-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
}
.auth-form input, .profile-form input {
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink);
  padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--sand);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-form input:hover, .profile-form input:hover { border-color: var(--chip-border); }
.auth-form input:focus, .profile-form input:focus {
  outline: none; border-color: var(--lagoon); background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.auth-form .auth-name-row.hidden { display: none; }
.auth-err { font-size: 0.85rem; font-weight: 600; color: var(--danger); }
.auth-form .btn-primary { margin-top: 2px; }

/* Credit-purchase sheet reuses the same bottom-sheet/centered-on-desktop
   shell as the auth sheet (see above). */
#creditsSheet .sheet-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 16, 35, 0.45);
}
#creditsSheet .sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 81;
  max-width: 420px; margin: 0 auto; max-height: 88vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(10, 16, 35, 0.25);
}
#creditsSheet .sheet:focus { outline: none; }
@media (min-width: 640px) {
  #creditsSheet .sheet {
    bottom: auto; top: 50%; transform: translateY(-50%);
    border-bottom: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 20px 22px;
  }
}
.credits-pack-note { margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.paypal-buttons-container { margin-top: 14px; min-height: 45px; }
.credits-loading { font-size: 0.85rem; color: var(--faint); text-align: center; }
.credits-sheet-err { margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--danger); }

/* AI-credits paywall: same bottom-sheet/centered-on-desktop shell. */
#paywallSheet .sheet-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 16, 35, 0.45);
}
#paywallSheet .sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 81;
  max-width: 420px; margin: 0 auto; max-height: 88vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(10, 16, 35, 0.25);
}
#paywallSheet .sheet:focus { outline: none; }
@media (min-width: 640px) {
  #paywallSheet .sheet {
    bottom: auto; top: 50%; transform: translateY(-50%);
    border-bottom: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 20px 22px;
  }
}
.paywall-msg { margin: 10px 0 16px; color: var(--muted); }
.auth-switch {
  display: block; width: 100%; margin-top: 12px; padding: 8px;
  font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--lagoon);
  background: none; border: none; cursor: pointer; text-align: center;
}
.auth-switch:hover { text-decoration: underline; }
.auth-switch:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
@media print { #authSheet { display: none !important; } }

/* Profile page */
.profile-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px; flex: 0 0 auto;
  background: var(--lagoon); color: var(--on-lagoon);
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
}
.profile-id { min-width: 0; flex: 1; }
.profile-id h2 { font-family: var(--display); color: var(--deep); margin-bottom: 2px; overflow-wrap: anywhere; }
.profile-id .panel-sub { margin: 0; overflow-wrap: anywhere; }
.profile-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-top: 18px;
}
.pstat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--sand); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.pstat-num {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  color: var(--deep); font-variant-numeric: tabular-nums;
}
.pstat-lbl { font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.profile-trips-btn { margin-top: 14px; }
.profile-form {
  display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.profile-form label { flex: 1 1 180px; }
.profile-form .btn-primary { width: auto; margin-top: 0; flex: 0 0 auto; }
.danger-zone { border-color: var(--danger-line); }
.danger-zone h2 { font-family: var(--display); color: var(--danger); }
.chip-btn.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.profile-form .chip-btn { padding-block: 10px; }

/* Demo-data pill — quiet by design (dashed, muted): informs without alarming,
   but plausible-looking sample prices must never pass as live ones. */
.demo-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 600; color: var(--muted);
  background: var(--sand); border: 1px dashed var(--chip-border);
  border-radius: 999px; padding: 3px 11px; margin: 0 0 10px;
}
@media print { .demo-note { border-style: solid; } }

/* Toast — transient confirmation pill ("Link copied"). `left` on purpose:
   translateX(-50%) centering must not flip in RTL. */
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 70; /* above .trip-bar (45) and .to-top (50) */
  background: var(--navy); color: #fff;
  border-radius: 999px; padding: 9px 18px;
  font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease-out);
  max-width: min(90vw, 480px); text-align: center;
}
.toast.show { opacity: 1; }
body.has-tripbar .toast { bottom: 78px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
@media print { .toast { display: none !important; } }

.footer { text-align: center; color: var(--faint); font-size: 0.8rem; padding: 36px 20px 24px; }
.footer-disclosure { margin-top: 6px; font-size: 0.75rem; }

.to-top {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 50;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 1.1rem; font-weight: 700; color: var(--on-lagoon); background: var(--lagoon);
  border: none; cursor: pointer; box-shadow: var(--shadow);
  transition: background 0.15s;
}
.to-top:hover { background: var(--navy); }
.to-top:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media print { .to-top { display: none !important; } }

/* ---------- Home page ---------- */
.home-links { display: flex; gap: 22px; margin: 0 auto; }
.home-links a { font-size: 0.88rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.home-links a:hover { color: var(--deep); }
.btn-open {
  font-size: 0.86rem; font-weight: 700; color: var(--on-accent); background: var(--lagoon);
  border-radius: 999px; padding: 7px 16px; text-decoration: none; white-space: nowrap;
  transition: background 0.15s;
}
.btn-open:hover { background: var(--navy); }

.home-hero { padding: 64px 0 72px; margin-bottom: 0; }
/* Split hero: copy on the inline-start side, photography on the other.
   Grid flips automatically under [dir="rtl"]. */
.home-hero-in {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 48px; align-items: center; position: relative;
}
.hero-media { position: relative; }
.hero-media img {
  display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 50px rgba(10, 18, 45, 0.35);
}
/* Slideshow layers (added by home.js) sit on the base photo and crossfade. */
.hero-media .hero-slide {
  position: absolute; inset: 0; height: 100%;
  opacity: 0; transition: opacity 0.6s ease; box-shadow: none;
}
.hero-media .hero-slide.show { opacity: 1; }
@media (max-width: 860px) {
  .home-hero-in { grid-template-columns: 1fr; gap: 32px; }
  .hero-media img { max-height: 240px; }
}
/* Multi-line i18n strings set via textContent keep their line breaks. */
.home-hero h1, .plan-copy .section-title, .more-card div { white-space: pre-line; }
.eyebrow-light {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #cdd9f8; margin-bottom: 14px; position: relative; /* 4.75:1 on #1d4ed8 */
}
.home-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); line-height: 1.08; }
.home-hero .tagline { font-size: 1.05rem; margin-top: 14px; }
.hero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; position: relative; }
/* Interactive radius rule: pills for buttons/chips, 14px+ for surfaces. */
/* Navy-on-brass: the white-on-orange combo fails WCAG AA (2.8:1); navy passes (5.2:1). */
.btn-cta {
  display: inline-block; font-weight: 700; font-size: 1rem; color: var(--navy);
  background: var(--brass); border-radius: 999px; padding: 13px 28px; text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.btn-cta:hover { background: #fb8b3c; }
.btn-ghost {
  display: inline-block; font-weight: 600; font-size: 1rem; color: #e8f3f0;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 13px 24px; text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn-cta:active, .btn-ghost:active, .btn-open:active { transform: translateY(1px) scale(0.99); }

/* First-load rise on the hero, staggered top to bottom. Static under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hero-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: 0.06s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.12s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.18s; }
  .hero-media { animation: hero-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards; }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.stats-strip { background: var(--glass); border-bottom: 1px solid var(--line); }
.stats-in { display: flex; gap: 12px 40px; flex-wrap: wrap; padding: 16px 20px; }
.stat { font-size: 0.88rem; color: var(--muted); }
.stat b { font-family: var(--display); font-weight: 600; color: var(--deep); font-size: 1.05rem; margin-inline-end: 5px; }

.home-section { padding: 72px 0; scroll-margin-top: 64px; }
.home-section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 8px;
}
.section-title {
  font-family: var(--display); font-weight: 600; color: var(--deep);
  font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -0.01em;
  margin-bottom: 24px; text-wrap: balance;
}

/* "How it works": headline column + numbered editorial steps, no card boxes. */
.how-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px 56px; align-items: start; }
@media (max-width: 760px) { .how-grid { grid-template-columns: 1fr; } }
.steps { list-style: none; display: grid; }
.step { display: flex; gap: 22px; align-items: baseline; padding: 22px 0; }
.step + .step { border-top: 1px solid var(--line); }
.steps .step:first-child { padding-top: 4px; }
.step h3 { font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--deep); margin: 0 0 4px; }
.step p { font-size: 0.94rem; color: var(--muted); max-width: 52ch; }
.step-num {
  font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1;
  color: var(--lagoon); min-width: 34px; text-align: center;
}

.more-card {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-style: dashed; color: var(--muted); text-decoration: none; font-size: 0.95rem;
  min-height: 140px;
}
.more-card b { color: var(--lagoon); }
.more-card:hover { border-color: var(--lagoon); color: var(--deep); }

.plan-preview { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; }
@media (max-width: 760px) { .plan-preview { grid-template-columns: 1fr; } }
.plan-copy p { color: var(--muted); max-width: 44ch; margin-bottom: 20px; }
.mini-day { box-shadow: var(--shadow); }

/* Destination teaser: live "from ~" price cards fed by /api/home-teaser. */
.dest-sub { font-size: 0.95rem; color: var(--muted); max-width: 58ch; margin: -12px 0 26px; }
.dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dest-grid { grid-template-columns: 1fr; } }
.dest-card {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.dest-card:hover { border-color: var(--lagoon); transform: translateY(-2px); box-shadow: var(--shadow); }
.dest-card:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.dest-img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.dest-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 16px; }
.dest-city { font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--deep); }
.dest-country { font-size: 0.78rem; color: var(--muted); }
.dest-price { font-size: 0.92rem; color: var(--muted); margin-top: 10px; }
.dest-price b { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--lagoon); }
.dest-meta { font-size: 0.72rem; color: var(--muted); }
.dest-skel { min-height: 296px; border-style: dashed; animation: destPulse 1.2s ease-in-out infinite; }
@keyframes destPulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .dest-skel { animation: none; }
  .dest-card:hover { transform: none; }
}
.dest-note { font-size: 0.78rem; color: var(--muted); margin-top: 18px; max-width: 62ch; }

.home-footer { background: var(--navy); color: #c3d3f7; margin-top: 40px; }
.home-footer-in { padding: 34px 20px; display: flex; gap: 14px 40px; align-items: center; flex-wrap: wrap; }
.brand-footer { color: #f8faff; font-size: 1.15rem; }
.brand-footer .brand-ar { color: #93aef0; }
.home-footer p { font-size: 0.8rem; max-width: 56ch; }
.photo-credit { flex-basis: 100%; font-size: 0.72rem; color: #93aef0; }
.photo-credit summary { cursor: pointer; list-style: none; display: inline-block; text-decoration: underline; text-underline-offset: 2px; }
.photo-credit summary::-webkit-details-marker { display: none; }
.photo-credit summary:hover { color: #c3d3f7; }
.photo-credit summary:focus-visible { outline: 2px solid #c3d3f7; outline-offset: 2px; border-radius: 2px; }
.photo-credit[open] summary { margin-bottom: 8px; }
.photo-credit p { max-width: 60ch; }
.photo-credit a { color: inherit; text-decoration: underline; }

/* Narrow screens: let the landing links scroll sideways instead of vanishing. */
@media (max-width: 700px) {
  .home-links { overflow-x: auto; scrollbar-width: none; gap: 14px; }
  .home-links::-webkit-scrollbar { display: none; }
  .home-links a { white-space: nowrap; }
}

/* ---------- RTL (Arabic) ---------- */
[dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] button {
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
}
[dir="rtl"] .result-price { text-align: left; }
/* Bahnschrift has no Arabic glyphs — swap display headings to Segoe UI. */
[dir="rtl"] .hero h1, [dir="rtl"] .panel-head h2,
[dir="rtl"] .dest-name, [dir="rtl"] .day-head, [dir="rtl"] .summary-card .total,
[dir="rtl"] .section-title, [dir="rtl"] .step h3, [dir="rtl"] .stat b, [dir="rtl"] .dest-city, [dir="rtl"] .dest-price b,
[dir="rtl"] .tips-card h3, [dir="rtl"] .step-num, [dir="rtl"] .mini-day h3,
[dir="rtl"] .trip-total-amt, [dir="rtl"] .trip-bar-total,
[dir="rtl"] .tp-h1, [dir="rtl"] .tp-brand, [dir="rtl"] .tp-total-amt {
  font-family: "Segoe UI", Tahoma, sans-serif; font-weight: 700;
}

@media (max-width: 620px) {
  .hero h1 { font-size: 1.55rem; }
  .result-price { text-align: left; }
  .seg-btn { padding: 6px 10px; }
  /* Phones: compact the top bar instead of hiding the currency select — GCC
     users need it; the Arabic brand subtitle is the decorative part to drop. */
  .topbar-in { gap: 8px; padding: 10px 12px; }
  .brand-ar { display: none; }
  .topbar-side { gap: 5px; }
  .topbar-side .chip { padding: 5px 8px; font-size: 0.72rem; }
}
/* Very narrow phones: the logo alone identifies the brand. */
@media (max-width: 430px) {
  .topbar .brand { font-size: 0; gap: 0; }
}

/* ---------- Explore map view ---------- */
.explore-map {
  height: 480px; border-radius: var(--radius); border: 1px solid var(--line);
  z-index: 1; margin-bottom: 6px;
}
/* Price pills follow the theme tokens. Fits-budget pills carry the positive
   tint and pop; over-budget pills recede as quiet neutrals — a map of red
   "over" pills reads alarmist, which is off-brand (calm, no pressure). */
.map-pill {
  width: max-content; padding: 3px 10px; border-radius: 999px;
  background: var(--card); color: var(--deep); border: 1px solid var(--chip-border);
  font-size: 0.76rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(23, 37, 84, 0.25); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.map-pill.fits { background: var(--cheap-bg); border-color: var(--cheap-line); color: var(--success); }
.map-pill.over { background: var(--card); border-color: var(--line); color: var(--muted); }
.map-origin {
  width: max-content; padding: 2px 9px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--deep);
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(23, 37, 84, 0.2);
}
.map-pop { font-family: inherit; min-width: 190px; max-width: 240px; }
.map-pop-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.map-pop-name span { font-weight: 600; font-size: 0.76rem; color: var(--faint); }
.map-pop-pitch { font-size: 0.82rem; color: var(--muted); margin: 4px 0; }
.map-pop-detail { font-size: 0.78rem; color: var(--ink); margin-top: 3px; }
.map-pop .btn-plan { margin-top: 9px; }

/* ---------- Fare calendar (Plan tab) ---------- */
.farecal-row { margin-top: 12px; }
.farecal {
  margin-top: 10px; padding: 12px; background: var(--sand);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.fc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.fc-head .chip-btn[disabled] { opacity: 0.4; cursor: default; }
.fc-title { text-align: center; }
.fc-title b { display: block; font-size: 0.95rem; color: var(--deep); }
.fc-title span { font-size: 0.74rem; color: var(--muted); }
.fc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fc-cell {
  min-height: 48px; padding: 4px 2px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: transform 0.16s var(--ease-out);
}
.fc-cell:hover { border-color: var(--lagoon); }
.fc-cell:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 1px; }
.fc-empty, .fc-na { background: transparent; border-color: transparent; cursor: default; }
.fc-na .fc-day { color: var(--line); }
.fc-day { font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.fc-price { font-size: 0.72rem; font-weight: 700; color: var(--ink); }
/* Quintile heat: q0 = cheapest fifth of days, q4 = priciest. Price text
   stays --ink through the middle so every shade keeps AA contrast. */
.fc-q0 { background: var(--heat0-bg); border-color: var(--heat0-line); }
.fc-q0 .fc-price { color: var(--success); }
.fc-q1 { background: var(--heat1-bg); border-color: var(--heat1-line); }
.fc-q2 { background: var(--heat2-bg); border-color: var(--heat2-line); }
.fc-q3 { background: var(--heat3-bg); border-color: var(--heat3-line); }
.fc-q4 { background: var(--heat4-bg); border-color: var(--heat4-line); }
.fc-q4 .fc-price { color: var(--danger); }
.fc-best { outline: 2px solid var(--success); outline-offset: -1px; }
.fc-legend {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.7rem; color: var(--faint); margin-top: 10px;
}
.fc-legend i { width: 16px; height: 10px; border-radius: 3px; border: 1px solid var(--line); }
.fc-legend .fc-q0 { border-color: var(--heat0-line); }
.fc-legend .fc-q1 { border-color: var(--heat1-line); }
.fc-legend .fc-q2 { border-color: var(--heat2-line); }
.fc-legend .fc-q3 { border-color: var(--heat3-line); }
.fc-legend .fc-q4 { border-color: var(--heat4-line); }
.fc-detail { min-height: 1.3em; font-size: 0.78rem; color: var(--muted); margin-top: 8px; }

/* ---------- City/airport combobox ---------- */
/* The hidden <select> keeps the form value; the visible input inherits the
   .grid input look automatically. */
.combo { position: relative; margin-top: auto; display: flex; }
.grid .combo .combo-input { width: 100%; margin-top: 0; text-overflow: ellipsis; }
.combo-select {
  position: absolute; inset-inline-start: 0; bottom: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
/* City names are English LTR text — same clipping fix as the old select. */
[dir='rtl'] .combo-input { direction: ltr; text-align: right; }
.combo-pop {
  position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 40;
  width: max(100%, min(320px, 88vw)); max-height: 280px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; box-shadow: var(--shadow);
}
.combo-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: start; font: inherit; font-size: 0.88rem; color: var(--ink);
  background: none; border: none; border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.combo-opt:hover, .combo-opt.combo-active { background: var(--glass); }
.combo-name { direction: ltr; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-code { color: var(--faint); font-weight: 600; }
.combo-meta { flex: none; font-size: 0.74rem; color: var(--faint); }
.combo-opt mark { background: none; color: var(--lagoon); font-weight: 700; }
.combo-none { font-size: 0.82rem; color: var(--muted); padding: 10px; }
@media (pointer: coarse) { .combo-opt { min-height: 44px; } }

/* ---------- Custom date picker (d-m-yyyy) ---------- */
.dp { position: relative; margin-top: auto; display: flex; }
.grid .dp .dp-display { width: 100%; margin-top: 0; cursor: pointer; }
/* Rapid taps (month arrows, quick range picks) must not trigger the mobile
   double-tap zoom — it swallowed every second tap on phones. */
.dp-display, .dp-pop button { touch-action: manipulation; }
.dp-pop {
  position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 40;
  width: min(300px, 88vw); background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; box-shadow: var(--shadow);
  /* Scale in from the trigger above, not from center (origin-aware entrance). */
  transform-origin: top;
  transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
@starting-style {
  .dp-pop { opacity: 0; transform: scale(0.97) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .dp-pop { transition: opacity 0.15s var(--ease-out); }
  @starting-style {
    .dp-pop { transform: none; }
  }
}
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dp-head .chip-btn[disabled] { opacity: 0.4; cursor: default; }
.dp-title { font-size: 0.9rem; font-weight: 700; color: var(--deep); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-dow { font-size: 0.68rem; font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0; }
.dp-cell {
  border: 1px solid transparent; border-radius: 8px; background: none; padding: 6px 0;
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; text-align: center; color: var(--ink);
  transition: transform 0.16s var(--ease-out);
}
.dp-cell:hover { border-color: var(--lagoon); }
.dp-cell:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 1px; }
.dp-cell[disabled] { color: var(--line); cursor: default; }
.dp-cell[disabled]:hover { border-color: transparent; }
.dp-empty { cursor: default; }
.dp-today { border-color: var(--line); }
.dp-sel { background: var(--lagoon); color: var(--on-accent); }
.dp-sel:hover { border-color: transparent; }
.dp-foot { margin-top: 8px; text-align: end; }
/* Range picker: the in-range strip bridges the 3px grid gap with a
   horizontal shadow (mirrored for RTL). */
.dp-in {
  background: color-mix(in srgb, var(--lagoon) 14%, transparent);
  border-radius: 0;
  box-shadow: 3px 0 0 color-mix(in srgb, var(--lagoon) 14%, transparent);
}
.dp-edge { box-shadow: 3px 0 0 color-mix(in srgb, var(--lagoon) 14%, transparent); }
[dir='rtl'] .dp-in,
[dir='rtl'] .dp-edge { box-shadow: -3px 0 0 color-mix(in srgb, var(--lagoon) 14%, transparent); }

/* ---------- Flexible-dates toggle (Explore form) ---------- */
.check-inline {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 0.87rem; font-weight: 600; color: var(--muted);
  cursor: pointer; accent-color: var(--lagoon);
}
.check-inline:hover { color: var(--deep); }

/* ---------- AI refine chat ---------- */
.refine-box {
  margin-top: 18px; padding: 14px; background: var(--sand);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.refine-head { font-weight: 700; font-size: 0.92rem; color: var(--deep); margin-bottom: 10px; }
.refine-log { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; margin-bottom: 10px; }
.refine-log:empty { display: none; }
.refine-msg { max-width: 85%; padding: 7px 12px; border-radius: 12px; font-size: 0.86rem; line-height: 1.45; }
.refine-msg.user { align-self: flex-end; background: var(--lagoon); color: var(--on-accent); border-end-end-radius: 4px; }
.refine-msg.ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-end-start-radius: 4px; }
.refine-msg.thinking { color: var(--muted); font-style: italic; }
.refine-msg.err { color: var(--danger); }
.refine-row { display: flex; gap: 8px; }
.refine-row input {
  flex: 1; font: inherit; font-size: 0.92rem; color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.refine-row input:focus { outline: none; border-color: var(--lagoon); }
.refine-row input:disabled { background: var(--sand); color: var(--faint); }
.btn-small { padding: 9px 18px; font-size: 0.9rem; }
/* Inside a flex row (refine box) the primary button must not inherit the
   form-CTA width: 100% — a full-width "Send" dwarfs its input. */
.refine-row .btn-primary { width: auto; flex: 0 0 auto; }

/* ---------- Print (itinerary hand-out) ---------- */
@media print {
  .topbar, .search-card, .hero, .plan-actions, .plan-hint, .book-all, .book-one,
  .listbar, .row-go, #loading, #error, .footer, .btn-plan,
  .refine-box, .explore-map, .farecal, .farecal-row,
  .stale-note, #tripsView, .section-nav, .panel-ico, .panel-sub,
  .trip-bar, .sel-check, .trip-sel-actions { display: none !important; }
  /* #tripPanel stays printable — it's the booking hand-out. */
  .trip-sel-card, .trip-day-city { background: #fff; }
  .trip-day { cursor: default; }
  body { background: #fff; }
  .panel { box-shadow: none !important; border: none; padding: 0; margin-top: 18px; }
  .panel-head { padding-bottom: 8px; margin-bottom: 10px; }
  .card, .result-row, .day-card { box-shadow: none !important; break-inside: avoid; background: #fff; }
  .day-head { cursor: default; }
  .chev { display: none; }
  /* The reorder select prints as its plain day number */
  .day-move { background: none; color: var(--lagoon); padding: 0; }
  .day-num::after { display: none; }
  .day-grip { display: none; }

  /* ----- Trip document mode: ONLY #tripPrint prints -----
     Set via body.print-trip by the "Print trip document" button; #tripPrint
     must be a direct child of <body> for the :not() switch to work. Colors
     are hardcoded print-safe values (paper is always light). */
  body.print-trip > :not(#tripPrint) { display: none !important; }
  body.print-trip #tripPrint { display: block; }
  @page { margin: 14mm; }

  #tripPrint { font-size: 10.5pt; line-height: 1.5; color: #1b2540; }
  #tripPrint a { color: #1d4ed8; }
  .tp-head { border-bottom: 2pt solid #1d4ed8; padding-bottom: 8pt; }
  .tp-brand { font-family: var(--display); font-weight: 600; font-size: 11pt; color: #1d4ed8; }
  .tp-h1 { font-family: var(--display); font-weight: 600; font-size: 19pt; color: #172554; margin: 2pt 0 6pt; }
  .tp-meta { display: flex; flex-wrap: wrap; gap: 4pt 16pt; font-size: 9.5pt; color: #5c6b84; }
  .tp-head-total { font-weight: 700; color: #172554; }
  .tp-section { margin-top: 13pt; }
  .tp-section > h2 {
    font-size: 12.5pt; color: #172554; margin-bottom: 2pt;
    border-bottom: 1pt solid #d8dee9; padding-bottom: 3pt;
    break-after: avoid; page-break-after: avoid;
  }
  .tp-card, .tp-day {
    border: 1pt solid #d8dee9; border-radius: 8pt; padding: 8pt 11pt; margin-top: 7pt;
    break-inside: avoid; page-break-inside: avoid; background: #fff;
  }
  .tp-card-h { display: flex; align-items: center; gap: 8pt; flex-wrap: wrap; }
  .tp-card-h .airline-logo { width: 22pt; height: 22pt; padding: 2pt; }
  .tp-lbl { font-size: 8pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8a94a6; }
  .tp-dates { font-size: 9pt; color: #5c6b84; }
  .tp-price { margin-inline-start: auto; font-weight: 700; color: #1d4ed8; white-space: nowrap; }
  .tp-per { font-weight: 400; font-size: 8.5pt; color: #8a94a6; }
  .tp-card-name { font-weight: 700; color: #172554; }
  .tp-sub-inline { font-weight: 400; color: #5c6b84; }
  .tp-card-sub { font-size: 9.5pt; color: #5c6b84; margin-top: 2pt; }
  .tp-card-link { font-size: 8.5pt; margin-top: 4pt; }
  .tp-day-h { display: flex; align-items: baseline; gap: 8pt; flex-wrap: wrap; break-after: avoid; page-break-after: avoid; }
  .tp-day-num { font-weight: 700; color: #1d4ed8; white-space: nowrap; }
  .tp-day-date { font-size: 9pt; color: #5c6b84; white-space: nowrap; }
  .tp-day-title { font-weight: 700; color: #172554; flex: 1; min-width: 120pt; }
  .tp-city { font-size: 8pt; font-weight: 700; color: #1d4ed8; border: 1pt solid #c4d2f0; border-radius: 999px; padding: 1pt 7pt; white-space: nowrap; }
  .tp-day-cost { font-size: 8.5pt; color: #c2410c; white-space: nowrap; }
  .tp-day-sum { font-size: 9.5pt; color: #5c6b84; margin: 4pt 0; }
  #tripPrint .slot { font-size: 9.5pt; break-inside: avoid; page-break-inside: avoid; margin-top: 4pt; }
  #tripPrint .slot b { color: #1d4ed8; }
  #tripPrint .rich-slot { border-top: 1pt dashed #d8dee9; padding: 5pt 0 0; margin-top: 6pt; }
  #tripPrint .slot-cost { background: none; border: 1pt solid #d8dee9; color: #1d4ed8; }
  .tp-food { margin-top: 6pt; padding-top: 5pt; border-top: 1pt dashed #d8dee9; font-size: 9.5pt; color: #c2410c; display: grid; gap: 2pt; }
  .tp-tips ul { margin-inline-start: 14pt; }
  .tp-tips li { font-size: 9.5pt; margin: 2pt 0; }
  .tp-total { border-top: 2pt solid #1d4ed8; padding-top: 8pt; break-inside: avoid; page-break-inside: avoid; }
  .tp-cost-row { display: flex; align-items: baseline; gap: 10pt; font-size: 10pt; color: #5c6b84; padding: 1pt 0; }
  .tp-cost-amt { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: #172554; }
  .tp-total-row {
    display: flex; align-items: baseline; gap: 10pt; font-weight: 700; color: #172554;
    border-top: 1pt solid #d8dee9; margin-top: 4pt; padding-top: 5pt;
  }
  .tp-total-amt { margin-inline-start: auto; font-family: var(--display); font-size: 16pt; }
  .tp-total-note { font-size: 9.5pt; color: #5c6b84; margin-top: 2pt; }
  .tp-foot { margin-top: 14pt; padding-top: 6pt; border-top: 1pt solid #d8dee9; font-size: 8.5pt; color: #5c6b84; display: grid; gap: 2pt; }
  .tp-link-url { word-break: break-all; direction: ltr; unicode-bidi: embed; }
}