/* The home page — one.tathkarah.com's front door.
 *
 * The world it is drawn from: the minute before departure. A dusk sky going from the
 * brand's orange at the horizon to its navy overhead (the hero is that sky), cloud white,
 * and the boarding pass — the company is called *ticket* — which is why the search is a
 * pass with a torn stub, and why codes are set in the departure board's face.
 *
 * Orange is spent on two things only: the button that moves a trip forward, and the
 * horizon. Everything else is navy on white.
 */

:root {
  --navy-950: #061427;
  --navy-900: #0b1f3a;
  --navy-800: #102b4f;
  --navy: #0a3d62;
  --sky: #2f8fd8;
  --orange: #f26522;
  --orange-deep: #d9531a;
  /* Orange as *text*. By day it is the deep orange; at night that is paper ink on a dark
     card (3.8:1 on a stop count), so the night gives it the lit orange. Fills keep --orange-deep. */
  --orange-ink: #d9531a;
  --orange-soft: #fff1e8;
  --orange-glow: rgba(242, 101, 34, 0.32);
  --ink: #0d1b2e;
  --ink-2: #3c4c63;
  --ink-3: #66768e;
  --ink-4: #98a5b8;
  --line: #e2e8f1;
  --line-2: #cfd9e7;
  --page: #f5f7fb;
  --paper: #ffffff;
  --mist: #eef3f9;
  --good: #1a9d5a;
  --wa: #1fae5b;
  --bad: #d93b41;
  --bad-soft: #fff4f4;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(11, 31, 58, 0.06), 0 12px 32px -14px rgba(11, 31, 58, 0.18);
  --shadow-pass: 0 0 0 1px rgba(11, 31, 58, 0.05), 0 40px 80px -30px rgba(6, 20, 39, 0.45);
  --font: 'Nunito', 'Noto Kufi Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar: 'Noto Kufi Arabic', 'Nunito', system-ui, sans-serif;
  --font-board: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Colours that used to be written where they were used, and navy's three jobs — text,
     a line, and the fill that says *chosen* — each a token now so the night can move them.
     By day every one keeps the value it had. */
  --heading: var(--navy-900);
  --accent-ink: var(--navy);
  --accent-line: var(--navy);
  --fill: var(--navy-900);
  /* The lighter evening blue Steven chose for the price panel (14 Oct 2026), worn by the
     things that are *chosen* on the results: a tag, a tab, a day. */
  --dusk-blue: linear-gradient(160deg, #3463ad 0%, #234a8c 55%, #1b3d77 100%);
  --dusk-shadow: 0 10px 22px -12px rgba(27, 61, 119, 0.75);
  --glass: rgba(255, 255, 255, 0.94);
  --pass-top: #fffaf6;
  /* The price stub of a flight's ticket: warm enough to stand apart from the page behind it. */
  --stub: linear-gradient(160deg, #3f6bb0 0%, #31589b 100%); --stub-line: #b9c6dc; --stub-ink: #ffffff; --stub-ink-2: #dde7f6; --stub-good: #a5f0c9;
  /* The price side of a flight's ticket: a pale tint of the card, not a block of colour —
     the figure and one button are what the eye goes to (14 Oct 2026). */
  --soft-end: #ebf0f7;
  --app-end: #fff6f0;
  --seg-on: #fff;
  --ring: 0 0 0 3px rgba(10, 61, 98, 0.12);
  --ring-wide: 0 0 0 4px rgba(10, 61, 98, 0.1);
  --hover-tint: rgba(11, 31, 58, 0.04);
  --bad-line: #f6d3d4;
  --good-wash: #e6f6ee; --good-soft: #e9f7f0; --good-pale: #edf8f2; --good-ink: #146b40;
  color-scheme: light;
}

/* ── the front door at night (27 Sep 2026) ──────────────────────────────────
   The console's own night grounds and inks, the palette Steven chose on 23 Sep, not a new
   one. The hero's sky, the navy bands, the footer and the photographs are dark already and
   are not touched; what was white — the pass, the cards, the fields, the lists — takes the
   night's paper. Chosen with the sun and moon beside the language button and remembered on
   this browser; day unless somebody chooses night. Screen only: paper stays white. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --page: #131a2b;
    --paper: #1b2438;
    --mist: #222c43;
    --line: #26314a;
    --line-2: #36446a;
    --ink: #e9edf8; --ink-2: #c2cade; --ink-3: #919bb8; --ink-4: #667192;
    --orange-soft: #38190d; --orange-ink: #ff9d6c;
    --good: #4cc08a; --bad: #f0577a; --bad-soft: #33111d;
    --heading: #f1f4fb;
    --accent-ink: #8fb8e8;
    --accent-line: #6d86c4;
    --fill: #3a64a8;
    --glass: rgba(19, 26, 43, 0.92);
    --pass-top: #1f2940;
    --stub: linear-gradient(160deg, #2b3a60 0%, #243152 100%); --stub-line: #50608a; --stub-ink: #ffffff; --stub-ink-2: #b9c4dd; --stub-good: #7fe0b0;
    --soft-end: #182036;
    --app-end: #2a1d18;
    --seg-on: #2e3a57;
    --ring: 0 0 0 3px rgba(106, 169, 230, 0.28);
    --ring-wide: 0 0 0 4px rgba(106, 169, 230, 0.24);
    --hover-tint: rgba(255, 255, 255, 0.04);
    --bad-line: #5c2334;
    --good-wash: #0f2d1e; --good-soft: #0f2d1e; --good-pale: #0f2d1e; --good-ink: #8fdcb5;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 32px -14px rgba(0, 0, 0, 0.6);
    --shadow-pass: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  }
  /* The scrolled header is the night's glass, so it keeps the white lockup. */
  :root[data-theme="dark"] .top.solid .brand .logo-dark { display: block; }
  :root[data-theme="dark"] .top.solid .brand .logo-light { display: none; }
  /* A carrier's mark is drawn for white; at night it gets the white plate a ticket gives it. */
  :root[data-theme="dark"] .carrier-plate { background: #fff; border-radius: 10px; padding: 4px 10px; }
  /* The menu and the sign-in drawer carry the logo drawn for white paper; at night they
     carry the white one, as the header does. */
  :root[data-theme="dark"] .signin-logo.on-light { display: none; }
  :root[data-theme="dark"] .signin-logo.on-dark { display: block; }
}

*, *::before, *::after { box-sizing: border-box; }
/* An element with the hidden attribute is hidden, whatever its class says about display. */
[hidden] { display: none !important; }
/* **The page does not bounce past its ends** (Steven, 15 Oct 2026: *"the page breaks at the
   top if I scroll down"*). A trackpad or a phone pulls the page past its top and shows the
   canvas behind it — the light page colour — as a white band above a dark header, and the
   same below the footer. The bounce is switched off, and where a browser still draws it the
   canvas is the navy the hero and the footer are made of, so the edge never shows white. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; background: var(--navy-900); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="ar"] body { font-family: var(--font-ar); line-height: 1.75; }
body.locked { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
input, select { font: inherit; color: inherit; }
bdi { unicode-bidi: isolate; }
:focus-visible { outline: 3px solid rgba(242, 101, 34, 0.55); outline-offset: 2px; border-radius: 8px; }

.i { width: 20px; height: 20px; flex: none; }
.i.flip { transform: none; }
[dir="rtl"] .i.flip { transform: scaleX(-1); }
.i.back { transform: scaleX(-1); }
[dir="rtl"] .i.back { transform: none; }

.wrap { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: 28px; }

/* ── header ─────────────────────────────────────────────────────────────────── */
.top {
  position: fixed; inset-inline: 0; top: 0; z-index: 30;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  color: #fff;
}
.top.solid {
  background: var(--glass);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(11, 31, 58, 0.08), 0 8px 24px -16px rgba(11, 31, 58, 0.3);
  color: var(--ink);
}
.top-row { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 28px; width: auto; }
.brand .logo-light { display: none; }
.top.solid .brand .logo-dark { display: none; }
.top.solid .brand .logo-light { display: block; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.nav button, .nav a {
  padding: 8px 11px; border-radius: 10px; font-weight: 700; font-size: 0.93rem; white-space: nowrap;
  color: inherit; opacity: 0.88; transition: background 0.15s ease, opacity 0.15s ease;
}
.nav button:hover, .nav a:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.nav [aria-current="page"] { position: relative; opacity: 1; font-weight: 900; }
.nav [aria-current="page"]::after { content: ''; position: absolute; inset-inline: 11px; bottom: 1px; height: 3px; border-radius: 3px; background: var(--orange); }
.top.solid .nav button:hover, .top.solid .nav a:hover { background: var(--mist); }
.top-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.hbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  border-radius: 999px; font-weight: 800; font-size: 0.9rem; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hbtn .i { width: 18px; height: 18px; }
.hbtn.ghost { border: 1px solid rgba(255, 255, 255, 0.28); }
.hbtn.ghost:hover { background: rgba(255, 255, 255, 0.12); }
.top.solid .hbtn.ghost { border-color: var(--line-2); }
.top.solid .hbtn.ghost:hover { background: var(--mist); }
.hbtn.solid { background: #fff; color: var(--navy-900); }
.hbtn.solid:hover { transform: translateY(-1px); }
.top.solid .hbtn.solid { background: var(--fill); color: #fff; }
.only-small { display: none !important; }

/* ── hero ─────────────────────────────────────────────────────────────────────
   The first screen is the sky, one line of welcome and the search — in that order, with
   the search inside the screen on a laptop and on a telephone. The aircraft is the one from
   the photograph, cut out of it and flown across the same sky: real, lit by that light. */
.hero {
  position: relative; background: var(--navy-900); color: #fff; overflow: hidden; isolation: isolate;
  /* How far the search climbs into the sky; the copy leaves that room under it. */
  --rise: 250px;
}
.hero-art, .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art img { object-fit: cover; object-position: 60% 42%; animation: sky-drift 70s ease-in-out infinite alternate; }
[dir="rtl"] .hero-art img { object-position: 40% 42%; }
@keyframes sky-drift { from { transform: scale(1.02); } to { transform: scale(1.09) translateY(-1.2%); } }

/* The flight. One pass climbs across the whole sky and out; the page's direction mirrors
   the lane itself, so the path and the aeroplane turn together. Measured against the hero
   (container units), so the climb is the same angle the fuselage points at on any screen. */
/* Where the welcome is written the aeroplane has already climbed away into the haze: the
   lane fades out before the words, so nothing bright ever passes behind them. */
.hero-flight { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size;
               -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 57%, #000 76%);
               mask-image: linear-gradient(90deg, transparent 0, transparent 57%, #000 76%); }
[dir="rtl"] .hero-flight { transform: scaleX(-1); }
.hero-plane {
  position: absolute; inset-block-start: 0; left: 0; width: clamp(150px, 26cqw, 400px);
  /* It comes in over the right-hand sky and climbs away at the angle its nose points —
     about eleven degrees — growing smaller as it goes, the way a departure looks from
     another aircraft. Slow: a distant airliner crosses a window in half a minute. */
  --from-x: 104cqw; --to-x: 46cqw; --from-y: 60cqh; --climb: 11.5cqw; --far: 0.6;
  transform: translate3d(var(--from-x), var(--from-y), 0);
  animation: fly-by 38s linear -7s infinite; will-change: transform;
}
@keyframes fly-by {
  0%   { transform: translate3d(var(--from-x), var(--from-y), 0) scale(1); }
  84%  { transform: translate3d(var(--to-x), calc(var(--from-y) - var(--climb)), 0) scale(var(--far)); }
  100% { transform: translate3d(var(--to-x), calc(var(--from-y) - var(--climb)), 0) scale(var(--far)); }
}
/* Air is not still: a breath of roll and lift, slower than the eye follows. */
.hero-plane-body { position: relative; animation: fly-breathe 9s ease-in-out infinite; transform-origin: 45% 60%; }
@keyframes fly-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-1.6%) rotate(-0.7deg); }
  70% { transform: translateY(1.2%) rotate(0.5deg); }
}
.hero-plane img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 18px rgba(4, 12, 28, 0.28)); }
/* Its lights, where an airliner carries them: a white strobe on the wingtip, a red beacon
   under the belly. Small enough to be noticed only as a thing that is alive. */
.hero-plane .strobe, .hero-plane .beacon { position: absolute; width: 1.1%; aspect-ratio: 1; border-radius: 50%; opacity: 0; }
.hero-plane .strobe { left: 96.3%; top: 73%; background: var(--strobe, rgb(255 255 255)); box-shadow: 0 0 6px 3px rgba(255, 255, 255, 0.9); animation: strobe 1.9s linear infinite; }
.hero-plane .beacon { left: 52.5%; top: 80%; background: #ff5a4d; box-shadow: 0 0 6px 3px rgba(255, 80, 60, 0.75); animation: strobe 1.9s linear 0.9s infinite; }
@keyframes strobe { 0%, 5% { opacity: 1; } 7%, 12% { opacity: 0; } 14%, 17% { opacity: 1; } 19%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-art img, .hero-plane, .hero-plane-body, .hero-plane .strobe, .hero-plane .beacon { animation: none; }
  .hero-plane { transform: translate3d(74cqw, 34cqh, 0); }
}

.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 20, 39, 0.8) 0%, rgba(6, 20, 39, 0.46) 36%, rgba(6, 20, 39, 0) 64%),
    linear-gradient(180deg, rgba(6, 20, 39, 0.5) 0%, rgba(6, 20, 39, 0) 24%, rgba(6, 20, 39, 0) 62%, rgba(6, 20, 39, 0.5) 100%);
}
/* A gradient cannot say "start", so the dark side is stated for each direction. */
[dir="rtl"] .hero-shade {
  background:
    linear-gradient(270deg, rgba(6, 20, 39, 0.8) 0%, rgba(6, 20, 39, 0.46) 36%, rgba(6, 20, 39, 0) 64%),
    linear-gradient(180deg, rgba(6, 20, 39, 0.5) 0%, rgba(6, 20, 39, 0) 24%, rgba(6, 20, 39, 0) 62%, rgba(6, 20, 39, 0.5) 100%);
}
.hero-copy { position: relative; padding-top: clamp(100px, 13.5vh, 132px); padding-bottom: calc(var(--rise) + 30px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.84);
}
html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--orange); border-radius: 2px; }
.hero h1 {
  margin: 12px 0 12px; max-width: 24ch; font-size: clamp(2.1rem, min(4.2vw, 6.6vh), 3.5rem); text-wrap: balance;
  line-height: 1.04; font-weight: 900; letter-spacing: -0.025em;
  text-shadow: 0 2px 30px rgba(6, 20, 39, 0.45);
}
html[lang="ar"] .hero h1 { max-width: 22ch; line-height: 1.28; letter-spacing: 0; font-weight: 800; }
.hero h1 span { color: #ffb689; }
.lede { max-width: 74ch; margin: 0; font-size: clamp(0.98rem, 1.25vw, 1.12rem); color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 14px rgba(6, 20, 39, 0.5); }

/* ── the pass: the search card ──────────────────────────────────────────────── */
.search-slot { position: relative; z-index: 5; margin-top: -250px; }
.pass { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-pass); }
.pass-tabs {
  display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.pass-tabs::-webkit-scrollbar { display: none; }
.pass-tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 14px 16px 16px;
  font-weight: 800; font-size: 0.95rem; color: var(--ink-3); white-space: nowrap;
  border-radius: 12px 12px 0 0; transition: color 0.15s ease, background 0.15s ease;
}
.pass-tabs button:hover { color: var(--ink); background: var(--mist); }
.pass-tabs button.on { color: var(--heading); }
.pass-tabs button.on::after {
  content: ''; position: absolute; inset-inline: 12px; bottom: -1px; height: 3px;
  background: var(--orange); border-radius: 3px 3px 0 0;
}
.pass-tabs button.on .i { color: var(--orange); }

.pass-body { display: grid; grid-template-columns: minmax(0, 1fr) 0 290px; }
.pass-main { padding: 20px 22px 22px; min-width: 0; }
/* The tear: a perforation between the pass and its stub, punched at both ends. */
.pass-tear { position: relative; border-inline-start: 2px dashed var(--line-2); margin-block: 18px; }
.pass-tear::before, .pass-tear::after {
  content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: var(--page); inset-inline-start: -12px;
  box-shadow: inset 0 0 0 1px rgba(11, 31, 58, 0.06);
}
.pass-tear::before { top: -30px; }
.pass-tear::after { bottom: -30px; }
.pass-stub {
  display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px 24px;
  background: linear-gradient(180deg, var(--pass-top) 0%, var(--paper) 100%);
  border-end-end-radius: var(--radius-lg); border-start-end-radius: 0;
}
.next-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line-2); }
.next-steps li { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; font-weight: 700; color: var(--ink-2); line-height: 1.35; }
.next-steps b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-ink); font-family: var(--font-board); font-size: 0.82rem; }
.stub-said { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-weight: 700; font-size: 0.85rem; }
.stub-said .i { width: 17px; height: 17px; color: var(--good); }
.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  height: 62px; border-radius: 16px; background: var(--orange); color: #fff; font-weight: 900;
  font-size: 1.08rem; box-shadow: 0 16px 30px -12px var(--orange-glow), inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.go:hover { background: var(--orange-deep); transform: translateY(-1px); box-shadow: 0 20px 34px -12px var(--orange-glow); }
.go:active { transform: translateY(0); }
.stub-error { color: var(--bad); font-weight: 700; font-size: 0.85rem; }

.trip-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--mist); border-radius: 999px; }
.seg button {
  padding: 7px 16px; border-radius: 999px; font-weight: 800; font-size: 0.86rem; color: var(--ink-3);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--seg-on); color: var(--heading); box-shadow: 0 1px 3px rgba(11, 31, 58, 0.14); }
.seg.wide { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; }
.seg.wide button { border-radius: 11px; padding: 10px 8px; }

.tick { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.9rem; color: var(--ink-2); cursor: pointer; user-select: none; }
.tick input { position: absolute; opacity: 0; pointer-events: none; }
.tick span {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--paper);
  display: grid; place-items: center; transition: background 0.15s ease, border-color 0.15s ease;
}
.tick input:checked + span { background: var(--fill); border-color: var(--fill); }
.tick input:checked + span::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-inline-end: 0; transform: rotate(-45deg) translate(1px, -1px); }
[dir="rtl"] .tick input:checked + span::after { transform: scaleX(-1) rotate(-45deg) translate(1px, -1px); }
.tick input:focus-visible + span { outline: 3px solid rgba(242, 101, 34, 0.55); outline-offset: 2px; }

.grid { display: grid; gap: 10px; }
.grid.flights.return, .grid.flights.oneway {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
}
.grid.flights.oneway { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.85fr); }
.grid.flights.return .leg-row, .grid.flights.oneway .leg-row { display: contents; }
.grid.flights.multi { grid-template-columns: minmax(0, 1fr); }
.grid.flights.multi .leg-row {
  display: grid; grid-template-columns: 28px minmax(0, 1.5fr) minmax(0, 0.9fr) 34px; gap: 10px; align-items: center;
}
.grid.flights .who { display: grid; }
.grid.flights.multi .who { max-width: 340px; }
.leg-no {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fill); color: #fff; font-weight: 800; font-size: 0.82rem;
}
.drop { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.drop:hover { background: var(--bad-soft); color: var(--bad); }
.add-leg { margin-top: 12px; padding: 8px 14px; border-radius: 10px; font-weight: 800; color: var(--accent-ink); font-size: 0.9rem; }
.add-leg:hover { background: var(--mist); }
.pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.grid.hotels { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.8fr); }
.grid.packages { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr); }
.grid.visas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); }

.cell {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 80px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--paper); text-align: start; min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
button.cell:hover, label.cell:hover { border-color: var(--line-2); box-shadow: 0 4px 14px -8px rgba(11, 31, 58, 0.25); }
.cell:focus-within, button.cell:focus-visible { border-color: var(--accent-line); box-shadow: var(--ring); outline: none; }
.cell-label {
  display: flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3);
}
html[lang="ar"] .cell-label { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
.cell-label .i { width: 15px; height: 15px; color: var(--ink-4); }
.cell-value { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 1.12rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-value .code { font-family: var(--font-board); font-size: 1.4rem; font-weight: 700; color: var(--heading); letter-spacing: 0.02em; }
.cell-value .city { overflow: hidden; text-overflow: ellipsis; }
.cell-value .day { font-family: var(--font-board); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; }
.cell-value .ph { color: var(--ink-4); font-weight: 700; font-size: 1rem; }
.cell-sub { font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell.bad { border-color: var(--bad); background: var(--bad-soft); }
.cell.bad .cell-label, .cell.bad .ph { color: var(--bad); }
.cell.field input, .cell.field select {
  border: 0; padding: 0; background: transparent; font-size: 1.05rem; font-weight: 800; width: 100%;
  min-width: 0; outline: none; appearance: none; -webkit-appearance: none;
}
.cell.field select { cursor: pointer; }
.cell.field input::placeholder { color: var(--ink-4); font-weight: 700; }
.stepper-cell { gap: 6px; }
.swap {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--accent-ink);
  box-shadow: 0 4px 12px -6px rgba(11, 31, 58, 0.35); transition: transform 0.2s ease;
}
.swap:hover { transform: translate(-50%, -50%) rotate(180deg); }
.swap .i { width: 17px; height: 17px; }

.kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kinds button {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 800;
  font-size: 0.88rem; color: var(--ink-2); background: var(--paper); transition: all 0.15s ease;
}
.kinds button:hover { border-color: var(--accent-line); }
.kinds button.on { background: var(--fill); border-color: var(--fill); color: #fff; }

.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper button {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2);
  font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--accent-ink); display: grid; place-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.stepper button:hover:not(:disabled) { border-color: var(--accent-line); background: var(--mist); }
.stepper button:disabled { opacity: 0.35; }
.stepper output { min-width: 1.4ch; text-align: center; font-weight: 800; font-size: 1.1rem; font-family: var(--font-board); }

/* ── trust strip ────────────────────────────────────────────────────────────── */
/* One strip under the search, four parts — not four more cards. */
.trust-slot { margin-top: 22px; }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
         border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-card); overflow: hidden; }
/* One shape for all four: a head, and a foot of chips held to the card's bottom edge so
   the four feet line up whatever the line above them wraps to. */
.trust-item { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 14px; border-inline-start: 1px solid var(--line); }
.trust-item:first-child { border-inline-start: 0; }
.trust-head { display: flex; align-items: flex-start; gap: 14px; }
.trust-head > .i { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--orange-soft); color: var(--orange); }
.trust-head > div { min-width: 0; }
.trust-head b { display: block; font-size: 0.97rem; }
.trust-head span { display: block; margin-top: 2px; font-size: 0.85rem; line-height: 1.45; color: var(--ink-3); }
.trust-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.trust-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 999px; background: var(--mist); color: var(--ink-2); font-size: 0.8rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.trust-chip .i { flex: none; width: 14px; height: 14px; color: var(--orange-ink); }
.trust-chip.wa .i { color: var(--wa); }
a.trust-chip { transition: background 0.15s ease, color 0.15s ease; }
a.trust-chip:hover, a.trust-chip:focus-visible { background: var(--orange-soft); color: var(--orange-ink); }
/* The card schemes as badges: each mark on its own white chip, cropped to the mark (the
   files carried up to 60% empty space, so an 18px image drew a 7px Visa). White by day and
   at night, because the marks are drawn for white. */
.pays { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pays img { box-sizing: content-box; height: 20px; width: 34px; object-fit: contain; padding: 5px 6px;
  background: #fff; border: 1px solid #e3e7ef; border-radius: 7px; }

/* ── an address that is not a page ──────────────────────────────────────────── */
.nf-wrap { max-width: 760px; padding-block: 28px 64px; }
.nf-card { display: flex; flex-direction: column; gap: 16px; }
.nf-path { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--mist); color: var(--ink-2); font-family: var(--font-board); font-size: 0.9rem; overflow-wrap: anywhere; }
.nf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nf-link { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.nf-link:hover, .nf-link:focus-visible { border-color: var(--accent-line); background: var(--hover-tint); }
.nf-link > .i { flex: none; width: 22px; height: 22px; color: var(--orange-ink); }
.nf-link > .i:last-child { width: 16px; height: 16px; color: var(--ink-3); }
.nf-link span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nf-link b { font-size: 0.95rem; color: var(--heading); }
.nf-link small { font-size: 0.82rem; color: var(--ink-3); }
@media (max-width: 560px) { .nf-links { grid-template-columns: 1fr; } }

/* ── bands ──────────────────────────────────────────────────────────────────── */
/* 80, not 96 (12 Oct 2026): two bands meeting left a sixth of a laptop screen empty between
   one section's last card and the next one's heading. */
.band { padding: 80px 0; }
.band.soft { background: linear-gradient(180deg, var(--page) 0%, var(--soft-end) 100%); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }

/* ── the board: fares found this week ─────────────────────────────────────────
   An airport's departures board, because that is where everybody already looks for *where
   and when*. Always dark, in both modes — a board is a lit thing on a wall — in the board's
   own face, with the fare in the amber such boards are lit in. */
.board-band { padding: 72px 0 24px; }
.board-band .head-row { margin-bottom: 22px; }
.fids { --fids-ink: #e9eefb; --fids-dim: #8fa0c4; --fids-amber: #ffc46b; --fids-line: rgba(255, 255, 255, 0.08);
        border-radius: 22px; padding: 8px; color: var(--fids-ink);
        background: radial-gradient(120% 160% at 100% 0%, #1c3157 0%, #0c1a33 55%, #081226 100%);
        box-shadow: 0 30px 60px -34px rgba(6, 20, 39, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
[dir="rtl"] .fids { background: radial-gradient(120% 160% at 0% 0%, #1c3157 0%, #0c1a33 55%, #081226 100%); }
.fids-head, .fids-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 18px; }
.fids-head { min-height: 40px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fids-dim); }
html[lang="ar"] .fids-head { letter-spacing: 0; font-size: 0.8rem; }
.fids-head span:last-child, .fids-fare { justify-self: end; }
.fids-row { min-height: 62px; border-top: 1px solid var(--fids-line); border-radius: 14px; color: inherit; text-decoration: none;
            transition: background 0.15s ease; animation: fids-in 0.5s ease both; animation-delay: calc(var(--i, 0) * 60ms); }
.fids-row:hover, .fids-row:focus-visible { background: rgba(255, 255, 255, 0.07); }
@keyframes fids-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fids-row { animation: none; } }
.fids-to { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fids-to b { flex: none; font-family: var(--font-board); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.08em; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.fids-to span { font-weight: 800; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fids-when { display: flex; flex-direction: column; font-family: var(--font-board); font-weight: 600; font-size: 0.95rem; }
.fids-when bdi { white-space: nowrap; }
.fids-when small { white-space: nowrap; font-family: var(--font); font-size: 0.76rem; font-weight: 700; color: var(--fids-dim); }
.fids-age { font-size: 0.84rem; font-weight: 700; color: var(--fids-dim); }
.fids-fare { display: inline-flex; align-items: baseline; gap: 6px; color: var(--fids-amber); }
.fids-fare b { font-family: var(--font-board); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.01em; }
.fids-fare small { font-size: 0.78rem; font-weight: 800; }
.fids-fare .i { width: 16px; height: 16px; align-self: center; margin-inline-start: 6px; color: var(--fids-dim); transition: transform 0.15s ease; }
.fids-row:hover .fids-fare .i { transform: translateX(3px); color: var(--fids-ink); }
[dir="rtl"] .fids-row:hover .fids-fare .i { transform: translateX(-3px) scaleX(-1); }
.fids-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 6px 0; font-size: 0.84rem; font-weight: 600; color: var(--ink-3); }
.fids-note .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
@media (max-width: 719px) {
  .board-band { padding: 44px 0 8px; }
  .fids-head { display: none; }
  .fids-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; min-height: 0; }
  .fids-to { grid-column: 1; }
  .fids-fare { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .fids-when { grid-column: 1; flex-direction: row; gap: 8px; align-items: baseline; font-size: 0.84rem; color: var(--fids-dim); }
  .fids-age { display: none; }
  .fids-fare b { font-size: 1.15rem; }
}
/* What somebody found to this city this week, on its photograph. */
.place-from { display: flex; width: fit-content; align-items: baseline; gap: 6px; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; color: #fff; text-decoration: none;
              background: rgba(6, 20, 39, 0.55); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); font-weight: 800; font-size: 0.86rem; }
.place-from small { font-weight: 700; font-size: 0.76rem; opacity: 0.85; white-space: nowrap; }
.place-from b { font-family: var(--font-board); font-size: 1.02rem; color: #ffc46b; }
.place-from:hover { background: rgba(6, 20, 39, 0.75); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange);
}
html[lang="ar"] .kicker { letter-spacing: 0; text-transform: none; font-size: 0.92rem; }
h2 { margin: 10px 0 10px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; font-weight: 900; letter-spacing: -0.02em; color: var(--heading); }
html[lang="ar"] h2 { letter-spacing: 0; line-height: 1.35; font-weight: 800; }
.sub { margin: 0; max-width: 58ch; color: var(--ink-2); font-size: 1.05rem; }

/* What we do, as tickets: a stub with the service's mark and its three-letter code, a tear
   with a bite out of each edge, and the words. Six across the grid so three stand to a row;
   the two most people come for take half each. */
.services { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.service {
  grid-column: span 2; position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: stretch;
  min-height: 118px; border-radius: 18px; background: var(--paper); text-align: start; overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -24px rgba(11, 31, 58, 0.35); }
/* The stub wears the blue of a flight's price stub, by day and at night: one colour says
   *the part you tear off* across the site. */
.service-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--stub); color: var(--stub-ink); }
.service-icon { display: grid; place-items: center; }
.service-icon .i { width: 26px; height: 26px; }
.service-code { font-family: var(--font-board); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; opacity: 0.78; transition: color 0.2s ease, opacity 0.2s ease; }
.service:hover .service-code { color: #ffc46b; opacity: 1; }
.service-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 16px 6px 16px 20px; border-inline-start: 2px dashed var(--line-2); }
[dir="rtl"] .service-body { padding: 16px 20px 16px 6px; }
/* The bites at the two ends of the tear, in the page's own ground. */
.service-body::before, .service-body::after { content: ''; position: absolute; inset-inline-start: 69px; width: 18px; height: 18px; border-radius: 50%; background: var(--page); }
.service-body::before { top: -9px; }
.service-body::after { bottom: -9px; }
.service b { font-size: 1.06rem; color: var(--heading); }
.service-line { color: var(--ink-3); font-size: 0.9rem; line-height: 1.45; }
.service-go { align-self: center; display: grid; place-items: center; width: 36px; height: 36px; margin-inline: 4px 16px; border-radius: 50%; background: var(--mist); color: var(--accent-ink); transition: background 0.2s ease, color 0.2s ease; }
.service-go .i { width: 16px; height: 16px; }
.service:hover > .service-go { background: var(--orange); color: #fff; }
/* A ticket and a room: the large tickets, their stub at the far end with a strip of bars
   as a boarding pass has, on the two skies the page already wears. */
.service.lead {
  grid-column: span 3; grid-template-columns: minmax(0, 1fr) 128px; min-height: 216px; color: #fff;
  background: radial-gradient(120% 150% at 100% 0%, #2c4f8a 0%, #10254a 46%, #081226 100%);
}
.service.lead:nth-child(2) { background: radial-gradient(120% 150% at 100% 0%, #c25a22 0%, #6a2f33 36%, #131f3d 78%, #081226 100%); }
[dir="rtl"] .service.lead { background: radial-gradient(120% 150% at 0% 0%, #2c4f8a 0%, #10254a 46%, #081226 100%); }
[dir="rtl"] .service.lead:nth-child(2) { background: radial-gradient(120% 150% at 0% 0%, #c25a22 0%, #6a2f33 36%, #131f3d 78%, #081226 100%); }
.service.lead .service-stub { order: 2; gap: 10px; padding: 18px 12px; background: rgba(255, 255, 255, 0.06); border-inline-start: 2px dashed rgba(255, 255, 255, 0.34); }
.service.lead .service-stub::before, .service.lead .service-stub::after { content: ''; position: absolute; inset-inline-end: 119px; width: 18px; height: 18px; border-radius: 50%; background: var(--page); }
.service.lead .service-stub::before { top: -9px; }
.service.lead .service-stub::after { bottom: -9px; }
.service.lead .service-icon .i { width: 40px; height: 40px; stroke-width: 1.3; }
.service.lead .service-code { font-size: 1.25rem; letter-spacing: 0.2em; opacity: 1; margin-inline-end: -0.2em; }
.service-bars { width: 76px; height: 30px; opacity: 0.78;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 9px, #fff 9px 12px, transparent 12px 14px); }
.service.lead .service-body { justify-content: flex-end; gap: 8px; padding: 28px; border: 0; }
.service.lead .service-body::before, .service.lead .service-body::after { content: none; }
.service.lead b { color: #fff; font-size: 1.7rem; font-weight: 900; letter-spacing: -0.01em; }
html[lang="ar"] .service.lead b { letter-spacing: 0; }
.service.lead .service-line { color: rgba(255, 255, 255, 0.84); font-size: 1rem; max-width: 36ch; }
.service.lead .service-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; width: auto; height: 40px; margin: 8px 0 0; padding: 0 18px; border-radius: 999px; background: #fff; color: #0b1f3a; font-weight: 800; font-size: 0.92rem; white-space: nowrap; }
.service.lead:hover .service-go { background: var(--orange); color: #fff; }
.service.lead .service-go .i { transition: transform 0.2s ease; }
.service.lead:hover .service-go .i { transform: translateX(3px); }
[dir="rtl"] .service.lead:hover .service-go .i { transform: scaleX(-1) translateX(3px); }
@media (prefers-reduced-motion: reduce) { .service, .service:hover { transform: none; transition: none; } }


.places { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.place { position: relative; aspect-ratio: auto; min-height: 480px; border-radius: 24px; overflow: hidden; background: var(--navy-900); color: #fff; box-shadow: 0 30px 50px -30px rgba(6, 20, 39, 0.6); }
.place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.place:hover img { transform: scale(1.05); }
.place-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 39, 0) 24%, rgba(6, 20, 39, 0.62) 56%, rgba(6, 20, 39, 0.95) 100%); }
.place-copy { position: absolute; inset-inline: 0; bottom: 0; padding: 26px; }
.place-route { display: flex; align-items: center; gap: 8px; font-family: var(--font-board); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.85); }
.place-route i { flex: 1; max-width: 42px; border-top: 1.5px dashed rgba(255, 255, 255, 0.55); }
.place-route .i { width: 16px; height: 16px; color: #ffb689; transform: rotate(45deg); }
[dir="rtl"] .place-route { flex-direction: row-reverse; justify-content: flex-end; }
.place h3 { margin: 12px 0 0; font-size: 2.1rem; font-weight: 900; line-height: 1.1; }
.place:first-child h3 { font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.02em; }
.place:first-child .place-copy { padding: 34px; }
.place:first-child p { max-width: 34ch; font-size: 1.02rem; }
.place-country { font-weight: 700; color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; }
.place p { margin: 10px 0 18px; color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; }
.place-go {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
  background: #fff; color: var(--navy-900); font-weight: 900; font-size: 0.92rem; transition: background 0.15s ease, color 0.15s ease;
}
.place-go:hover { background: var(--orange); color: #fff; }
.place-go .i { width: 17px; height: 17px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.chips > span { color: var(--ink-3); font-weight: 700; font-size: 0.92rem; margin-inline-end: 4px; }
.chips button { padding: 9px 18px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); font-weight: 800; font-size: 0.9rem; color: var(--heading); transition: all 0.15s ease; }
.chips button:hover { border-color: var(--fill); background: var(--fill); color: #fff; }

.how { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: none; }
.how-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 58px; }
.how-steps li::before { content: ''; position: absolute; top: 21px; inset-inline-start: 52px; inset-inline-end: -12px; border-top: 2px dashed var(--line-2); }
.how-steps li:last-child::before { display: none; }
/* Named through its list: `.how-steps span` is the grey of the sentences and would win. */
.how-steps .how-no { position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: #fff; font-family: var(--font-board); font-weight: 700; font-size: 1.05rem; box-shadow: 0 0 0 5px var(--page); }
.how-steps b { font-size: 1.08rem; color: var(--heading); }
.how-steps span { color: var(--ink-3); font-size: 0.94rem; }

.band.navy {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 85% 0%, rgba(47, 143, 216, 0.22), transparent 60%),
              radial-gradient(900px 500px at 0% 100%, rgba(242, 101, 34, 0.14), transparent 60%), var(--navy-950);
}
.band.navy h2 { color: #fff; }
.band.navy .sub { color: rgba(255, 255, 255, 0.78); }
.partners { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.partners ul { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 14px; }
.partners li { display: flex; align-items: center; gap: 14px; font-weight: 700; }
.partners li .i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: #ffb689; border: 1px solid rgba(255, 255, 255, 0.12); }
.partners-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.partners-art { position: relative; }
.partners-art img { border-radius: 24px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.float-card {
  position: absolute; bottom: -22px; inset-inline-start: -22px; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.45);
}
.float-card .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 5px rgba(26, 157, 90, 0.16); }
.float-card b { display: block; font-size: 0.95rem; }
.float-card span { display: block; font-size: 0.82rem; color: var(--ink-3); }

.app {
  display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 0.9fr); align-items: center; gap: 40px;
  padding: 44px 48px 0; border-radius: 28px; overflow: hidden;
  background: radial-gradient(80% 120% at 100% 100%, rgba(242, 101, 34, 0.14), transparent 60%), linear-gradient(120deg, var(--paper) 0%, var(--app-end) 100%);
  box-shadow: var(--shadow-card);
}
[dir="rtl"] .app { background: radial-gradient(80% 120% at 0% 100%, rgba(242, 101, 34, 0.14), transparent 60%), linear-gradient(240deg, var(--paper) 0%, var(--app-end) 100%); }
.app-words { align-self: center; padding-bottom: 44px; }
.app-get { display: flex; align-items: center; gap: 18px; padding-bottom: 44px; }
.app-qr { margin: 0; padding: 12px 12px 8px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -16px rgba(11, 31, 58, 0.4); text-align: center; }
.app-qr img { width: 132px; height: 132px; }
.app-qr figcaption { margin-top: 4px; font-size: 0.74rem; font-weight: 800; color: #66768e; }
.app .stores { flex-direction: column; flex-wrap: nowrap; }
.app .store { width: 190px; }
.app-phones { position: relative; align-self: end; height: 250px; }
.mock { position: absolute; bottom: -34px; width: 150px; height: 280px; padding: 9px; border-radius: 30px; background: linear-gradient(160deg, #2b3445, #0d1320); box-shadow: 0 24px 50px -20px rgba(6, 20, 39, 0.55); inset-inline-start: 6%; transform: rotate(-7deg); }
.mock.front { inset-inline-start: 38%; bottom: -44px; transform: rotate(4deg); z-index: 1; }
[dir="rtl"] .mock { transform: rotate(7deg); }
[dir="rtl"] .mock.front { transform: rotate(-4deg); }
.mock-notch { position: absolute; top: 14px; left: 50%; width: 46px; height: 6px; margin-left: -23px; border-radius: 6px; background: #0d1320; z-index: 1; }
.mock-screen { position: relative; height: 100%; border-radius: 22px; overflow: hidden; padding: 30px 10px 12px; display: flex; flex-direction: column; gap: 9px;
               background: linear-gradient(180deg, rgba(8, 18, 38, 0.62) 0%, rgba(8, 18, 38, 0.2) 46%, rgba(8, 18, 38, 0.74) 100%), url('/static/home/sky-1200.webp') 62% 60% / cover no-repeat, var(--navy-950); }
.mock-screen img { width: 96px; height: auto; margin: 0 auto 2px; }
.mock-glow { position: absolute; inset: auto -20% -30% -20%; height: 60%; background: radial-gradient(closest-side, rgba(242, 101, 34, 0.45), transparent); }
/* The page's own first screen, in small: two lines of words, the search as a pass, a flight. */
.mock-words { display: grid; gap: 5px; padding: 2px 4px; }
.mock-words i { display: block; height: 6px; width: 78%; border-radius: 3px; background: rgba(255, 255, 255, 0.92); }
.mock-words i + i { width: 56%; background: #ffb98a; }
.mock-search { display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 10px 20px -12px rgba(6, 20, 39, 0.6); }
.mock-search > i { display: block; height: 7px; width: 64%; border-radius: 4px; background: var(--mist); }
.mock-pass { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; border-radius: 9px; background: #fff; border: 1px solid var(--line); }
.mock-pass b { font-family: var(--font-board); font-size: 0.8rem; color: var(--navy-900); }
.mock-pass .i { width: 15px; height: 15px; color: var(--orange); }
[dir="rtl"] .mock-pass .i { transform: scaleX(-1); }
.mock-go { height: 22px; border-radius: 8px; background: var(--orange); }
.mock-flight { display: grid; grid-template-columns: minmax(0, 1fr) 30px; min-height: 40px; border-radius: 10px; overflow: hidden; background: #fff; }
.mock-flight span { display: grid; align-content: center; gap: 5px; padding: 8px; }
.mock-flight i { display: block; height: 6px; border-radius: 3px; background: var(--line-2); }
.mock-flight i + i { width: 60%; background: var(--mist); }
.mock-flight em { background: linear-gradient(160deg, #3f6bb0 0%, #31589b 100%); border-inline-start: 1.5px dashed #b9c6dc; }
/* The phone behind: the ticket itself, with its tear and its bars. */
.mock-ticket { display: grid; gap: 7px; margin-top: 6px; padding: 9px; border-radius: 12px; background: #fff; }
.mock-ticket > i { display: block; height: 6px; border-radius: 3px; background: var(--mist); }
.mock-ticket > i + i { width: 58%; }
.mock-bars { height: 22px; margin-top: 3px; padding-top: 8px; border-top: 1.5px dashed var(--line-2); background-clip: content-box; opacity: 0.85;
  background-image: repeating-linear-gradient(90deg, var(--navy-900) 0 2px, transparent 2px 4px, var(--navy-900) 4px 5px, transparent 5px 9px, var(--navy-900) 9px 12px, transparent 12px 14px); }
#app.band, .band#app { padding: 80px 0; }
.app h2 { margin-top: 8px; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 22px; border-radius: 14px; background: var(--navy-950); color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1.1; transition: transform 0.15s ease; }
.store:hover { transform: translateY(-2px); }
.store .i { width: 26px; height: 26px; }
.store small { display: block; font-size: max(11px, 0.68rem); font-weight: 700; opacity: 0.75; }

/* ── buttons ────────────────────────────────────────────────────────────────── */
.btn-orange, .btn-line, .btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px;
  border-radius: 14px; font-weight: 900; font-size: 0.98rem; white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 14px 26px -12px var(--orange-glow); }
.btn-orange:hover:not(:disabled) { background: var(--orange-deep); transform: translateY(-1px); }
.btn-orange:disabled { opacity: 0.45; box-shadow: none; }
.btn-orange.small { height: 42px; padding: 0 18px; font-size: 0.9rem; border-radius: 12px; }
.btn-orange.wide { width: 100%; }
.btn-orange.busy { position: relative; color: transparent; }
.btn-orange.busy::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: spin 0.8s linear infinite; }
.btn-line { border: 1.5px solid rgba(255, 255, 255, 0.35); color: #fff; }
.btn-line:hover { background: rgba(255, 255, 255, 0.1); }
.btn-line.dark { border-color: var(--line-2); color: var(--heading); }
.btn-line.dark:hover { background: var(--mist); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 14px 26px -12px rgba(31, 174, 91, 0.45); }
.btn-wa:hover { transform: translateY(-1px); background: #199a50; }
.btn-orange .i, .btn-line .i, .btn-wa .i { width: 20px; height: 20px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── footer ─────────────────────────────────────────────────────────────────── */
.foot { background: var(--navy-950); color: rgba(255, 255, 255, 0.74); padding: 72px 0 0; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.foot-brand img { height: 30px; width: auto; }
.foot-brand p { margin: 18px 0; max-width: 34ch; font-size: 0.94rem; }
.social { display: flex; gap: 10px; }
.social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.07); color: #fff; transition: background 0.15s ease; }
.social a:hover { background: var(--orange); }
.foot h4 { margin: 4px 0 16px; color: #fff; font-size: 0.95rem; font-weight: 900; }
.foot-grid > div:not(.foot-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-grid a, .foot-grid button { font-size: 0.93rem; transition: color 0.15s ease; text-align: start; }
.foot-grid a:hover, .foot-grid button:hover { color: #fff; }
.foot-phone { display: flex !important; align-items: center; gap: 12px; }
.foot-phone .i { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: #ffb689; }
.foot-phone span { color: #fff; font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.foot-phone small { display: block; font-weight: 600; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }
.foot-addr { align-items: flex-start; }
.foot-addr span { font-weight: 600; font-size: 0.9rem; line-height: 1.5; max-width: 26ch; }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.84rem; }
.foot-staff { color: rgba(255, 255, 255, 0.74); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.foot-staff:hover { color: #fff; }

/* ── popovers ───────────────────────────────────────────────────────────────── */
.pop {
  position: absolute; z-index: 40; width: 420px; max-width: calc(100vw - 24px);
  background: var(--paper); border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(6, 20, 39, 0.4); padding: 14px; animation: rise 0.16s ease;
}
.pop.pop-dates, .pop.pop-date { width: 680px; }
.pop.pop-date { width: 360px; }
.pop.pop-pax, .pop.pop-rooms { width: 380px; }
.pop.as-sheet {
  position: fixed; inset-inline: 0; bottom: 0; top: auto; left: 0; width: auto; max-width: none;
  max-height: 88vh; overflow: auto; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 0 0 100vmax rgba(6, 20, 39, 0.5); animation: slide-up 0.2s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes slide-up { from { transform: translateY(40px); opacity: 0.4; } }
.pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pop-title { flex: 1; font-weight: 900; color: var(--heading); font-size: 0.98rem; }
.pop-title.minor { margin: 16px 0 10px; font-size: 0.88rem; }
.pop-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.pop-x:hover { background: var(--mist); color: var(--ink); }
.pop-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--accent-line); background: var(--paper); }
.pop-search .i { color: var(--ink-3); width: 18px; height: 18px; }
.pop-search input { flex: 1; align-self: stretch; border: 0; outline: none; background: transparent; font-weight: 700; font-size: 1rem; min-width: 0; }
.pop-empty { padding: 16px 8px; color: var(--ink-3); font-weight: 700; font-size: 0.92rem; }
.pop .pop-title:not(:first-child) { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 4px 6px 6px; }
html[lang="ar"] .pop .pop-title:not(:first-child) { text-transform: none; letter-spacing: 0; }
.pop-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.pop-list li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer; }
.pop-list li.hot, .pop-list li:hover { background: var(--mist); }
.pick-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--mist); color: var(--accent-ink); flex: none; }
.pop-list li.hot .pick-icon { background: var(--paper); }
.pick-icon .i { width: 18px; height: 18px; }
.pick-text { flex: 1; min-width: 0; }
.pick-text b { display: block; font-size: 0.97rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-text small { display: block; color: var(--ink-3); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-code { font-family: var(--font-board); font-weight: 700; color: var(--accent-ink); background: var(--mist); padding: 3px 8px; border-radius: 8px; font-size: 0.85rem; }
.pop-list li.hot .pick-code { background: var(--paper); }
/* The Hotels tab's list: how many hotels a place has, a hotel's stars, and a quiet heading
   where the hotels begin. */
.pick-count { flex: none; font-size: 0.8rem; font-weight: 800; color: var(--ink-3); white-space: nowrap; }
.pick-code.stars { color: var(--orange-ink); }
.pop-list li.pop-group { cursor: default; padding: 12px 10px 4px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pop-list li.pop-group:hover { background: transparent; }
html[lang="ar"] .pop-list li.pop-group { letter-spacing: 0; text-transform: none; font-size: 0.86rem; }
.pop-list li.typed { border-top: 1px dashed var(--line-2); border-radius: 0 0 12px 12px; margin-top: 4px; }
.pop-list li.typed .pick-icon { color: var(--orange-ink); }
.pop-list.stays .pick-text b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink-2); }
.pop-foot .tiny { font-size: 0.8rem; color: var(--ink-3); font-weight: 600; }
.cal-nav { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--accent-ink); flex: none; }
.cal-nav:hover:not(:disabled) { background: var(--mist); }
.cal-nav:disabled { opacity: 0.35; }
.cal-head .pop-title { text-align: center; }
/* Dates in one press, over the calendar: what each means is written on it. */
.cal-quick { display: flex; gap: 8px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.cal-quick::-webkit-scrollbar { display: none; }
.cal-quick button { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 14px; border-radius: 12px;
                    border: 1.5px solid var(--line-2); text-align: start; }
.cal-quick button b { font-size: 0.86rem; font-weight: 800; color: var(--heading); white-space: nowrap; }
.cal-quick button small { font-family: var(--font-board); font-size: 0.76rem; font-weight: 600; color: var(--ink-3); }
.cal-quick button:hover { border-color: var(--accent-line); background: var(--mist); }
.cal-quick button.on { border-color: var(--orange); background: var(--orange-soft); }
.months { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 28px; }
.month-name { text-align: center; font-weight: 900; color: var(--heading); margin-bottom: 8px; }
.week, .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week span { text-align: center; font-size: max(11px, 0.72rem); font-weight: 800; color: var(--ink-3); padding-bottom: 6px; }
html[lang="ar"] .week span { font-size: max(11px, 0.64rem); }
.days { gap: 2px 0; }
.days button { aspect-ratio: 1; border-radius: 10px; font-weight: 700; font-size: 0.92rem; font-family: var(--font-board); color: var(--ink); transition: background 0.1s ease; }
.days button:hover:not(:disabled) { background: var(--mist); }
.days button:disabled { color: var(--ink-4); opacity: 0.55; }
.days button.now { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.days button.in { background: var(--orange-soft); border-radius: 0; color: var(--orange-ink); }
.days button.from, .days button.to { background: var(--fill); color: #fff; }
.counts { display: grid; gap: 4px; }
.count-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.count-row:last-child { border-bottom: 0; }
.count-row b { display: block; font-size: 0.97rem; }
.count-row small { display: block; color: var(--ink-3); font-size: 0.8rem; }

/* ── dialogs ────────────────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(6, 20, 39, 0.55); backdrop-filter: blur(3px); animation: fade 0.2s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: fixed; z-index: 60; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--paper); border-radius: 26px; padding: 34px; box-shadow: 0 40px 100px -30px rgba(6, 20, 39, 0.6);
  animation: pop-in 0.22s ease;
}
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, -46%); } }
.sheet.side {
  top: 0; bottom: 0; left: auto; inset-inline-end: 0; transform: none; width: min(460px, 100vw);
  max-height: none; border-radius: 0; border-start-start-radius: 26px; border-end-start-radius: 26px;
  padding: 36px 34px; display: flex; flex-direction: column; animation: slide-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }
[dir="rtl"] .sheet.side { animation-name: slide-in-rtl; }
@keyframes slide-in-rtl { from { transform: translateX(-40px); opacity: 0; } }
.sheet-x { position: absolute; top: 18px; inset-inline-end: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.sheet-x:hover { background: var(--mist); color: var(--ink); }
.sheet h2 { font-size: 1.7rem; margin: 8px 0 6px; }
.sheet-note { margin: 8px 0 18px; color: var(--ink-2); font-size: 0.97rem; }
.sheet-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-more { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.9rem; font-weight: 700; color: var(--accent-ink); }
.sheet-more a, .sheet-more button { display: inline-flex; align-items: center; gap: 8px; text-align: start; }
.sheet-more a:hover, .sheet-more button:hover { color: var(--orange); }
.sheet-more .i { width: 17px; height: 17px; }

.boarding { margin-top: 14px; padding: 18px 20px; border-radius: 18px; background: var(--page); border: 1px dashed var(--line-2); }
.board-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 6px 0; }
.board-row + .board-row { border-top: 1px dashed var(--line-2); padding-top: 12px; margin-top: 6px; }
.board-end b { display: block; font-family: var(--font-board); font-size: 1.9rem; line-height: 1; color: var(--heading); }
.board-end span { display: block; font-size: 0.85rem; color: var(--ink-3); font-weight: 700; margin-top: 4px; }
.board-row .board-end:last-child { text-align: end; }
.board-mid { position: relative; display: flex; align-items: center; gap: 6px; color: var(--orange); }
.board-mid i { flex: 1; border-top: 1.5px dashed var(--line-2); }
.board-mid .i { width: 18px; height: 18px; transform: rotate(45deg); }
[dir="rtl"] .board-mid .i { transform: rotate(-135deg); }
.board-mid .i.back { transform: rotate(-135deg); }
[dir="rtl"] .board-mid .i.back { transform: rotate(45deg); }
.board-mid small { position: absolute; top: 100%; inset-inline: 0; text-align: center; font-family: var(--font-board); font-weight: 700; color: var(--ink-2); font-size: 0.8rem; margin-top: 2px; }
.board-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 800; color: var(--ink-2); font-size: 0.92rem; }
.board-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; font-weight: 700; color: var(--ink-2); }

.signin-logo { height: 30px; width: auto; align-self: flex-start; margin-bottom: 22px; }
.signin-sheet h2 { font-size: 1.5rem; }
/* A traveller's own way in comes first: most people who press Sign in are customers, and the
   form under it is for staff and partner agencies. On the site's dusk sky, as a ticket stub. */
.signin-traveller { display: grid; gap: 8px; padding: 20px; border-radius: 20px; color: #fff;
  background: linear-gradient(180deg, rgba(6, 16, 36, 0.86) 0%, rgba(6, 16, 36, 0.62) 100%),
              url('/static/home/sky-1200.webp') center 48% / cover no-repeat, var(--navy-900); }
.st-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 800; color: #ffcba8; }
.st-eyebrow .i { width: 16px; height: 16px; }
.signin-traveller h3 { margin: 0; font-size: 1.3rem; font-weight: 900; line-height: 1.25; color: #fff; }
html[lang="ar"] .signin-traveller h3 { line-height: 1.5; }
.signin-traveller p { margin: 0 0 6px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }
.signin-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; font-size: 0.78rem; font-weight: 800; color: var(--ink-3); }
.signin-or::before, .signin-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.signin-form { display: grid; gap: 16px; }
.field-line { display: grid; gap: 7px; }
.field-line > span:first-child { font-size: 0.82rem; font-weight: 800; color: var(--ink-2); }
.field-line input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line-2);
  background: var(--paper); font-size: 1rem; font-weight: 700; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-line input:focus { border-color: var(--accent-line); box-shadow: var(--ring-wide); }
.field-line input::placeholder { color: var(--ink-4); font-weight: 600; }
/* A password is typed left to right in either language, so its box is `dir="ltr"` — and the
   eye and the room kept for it were measured from two different directions: on the Arabic
   page the eye sat on the left, over the first letters. The pair reads one way. */
.with-eye { position: relative; display: block; direction: ltr; }
.with-eye input { padding-inline-end: 52px; }
.eye { position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); }
.eye:hover { background: var(--mist); color: var(--ink); }
.form-error { padding: 12px 14px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-weight: 700; font-size: 0.92rem; border: 1px solid var(--bad-line); }
/* The next step of signing in, not a fault: red here read as "something went wrong" to
   somebody whose password had just been accepted. */
.form-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
             background: var(--mist); color: var(--heading); font-weight: 700; font-size: 0.92rem;
             border: 1px solid color-mix(in srgb, var(--accent-line) 30%, transparent); }
.form-note .i { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--accent-ink); }
.rules { display: flex; flex-wrap: wrap; gap: 6px; }
.rules span { padding: 4px 10px; border-radius: 999px; background: var(--mist); font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.rules span.met { background: var(--good-wash); color: var(--good); }
.signin-help { font-size: 0.85rem; color: var(--ink-3); }
.signin-done { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; background: var(--good-soft); color: var(--good); font-weight: 800; }
.signin-foot { margin-top: auto; padding-top: 24px; }
.signin-foot > div { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--page); font-size: 0.92rem; color: var(--ink-2); font-weight: 700; }
.signin-foot .i { color: var(--orange); }
.signin-foot a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.menu-list { display: grid; gap: 4px; margin-bottom: 24px; }
.menu-list button, .menu-list a { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: 12px; font-weight: 800; font-size: 1.05rem; color: var(--heading); }
.menu-list button:hover, .menu-list a:hover { background: var(--mist); }
.menu-list .i { width: 18px; height: 18px; color: var(--ink-4); }
.menu-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }

/* ── widths ─────────────────────────────────────────────────────────────────── */

/* ── recent searches — this browser's own, under the pass ─────────────────── */
.recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-inline: 6px; }
.recent-said { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 800; color: var(--ink-3); margin-inline-end: 4px; }
.recent-said .i { width: 16px; height: 16px; }
.recent-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 7px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11, 31, 58, 0.05); transition: border-color 0.15s ease, transform 0.15s ease; }
.recent-chip:hover { border-color: var(--orange); transform: translateY(-1px); }
.recent-chip b { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--heading); }
.recent-chip small { font-size: 0.74rem; color: var(--ink-3); font-family: var(--font-board); }
.recent-clear { font-size: 0.8rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.i.tiny { width: 14px; height: 14px; }

/* ── manage your trip ─────────────────────────────────────────────────────── */
.manage { padding-top: 80px; }
/* Find my booking: the one box somebody who has already booked came for, before the cards. */
.manage-find { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 18px 28px; margin-bottom: 0; padding: 22px 26px;
               border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: rgba(255, 255, 255, 0.82);
               background: radial-gradient(110% 160% at 100% 0%, #24457c 0%, #0f2244 50%, #081226 100%); box-shadow: none; }
[dir="rtl"] .manage-find { background: radial-gradient(110% 160% at 0% 0%, #24457c 0%, #0f2244 50%, #081226 100%); }
.manage-find-words { display: flex; align-items: center; gap: 14px; min-width: 0; }
.manage-find-words > .i { flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: #ffc46b; }
.manage-find-words b { display: block; font-size: 1.2rem; font-weight: 900; color: #fff; }
.manage-find-words span { display: block; font-size: 0.92rem; }
.manage-find-row { display: flex; gap: 10px; }
.manage-find-row input { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 18px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, 0.22);
                         background: rgba(255, 255, 255, 0.08); color: #fff; font-family: var(--font-board); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.03em; }
.manage-find-row input::placeholder { color: rgba(255, 255, 255, 0.55); font-family: var(--font); letter-spacing: 0; font-weight: 600; }
.manage-find-row input:focus { outline: 0; border-color: #ffc46b; background: rgba(255, 255, 255, 0.12); }
.manage-find-row input.bad { border-color: #ff8f7d; }
.manage-find-row .btn-orange { flex: none; height: 54px; }
@media (max-width: 899px) { .manage-find { grid-template-columns: minmax(0, 1fr); padding: 20px; } }
@media (max-width: 519px) { .manage-find-row { flex-direction: column; } .manage-find-row .btn-orange { width: 100%; justify-content: center; } }
/* A section the reader has not reached yet waits a little lower and rises as it arrives. */
.rises { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rises.shown { opacity: 1; transform: none; }
/* One object, not five (12 Oct 2026): the lookup and what can be done with a booking were
   a navy bar over four separate white cards, each with its own shadow. They are one panel
   now — the lookup its head, the four a row under it divided by hairlines. */
.manage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.manage-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 2px 14px; padding: 22px 22px 20px; transition: background 0.18s ease; }
.manage-card + .manage-card { border-inline-start: 1px solid var(--line); }
.manage-card:hover { background: var(--mist); }
.manage-ico { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mist); color: var(--accent-ink); transition: background 0.18s ease, color 0.18s ease; }
.manage-card:hover .manage-ico { background: var(--fill); color: #fff; }
.manage-ico .i { width: 22px; height: 22px; }
.manage-card b { font-size: 1.02rem; color: var(--heading); }
.manage-card > span:not(.manage-ico) { font-size: 0.88rem; color: var(--ink-3); line-height: 1.5; }
.manage-card em { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-style: normal; font-weight: 800; font-size: 0.86rem; color: var(--wa); }
.manage-card em .i { width: 16px; height: 16px; }
/* The account is this company's own page, not a chat: its word is the brand's colour. */
.manage-card:first-child em { color: var(--orange-ink); }

/* ── airlines — the marks on white plates, as on every ticket ─────────────── */
.carriers { padding-top: 80px; }
/* A ground under a section (12 Oct 2026, Steven: "these feel like they're flying in the
   site"). The three steps and the airlines stood straight on the page with nothing under
   them; each sits on a panel of the page's own paper now, with a pale wash in one corner. */
.ground { position: relative; padding: 40px 44px 44px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-card); overflow: hidden; isolation: isolate; }
.ground::before { content: ''; position: absolute; z-index: -1; inset-block-start: -40%; inset-inline-end: -12%; width: 56%; aspect-ratio: 1; border-radius: 50%;
                  background: radial-gradient(closest-side, var(--soft-end), transparent 72%); }
.ground .head-row { margin-bottom: 26px; }
.carriers .carrier-grid li { background: var(--page); border-color: transparent; }
.how.ground .how-no { box-shadow: 0 0 0 5px var(--paper); }
.carrier-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.carrier-grid li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 14px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); text-align: center; }
.carrier-plate { height: 50px; display: grid; place-items: center; }
.carrier-plate img { max-width: 115px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.carrier-name { font-size: 0.8rem; font-weight: 700; color: var(--ink-2); line-height: 1.3; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 56px; padding-block: 96px; align-items: start; }
.faq-head { position: sticky; top: 100px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.faq-head h2 { margin: 0; }
.btn-wa.small { height: 44px; padding: 0 18px; font-size: 0.92rem; margin-top: 8px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq details { border-radius: 14px; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.faq details[open] { border-color: var(--line-2); box-shadow: var(--shadow-card); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 800; color: var(--heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--ink-3); transition: transform 0.2s ease; }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--ink-2); }


/* ── the company pages: about, terms, privacy, contact, site map ──────────────
   Read like documents, not like the landing page: a navy dusk band carrying the title,
   the pages as one set down the side (so the five are one place, not five dead ends), and
   the text on paper at a reading width. */
.doc-main { background: var(--page); }
.doc-hero {
  position: relative; color: #fff; padding: 132px 0 104px; overflow: hidden;
  /* The site's own dusk sky, under a shade the words can be read on. */
  background: linear-gradient(180deg, rgba(6, 16, 36, 0.86) 0%, rgba(6, 16, 36, 0.66) 52%, rgba(6, 16, 36, 0.5) 100%),
              url('/static/home/sky-2400.webp') center 46% / cover no-repeat, var(--navy-900);
}
[dir="rtl"] .doc-hero { background: linear-gradient(180deg, rgba(6, 16, 36, 0.86) 0%, rgba(6, 16, 36, 0.66) 52%, rgba(6, 16, 36, 0.5) 100%),
              url('/static/home/sky-rtl-2400.webp') center 46% / cover no-repeat, var(--navy-900); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 700; color: rgba(255, 255, 255, 0.64); }
.crumbs a:hover { color: #fff; }
.crumbs .i { width: 14px; height: 14px; opacity: 0.6; }
.doc-hero h1 { margin: 14px 0 10px; font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
html[lang="ar"] .doc-hero h1 { letter-spacing: 0; line-height: 1.35; }
.doc-hero p { margin: 0; max-width: 56ch; font-size: 1.08rem; color: rgba(255, 255, 255, 0.78); }
.doc-stamp { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.84rem; font-weight: 700; }
.doc-stamp .i { width: 16px; height: 16px; color: #ffb689; }

.doc-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; margin-top: -60px; padding-bottom: 96px; position: relative; }
.doc-side { position: sticky; top: 92px; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.doc-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-card); }
.doc-nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 700; font-size: 0.93rem; color: var(--ink-2); transition: background 0.15s ease, color 0.15s ease; }
.doc-nav a .i { width: 18px; height: 18px; color: var(--ink-4); }
.doc-nav a:hover { background: var(--mist); color: var(--heading); }
.doc-nav a.on { background: var(--orange-soft); color: var(--heading); }
.doc-nav a.on .i { color: var(--orange); }
.doc-nav a.on::before { content: ''; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--orange); }
.doc-toc { display: flex; flex-direction: column; padding: 4px 8px; }
.doc-toc-h { font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 0 8px 8px; }
html[lang="ar"] .doc-toc-h { letter-spacing: 0; text-transform: none; font-size: 0.82rem; }
.doc-toc a { padding: 6px 8px; border-radius: 8px; font-size: 0.86rem; color: var(--ink-3); line-height: 1.4; }
.doc-toc a:hover { color: var(--heading); background: var(--hover-tint); }

.doc-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 860px; }
.doc-wrap.wide .doc-body { max-width: none; }
.doc-card { padding: 32px 36px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-card); }
.doc-card p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.8; }
.doc-card p:last-child { margin-bottom: 0; }
.doc-lead { font-size: 1.14rem; color: var(--ink) !important; }
.doc-sec { scroll-margin-top: 96px; }
.doc-sec h2, .doc-h { margin: 0 0 14px; font-size: 1.28rem; font-weight: 900; color: var(--heading); }
.doc-h { margin: 18px 4px 0; }
.doc-sec h3 { margin: 20px 0 10px; font-size: 1rem; font-weight: 800; color: var(--accent-ink); }
.doc-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc-list li { position: relative; padding-inline-start: 22px; color: var(--ink-2); line-height: 1.7; }
.doc-list li::before { content: ''; position: absolute; inset-inline-start: 4px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.doc-list b { color: var(--heading); font-weight: 800; }
.doc-steps { list-style: none; counter-reset: step; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.doc-steps li { counter-increment: step; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--mist); color: var(--ink); font-weight: 600; }
.doc-steps li::before { content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: #fff; font-weight: 900; font-size: 0.85rem; font-family: var(--font-board); }
.doc-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.doc-contact a { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); transition: border-color 0.15s ease; }
.doc-contact a:hover { border-color: var(--orange); }
.doc-contact .i { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--orange-soft); color: var(--orange); flex: none; }
.doc-contact span { font-weight: 800; color: var(--heading); overflow-wrap: anywhere; }
.doc-contact small { display: block; font-weight: 600; font-size: 0.78rem; color: var(--ink-3); }

/* about */
.about-welcome { margin-bottom: 14px; font-weight: 900; font-size: 1.02rem; color: var(--orange); }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.about-facts b { display: block; font-family: var(--font-board); font-size: 1.35rem; color: var(--heading); }
.about-facts span { font-size: 0.86rem; color: var(--ink-3); }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.person { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-card); }
.person-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; background: linear-gradient(145deg, var(--navy), var(--navy-950)); color: #fff; font-weight: 900; font-size: 1.1rem; letter-spacing: 0.02em; box-shadow: 0 0 0 4px var(--orange-soft); }
.person b { font-size: 1.02rem; color: var(--heading); }
.person p { margin: 0; flex: 1; font-size: 0.92rem; color: var(--ink-3); line-height: 1.6; }
.person a { margin-top: 8px; font-size: 0.86rem; font-weight: 800; color: var(--sky); }
.doc-cta { padding: 32px 36px; border-radius: 20px; color: #fff; background: radial-gradient(90% 140% at 100% 100%, rgba(242, 101, 34, 0.32), transparent 60%), linear-gradient(160deg, var(--navy-800), var(--navy-950)); }
.doc-cta p { margin: 0 0 20px; font-size: 1.08rem; line-height: 1.75; color: rgba(255, 255, 255, 0.88); max-width: 62ch; }
.doc-cta-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* terms */
.doc-callout { display: flex; gap: 18px; align-items: flex-start; }
.doc-callout > .i { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--mist); color: var(--accent-ink); }
.fees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fee-group { padding: 24px 26px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-card); }
.fee-group h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.05rem; font-weight: 900; color: var(--heading); }
.fee-group h2 .i { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--orange-soft); color: var(--orange); }
.fee-group ul { list-style: none; margin: 0; padding: 0; }
.fee-group li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.fee-group li:first-child { border-top: 0; }
.fee-group li span { color: var(--ink-2); font-size: 0.94rem; }
.fee-group li b { flex: none; max-width: 55%; padding: 6px 12px; border-radius: 10px; background: var(--mist); color: var(--heading); font-weight: 800; font-size: 0.88rem; text-align: center; }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-card); border: 1px solid transparent; transition: border-color 0.15s ease, transform 0.15s ease; }
a.contact-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.contact-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px; background: var(--fill); color: #fff; }
.contact-ico .i { width: 22px; height: 22px; }
.contact-card small { font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
html[lang="ar"] .contact-card small { letter-spacing: 0; text-transform: none; font-size: 0.84rem; }
.contact-card b { font-size: 1.02rem; color: var(--heading); line-height: 1.55; }
.contact-card em { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-style: normal; font-weight: 800; font-size: 0.88rem; color: var(--orange); }
.contact-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.contact-acts .btn-wa.small { margin-top: 0; }
.btn-line.small { height: 44px; padding: 0 16px; font-size: 0.92rem; border-radius: 12px; }
.contact-big { font-weight: 900; font-size: 1.05rem; color: var(--heading); overflow-wrap: anywhere; }
.contact-big:hover { color: var(--orange); }
.contact-note { font-size: 0.86rem; color: var(--ink-3); }
.licences { display: grid; gap: 8px; margin: 4px 0 0; width: 100%; }
.licences div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--mist); }
.licences dt { color: var(--ink-3); font-weight: 700; font-size: 0.88rem; }
.licences dd { margin: 0; font-family: var(--font-board); font-weight: 700; color: var(--heading); }
.contact-form h2 { margin: 0 0 6px; font-size: 1.28rem; font-weight: 900; color: var(--heading); }
.contact-form-note { font-size: 0.92rem; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.contact-fields label { display: flex; flex-direction: column; gap: 6px; }
.contact-fields label.wide { grid-column: 1 / -1; }
.contact-fields span { font-size: 0.84rem; font-weight: 800; color: var(--ink-2); }
.contact-fields input, .contact-fields textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper);
  font: inherit; color: var(--ink); resize: vertical; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-fields input { height: 48px; }
.contact-fields input:focus, .contact-fields textarea:focus { outline: none; border-color: var(--accent-line); box-shadow: var(--ring-wide); }
.contact-fields .bad { border-color: var(--bad); background: var(--bad-soft); }
.contact-error { margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-weight: 700; font-size: 0.9rem; }
.contact-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contact-send .btn-orange { min-inline-size: 150px; }
.contact-or { color: var(--ink-3); font-weight: 700; font-size: 0.88rem; }
/* The box no person sees: off the page rather than display:none, which some scripts skip. */
.contact-trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-done .i { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.contact-fields span em { font-style: normal; font-weight: 600; color: var(--ink-3); }
.contact-done:has(> .i) { display: flex; align-items: flex-start; gap: 10px; }
.contact-done { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--good-pale); color: var(--good-ink); font-weight: 700; font-size: 0.92rem; }
.contact-done a { text-decoration: underline; text-underline-offset: 3px; }

/* site map */
.map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.map-group h2 { margin: 0 0 12px; font-size: 1.05rem; font-weight: 900; color: var(--heading); }
.map-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.map-group a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink-2); font-weight: 700; transition: background 0.15s ease, color 0.15s ease; }
.map-group a .i { width: 18px; height: 18px; color: var(--orange); }
.map-group a:hover { background: var(--mist); color: var(--heading); }

/* the footer's company links */
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin-top: 44px; padding-top: 22px; padding-bottom: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.foot-links a { font-size: 0.92rem; color: rgba(255, 255, 255, 0.7); transition: color 0.15s ease; }
.foot-links a:hover { color: #fff; }

@media (max-width: 900px) {
  .doc-wrap { grid-template-columns: minmax(0, 1fr); margin-top: -44px; }
  .doc-side { position: static; }
  .doc-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .doc-nav::-webkit-scrollbar { display: none; }
  .doc-nav a { flex: none; }
  .doc-nav a.on::before { inset-block: auto 4px; inset-inline: 12px; width: auto; height: 3px; }
  .doc-toc { display: none; }
  .people, .fees, .contact-grid, .map-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .doc-hero { padding: 104px 0 84px; }
  .doc-card, .doc-cta { padding: 24px 20px; }
  .about-facts, .doc-contact, .contact-fields { grid-template-columns: minmax(0, 1fr); }
  .fee-group li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fee-group li b { max-width: none; }
  .foot-links { justify-content: flex-start; gap: 6px 20px; }
}

@media (max-width: 1320px) {
  .top .phone span { display: none; }
  .top .phone { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 1180px) {
  .top .phone { display: none; }
  .pass-body { grid-template-columns: minmax(0, 1fr) 0 250px; }
  .grid.flights.return, .grid.flights.oneway { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid.flights.return .pair:first-child, .grid.flights.oneway .pair:first-child { grid-column: 1 / -1; }
  .grid.hotels, .grid.packages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid.hotels .wide, .grid.packages .wide { grid-column: 1 / -1; }
  .grid.visas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service, .service.lead { grid-column: span 1; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(odd) { border-inline-start: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manage-card:nth-child(3) { border-inline-start: 0; }
  .manage-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .carrier-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .nav { display: none; }
  .only-small { display: inline-flex !important; }
}
@media (max-width: 900px) {
  .pass-body { grid-template-columns: minmax(0, 1fr); }
  .pass-tear { border-inline-start: 0; border-top: 2px dashed var(--line-2); margin: 0 18px; height: 0; }
  .pass-tear::before, .pass-tear::after { top: -12px; bottom: auto; inset-inline-start: auto; }
  .pass-tear::before { inset-inline-start: -30px; }
  .pass-tear::after { inset-inline-end: -30px; }
  .pass-stub { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .how { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .partners { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .places { grid-template-columns: repeat(3, minmax(240px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .place { scroll-snap-align: start; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .app { grid-template-columns: minmax(0, 1fr) auto; }
  .app-phones { display: none; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faq-head { position: static; }
}
@media (max-width: 719px) {
  .wrap { padding-inline: 16px; }
  .top-row { height: 64px; gap: 10px; }
  .brand img { height: 22px; }
  .hbtn { height: 40px; padding: 0 12px; }
  .hbtn.ghost span { display: none; }
  .hbtn.ghost { width: 40px; padding: 0; justify-content: center; }
  /* The language lives in the menu on a phone: four controls in a 390px bar ran the menu
     button off the edge in Arabic, whose sign-in label is the longest. */
  .top .lang { display: none; }
  /* Each choice as wide as its words and then a share of what is left: three equal thirds
     cut «وجهات متعددة» short on a phone, the longest of the three in Arabic. */
  .trip-row > .seg { display: flex; width: 100%; }
  .trip-row > .seg button { flex: 1 1 auto; }
  .seg button { white-space: nowrap; padding: 8px 6px; font-size: 0.84rem; }
  /* On a telephone: a lane of sky for the aircraft, the welcome in two short lines, and the
     search straight under it — From and To inside the first screen. */
  .hero { --rise: 210px; }
  .hero-copy { padding-top: 124px; padding-bottom: calc(var(--rise) + 18px); }
  .hero .eyebrow, .hero .lede { display: none; }
  .hero h1 { font-size: clamp(1.45rem, 6.5vw, 1.9rem); margin: 0; max-width: none; }
  html[lang="ar"] .hero h1 { font-size: clamp(1.3rem, 5.6vw, 1.6rem); }
  /* The sky above the welcome is the aircraft's own on a telephone: it crosses all of it. */
  .hero-flight { -webkit-mask-image: none; mask-image: none; }
  .hero-plane { width: 128px; --from-y: 24cqh; --to-x: -40cqw; --climb: 28cqw; --far: 0.72; animation-duration: 44s; animation-delay: -9s; }
  .search-slot { margin-top: -210px; }
  .pass-main { padding: 16px; }
  .pass-tabs { padding: 6px 8px 0; }
  .pass-tabs button { padding: 12px 12px 14px; font-size: 0.88rem; }
  .grid.flights.return, .grid.flights.oneway, .grid.hotels, .grid.packages, .grid.visas { grid-template-columns: minmax(0, 1fr); }
  .grid.flights.multi .leg-row { grid-template-columns: 24px minmax(0, 1fr) 30px; }
  .grid.flights.multi .leg-row > .cell { grid-column: 2; }
  .grid.flights.multi .who { max-width: none; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair.dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .swap { top: 50%; left: auto; inset-inline-end: 18px; transform: translateY(-50%) rotate(90deg); }
  .swap:hover { transform: translateY(-50%) rotate(270deg); }
  .cell { min-height: 70px; }
  /* Two to a row on a phone: eight services one under another was a scroll longer than
     the rest of the page, and the line under each is what the title already says. */
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { gap: 10px; padding: 14px 14px 12px; }
  .trust-head { flex-direction: column; gap: 8px; }
  .trust-head > .i { width: 36px; height: 36px; padding: 8px; }
  .trust-foot { padding-top: 10px; }
  /* Half a phone wide, a card fits two chips to a row only without their marks. */
  span.trust-chip .i { display: none; }
  .pays { display: grid; grid-template-columns: repeat(2, max-content); }
  /* On a telephone: two small tickets to a row, a mark on the stub and a name beside it. */
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .service { grid-template-columns: 48px minmax(0, 1fr); min-height: 68px; border-radius: 14px; }
  .service-stub { gap: 4px; }
  .service-icon .i { width: 20px; height: 20px; }
  .service-code { font-size: 11px; letter-spacing: 0.08em; }
  .service-body, [dir="rtl"] .service-body { padding: 10px 12px; }
  .service-body::before, .service-body::after { inset-inline-start: 41px; width: 14px; height: 14px; }
  .service-body::before { top: -7px; }
  .service-body::after { bottom: -7px; }
  .service b { font-size: 0.92rem; line-height: 1.3; }
  .service-line, .service > .service-go { display: none; }
  .service.lead { grid-template-columns: minmax(0, 1fr); min-height: 150px; }
  .service.lead .service-stub { order: 0; flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 14px 0; background: none; border: 0; }
  .service.lead .service-stub::before, .service.lead .service-stub::after, .service-bars { display: none; }
  .service.lead .service-icon .i { width: 26px; height: 26px; }
  .service.lead .service-code { font-size: 0.82rem; letter-spacing: 0.16em; opacity: 0.8; margin: 0; }
  .service.lead .service-body { padding: 8px 14px 14px; gap: 6px; }
  .service.lead b { font-size: 1.3rem; }
  .service.lead .service-go { height: 36px; padding: 0 12px; gap: 6px; font-size: 0.82rem; margin-top: 4px; }
  .band { padding: 64px 0; }
  /* On a telephone the three steps are stops down one line: the number at the side, the
     dashes running on to the next — not three blocks with a number sitting on each. */
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .how-steps li { padding: 8px 0 26px; padding-inline-start: 62px; }
  .how-steps li::before { top: 46px; bottom: 0; inset-inline-start: 21px; inset-inline-end: auto; border-top: 0; border-inline-start: 2px dashed var(--line-2); }
  .how-steps li:last-child { padding-bottom: 0; }
  .places { grid-template-columns: repeat(3, 82%); }
  .float-card { inset-inline-start: 12px; bottom: -18px; }
  .app { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 22px; }
  .app-words, .app-get { padding-bottom: 0; }
  .app-get { flex-wrap: wrap; padding-bottom: 28px; }
  /* The two stores one under the other, the same width: unequal and pushed to one edge they
     read as a ragged pair, and side by side their names broke in two on a small telephone. */
  .app .store { width: 100%; justify-content: center; }
  .app-qr { display: none; }
  .app .stores { flex-direction: column; flex-wrap: nowrap; gap: 10px; width: 100%; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sheet { padding: 28px 22px; border-radius: 22px; }
  .sheet.side { width: 100vw; border-radius: 0; padding: 26px 20px; }
  .sheet-acts, .menu-acts { grid-template-columns: minmax(0, 1fr); }
  .months { grid-template-columns: minmax(0, 1fr); }
  .manage, .carriers { padding-top: 64px; }
  .ground { padding: 26px 18px 24px; border-radius: 22px; }
  .manage-grid { grid-template-columns: minmax(0, 1fr); }
  .manage-card { padding: 16px 18px; }
  .manage-card + .manage-card { border-inline-start: 0; border-top: 1px solid var(--line); }
  /* Fourteen plates would fill a whole screen: a two-row strip that scrolls sideways. */
  .carrier-grid { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    grid-auto-columns: 38%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -16px; padding: 2px 16px 8px; scrollbar-width: none; }
  .carrier-grid::-webkit-scrollbar { display: none; }
  .carrier-grid li { scroll-snap-align: start; }
  .grid.flights.return .who, .grid.flights.oneway .who { grid-column: 1 / -1; }
  .faq { padding-block: 64px; }
  .recent { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .recent-chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* A calendar month, and the empty days before its first. */
.month { min-width: 0; }
.blank { visibility: hidden; }
.menu-lang { width: 100%; margin-top: 10px; }

/* ── a phone ─────────────────────────────────────────────────────────────────── */
/* The app card is the page's own `.wrap`, so below the wrap's full width it ran from one
   edge of the screen to the other with its corners cut off. */
@media (max-width: 1276px) {
  .wrap.app { width: auto; margin-inline: 28px; }
}
@media (max-width: 719px) {
  .wrap.app { margin-inline: 16px; }
  /* Four tabs in one row, an icon over each word. As a strip that scrolled sideways it cut
     "Umrah & packages" in half and hid Visas altogether, with nothing saying there was more. */
  .pass-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 4px 4px 0; overflow: visible; }
  .pass-tabs button { flex-direction: column; justify-content: flex-start; gap: 5px; padding: 11px 4px 12px;
    font-size: 0.78rem; line-height: 1.2; white-space: normal; text-align: center; border-radius: 10px 10px 0 0; }
  .pass-tabs button.on::after { inset-inline: 14%; }
  /* The strip bleeds to the screen's edge on purpose, and a snap aligns to the box's own
     edge unless it is told where the page begins — so the first plate sat at x = 0. */
  .carrier-grid { scroll-padding-inline: 16px; }
  /* On a phone the words start about 40% down the card; the shade started at 38% and the
     city's name sat on the brightest part of the photograph. */
  .place-shade { background: linear-gradient(180deg, rgba(6, 20, 39, 0.05) 12%, rgba(6, 20, 39, 0.55) 42%, rgba(6, 20, 39, 0.94) 100%); }
  .place-copy { text-shadow: 0 1px 14px rgba(6, 20, 39, 0.6); }
  .store small { font-size: 0.72rem; }
}
/* On a 360px phone the Arabic sign-in label is long enough to push the menu button off the
   screen; the icon beside it is the part that can go. */
@media (max-width: 380px) {
  .brand img { height: 20px; }
  .top .hbtn.solid .i { display: none; }
}
/* Something a thumb can press — on a phone, and on any screen that is touched rather than
   pointed at, which is how a tablet at 768px still had 23px footer links. */
@media (max-width: 719px), (pointer: coarse) {
  .brand { min-height: 44px; }
  .tick { min-height: 40px; }
  .foot-grid > div:not(.foot-brand) { gap: 0; }
  .foot-grid > div:not(.foot-brand) > a:not(.foot-phone),
  .foot-grid > div:not(.foot-brand) > button { min-height: 40px; display: inline-flex; align-items: center; }
  .foot-phone { min-height: 44px; padding-block: 4px; }
  .foot-links { gap: 0 20px; }
  .foot-links a, .foot-staff, .crumbs a, .person a, .contact-big { min-height: 40px; display: inline-flex; align-items: center; }
  .sheet-more { gap: 0; }
  .sheet-more a, .sheet-more button { min-height: 40px; }
  .recent-clear { min-height: 36px; }
  /* A link inside a sentence: taller to press, without moving the words around it. */
  .signin-foot a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}
/* A username is typed left to right, so the box is `dir="ltr"`; while it is empty it shows an
   Arabic hint, which belongs against the right edge like every other hint on the page. */
html[lang="ar"] input[dir="ltr"]:placeholder-shown { direction: rtl; }

/* ── day and night: the switch (27 Sep 2026) ────────────────────────────────
   Icon-only in the header, round like the menu button; on a phone the header has no room,
   so it is a line of the menu beside the language, as the language itself is. */
.hbtn.theme { width: 42px; padding: 0; justify-content: center; }
.menu-theme { width: 100%; margin-top: 10px; }
@media (max-width: 719px) { .top .theme { display: none; } }

/* By day the drawers carry the logo drawn for white paper; the white one waits for night. */
.signin-logo.on-dark { display: none; }

/* ── booking a flight (28 Sep 2026) ────────────────────────────────────────────
   The six sites Steven named, scanned the same day (research/booking-sites-2026-09/), each
   borrowed from where it is best: Almosafer's tabs that answer before they are pressed and
   its fare cards, Wego's prices inside the filters, the board-face times of our own pass.
   Paper cards on the page's own ground, navy for what is chosen, orange only for the one
   button that moves the trip on. Every colour a token, so the night needs nothing new. */
.shop-main { background: var(--page); min-height: 70vh; padding-bottom: 72px; }
.shop-cap { height: 76px; background: linear-gradient(165deg, var(--navy-950), var(--navy-900)); }
.muted { color: var(--ink-3); }
.small { font-size: 0.86rem; }
.center { text-align: center; }
.link { color: var(--accent-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.i.tiny { width: 14px; height: 14px; }
.i.up { transform: rotate(180deg); }
.amt { font-weight: 900; color: var(--heading); white-space: nowrap; }
.amt small { font-size: max(11px, 0.72em); font-weight: 800; color: var(--ink-3); }
.amt.small { font-size: 0.84rem; font-weight: 800; }
.amt.mid { font-size: 1.15rem; }
.amt.big { font-size: 1.6rem; letter-spacing: -0.01em; }
.amt bdi { font-family: var(--font-board); font-weight: 700; }

/* The trip in large type, on the dusk the header already sits on. */
.trip-band { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 104px 0 30px;
  /* The site's own dusk sky under a deep shade: the band is the same evening as the home page. */
  background: linear-gradient(180deg, rgba(6, 16, 36, 0.9) 0%, rgba(6, 16, 36, 0.74) 60%, rgba(6, 16, 36, 0.62) 100%),
              url('/static/home/sky-2400.webp') center 44% / cover no-repeat, var(--navy-900); }
[dir="rtl"] .trip-band { background: linear-gradient(180deg, rgba(6, 16, 36, 0.9) 0%, rgba(6, 16, 36, 0.74) 60%, rgba(6, 16, 36, 0.62) 100%),
              url('/static/home/sky-rtl-2400.webp') center 44% / cover no-repeat, var(--navy-900); }
/* The place itself behind the end of the band, fading into the evening (14 Oct 2026). */
.trip-photo { position: absolute; z-index: -1; inset-block: 0; inset-inline-end: 0; width: min(48%, 680px); background-position: center 40%; background-size: cover; opacity: 0.62;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%); mask-image: linear-gradient(to left, #000 30%, transparent 100%); }
[dir="rtl"] .trip-photo { -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 100%); mask-image: linear-gradient(to right, #000 30%, transparent 100%); }
/* Room under the band for the days to sit across its edge. */
.trip-band:has(+ .wrap .days-block) { padding-bottom: 66px; }
/* The ends, the facts, the button: the facts wrap inside their own column, so the button
   never drops to a line of its own. */
.trip-band-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; }
.trip-ends { display: flex; align-items: center; gap: 12px; }
.trip-end { display: flex; flex-direction: column; }
.trip-end b { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; line-height: 1.15; }
.trip-end span { align-self: flex-start; margin-top: 5px; padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); font-family: var(--font-board); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.86); }
.trip-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 92px; }
/* The way between the two ends: a dotted line with the plane (or the two arrows) on it. */
.trip-line { position: relative; display: grid; place-items: center; width: 100%; }
.trip-line::before { content: ''; position: absolute; inset-inline: 0; top: 50%; border-top: 2px dashed rgba(255, 255, 255, 0.4); }
.trip-line .i { position: relative; box-sizing: content-box; padding: 0 8px; }
.trip-mid .i { width: 26px; height: 26px; color: #ff8a4c; }
.trip-mid small { font-size: 0.78rem; opacity: 0.72; font-weight: 700; white-space: nowrap; }
/* A multi-city trip names every stop, so each is smaller and the row may wrap. */
.trip-ends.multi { flex-wrap: wrap; gap: 6px 12px; }
.trip-ends.multi .trip-end b { font-size: clamp(1.1rem, 2vw, 1.45rem); }
.trip-ends.multi .trip-mid { min-width: 0; }
.trip-ends.multi .trip-mid .i { width: 18px; height: 18px; }
.trip-ends.multi { grid-column: 1 / 3; }
.trip-ends.multi + .trip-facts { grid-column: 1 / 3; grid-row: 2; }
.trip-ends.multi ~ .trip-change { grid-column: 3; grid-row: 1 / 3; }
.trip-facts { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 700; font-size: 0.86rem; }
.trip-facts span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); }
.trip-facts em { font-style: normal; white-space: nowrap; margin-inline-start: 4px; padding-inline-start: 9px; border-inline-start: 1px solid rgba(255, 255, 255, 0.28); color: #ff9d62; font-weight: 900; }
.trip-facts .i { width: 17px; height: 17px; opacity: 0.7; }
.trip-change { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--orange); border: 1px solid transparent; font-weight: 900; color: #fff; box-shadow: 0 12px 26px -14px rgba(242, 101, 34, 0.9); }
.trip-change:hover { filter: brightness(1.07); }
.trip-change .i { width: 17px; height: 17px; }
.shop-edit { position: relative; margin-top: -18px; }
.shop-edit .search-slot { margin-top: 0; }
.shop-edit-x { display: flex; align-items: center; gap: 6px; margin: 10px auto 0; font-weight: 800; color: var(--ink-3); }
.shop-edit-x .i { width: 16px; height: 16px; }

.shop-wrap { padding-top: 22px; }
.shop-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
/* The filters move with the page and never scroll on their own (Steven, 14 Oct 2026): a
   column taller than the window travels up with the results until its own end is in view,
   and then stays there. `--side-top` is worked out from its height (`holdSide`). */
.shop-side { position: sticky; top: var(--side-top, 92px); align-self: start; border-radius: 20px; }
.shop-main-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ghost-card { background: linear-gradient(90deg, var(--paper) 0%, var(--mist) 50%, var(--paper) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 20px; min-height: 150px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* The days either side, each with its price (Almosafer's fare calendar): one white bar of
   days with a hairline between them, the chosen day a navy card with an orange mark under
   it, and a step either way at the two ends (14 Oct 2026, the design Steven sent). */
.days-bar { display: flex; align-items: center; gap: 8px; }
.days-arrow { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); color: var(--heading); transition: border-color 0.15s ease, background 0.15s ease; }
.days-arrow .i { width: 18px; height: 18px; }
.days-arrow:hover:not(:disabled) { border-color: var(--accent-line); background: var(--mist); }
.days-arrow:disabled { opacity: 0.35; cursor: default; }
.days-strip { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(var(--days, 7), minmax(0, 1fr)); gap: 0; padding: 4px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--line); }
.day-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 4px 14px; border-radius: 12px; min-height: 68px; transition: background 0.15s ease; position: relative; }
.day-cell + .day-cell::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 14px; border-inline-start: 1px solid var(--line); }
.day-cell.on::before, .day-cell.on + .day-cell::before { display: none; }
.day-cell:hover:not(:disabled) { background: var(--mist); }
.day-cell small { font-size: 0.78rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.day-cell b .amt { font-size: 0.95rem; font-weight: 900; color: var(--heading); }
.day-cell.on { background: var(--dusk-blue); box-shadow: var(--dusk-shadow); }
.day-cell.on::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 26px; height: 3px; margin-left: -13px; border-radius: 3px; background: var(--orange); }
.day-cell.on small, .day-cell.on .amt, .day-cell.on .amt small { color: #fff; }
.day-cell.on small { color: rgba(255, 255, 255, 0.78); }
.day-cell.low:not(.on) .amt { color: var(--good); }
.day-cell em { font-style: normal; font-size: max(11px, 0.68rem); font-weight: 900; color: var(--good); text-transform: uppercase; letter-spacing: 0.04em; }
.day-cell.on em { color: #c4f5dc; }
.day-cell:disabled:not(.on) { opacity: 0.5; cursor: default; }
.day-cell.ghost { background: var(--mist); animation: shimmer 1.4s linear infinite; }

.describe { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 16px;
  background: var(--paper); border: 1.5px solid var(--line-2); box-shadow: var(--shadow-card); }
[dir="rtl"] .describe { padding: 8px 16px 8px 8px; }
.describe > .i { color: var(--orange); }
.describe input { border: 0; outline: 0; background: transparent; min-height: 40px; font-size: 0.95rem; color: var(--ink); min-width: 0; }
.describe input::placeholder { color: var(--ink-4); }
.describe:focus-within { border-color: var(--accent-line); box-shadow: var(--ring-wide); }
.describe-go { height: 40px; padding: 0 16px; border-radius: 11px; background: var(--fill); color: #fff; font-weight: 800; }
.describe-said { grid-column: 1 / -1; margin: 2px 4px 2px; font-size: 0.85rem; color: var(--good-ink); }
.describe-said.bad { color: var(--bad); }

.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
/* ── Going and return chosen separately (14 Oct 2026) ─────────────────────────────────── */
.mix-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; margin-bottom: 16px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-card); }
.mix-switch button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: 14px; text-align: start; color: var(--ink-2); }
.mix-switch button b { font-size: 0.95rem; font-weight: 900; color: var(--heading); }
.mix-switch button small { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.mix-switch button:hover:not(.on) { background: var(--mist); }
.mix-switch button.on { background: var(--dusk-blue); box-shadow: var(--dusk-shadow); }
.mix-switch button.on b, .mix-switch button.on small { color: #fff; }
.mix-switch button.on small { opacity: 0.8; }
.mix { display: flex; flex-direction: column; gap: 14px; padding-bottom: 96px; }
.mix-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--mist); color: var(--ink-2); font-weight: 600; font-size: 0.9rem; }
.mix-note .i { width: 18px; height: 18px; flex: none; color: var(--accent-ink); }
.mx-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mx-col { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-card); min-width: 0; }
.mx-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); font-weight: 800; color: var(--heading); }
.mx-head .j-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--dusk-blue); color: #fff; font-size: 0.78rem; font-weight: 900; }
.mx-head .j-tag .i { width: 13px; height: 13px; }
.mx-head small { margin-inline-start: auto; color: var(--ink-3); font-weight: 700; }
.mx-head .i.tiny { width: 14px; height: 14px; vertical-align: -2px; }
.mx-cabins { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-cabins button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 0.82rem; font-weight: 800; color: var(--ink-2); }
.mx-cabins button:hover:not(.on) { border-color: var(--accent-line); }
.mx-cabins button.on { background: var(--fill); border-color: var(--fill); color: #fff; }
.mx-list { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: auto; padding: 2px; scrollbar-width: thin; }
.mx-row { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); text-align: start; transition: border-color 0.15s ease, background 0.15s ease; }
.mx-row:hover { border-color: var(--accent-line); }
.mx-row.on { border-color: var(--fill); background: var(--mist); box-shadow: inset 0 0 0 1px var(--fill); }
.mx-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--paper); }
.mx-row.on .mx-tick { background: var(--fill); border-color: var(--fill); color: #fff; }
.mx-tick .i { width: 13px; height: 13px; }
.mx-row .al-plate { width: 60px; height: 28px; padding: 2px 5px; border-radius: 8px; }
.mx-times { display: flex; flex-direction: column; min-width: 0; }
.mx-times b { font-family: var(--font-board); font-size: 1.05rem; color: var(--heading); white-space: nowrap; }
.mx-times b sup { font-size: max(11px, 0.6rem); color: var(--orange-ink); }
.mx-times small { font-size: 0.76rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-way { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.76rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.mx-way .direct { color: var(--good); }
.mx-price .amt { font-size: 0.95rem; color: var(--heading); white-space: nowrap; }
.mx-ghost { display: block; height: 58px; border-radius: 14px; background: linear-gradient(90deg, var(--mist) 0%, var(--paper) 50%, var(--mist) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.mx-none { margin: 4px; color: var(--ink-3); font-weight: 700; font-size: 0.86rem; }
.mx-bar { position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 22px 44px -22px rgba(11, 31, 58, 0.55); }
.mx-pick { display: flex; flex-direction: column; min-width: 0; }
.mx-pick small { font-size: 0.74rem; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
html[lang="ar"] .mx-pick small { text-transform: none; letter-spacing: 0; }
.mx-pick b { font-weight: 900; color: var(--heading); white-space: nowrap; }
.mx-pick.empty b { color: var(--ink-3); font-weight: 800; }
.mx-plus { font-weight: 900; color: var(--ink-3); }
.mx-sum { display: flex; flex-direction: column; align-items: flex-end; margin-inline-start: auto; }
.mx-sum small { font-size: 0.78rem; font-weight: 700; color: var(--ink-3); }
.mx-bar .btn-orange.off { opacity: 0.45; pointer-events: none; }
.pair-note { margin-bottom: 12px; }
.times-moved { margin: 0 0 12px; line-height: 1.55; }
.review-flights + .times-moved, .done-body > .times-moved { margin-top: 12px; }
.details-includes { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.details-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 0.92rem; font-weight: 900; color: var(--heading); }
.details-h .i { width: 17px; height: 17px; color: var(--accent-ink); }
.details-h span { color: var(--ink-3); font-weight: 800; }
.review-part { margin: 12px 0 6px; font-size: 0.86rem; font-weight: 800; color: var(--ink-3); }
.review-part b { color: var(--heading); }
@media (max-width: 900px) {
  .mx-cols { grid-template-columns: minmax(0, 1fr); }
  .mx-list { max-height: none; }
}
@media (max-width: 719px) {
  .mix-switch button { padding: 10px 12px; }
  .mx-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .mx-row .al-plate, .mx-way { display: none; }
  .mx-bar { bottom: 8px; padding: 10px 12px; }
  .mx-sum { margin-inline-start: 0; align-items: flex-start; }
  .mx-bar .btn-orange { width: 100%; justify-content: center; }
}
/* A sideways row's arrows, for a mouse (see `sideways` in home.js). */
.hs { position: relative; min-width: 0; }
.hs-go { display: none; position: absolute; z-index: 3; top: 50%; place-items: center; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--line-2); box-shadow: 0 6px 16px -8px rgba(11, 31, 58, 0.45); color: var(--heading); }
.hs-go .i { width: 17px; height: 17px; }
.hs-go:hover { border-color: var(--accent-line); }
.hs-go.prev { inset-inline-start: -8px; }
.hs-go.next { inset-inline-end: -8px; }
@media (hover: hover) and (pointer: fine) {
  .hs.can-back > .hs-go.prev, .hs.can-on > .hs-go.next { display: grid; }
}
.chip-row::-webkit-scrollbar { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  background: var(--paper); border: 1.5px solid var(--line-2); font-weight: 800; font-size: 0.88rem; color: var(--ink-2); flex: none; }
.fchip:hover { border-color: var(--accent-line); }
.fchip.on { background: var(--fill); border-color: var(--fill); color: #fff; }
.fchip .i { width: 16px; height: 16px; }
.fchip i { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 0.74rem; }
.fchip.clear { border-style: dashed; }
.fchip .al-plate { width: 40px; height: 20px; border-radius: 5px; padding: 1px 3px; }
.filters-open { display: none; }

.sort-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 4px; padding: 5px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-card); }
.sort-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 14px; border-radius: 13px; text-align: start; transition: background 0.15s ease; }
.sort-tab:hover { background: var(--mist); }
.sort-tab b { font-size: 0.95rem; font-weight: 900; color: var(--heading); }
.sort-tab span { font-size: 0.82rem; color: var(--ink-3); font-weight: 700; }
/* The duration on its own line: in Arabic it is said in words, and beside the price it
   wrapped a narrow tab into three broken lines. */
.sort-tab small { font-size: 0.76rem; color: var(--ink-3); font-weight: 600; }
.sort-tab.on { background: var(--orange-soft); box-shadow: inset 0 -3px 0 var(--orange); }
/* Whose flight a tab is: the airline's mark in the tab's far corner, beside its name — the
   price and the duration under it keep the tab's whole width (in Arabic the duration is said
   in words, and a narrowed tab broke it over two lines). */
.sort-tab.named { position: relative; }
.sort-tab.named b { padding-inline-end: 56px; }
.sort-air { position: absolute; inset-inline-end: 12px; top: 10px; font-style: normal; }
.sort-air .al-plate { width: 62px; height: 30px; border-radius: 8px; }
.fchip-from .amt { font-size: 0.8rem; font-weight: 800; color: var(--ink-3); }
.fchip.on .fchip-from .amt, .fchip.on .fchip-from .amt small { color: #fff; }
.sort-more { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 12px; font-size: 0.74rem; font-weight: 800; color: var(--ink-3); }
.sort-more select { border: 0; background: transparent; font-weight: 800; color: var(--heading); font-size: 0.9rem; padding: 2px 0; }

.progress { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); }
/* The search as a flight: a dashed route, the trail filling behind a plane, a pin at the end. */
.progress.fly { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-card); }
.fly-said { font-size: 0.88rem; font-weight: 700; color: var(--ink-2); }
/* Where there is the width, the sentence and its route share one line: the fares under it
   are what somebody is waiting for. */
@media (min-width: 720px) {
  .progress.fly { flex-direction: row; align-items: center; gap: 16px; padding: 8px 16px; }
  .progress.fly .fly-said { flex: none; }
  .progress.fly .fly-track { flex: 1 1 auto; }
}
.fly-track { position: relative; display: block; height: 22px; margin-inline: 4px 18px; }
.fly-track::before { content: ''; position: absolute; inset-inline: 0; top: 50%; border-top: 2px dashed var(--line-2); }
.fly-trail { position: absolute; inset-inline-start: 0; top: calc(50% - 2px); height: 4px; width: var(--fly, 0%); border-radius: 4px; background: linear-gradient(90deg, rgba(242, 101, 34, 0.25), var(--orange)); }
[dir="rtl"] .fly-trail { background: linear-gradient(270deg, rgba(242, 101, 34, 0.25), var(--orange)); }
.fly-plane { position: absolute; top: 50%; inset-inline-start: var(--fly, 0%); width: 26px; height: 26px; margin-top: -13px; margin-inline-start: -13px; color: var(--orange); animation: fly-bob 1.6s ease-in-out infinite; }
.fly-plane svg { width: 100%; height: 100%; display: block; }
[dir="rtl"] .fly-plane svg { transform: scaleX(-1); }
.fly-end { position: absolute; top: 50%; inset-inline-end: -18px; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-4); }
.fly-end .i { width: 18px; height: 18px; }
/* The extras step while the airline answers: the results page's plane, flying on its own. */
.shelf-wait { display: flex; flex-direction: column; gap: 18px; }
.shelf-wait-head { display: flex; align-items: flex-start; gap: 12px; }
.shelf-wait-head > .i { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--mist); color: var(--accent-ink); }
.shelf-wait-head b { display: block; color: var(--heading); font-weight: 900; }
.shelf-wait-head small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 0.84rem; }
.shelf-fly { margin-inline: 4px 22px; }
.shelf-fly .fly-trail { animation: shelf-trail 2.6s ease-in-out infinite; }
.shelf-fly .fly-plane { animation: shelf-plane 2.6s ease-in-out infinite; }
@keyframes shelf-trail { from { width: 2%; } to { width: 94%; } }
@keyframes shelf-plane { from { inset-inline-start: 2%; } to { inset-inline-start: 94%; } }
.shelf-ghost { display: grid; gap: 8px; justify-content: center; padding: 18px 16px; border-radius: 16px; background: var(--mist); }
.shelf-ghost span { display: flex; gap: 6px; }
.shelf-ghost i { width: 30px; height: 26px; border-radius: 7px; background: var(--paper); border: 1px solid var(--line); animation: shelf-glow 1.6s ease-in-out infinite; }
.shelf-ghost em { width: 22px; }
@keyframes shelf-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shelf-fly .fly-trail, .shelf-fly .fly-plane, .shelf-ghost i { animation: none; } .shelf-fly .fly-trail { width: 50%; } .shelf-fly .fly-plane { inset-inline-start: 50%; } }
@keyframes fly-bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .fly-plane { animation: none; } }
.progress-bar { position: relative; flex: 0 0 120px; height: 5px; border-radius: 5px; background: var(--mist); overflow: hidden; }
.progress-bar i { position: absolute; inset-block: 0; width: 40%; border-radius: 5px; background: var(--orange); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }

/* Filters, each carrying the cheapest fare inside it (Wego). */
.filters { display: flex; flex-direction: column; background: var(--paper); border-radius: 20px; box-shadow: var(--shadow-card); padding: 6px 18px 18px; }
.fl-head { display: flex; align-items: center; gap: 10px; padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
.fl-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 1.08rem; font-weight: 900; color: var(--heading); }
.fl-head b .i { width: 19px; height: 19px; color: var(--orange); }
.fl-count { padding: 3px 10px; border-radius: 999px; background: var(--mist); font-size: 0.78rem; color: var(--ink-2); font-weight: 800; white-space: nowrap; }
.fl-count.on { background: var(--orange-soft); color: var(--orange-ink); }
.fl-head button { margin-inline-start: auto; font-weight: 800; color: var(--orange-ink); font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; }
.fl-group { padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.fl-group:last-of-type { border-bottom: 0; }
.fl-group h4 { margin: 0 0 10px; font-size: 0.93rem; font-weight: 900; color: var(--heading); }
/* A group folds under its own heading: icon, title, and the chevron that says which way. */
.fl-fold { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; text-align: start; font: inherit; color: inherit; }
.fl-fold > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.fl-fold > .i { width: 17px; height: 17px; color: var(--ink-3); transition: transform 0.15s ease; }
.fl-glyph { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--mist); flex: none; }
.fl-group.folded { padding-bottom: 10px; }
.fl-group.folded h4 { margin-bottom: 0; }
.fl-group.folded > :not(h4) { display: none; }
.fl-glyph .i { width: 16px; height: 16px; flex: none; color: var(--accent-ink); }
/* Stops: one choice of three, each with what it starts from. */
.fl-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fl-seg { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 58px; padding: 8px 4px; border-radius: 12px; border: 1.5px solid var(--line); text-align: center; color: var(--ink-2); }
.fl-seg b { font-size: 0.84rem; font-weight: 800; line-height: 1.25; }
.fl-seg .amt { font-size: 0.74rem; color: var(--ink-3); }
.fl-seg:hover { border-color: var(--accent-line); }
.fl-seg.on { background: var(--fill); border-color: var(--fill); color: #fff; }
.fl-seg.on .amt, .fl-seg.on .amt small { color: #fff; }
.fl-more { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 6px; padding: 0 4px; font-weight: 800; font-size: 0.86rem; color: var(--accent-ink); }
.fl-more .i { width: 15px; height: 15px; }
.fl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; border-radius: 12px; padding: 4px 8px; margin-inline: -8px; }
.fl-row.on { background: var(--mist); }
.fl-row.on .fl-label { color: var(--heading); }
.fl-row.on .fl-price .amt { color: var(--heading); }
.fl-row:hover { background: var(--hover-tint); }
.fl-row input { position: absolute; opacity: 0; pointer-events: none; }
.fl-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); display: grid; place-items: center; background: var(--paper); flex: none; }
.fl-row input:checked + .fl-box, .agree input:checked + .fl-box { background: var(--fill); border-color: var(--fill); }
.fl-row input:checked + .fl-box::after, .agree input:checked + .fl-box::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.fl-row input:focus-visible + .fl-box { box-shadow: var(--ring); }
.fl-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--ink-2); min-width: 0; }
.fl-label .al-plate { width: 56px; height: 26px; flex: none; padding: 2px 4px; }
/* An airline's Arabic name is three words; it takes two lines at most, never one a word. */
.fl-text { min-width: 0; line-height: 1.35; overflow-wrap: normal; }
.fl-price .amt { color: var(--ink-3); font-size: 0.8rem; white-space: nowrap; }
/* The time-of-day filter. `.tband`, not `.band`: that is every section of the home page, and
   sharing the name put this button's 8px padding and border on all of them (29 Sep 2026). */
.tbands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tband { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--line); text-align: start; font-size: 0.8rem; font-weight: 800; color: var(--ink-2); }
.tband .i { width: 16px; height: 16px; color: var(--ink-4); }
.tband:hover { border-color: var(--accent-line); }
.tband.on { background: var(--fill); border-color: var(--fill); color: #fff; }
.tband.on .i, .tband.on .amt, .tband.on .amt small { color: #fff; }
.price-range input { width: 100%; accent-color: var(--orange); }
.price-ends { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--ink-3); }
.filters-done { display: none; margin-top: 12px; }

/* A carrier's mark on its own white plate, as a ticket prints it. */
/* An airline's mark is a 115 × 50 wordmark: in a 52 × 36 plate it shrank to 18 pixels high
   and *Nile Air* or *Saudia* could not be read (14 Oct 2026). The plate has the mark's own
   shape now, so the name a traveller looks for is the size of the words beside it. */
.al-plate { display: inline-grid; place-items: center; width: 78px; height: 38px; border-radius: 9px; background: #fff; border: 1px solid var(--line); padding: 3px 6px; flex: none; }
.al-plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.al-plate.mono { font-family: var(--font-board); font-weight: 700; font-size: 0.78rem; color: var(--accent-ink); background: var(--mist); }

.results { display: flex; flex-direction: column; gap: 12px; }
.r-card { background: var(--paper); border-radius: 20px; box-shadow: var(--shadow-card); border: 1.5px solid transparent; transition: border-color 0.15s ease; overflow: hidden; }
.r-card:hover { border-color: var(--line-2); }
.r-card.open { border-color: var(--accent-line); }
.r-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
/* On a wide card the marks share the first journey's top line, at its end. */
@media (min-width: 720px) {
  .r-main { position: relative; }
  .r-top { position: absolute; top: 14px; inset-inline-end: 20px; z-index: 1; }
  .r-journeys > .j-line:first-child .j-head { min-height: 36px; padding-inline-end: 220px; }
}
/* The airline of each journey: its own mark, its name, its flight numbers and, where it is
   another airline that flies it, who does. */
.j-air { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; min-width: 0; }
.j-marks { display: flex; gap: 6px; flex: none; }
.j-marks .al-plate { width: 64px; height: 30px; padding: 2px 5px; border-radius: 8px; }
.j-air-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.j-air-words b { font-size: 0.88rem; font-weight: 900; color: var(--heading); }
.j-air-words small { font-size: 0.76rem; font-weight: 700; color: var(--ink-3); }
.details-note.plating b { color: var(--heading); }
.r-airline { display: flex; align-items: center; gap: 10px; min-width: 0; }
.r-airline b { display: block; font-weight: 900; color: var(--heading); font-size: 0.95rem; }
.r-airline small { font-family: var(--font-board); font-size: 0.76rem; color: var(--ink-3); }
.r-badge { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 900; background: var(--good-wash); color: var(--good-ink); }
.r-badge.fastest { background: var(--mist); color: var(--accent-ink); }
.r-badge.best { background: var(--orange-soft); color: var(--orange-ink); }
/* A result is a ticket: the flights on its face, the price on a stub that tears off. */
.r-body { display: grid; grid-template-columns: minmax(0, 1fr) 236px; align-items: stretch; }
.r-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 20px 0; }
.r-journeys { display: flex; flex-direction: column; gap: 10px; }
.review-flights { gap: 16px; margin-bottom: 16px; }
.j-head { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.j-head b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--dusk-blue); box-shadow: 0 6px 14px -9px rgba(27, 61, 119, 0.8); color: #fff; font-weight: 900; font-size: 0.74rem; letter-spacing: 0.02em; }
/* Going and Return wear the same navy pill (14 Oct 2026, the design Steven sent); which way
   a journey goes is said by its word and by the little plane, which turns round to come home. */
.j-head .j-cabin { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 4px; padding: 3px 10px; border-radius: 999px; background: var(--mist); color: var(--heading); font-style: normal; font-weight: 800; font-size: 0.74rem; }
.j-head .j-cabin .i { width: 13px; height: 13px; color: var(--ink-3); }
.j-tag .i { width: 13px; height: 13px; transform: rotate(45deg); }
.alt .j-tag .i { transform: scaleX(-1) rotate(45deg); }
[dir="rtl"] .j-tag .i { transform: scaleX(-1) rotate(45deg); }
[dir="rtl"] .alt .j-tag .i { transform: rotate(45deg); }
.r-journeys .j-line + .j-line { padding-top: 10px; border-top: 1.5px dashed var(--line-2); }
.j-row { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; gap: 14px; }
.j-end { display: flex; flex-direction: column; }
.j-end:last-child { text-align: end; }
.j-end b { font-family: var(--font-board); font-weight: 700; font-size: 1.5rem; color: var(--heading); line-height: 1.1; letter-spacing: -0.01em; }
.j-end b sup { font-size: max(11px, 0.62rem); color: var(--orange-ink); margin-inline-start: 2px; }
.j-where { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 3px; max-width: 11.5em; font-size: 0.8rem; color: var(--ink-3); font-weight: 700; }
.j-end:last-child .j-where { align-self: flex-end; }
.j-where i { font-style: normal; font-family: var(--font-board); font-weight: 700; color: var(--ink-2); }
.j-where em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-via { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.j-via .i { width: 14px; height: 14px; flex: none; color: var(--accent-ink); }
.j-via em { font-style: normal; color: var(--orange-ink); }
.j-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.j-mid small { font-size: 0.78rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.j-mid small.direct { color: var(--good); }
.j-mid small.stops { color: var(--ink-2); }
.j-track { position: relative; display: flex; justify-content: center; gap: 22%; width: 100%; height: 2px; background: var(--line-2); border-radius: 2px; }
.j-track::before, .j-track::after { content: ''; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2); }
.j-track::before { inset-inline-start: -2px; }
.j-track::after { inset-inline-end: -2px; background: var(--line-2); }
.j-track i { position: relative; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); box-shadow: 0 0 0 2px var(--paper); }
.j-plane { position: absolute; top: -9px; inset-inline-end: 14px; display: grid; place-items: center; width: 20px; height: 20px; background: var(--paper); color: var(--accent-ink); }
.j-plane .i { width: 15px; height: 15px; transform: rotate(45deg); }
[dir="rtl"] .j-plane .i { transform: scaleX(-1) rotate(45deg); }
/* **The price side** (14 Oct 2026, the design Steven sent): an evening sky torn off the
   ticket — the deep navy the header band is made of and the clouds of the home page's own
   dusk along its foot. No aircraft in the corner: Steven, 14 Oct, *"the drawing looks like
   jazeera logo"*. The figure in white, who it is
   for, the bag on a glass pill, and one orange button: the only warm colour on the card,
   on the one thing a traveller has to do. The notches still cut the tear at both ends. */
.r-price { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 26px 20px 18px; text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(36, 76, 142, 0.95) 0%, rgba(38, 80, 148, 0.8) 50%, rgba(44, 88, 156, 0.18) 100%),
              url('/static/home/sky-1200.webp') center 100% / 260% auto no-repeat, #24508f; }
.r-price::before, .r-price::after { content: ''; position: absolute; z-index: 2; inset-inline-start: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--page); }
.r-price::before { top: -10px; }
.r-price::after { bottom: -10px; }
.r-price .amt { color: #fff; }
.r-price .amt.big { font-size: 2rem; line-height: 1.1; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); }
.r-price .amt small { color: rgba(255, 255, 255, 0.78); opacity: 1; }
.r-per { font-size: 0.8rem; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.r-total { margin-top: 2px; font-size: 0.8rem; font-weight: 800; color: rgba(255, 255, 255, 0.86); }
.r-total .amt, .r-total bdi { color: inherit; }
.r-bag { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 13px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; color: #fff;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.r-bag .i { width: 15px; height: 15px; color: rgba(255, 255, 255, 0.8); }
.r-bag.yes .i { color: #8ff0bf; }
.r-choose { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-top: 14px; padding: 0 16px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ff7d36 0%, #f25a1e 100%); color: #fff; font: inherit; font-size: 0.98rem; font-weight: 900; cursor: pointer;
  box-shadow: 0 14px 26px -14px rgba(242, 90, 30, 0.95); transition: transform 0.15s ease, filter 0.15s ease; }
.r-choose:hover { transform: translateY(-1px); filter: brightness(1.06); }
.r-choose .i { width: 17px; height: 17px; }
.r-choose.on { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.42); box-shadow: none; }
.r-note { align-self: center; margin-top: 8px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); font-weight: 700; text-align: center; }
/* The card's own marks, top right: how it ranks, and the two things done *to* it — keep it,
   send it. Round, quiet, the same size as each other. */
.r-marks { display: flex; align-items: center; gap: 8px; flex: none; }
.r-icons { display: flex; gap: 6px; }
.r-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink-3); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.r-icon .i { width: 17px; height: 17px; }
.r-icon:hover { color: var(--heading); border-color: var(--line-2); }
.r-save.on { color: #e5484d; border-color: rgba(229, 72, 77, 0.35); background: rgba(229, 72, 77, 0.08); }
.r-save.on .i { fill: currentColor; }
/* The flights kept with the heart, one press from their fares. */
.saved-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-card); }
.saved-row > .i { width: 17px; height: 17px; color: #e5484d; fill: currentColor; }
.saved-row > b { font-weight: 900; color: var(--heading); margin-inline-end: 4px; }
.saved-chip { display: inline-flex; align-items: center; border-radius: 999px; border: 1.5px solid var(--line); background: var(--page); }
.saved-chip > button:first-child { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 6px; font-weight: 800; color: var(--heading); }
.saved-chip .al-plate { width: 48px; height: 24px; padding: 1px 3px; border-radius: 6px; }
.saved-x { display: grid; place-items: center; width: 30px; height: 30px; margin-inline-end: 4px; border-radius: 50%; color: var(--ink-3); }
.saved-x:hover { background: var(--mist); color: var(--heading); }
.saved-x .i { width: 14px; height: 14px; }
.r-foot { display: flex; align-items: center; gap: 16px; margin-top: auto; padding: 10px 0 12px; border-top: 1px solid var(--line); }
.r-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.86rem; color: var(--accent-ink); }
.r-link .i { width: 16px; height: 16px; }

.more-auto { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; font-weight: 800; font-size: 0.88rem; color: var(--ink-3); }
.more-dots { display: inline-flex; gap: 4px; }
.more-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: more-dot 1s ease-in-out infinite; }
.more-dots i:nth-child(2) { animation-delay: 0.15s; }
.more-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes more-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .more-dots i { animation: none; opacity: 0.6; } }
.more { align-self: center; height: 48px; padding: 0 28px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--paper); font-weight: 900; color: var(--heading); }
.more:hover { border-color: var(--accent-line); }
.results-foot { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.84rem; color: var(--ink-3); }
.results-foot .i { width: 16px; height: 16px; }

/* Fare families side by side, ✓ and ✗ and the words (Almosafer's cards). */
.fares { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 16px 18px 18px; background: var(--mist); border-top: 1px solid var(--line); }
.fare { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--line); }
.fare:hover { border-color: var(--accent-line); }
.fare.off { opacity: 0.6; }
.fare-head { display: flex; flex-direction: column; gap: 2px; }
.fare-head b { font-weight: 900; color: var(--heading); text-transform: capitalize; }
.fare-more { font-size: 0.76rem; font-weight: 700; color: var(--ink-3); }
/* Four fares stand two by two, never three and one alone. */
.fares:has(> .fare:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fare ul, .facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fare li, .facts li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--ink-2); font-weight: 600; }
.fare li .i, .facts li .i { width: 16px; height: 16px; margin-top: 2px; }
.i.ok { color: var(--good); }
.i.no { color: var(--bad); }
.i.maybe { color: var(--ink-4); }
.fare .btn-orange { height: 42px; }
/* The airline's own fare types on the booking page: one card each, the chosen one marked. */
.fam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; padding: 4px 0 2px; }
.fam { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--line); text-align: start; cursor: pointer; color: var(--ink); font: inherit; }
.fam:hover:not(:disabled) { border-color: var(--accent-line); }
.fam:disabled { cursor: default; }
.fam.fam-on { border-color: var(--orange); background: var(--orange-soft); opacity: 1; }
.fam.busy { opacity: 0.7; }
.fam-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fam-head b { font-weight: 900; color: var(--heading); text-transform: capitalize; font-size: 1.02rem; }
.fam-mine { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 0.74rem; font-weight: 800; color: var(--orange-ink); }
.fam-mine .i { width: 14px; height: 14px; }
.fam-more { color: var(--ink-2); font-weight: 700; min-height: 1.1em; }
.fam ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.fam li { font-size: 0.83rem; color: var(--ink-2); font-weight: 600; line-height: 1.35; }
.fam-pick { display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 12px; border: 1.5px solid var(--accent-line); color: var(--accent-ink); font-weight: 800; font-size: 0.9rem; }
.fam:hover:not(:disabled) .fam-pick { background: var(--orange); border-color: var(--orange); color: #fff; }
.fam-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 0.82rem; color: var(--ink-2); }
.fam-note .i { width: 15px; height: 15px; margin-top: 2px; flex: none; }
.fam-note.bad { color: var(--orange-ink); font-weight: 700; }
.facts.own-words li { display: block; }
.fare-later { display: flex; align-items: flex-start; gap: 6px; margin: 0; flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.fare-later .i { width: 15px; height: 15px; margin-top: 2px; flex: none; }
.fare-promo { margin: 0; font-size: 0.8rem; color: var(--orange-ink); font-weight: 800; }
.fare-off { margin: 0; font-size: 0.8rem; color: var(--ink-3); }
.facts { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.facts.compact { margin-top: 12px; }
/* The fare's bags, the way out beside the way back: a panel each, and in it a row for each
   kind of traveller whose bags differ. */
.bag-dirs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 12px 0 14px; }
.card-head + .bag-dirs { margin-top: 0; }
.bag-dirs + .facts.compact { margin-top: 0; }
.bag-dir { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--mist); }
.bag-dir-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bag-dir-head b { font-size: 0.9rem; font-weight: 900; color: var(--heading); }
.bag-dir-head span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-3); font-weight: 700; }
.bag-dir-head span .i { width: 13px; height: 13px; }
.bag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bag-row + .bag-row { padding-top: 10px; border-top: 1px dashed var(--line-2); }
.bag-who { flex: 1 0 100%; font-size: 0.78rem; font-weight: 800; color: var(--ink-3); }
.bag-it { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.bag-it .i { flex: none; width: 15px; height: 15px; color: var(--ink-3); }
.bag-it b { font-weight: 900; color: var(--good-ink); }
.bag-it.no b { color: var(--bad); }
.bag-it.maybe b { color: var(--ink-3); }

/* The flight, stop by stop, each time on its own airport's clock. */
.details { padding: 8px 18px 18px; border-top: 1px solid var(--line); background: var(--mist); }
/* A journey is a block of its own: a band in its own blue — which way, between where, the
   day and how long — and its flights inside. */
.j-detail { margin-top: 14px; border-radius: 18px; overflow: hidden; background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--line); }
.j-detail h5 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 10px 16px; background: var(--fill); font-size: 0.86rem; font-weight: 700; color: rgba(255, 255, 255, 0.86); }
.j-detail h5 b { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 900; font-size: 0.78rem; }
.j-detail h5 strong { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 900; font-size: 0.98rem; }
.j-detail h5 strong .i { opacity: 0.7; }
.j-detail h5 em { font-style: normal; margin-inline-start: auto; font-weight: 800; }
/* The cabin of this direction, on a fare that flies two: a quiet outlined tag in the band,
   so *Business* going and *Economy* back are each read where the flight is. */
.j-detail h5 .j-cabin { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; color: #fff; font-weight: 800; font-size: 0.78rem; }
.j-detail h5 .j-cabin .i { width: 13px; height: 13px; }
.j-detail h5 em.direct { color: var(--stub-good); }
.j-detail h5 em.stops { color: #fff; }
.j-legs { padding: 12px; }
.j-legs .layover { background: transparent; padding-block: 2px; margin: 6px 0; }
/* What lies between two journeys, on the line that parts them. */
.j-between { display: flex; align-items: center; gap: 12px; min-height: 14px; margin: 12px 4px -2px; }
.j-between::before, .j-between::after { content: ''; flex: 1; border-top: 2px dashed var(--line-2); }
.j-between span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; background: var(--mist); color: var(--ink-2); font-size: 0.84rem; font-weight: 800; }
.j-between .i { width: 15px; height: 15px; color: var(--accent-ink); }
.details .j-between span { background: var(--paper); }
.leg { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--line); }
/* The airline's mark at the start of a flight, on its own white plate. */
.leg-mark { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 10px; }
.leg-mark .al-plate { width: 84px; height: 42px; padding: 4px 8px; border-radius: 11px; box-shadow: 0 6px 14px -10px rgba(11, 31, 58, 0.5); }
.leg-pt { display: grid; grid-template-columns: 76px 20px minmax(0, 1fr); align-items: start; gap: 8px; }
.leg-when { display: flex; flex-direction: column; }
.leg-when b { font-family: var(--font-board); font-weight: 700; color: var(--heading); }
.leg-when b sup { font-size: max(11px, 0.62rem); color: var(--orange-ink); }
.leg-when small { font-size: 0.74rem; color: var(--ink-3); }
.leg-dot { width: 12px; height: 12px; margin: 5px auto 0; border-radius: 50%; border: 2px solid var(--accent-line); background: var(--paper); }
.leg-where b { display: block; font-weight: 800; color: var(--ink); font-size: 0.92rem; }
.leg-where small { font-size: 0.8rem; color: var(--ink-3); }
.leg-flight { display: flex; align-items: center; gap: 10px; margin-inline-start: 93px; padding: 10px 0 10px 18px; border-inline-start: 2px dashed var(--line-2); }
[dir="rtl"] .leg-flight { padding: 10px 18px 10px 0; }
.leg-flight b { display: block; font-size: 0.84rem; font-weight: 800; color: var(--ink-2); }
.leg-flight small { font-size: 0.78rem; color: var(--ink-3); }
/* The flight number stays whole beside the airline, never left alone on a line with its dot. */
.leg-flight bdi { white-space: nowrap; }
.layover { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 14px; border-radius: 12px; font-size: 0.84rem; font-weight: 700; color: var(--ink-2); background: var(--mist); }
/* A change of planes is information, not a warning: calm ink. Only what the traveller must
   act on (an overnight wait, a move to another airport) keeps the warm colour. */
.layover .i { width: 16px; height: 16px; color: var(--accent-ink); }
.layover em { font-style: normal; color: var(--orange-ink); }
.details-note { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 0.8rem; color: var(--ink-3); }
.details-note .i { width: 15px; height: 15px; }

.empty-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 44px 24px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-card); }
.empty-card p { margin: 0; max-width: 52ch; color: var(--ink-2); font-weight: 600; }
.empty-card.bad .empty-icon { background: var(--bad-soft); color: var(--bad); }
.empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--accent-ink); }
.empty-icon .i { width: 26px; height: 26px; }
.empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

/* ── the four steps ─────────────────────────────────────────────────────────── */
.book-top { padding: 86px 0 18px; margin-top: -76px;
  /* The same evening as the results: the site's dusk sky under a deep shade. */
  background: linear-gradient(180deg, rgba(6, 16, 36, 0.92) 0%, rgba(6, 16, 36, 0.78) 60%, rgba(6, 16, 36, 0.68) 100%),
              url('/static/home/sky-2400.webp') center 44% / cover no-repeat, var(--navy-900); }
[dir="rtl"] .book-top { background: linear-gradient(180deg, rgba(6, 16, 36, 0.92) 0%, rgba(6, 16, 36, 0.78) 60%, rgba(6, 16, 36, 0.68) 100%),
              url('/static/home/sky-rtl-2400.webp') center 44% / cover no-repeat, var(--navy-900); }
.steps { display: flex; align-items: center; gap: 8px; color: #fff; overflow-x: auto; scrollbar-width: none; }
.step { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.92rem; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.step i { font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); font-size: 0.82rem; }
.step i .i { width: 15px; height: 15px; }
.step.on { color: #fff; }
.step.on i { background: var(--orange); border-color: var(--orange); }
.step.done { color: rgba(255, 255, 255, 0.85); }
.step.done i { background: rgba(255, 255, 255, 0.16); border-color: transparent; }
.step:disabled { cursor: default; }
.step-line { flex: 1; min-width: 18px; height: 1.5px; background: rgba(255, 255, 255, 0.2); }
.book-wrap { padding-top: 22px; }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.book-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.book-side { position: sticky; top: 92px; }
.book-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 90px 0; color: var(--ink-2); font-weight: 700; }
.book-loading .progress-bar { flex-basis: auto; width: 180px; }
.card { background: var(--paper); border-radius: 20px; box-shadow: var(--shadow-card); padding: 20px 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; font-size: 1.12rem; font-weight: 900; color: var(--heading); }
.card-head h1 { margin: 0; font-size: 1.6rem; font-weight: 900; color: var(--heading); font-family: var(--font-board); }
.tag { padding: 4px 12px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-ink); font-weight: 900; font-size: 0.82rem; text-transform: capitalize; }
.hint { margin: -4px 0 12px; font-size: 0.86rem; color: var(--ink-3); }
/* The birth-date note under a traveller's boxes: the heading's pull-up sat it against the
   boxes above it (on a child or an infant it touched the passport boxes). */
.form-grid + .hint { margin: 10px 0 0; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--mist); color: var(--ink-2); font-size: 0.9rem; font-weight: 600; margin: 0; }
.notice .i { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--accent-ink); }
.notice .link { margin-inline-start: auto; white-space: nowrap; }
.notice.warn { background: var(--orange-soft); }
.renewed-note { margin-top: 10px; }
.renewed-note[hidden] { display: none; }
/* Sign in or sign up, at the top of the travellers. */
.quick-sign { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--paper); border: 1.5px solid var(--line); box-shadow: var(--shadow-card); }
.device-kept { display: flex; align-items: flex-start; gap: 8px; margin: 10px 4px 0; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); }
.device-kept .i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--good); }
.device-kept span { flex: 1 1 auto; min-width: 0; }
.device-kept .link { flex: none; white-space: nowrap; }
.agree.remember { margin-top: 10px; }
.qs-lock { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--fill); color: #fff; }
.qs-lock .i { width: 19px; height: 19px; }
.qs-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.qs-words b { font-size: 1rem; font-weight: 900; color: var(--heading); }
.qs-words small { font-size: 0.84rem; font-weight: 600; color: var(--ink-3); }
.qs-acts { display: flex; align-items: center; gap: 10px; flex: none; }
.qs-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--paper); transition: border-color 0.15s ease, transform 0.15s ease; }
.qs-btn:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.qs-btn svg { width: 22px; height: 22px; }
.qs-btn.apple { background: #000; border-color: #000; color: #fff; }
.qs-code { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 12px; background: var(--orange); color: #fff; font-weight: 900; white-space: nowrap; }
.qs-code:hover { filter: brightness(1.06); }
.quick-sign.on { padding: 12px 16px; gap: 10px; font-weight: 700; color: var(--ink-2); background: var(--good-wash); border-color: transparent; box-shadow: none; }
.quick-sign.on .i { width: 18px; height: 18px; color: var(--good-ink); flex: none; }
@media (max-width: 719px) {
  .quick-sign { flex-wrap: wrap; }
  .qs-acts { width: 100%; }
  .qs-code { flex: 1 1 auto; justify-content: center; }
}
.notice.warn .i { color: var(--orange-ink); }
.notice.bad { background: var(--bad-soft); color: var(--bad); }
.notice.bad .i { color: var(--bad); }
.notice.ok { background: var(--good-wash); color: var(--good-ink); }
.notice.ok .i { color: var(--good); }
.rule { border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; }
.rule summary { cursor: pointer; padding: 10px 14px; font-weight: 800; color: var(--heading); font-size: 0.9rem; }
.rule pre { margin: 0; padding: 0 14px 14px; white-space: pre-wrap; font-family: var(--font-board); font-size: 0.76rem; color: var(--ink-2); max-height: 260px; overflow: auto; }
.rule-noshow { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; font-size: 0.88rem; color: var(--ink-2); }
.step-acts { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.step-acts .btn-orange:only-child { margin-inline-start: auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld.wide { grid-column: 1 / -1; }
.fld > span { font-size: 0.8rem; font-weight: 800; color: var(--ink-2); }
.fld input, .fld select, .fld textarea, .coupon input { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 0.96rem; width: 100%; }
.fld textarea { padding: 12px 14px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .coupon input:focus { outline: 0; border-color: var(--accent-line); box-shadow: var(--ring); }
.fld.bad input, .fld.bad select { border-color: var(--bad); background: var(--bad-soft); }
/* Said under a box an Arabic letter was just taken out of: which keyboard to switch to. */
.fld-latin { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 700; color: var(--bad); line-height: 1.35; }
.title-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding: 2px; border-radius: 12px; }
.gender-row { align-items: center; }
.gender-say { font-weight: 800; font-size: 0.88rem; color: var(--ink-2); margin-inline-end: 6px; }
.title-row.bad { box-shadow: 0 0 0 2px var(--bad); }
.title-chip { height: 40px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line-2); font-weight: 800; color: var(--ink-2); }
.title-chip.on { background: var(--fill); border-color: var(--fill); color: #fff; }
.known { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 800; color: var(--accent-ink); }
.known select { border: 0; background: transparent; color: var(--accent-ink); font-weight: 800; max-width: 200px; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
/* A passport or Civil ID chosen from the gallery or the files and read into the boxes. The
   whole box is the button: a thumb aims at the card, not at a word inside it. */
.scan-doc { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1.5px dashed var(--line-2); border-radius: 14px; background: var(--mist); cursor: pointer; }
.scan-doc:hover, .scan-doc:focus-within { border-color: var(--accent-line); box-shadow: var(--ring); }
.scan-doc > .i { width: 26px; height: 26px; flex: none; color: var(--accent-ink); }
.scan-doc.busy { cursor: progress; opacity: 0.8; }
.scan-doc.busy > .i { animation: scan-breathe 1.2s ease-in-out infinite; }
.scan-text { display: grid; gap: 2px; min-width: 0; }
.scan-text b { font-size: 0.92rem; font-weight: 800; color: var(--heading); }
.scan-said { font-size: 0.82rem; font-weight: 600; color: var(--ink-3); }
.scan-said.ok { color: var(--good-ink); }
.scan-said.warn { color: var(--ink); font-weight: 700; }
.scan-said.bad { color: var(--bad); }
.scan-doc input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* The whole traveller card takes the drop: somebody dragging a passport aims at the
   traveller, and a target the size of a button is one they miss. Armed, it says so. */
.traveller.drop-here { outline: 2px dashed var(--accent-line); outline-offset: 4px; }
.traveller.drop-here .scan-doc { border-style: solid; border-color: var(--accent-line); background: var(--mist); box-shadow: var(--ring); }
.scan-drop-said { display: none; font-size: 0.92rem; font-weight: 800; color: var(--accent-ink); }
.traveller.drop-here .scan-drop-said { display: block; }
.traveller.drop-here .scan-text { display: none; }
@keyframes scan-breathe { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .scan-doc.busy > .i { animation: none; } }

/* The plan moved to the next flight by itself: said in a line, and brought into view. */
#seat-card { scroll-margin-top: 100px; }
.seat-moved { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
              background: var(--mist); color: var(--heading); font-size: 0.88rem; font-weight: 700; }
.seat-moved .i { width: 16px; height: 16px; flex: none; color: var(--accent-ink); }
.seat-tabs, .seat-who { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.seat-tabs button, .seat-who button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2); font-weight: 800; font-size: 0.85rem; color: var(--ink-2); }
.seat-tabs button.on, .seat-who button.on { border-color: var(--accent-line); background: var(--mist); color: var(--heading); }
.seat-who b { font-family: var(--font-board); color: var(--orange-ink); }
.seat-who .i { width: 16px; height: 16px; }
.seat-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.seat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.notice.seat-closed { margin-bottom: 12px; font-size: 0.88rem; }
.notice.extras-closed { font-size: 0.88rem; }
.seat-legend i { width: 16px; height: 16px; border-radius: 5px; }
.seat-legend .free, .seat.free { background: var(--good-wash); border: 1.5px solid var(--good); }
.seat-legend .paid, .seat.paid { background: var(--orange-soft); border: 1.5px solid var(--orange); }
.seat-legend .taken, .seat.taken { background: var(--mist); border: 1.5px solid var(--line-2); }
.seat-legend .mine, .seat.mine { background: var(--fill); border: 1.5px solid var(--fill); }
/* The plan is a cabin (12 Oct 2026): the seats stand inside a fuselage with its nose and
   windscreen at the top, on the pale ground it scrolls in. It was a grid of squares floating
   in the middle of a blank panel. The body hugs the seats and narrows with a telephone. */
.seat-tip { position: fixed; z-index: 90; min-width: 220px; max-width: 280px; padding: 12px 14px; border-radius: 14px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 18px 36px -18px rgba(11, 31, 58, 0.55); pointer-events: none; font-size: 0.84rem; }
.seat-tip[hidden] { display: none; }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.st-head b { font-family: var(--font-board); font-size: 1.15rem; color: var(--heading); }
.st-head em { font-style: normal; font-size: 0.74rem; font-weight: 900; padding: 3px 9px; border-radius: 999px; background: var(--mist); color: var(--ink-2); }
.st-head em.paid { background: var(--orange-soft); color: var(--orange-ink); }
.st-head em.free { background: var(--good-wash); color: var(--good-ink); }
.st-traits { margin: 0 0 8px; color: var(--ink-3); font-weight: 700; }
.st-line, .st-total { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.st-line span { color: var(--ink-3); font-weight: 700; }
.st-line b { font-weight: 800; color: var(--ink-2); }
.st-total { margin-top: 4px; padding-top: 7px; border-top: 1px dashed var(--line-2); font-weight: 900; color: var(--heading); }
.seat-plan { overflow-x: auto; padding: 18px 16px 0; border-radius: 16px; background: var(--mist); max-height: 460px; }
.seat-grid { position: relative; display: grid; gap: 5px; justify-content: center; max-width: max-content; margin-inline: auto; padding: 78px 22px 22px;
             background: var(--paper); border: 2px solid var(--line-2); border-bottom: 0; border-radius: 50% 50% 0 0 / 120px 120px 0 0;
             box-shadow: 0 0 0 6px color-mix(in srgb, var(--paper) 55%, transparent); }
.seat-grid::before { content: ''; position: absolute; top: 26px; left: 50%; width: 38%; height: 16px; transform: translateX(-50%);
                     border-radius: 16px 16px 5px 5px / 14px 14px 5px 5px; background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.seat-col, .seat-row { display: grid; place-items: center; font-family: var(--font-board); font-size: 0.72rem; font-weight: 700; color: var(--ink-3); }
.seat { height: 2.2em; border-radius: 7px 7px 4px 4px; font-size: 0.78rem; font-weight: 900; color: #fff; }
.seat.gap { visibility: hidden; }
.seat.taken { cursor: not-allowed; }
.seat:not(.taken):hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(6, 20, 39, 0.4); }
.ch-flight { border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; }
.ch-flight + .ch-flight { margin-top: 12px; }
.ch-head, .ch-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr); align-items: center; gap: 10px; padding: 10px 14px; }
.ch-flight[data-kinds="1"] .ch-head, .ch-flight[data-kinds="1"] .ch-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.ch-head { background: var(--mist); font-size: 0.8rem; font-weight: 800; color: var(--ink-3); }
.ch-head b, .ch-head span, .ch-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.ch-head b { color: var(--heading); font-size: 0.9rem; font-weight: 900; }
.ch-head .i, .ch-who .i { width: 16px; height: 16px; flex: none; }
.ch-row + .ch-row, .ch-head + .ch-row { border-top: 1px solid var(--line); }
.ch-who { font-weight: 800; font-size: 0.9rem; color: var(--ink-2); }
.ch-who .i { color: var(--ink-3); }
.ch-row label { display: block; min-width: 0; }
.ch-row label small { display: none; font-size: 0.74rem; font-weight: 800; color: var(--ink-3); margin-bottom: 3px; }
.ch-row select { width: 100%; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); padding: 0 10px; }
.ch-none { color: var(--ink-3); }
.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.extra { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.extra:hover { border-color: var(--accent-line); }
.extra input { position: absolute; opacity: 0; pointer-events: none; }
.extra:has(input:focus-visible) { box-shadow: var(--ring); }
.extra.on { border-color: var(--orange); background: var(--orange-soft); }
.extra-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--mist); color: var(--accent-ink); }
.extra.on .extra-icon { background: var(--orange); color: #fff; }
.extra-tick { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); color: var(--ink-3); }
.extra-tick .i { width: 15px; height: 15px; }
.extra:not(.on) .extra-tick::before { content: '+'; font-weight: 800; font-size: 1.1rem; line-height: 1; }
.extra.on .extra-tick { background: var(--orange); border-color: var(--orange); color: #fff; }
.extra-text b { display: block; font-weight: 900; color: var(--heading); font-size: 0.95rem; }
.extra-text small { color: var(--ink-3); font-size: 0.82rem; }
.coupon { display: flex; gap: 10px; }
.coupon .btn-line { height: 48px; }
.coupon-said { margin: 10px 0 0; font-size: 0.88rem; font-weight: 700; }
.coupon-said.ok { color: var(--good); }
.coupon-said.bad { color: var(--bad); }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-2); font-weight: 600; margin-bottom: 14px; cursor: pointer; }
.agree input { position: absolute; opacity: 0; }
.agree .fl-box { margin-top: 2px; }
.review-people { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.review-people li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.review-people b { color: var(--heading); }
.review-people .review-missing { color: var(--ink-3); font-weight: 700; }
.review-people small { color: var(--ink-3); }
.review-people em { font-style: normal; font-size: 0.78rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--mist); color: var(--accent-ink); }
/* ── Make my booking refundable (Refund Protect), on the last step ─────────────────────
   The old site's card: a tag, the shield and the title, six ticks, and two rows to choose
   between with the price at the end of the first. Green is the card's own colour — it is
   an assurance, and orange on this page is the button that books. */
.card.rp { position: relative; border: 1.5px solid var(--line-2); }
.card.rp.on { border-color: var(--good); box-shadow: 0 0 0 3px var(--good-wash); }
.rp-tag { position: absolute; top: -11px; inset-inline-start: 22px; padding: 3px 12px; border-radius: 999px; background: var(--good-ink); color: var(--paper); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
[lang="ar"] .rp-tag { letter-spacing: 0; }
.rp-head { display: flex; align-items: flex-start; gap: 14px; }
.rp-shield { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--good-wash); color: var(--good); }
.rp-shield .i { width: 24px; height: 24px; }
.rp-head h2 { margin: 0 0 4px; font-size: 1.2rem; }
.rp-head p { margin: 0; color: var(--ink-2); font-size: 0.93rem; }
.rp-ticks { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.rp-ticks li { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--ink-2); }
.rp-ticks .i { flex: none; width: 16px; height: 16px; color: var(--good); }
.rp-rows { display: grid; gap: 10px; }
.rp-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; cursor: pointer; background: var(--paper); }
.rp-row:hover { border-color: var(--accent-line); }
.rp-row.on { border-color: var(--good); background: var(--good-pale); }
.rp-row input { position: absolute; opacity: 0; pointer-events: none; }
.rp-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--paper); display: grid; place-items: center; }
.rp-row.on .rp-dot { border-color: var(--good); }
.rp-row.on .rp-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--good); }
.rp-row input:focus-visible + .rp-dot { box-shadow: var(--ring); }
.rp-said { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rp-said b { color: var(--ink); font-size: 0.98rem; }
.rp-said small { color: var(--ink-3); font-size: 0.84rem; font-weight: 600; }
.rp-row > .amt { flex: none; font-weight: 800; color: var(--ink); }
.rp-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.rp-foot .btn-line .i { width: 16px; height: 16px; }
.rp-sheet { width: min(640px, calc(100vw - 28px)); padding: 30px; }

/* ── Pay now: the three ways, on the booking's own page ───────────────────────
   Steven, 28 Oct 2026: Pay now shows KNET, Visa and Apple Pay. One card a way, the
   way's own marks on a white plate (they are drawn for white paper, so the plate stays
   white at night), the total above them, and the gateway's promise at the foot. */
.pay-sheet { width: min(500px, calc(100vw - 28px)); padding: 30px; }
.pay-sheet-head { display: flex; align-items: flex-start; gap: 14px; padding-inline-end: 44px; }
.pay-sheet-head h2 { margin: 2px 0 2px; font-size: 1.45rem; }
.pay-sheet-head .sheet-note { margin: 0; font-size: 0.92rem; }
.pay-sheet-badge { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--mist); color: var(--accent-ink); }
.pay-sheet-badge .i { width: 22px; height: 22px; }
.pay-sheet-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 16px; padding: 14px 18px; border-radius: 16px; background: var(--mist); }
.pay-sheet-total > span:first-child { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .pay-sheet-total > span:first-child { letter-spacing: 0; text-transform: none; font-size: 0.92rem; }
.pay-sheet-total .amt { font-size: 1.55rem; font-weight: 800; color: var(--heading); }
.pay-sheet-wait { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }
.pay-sheet .spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--orange); animation: spin 0.8s linear infinite; }
.pay-ways-list { display: grid; gap: 10px; }
.pay-way {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 26px; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--paper);
  text-align: start; color: var(--ink); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.pay-way:not(:disabled):hover { border-color: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 12px 24px -18px rgba(6, 20, 39, 0.5); }
.pay-way:focus-visible { outline: 3px solid var(--orange-glow); outline-offset: 2px; }
.pay-way:disabled { cursor: default; }
.pay-way.cannot { opacity: 0.55; }
.pay-way.going { border-color: var(--orange); }
.pay-way-marks { display: flex; align-items: center; gap: 6px; }
.pay-mark { display: block; width: 44px; height: 28px; object-fit: contain; padding: 3px 5px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(13, 27, 46, 0.08); }
.pay-way-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-way-words b { font-size: 1.02rem; color: var(--heading); }
.pay-way-words small { font-size: 0.84rem; color: var(--ink-3); }
.pay-way-go { display: grid; place-items: center; color: var(--ink-3); }
.pay-way-go .i { width: 20px; height: 20px; }
.pay-way:not(:disabled):hover .pay-way-go { color: var(--orange); }
.pay-sheet .notice.bad { margin-top: 14px; }
.pay-sheet-test { margin: 14px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-ink); font-size: 0.85rem; font-weight: 700; text-align: center; }
.pay-sheet-safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: 0.84rem; color: var(--ink-3); text-align: center; }
.pay-sheet-safe .i { width: 15px; height: 15px; flex: none; }
.pay-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pay-strip-marks { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-strip .pay-mark { width: 40px; height: 26px; }
.pay-strip-safe { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 700; color: var(--ink-3); }
.pay-strip-safe .i { width: 15px; height: 15px; }
.rp-sheet-head { display: flex; align-items: flex-start; gap: 14px; padding-inline-end: 40px; }
.rp-sheet-head h2 { margin: 0 0 2px; font-size: 1.4rem; }
.rp-sheet-head .sheet-note { margin: 0 0 6px; }
.rp-strip { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--good-wash); color: var(--good-ink); font-weight: 700; font-size: 0.94rem; }
.rp-strip .i { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.rp-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rp-facts li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 2px; align-content: start; }
.rp-facts b { color: var(--heading); font-size: 1.08rem; font-weight: 900; }
.rp-facts span { color: var(--ink-3); font-size: 0.82rem; font-weight: 600; }
.rp-part { margin-top: 20px; }
.rp-part > h3 { margin: 0 0 10px; font-size: 1.02rem; color: var(--heading); }
.rp-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rp-kind { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.rp-kind:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rp-kind h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 0.95rem; color: var(--ink); }
.rp-kind h4 span { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--good-wash); color: var(--good); }
.rp-kind h4 .i { width: 17px; height: 17px; }
.rp-kind ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rp-kind li { position: relative; padding-inline-start: 14px; color: var(--ink-2); font-size: 0.9rem; font-weight: 600; }
.rp-kind li::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--good); }
/* One under another: three columns of a sentence each broke every line after three words. */
.rp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rp-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--mist); }
.rp-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--good-ink); color: var(--paper); font-weight: 900; font-size: 0.85rem; }
.rp-steps b { display: block; color: var(--ink); font-size: 0.93rem; }
.rp-steps p { margin: 3px 0 0; color: var(--ink-2); font-size: 0.86rem; font-weight: 600; }
.rp-not { padding: 16px 18px; border-radius: 16px; background: var(--bad-soft); border: 1px solid var(--bad-line); }
.rp-not ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.rp-not li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-2); font-size: 0.9rem; font-weight: 600; }
.rp-not .i { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--bad); }
.rp-note { margin: 16px 0; color: var(--ink-3); font-size: 0.86rem; }
.rp-terms { width: 100%; justify-content: center; gap: 8px; }
.rp-terms .i { width: 16px; height: 16px; }
.done-protect, .trip-protect { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); }
.done-protect .i, .trip-protect .i { width: 16px; height: 16px; color: var(--good); flex: none; }
@media (max-width: 640px) {
  .rp-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-facts, .rp-kinds, .rp-not ul { grid-template-columns: 1fr; }
  .rp-facts li { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
  .rp-sheet { padding: 24px 18px; }
  .pay-sheet { padding: 24px 18px; }
  .pay-way { grid-template-columns: 84px minmax(0, 1fr) 22px; gap: 10px; padding: 12px; }
  .pay-way-marks .pay-mark { width: 38px; height: 26px; }
  .rp-row { padding: 12px 14px; }
}
.review-extras { list-style: none; margin: 0; padding: 0; }
.review-extras li { display: flex; justify-content: space-between; padding: 6px 0; font-weight: 700; color: var(--ink-2); }

/* The booking as a boarding pass: the trip in the board's letters on the dusk it flies in,
   who is going, a tear, and what it comes to. */
.summary { background: var(--paper); border-radius: 22px; box-shadow: var(--shadow-card); padding: 0 20px 20px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.bp-head { margin-inline: -20px; padding: 18px 20px 16px; color: #fff;
           background: radial-gradient(130% 150% at 100% 0%, #2c4f8a 0%, #10254a 48%, #081226 100%); }
[dir="rtl"] .bp-head { background: radial-gradient(130% 150% at 0% 0%, #2c4f8a 0%, #10254a 48%, #081226 100%); }
.bp-air { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 0.84rem; font-weight: 800; color: rgba(255, 255, 255, 0.86); }
/* The airline's name on one line beside its mark: the side card is narrow, and *Kuwait
   Airways* in Arabic broke in two once the mark was given its own shape (14 Oct 2026).
   Where the name and the fare's tag do not both fit, the tag goes to the next line —
   never the name cut short. */
.bp-air .al-plate { width: 64px; height: 34px; }
.bp-air > span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* A flight's facts break between themselves, never inside one: *Airbus A330-900neo* split
   at its hyphen in Arabic and read as two things. */
.leg-flight .lf-part { white-space: nowrap; }
.bp-air em { margin-inline-start: auto; font-style: normal; font-size: 0.74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #ffc46b; text-transform: capitalize; white-space: nowrap; }
.bp-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 16px 0 14px; }
.bp-route b { display: block; font-family: var(--font-board); font-size: 2rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; }
.bp-route small { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.bp-route > div:last-child { text-align: end; }
.bp-line { position: relative; display: grid; place-items: center; height: 22px; }
.bp-line::before { content: ''; position: absolute; inset-inline: 0; top: 50%; border-top: 2px dashed rgba(255, 255, 255, 0.3); }
.bp-line .i { position: relative; width: 22px; height: 22px; padding: 2px; color: #ffc46b; background: #10254a; border-radius: 50%; }
.bp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 10px; }
.bp-facts small { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
html[lang="ar"] .bp-facts small { letter-spacing: 0; font-size: 0.74rem; }
.bp-facts b { font-family: var(--font-board); font-size: 0.95rem; font-weight: 600; }
.bp-names { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bp-names li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-board); font-size: 0.86rem; font-weight: 600; color: var(--heading); }
.bp-names li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-names em { flex: none; display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 0.8rem; padding: 2px 9px; border-radius: 8px; background: var(--mist); color: var(--accent-ink); }
.bp-names em .i { width: 13px; height: 13px; }
/* The tear: a dashed line with a bite out of each edge, as a pass has where the stub comes off. */
.bp-tear { position: relative; margin-inline: -20px; height: 2px; border-top: 2px dashed var(--line-2); }
.bp-tear::before, .bp-tear::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--page); }
.bp-tear::before { inset-inline-start: -10px; }
.bp-tear::after { inset-inline-end: -10px; }
.sum-lines { list-style: none; margin: 0; padding: 0 0 12px; border-bottom: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.sum-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; color: var(--ink-2); font-weight: 600; }
.sum-lines li.off { color: var(--good); }
.sum-lines .amt { font-weight: 800; }
.sum-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.sum-total span { font-weight: 900; color: var(--heading); display: flex; flex-direction: column; }
.sum-total small { font-weight: 700; font-size: 0.76rem; color: var(--ink-3); }
.sum-trust { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 0.84rem; color: var(--ink-3); font-weight: 700; }
.sum-trust li { display: flex; align-items: center; gap: 8px; }
.sum-trust .i { width: 17px; height: 17px; color: var(--good); }
.book-bar { display: none; }

/* ── the answer, and a trip ─────────────────────────────────────────────────── */
.done-wrap, .trip-wrap { padding-top: 26px; display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.done-card { background: var(--paper); border-radius: 26px; box-shadow: var(--shadow-card); overflow: hidden; }
.done-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; padding: 30px 36px; color: #fff;
             background: radial-gradient(120% 150% at 100% 0%, #2c4f8a 0%, #10254a 46%, #081226 100%); border-bottom: 2px dashed rgba(255, 255, 255, 0.34); }
[dir="rtl"] .done-head { background: radial-gradient(120% 150% at 0% 0%, #2c4f8a 0%, #10254a 46%, #081226 100%); }
/* The bites at the two ends of the tear, in the page's own ground. */
.done-head::before, .done-head::after { content: ''; position: absolute; bottom: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--page); }
.done-head::before { inset-inline-start: -10px; }
.done-head::after { inset-inline-end: -10px; }
.done-card h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 900; color: #fff; }
.done-head .kicker { color: #ffb689; margin: 0 0 4px; }
.done-words { min-width: 0; }
.done-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: var(--stub-good); }
.done-icon .i { width: 30px; height: 30px; }
.done-number { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: end; }
.done-number small { font-size: 0.8rem; font-weight: 700; color: rgba(255, 255, 255, 0.78); }
.done-number b { font-family: var(--font-board); font-size: 1.55rem; letter-spacing: 0.02em; color: #ffc46b; }
.done-body { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 28px 36px 34px; }
.done-steps { margin: 6px 0; padding: 0; list-style: none; counter-reset: done; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.done-steps li { counter-increment: done; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; }
.done-steps li::before { content: counter(done); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--accent-ink); font-weight: 900; }
.done-steps b { color: var(--heading); }
.done-steps span { color: var(--ink-3); font-size: 0.9rem; }
.done-trip { width: 100%; padding: 16px; border-radius: 16px; background: var(--mist); display: flex; flex-direction: column; gap: 10px; }
.done-trip p { margin: 0; font-weight: 700; color: var(--ink-2); }
/* The little plane sits on the summary's own ground, not on a white square of the card's. */
.done-trip .j-plane { background: var(--mist); }
.done-total { display: flex; gap: 8px; align-items: baseline; }
.done-acts { display: flex; flex-wrap: wrap; gap: 10px; }
/* Where the booking number is, shown on a small piece of the ticket it is printed on. */
.ref-hint { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.ref-hint p { margin: 0; font-size: 0.88rem; color: var(--ink-2); line-height: 1.55; }
.ref-hint p b { display: block; color: var(--heading); font-weight: 900; margin-bottom: 2px; }
.ref-sample { display: grid; gap: 1px; min-width: 190px; padding: 12px 14px; border-radius: 14px; background: var(--mist); border: 1.5px dashed var(--line-2); transform: rotate(-2deg); }
.ref-sample span { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.ref-sample small { font-size: 0.68rem; font-weight: 700; color: var(--ink-3); }
.ref-sample b { justify-self: start; margin-bottom: 4px; padding: 1px 8px; border-radius: 6px; background: var(--orange-soft); outline: 2px solid var(--orange); color: var(--heading); font-family: var(--font-board); font-size: 1rem; letter-spacing: 0.04em; }
.ref-sample i { font-style: normal; font-family: var(--font-board); font-size: 0.78rem; color: var(--ink-2); }
.trip-find h1 { margin: 0 0 4px; font-size: 1.7rem; font-weight: 900; color: var(--heading); }
.trip-find .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; margin-top: 14px; }
.trip-card .state { padding: 5px 12px; border-radius: 999px; font-weight: 900; font-size: 0.82rem; background: var(--mist); color: var(--accent-ink); }
.trip-card .state.ticketed { background: var(--good-wash); color: var(--good-ink); }
.trip-card .state.cancelled, .trip-card .state.voided { background: var(--bad-soft); color: var(--bad); }
.trip-legs { display: flex; flex-direction: column; gap: 10px; }
.trip-leg { padding: 12px 16px; border-radius: 14px; background: var(--mist); }
.trip-leg > b { font-family: var(--font-board); color: var(--heading); margin-inline-end: 8px; }
.trip-leg > span { font-size: 0.84rem; color: var(--ink-3); font-weight: 700; }
.trip-leg-row { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 14px; margin-top: 8px; }
.trip-leg-row > div { display: flex; flex-direction: column; }
.trip-leg-row > div:last-child { text-align: end; }
.trip-leg-row b { font-family: var(--font-board); font-size: 1.2rem; color: var(--heading); }
/* A hotel's stay in the trip card: the name in the body face (hotel names are often Arabic,
   and the board face has none), the two dates as the leg's two ends, then the rooms. */
.trip-stay > b { font-family: inherit; font-size: 1.05rem; }
.trip-stay > span { display: block; margin-top: 2px; }
.trip-stay .trip-leg-row small { font-size: 0.78rem; color: var(--ink-3); font-weight: 700; }
.trip-stay > small { display: block; margin-top: 8px; color: var(--ink-3); font-weight: 700; font-size: 0.82rem; }
.trip-rooms { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.trip-rooms small { color: var(--ink-3); }
.trip-card > .notice { margin: 0 0 12px; }
.trip-leg-row small { font-size: 0.8rem; color: var(--ink-3); }
.trip-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.trip-cols h4 { margin: 0 0 6px; font-size: 0.8rem; font-weight: 900; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
html[lang="ar"] .trip-cols h4 { text-transform: none; letter-spacing: 0; }
.trip-cols ul { list-style: none; margin: 0; padding: 0; font-weight: 700; color: var(--ink-2); }
.trip-cols p { margin: 0 0 4px; color: var(--ink-2); font-weight: 700; }
.trip-cols .owed { color: var(--orange-ink); }

@media (max-width: 1080px) {
  .shop-grid { grid-template-columns: 250px minmax(0, 1fr); }
  .book-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
/* On a phone the filters are a sheet from the bottom, the chips are the ones used most,
   and the total rides a bar at the foot of the booking steps (Almosafer's phone site). */
@media (max-width: 900px) {
  .shop-grid, .book-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-side { position: fixed; inset: auto 0 0 0; top: auto; z-index: 55; max-height: 86vh; overflow: auto; border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform 0.25s ease; box-shadow: 0 0 0 100vmax rgba(6, 20, 39, 0); }
  body.filters-on { overflow: hidden; }
  body.filters-on .shop-side { transform: none; box-shadow: 0 0 0 100vmax rgba(6, 20, 39, 0.55); }
  .shop-side .filters { border-radius: 22px 22px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .filters-open, .filters-done { display: inline-flex; }
  .filters-done { display: flex; }
  /* On a telephone the trip is in the header and the total is in the bar that follows the
     thumb, so a third copy of both above every step pushed the step itself a screen down
     (the first box of the travellers' form began at 756px). The card comes back on the
     review, with what the total is made of, before the button that sends it. */
  /* The facts of a flight stand one under another beside the times: side by side they
     wrapped mid-pair and left a dot hanging at the end of each line. */
  .leg-flight .lf-part { display: block; }
  .leg-flight .lf-sep { display: none; }
  /* One *Continue* at a time: the bar that follows the thumb has it on every step but the
     last, so the copy at the foot of the page said the same thing twice on one screen. */
  .book-grid:not([data-step="4"]) .step-acts [data-shop="next"] { display: none; }
  .book-grid:not([data-step="4"]) .step-acts:not(:has([data-shop="prev"])) { display: none; }
  .book-side { position: static; order: -1; }
  .book-grid:not([data-step="4"]) .book-side { display: none; }
  .book-side .sum-trust { display: none; }
  .book-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; inset-inline: 0; bottom: 0; z-index: 25;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 var(--line), 0 -10px 24px -18px rgba(6, 20, 39, 0.4); }
  .book-bar > div > small { display: block; font-size: 0.74rem; font-weight: 800; color: var(--ink-3); }
  .book-bar .bar-down { height: 44px; padding: 0 16px; font-size: 0.9rem; gap: 6px; white-space: nowrap; }
  .book-bar .bar-down .i { width: 16px; height: 16px; }
  .shop-book, .shop-main.shop-book { padding-bottom: 110px; }
  .trip-cols { grid-template-columns: minmax(0, 1fr); }
  .trip-find .form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  /* On a telephone the trip is two lines — where, with Change beside it; then when, who
     and which cabin — so the fares begin a hand's height down, not a screen. */
  .trip-band { padding: 84px 0 16px; }
  .trip-band:has(+ .wrap .days-block) { padding-bottom: 48px; }
  .days-arrow { display: none; }
  .trip-photo { width: 70%; opacity: 0.4; }
  .trip-band-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
  .trip-ends { gap: 10px; min-width: 0; grid-row: 1; grid-column: 1; }
  .trip-change { grid-row: 1; grid-column: 2; }
  .trip-end b { font-size: 1.3rem; }
  .trip-end span { font-size: 0.78rem; }
  .trip-mid { min-width: 0; }
  .trip-mid .i { width: 20px; height: 20px; }
  .trip-mid small { display: none; }
  .trip-ends.multi { grid-column: 1 / -1; }
  .trip-change { margin-inline-start: 0; height: 38px; padding: 0 14px; font-size: 0.84rem; white-space: nowrap; }
  .trip-facts { grid-row: 2; grid-column: 1 / -1; font-size: 0.78rem; gap: 6px; }
  .trip-facts span { min-height: 32px; padding: 0 10px; gap: 6px; }
  .trip-facts .i { width: 15px; height: 15px; }
  .trip-ends.multi + .trip-facts { grid-row: 3; grid-column: 1 / -1; }
  .trip-ends.multi ~ .trip-change { grid-row: 2; grid-column: 1 / -1; justify-content: center; }
  .sort-tab small { display: none; }
  .days-strip { grid-template-columns: repeat(var(--days, 7), minmax(104px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .leg-pt { grid-template-columns: 62px 18px minmax(0, 1fr); }
  .leg-flight { margin-inline-start: 77px; }
  .sort-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sort-more { display: none; }
  .sort-tab { padding: 8px 10px; }
  /* On a phone the mark stands beside the price: beside the word it ran into «Cheapest». */
  .sort-tab.named b { padding-inline-end: 0; }
  .sort-air { top: auto; bottom: 7px; inset-inline-end: 8px; }
  .sort-air .al-plate { width: 44px; height: 22px; border-radius: 6px; }
  .sort-tab span { font-size: 0.74rem; }
  .r-body { display: flex; flex-direction: column; }
  .r-main { display: contents; }
  .r-top { order: 1; padding: 14px 16px 0; }
  .r-journeys { order: 2; padding: 12px 16px 14px; }
  .r-foot { order: 3; margin-top: 0; padding: 4px 16px 8px; border-top: 1px solid var(--line); }
  .j-where { max-width: 6.6em; }
  /* The bag and the price on one line, *per adult* straight under the price it describes
     (it sat under the button, a line away), and the button the width of the card. */
  /* On a telephone the stub lies across the foot of the card: what it costs on the left,
     the button on the right, and the bag along the bottom. */
  .r-price { order: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "amt go" "per go" "total total" "bag bag" "note note";
    align-items: center; justify-items: start; gap: 0 14px; padding: 16px 16px 14px; text-align: start; }
  .r-price::before, .r-price::after { top: -11px; bottom: auto; }
  .r-price::after { inset-inline-start: auto; inset-inline-end: -11px; }
  .r-price .amt { grid-area: amt; }
  .r-price .amt.big { font-size: 1.6rem; }
  .r-price .r-per { grid-area: per; }
  .r-price .r-total { grid-area: total; margin-top: 6px; }
  .r-price .r-bag { grid-area: bag; margin-top: 10px; }
  .r-price .r-choose { grid-area: go; align-self: center; margin-top: 0; min-width: 132px; }
  .r-price .r-note { grid-area: note; justify-self: start; text-align: start; }
  .j-end b { font-size: 1.22rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 18px 16px; }
  .done-head { grid-template-columns: auto minmax(0, 1fr); padding: 22px 20px; }
  .done-icon { width: 48px; height: 48px; }
  .done-number { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; text-align: start; }
  .done-body { padding: 22px 20px 26px; }
  .describe { grid-template-columns: auto minmax(0, 1fr); }
  .describe-go { grid-column: 1 / -1; }
  .ch-head span { display: none; }
  .ch-head, .ch-flight[data-kinds="1"] .ch-head { grid-template-columns: minmax(0, 1fr); }
  .ch-row, .ch-flight[data-kinds="1"] .ch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-flight[data-kinds="1"] .ch-row { grid-template-columns: minmax(0, 1fr); }
  .ch-who { grid-column: 1 / -1; }
  .ch-row label small { display: block; }
  .extras { grid-template-columns: minmax(0, 1fr); }
  .step span { display: none; }
  .step.on span { display: inline; }
  .extra { padding: 12px; }
  .extra-icon { width: 40px; height: 40px; }
}
@media (max-width: 719px), (pointer: coarse) {
  .r-link, .fl-head button { min-height: 40px; }
  /* The booking steps under a thumb: the step bar, *Change* on each card, the links in the
     consent line and a seat were 25–28px tall — measured on a 390px phone, 1 Oct 2026. */
  .step { min-height: 40px; }
  .step i { width: 32px; height: 32px; }
  a.trust-chip { min-height: 40px; }
  /* A drop list in the search is pressed by its face, and the face was 26px tall. */
  .cell.field .dl-face { min-height: 40px; }
  /* A link inside a sentence is as tall as its line; it is given a thumb's reach without
     moving the line it sits in. */
  .agree a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  /* The same for a link inside a sentence of small print — *See every trip with a code*
     under the trip form was 26px tall, the one way from that page to a customer's other trips. */
  p.small a.link { display: inline-block; padding-block: 10px; margin-block: -10px; }
  /* *Book and pay 30.900 د.ك* beside *Back* was fifteen pixels wider than an Arabic phone, so
     the whole last step slid sideways — seen only with online booking on, which today is the
     test browser. The button takes what room is left and its words may take two lines. */
  .step-acts > * { min-width: 0; }
  .step-acts .btn-orange { flex: 1 1 0; height: auto; min-height: 52px; padding: 8px 14px; white-space: normal; line-height: 1.3; text-align: center; }
  .card-head .link, .notice .link, .price-tip .link, p.center > .link, .trip-can-card a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  /* An iPhone zooms the whole page into any box whose text is under 16px and does not zoom
     back out: the trip-lookup boxes, the planner and every traveller field were 15.2–15.4px. */
  :root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), :root textarea:not([hidden]), :root select:not([hidden]) { font-size: max(16px, 1em); }
  /* Nothing a person reads is under 11px: the currency beside a figure was 8.8px on a day
     of the strip, the +1 beside an arrival 9.9px. */
  .amt small { font-size: max(11px, 0.72em); }
  .j-end b sup, .leg-when b sup { font-size: 11px; }
  .day-cell em { font-size: 11px; letter-spacing: 0; }
  /* The price slider was a 16px strip to hit with a thumb. */
  .price-range input { min-height: 36px; }
  .shop-edit-x { min-height: 40px; }
  .seat { height: 2.75em; }
  /* Nine across drew seats 18px wide. A seat keeps a width a thumb can hit, the aisle and
     the row numbers give up the room, and a cabin too wide for that scrolls from its start
     — centred, an overflowing plan loses its first columns where no scroll reaches them. */
  .seat-plan { padding: 14px 8px; }
  .seat-grid { gap: 4px; justify-content: safe center; --seat-min: 24px; --seat-row: 20px; --seat-aisle: 10px; }
}

/* A number or a booking reference hinted in its own shape keeps it in Arabic too — the rule
   above is for Arabic hints, and a telephone number turned right to left is a wrong number. */
html[lang="ar"] input.keep-ltr:placeholder-shown { direction: ltr; }

/* The trip window sends the request itself: a name and a mobile, then the button. */
.trip-send { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0 0 14px; }
.trip-send input:not(.hp) { min-height: 50px; padding: 0 14px; border-radius: 13px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); }
.trip-send input:focus { outline: 0; border-color: var(--accent-line); box-shadow: var(--ring); }
.trip-send .btn-orange { grid-column: 1 / -1; }
.trip-send .form-error { grid-column: 1 / -1; margin: 0; }
.trip-sent { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--good-wash); color: var(--good-ink); font-weight: 700; }
.trip-sent .i { color: var(--good); }
@media (max-width: 719px) { .trip-send { grid-template-columns: minmax(0, 1fr); } }

/* A price beside an extra, a journey's line on a card, a strip still being asked, and one
   traveller's card — each named so a later rule can find it. */
.extra-price { display: block; margin-top: 3px; white-space: nowrap; }
.extra-price .amt { font-size: 0.9rem; }
.j-line { display: block; }
.days-strip.loading { pointer-events: none; }
.traveller .card-head h2 { display: flex; align-items: center; gap: 10px; }
/* Whose form this is, at a glance: its number, and an edge in the colour of the traveller's kind. */
.traveller { border-top: 3px solid var(--fill); }
.traveller[data-kind="CHD"] { border-top-color: var(--good); }
.traveller[data-kind="INF"] { border-top-color: var(--orange); }
.tv-no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: #fff; font-style: normal; font-family: var(--font-board); font-size: 0.9rem; font-weight: 700; }
.traveller[data-kind="CHD"] .tv-no { background: var(--good); }
.traveller[data-kind="INF"] .tv-no { background: var(--orange); }
.tv-of { margin-inline-start: auto; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.traveller .card-head { flex-wrap: wrap; }

/* ── the AI trip planner, at the top of the flight search ────────────────────────
   One sentence in the customer's words; the search below fills itself in. A strip of its
   own colour, so it reads as a second way in rather than as another box of the form. */
/* The wide bar: a label over a box the width of the card. It was one row — a mark, a
   narrow input and a button — and a question did not fit in it (4 Oct 2026). */
/* One row until somebody uses it; its suggestions open under it then (and are simply shown
   where the screen is tall enough to spare the line). */
.plan .ask-chips { display: none; }
.plan.open .ask-chips { display: flex; }
@media (min-width: 900px) and (min-height: 860px) { .plan .ask-chips { display: flex; } }
.ask-lead { display: grid; place-items: center; flex: none; width: 34px; height: 44px; color: var(--orange); cursor: text; background: none; }
.ask-lead .i { width: 20px; height: 20px; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
        padding: 12px 14px; border-bottom: 1px solid var(--line);
        background: linear-gradient(90deg, rgba(47, 143, 216, 0.10), rgba(242, 101, 34, 0.10)); }
[dir="rtl"] .plan { background: linear-gradient(270deg, rgba(47, 143, 216, 0.10), rgba(242, 101, 34, 0.10)); }
.ask-field { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: 16px;
             border: 1.5px solid var(--line-2); background: var(--paper); }
.ask-field:focus-within { border-color: var(--accent-line); box-shadow: var(--ring); }
.ask-field textarea, .ask-more textarea { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 132px; resize: none;
             padding: 10px 12px; border: 0; background: transparent; color: var(--ink);
             font: inherit; font-size: 1rem; line-height: 1.5; }
.ask-field textarea:focus, .ask-more textarea:focus { outline: 0; }
.plan-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 22px;
           border-radius: 12px; font-weight: 900; color: #fff; flex: none;
           background: linear-gradient(135deg, var(--sky), var(--orange)); white-space: nowrap; }
.plan-go .i { width: 17px; height: 17px; }
.plan-go.busy { opacity: 0.75; cursor: progress; animation: plan-breathe 1.2s ease-in-out infinite; }
@keyframes plan-breathe { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .plan-go.busy { animation: none; } }
.ask-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
  /* The row runs past the bar and scrolls; it ends in a fade, not a word cut in half
     (14 Oct: *How much baggage* stood clipped at the edge of the box). */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); padding-inline-end: 40px; }
[dir="rtl"] .ask-chips { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
.ask-chips::-webkit-scrollbar { display: none; }
.ask-chips button { flex: none; min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2);
                    background: var(--paper); color: var(--ink-2); font-size: 0.84rem; font-weight: 700; white-space: nowrap; }
.ask-chips button:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.ask-chips.ask-in-sheet { flex-wrap: wrap; overflow: visible; margin-top: 12px; -webkit-mask-image: none; mask-image: none; padding-inline-end: 0; }
.ask-chips.ask-in-sheet button { white-space: normal; text-align: start; min-height: 36px; padding: 6px 13px; background: var(--mist); border-color: transparent; }
.plan-said { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0;
             font-size: 0.86rem; font-weight: 700; color: var(--good-ink); }
.plan-said .i { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.plan-said b { color: var(--orange-ink); }
.plan-said.bad { color: var(--bad); }
.plan-said.plan-reading { color: var(--accent-ink); animation: plan-breathe 1.2s ease-in-out infinite; }
@media (max-width: 719px) {
  .plan { padding: 14px 12px 12px; }
  .plan-go { padding: 0 16px; }
}

/* The answer window. */
.ask-sheet { width: min(720px, calc(100vw - 28px)); padding: 30px; }
.ask-head { display: flex; align-items: flex-start; gap: 12px; padding-inline-end: 44px; }
.ask-spark { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff;
             background: linear-gradient(135deg, var(--sky), var(--orange)); }
.ask-spark .i { width: 20px; height: 20px; }
.ask-q { margin: 2px 0 0; font-weight: 700; color: var(--ink-2); font-size: 0.98rem; overflow-wrap: anywhere; }
.ask-sheet h2 { font-size: 1.4rem; margin: 16px 0 12px; }
/* One column that may shrink: left to size itself, a long button made the column — and
   every card in it — wider than the window on a phone. */
.ask-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ask-card { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; background: var(--paper); }
.ask-card h3 { margin: 0; font-size: 1.08rem; color: var(--heading); display: flex; align-items: center; gap: 8px; }
.ask-card h3 .i { width: 20px; height: 20px; color: var(--orange); flex: none; }
.ask-card.ask-verdict { border-inline-start: 4px solid var(--tone, var(--line-2)); }
.ask-card.ask-verdict header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.tone-good { --tone: var(--good); --tone-wash: var(--good-wash); --tone-ink: var(--good-ink); }
.tone-sky { --tone: var(--sky); --tone-wash: var(--sky-wash, rgba(47, 143, 216, 0.14)); --tone-ink: var(--accent-ink); }
.tone-warm { --tone: var(--orange); --tone-wash: var(--orange-soft); --tone-ink: var(--orange-ink); }
.tone-grey { --tone: var(--ink-4); --tone-wash: var(--mist); --tone-ink: var(--ink-2); }
.ask-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border-radius: 999px;
            background: var(--tone-wash, var(--mist)); color: var(--tone-ink, var(--ink-2)); font-size: 0.84rem; font-weight: 900; }
.ask-said { margin: 10px 0 0; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.ask-notes, .ask-lines { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ask-notes li, .ask-lines li { position: relative; padding-inline-start: 18px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.ask-notes li::before, .ask-lines li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.ask-lines li { color: var(--ink); }
.ask-service { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
               background: var(--good-wash); color: var(--good-ink); font-weight: 700; font-size: 0.92rem; }
.ask-service .i { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.ask-listbox { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ask-toggle { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px; padding: 0 14px; font-weight: 800; color: var(--accent-ink); text-align: start; }
.ask-toggle span { flex: 1 1 auto; }
.ask-toggle .i { width: 18px; height: 18px; flex: none; }
.ask-toggle .i.ask-turn { transform: rotate(90deg); transition: transform 0.15s ease; }
.ask-toggle .i.ask-turn.ask-up { transform: rotate(-90deg); }
.ask-list { margin: 0; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--mist); color: var(--ink);
            font: inherit; font-size: 0.92rem; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.ask-wait { margin: 0; padding: 10px 14px; color: var(--ink-3); font-size: 0.9rem; font-weight: 700; }
/* The checklist as a PDF to keep (8 Oct 2026): a quiet row under the list, the full width
   of its box, so it is found whether the list is open or shut. */
.ask-pdf { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 46px; padding: 0 14px; border-top: 1px solid var(--line); font-weight: 800; font-size: 0.92rem; color: var(--accent-ink); }
.ask-pdf:hover:not(:disabled) { background: var(--mist); }
.ask-pdf:disabled { color: var(--ink-3); cursor: default; }
.ask-pdf .i { width: 18px; height: 18px; flex: none; color: var(--orange); }
.ask-pdf .ask-spin { width: 16px; height: 16px; border-color: var(--line); border-top-color: var(--orange); }
.ask-wait.ask-busy { padding: 0 0 10px; animation: plan-breathe 1.2s ease-in-out infinite; }
.ask-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ask-acts > * { min-height: 42px; min-width: 0; white-space: normal; text-align: center; }
.ask-acts .btn-line, .ask-acts .btn-wa { padding: 0 14px; font-size: 0.9rem; }
.ask-acts .btn-wa.small { margin-top: 0; }
.ask-acts.ask-wide { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.ask-acts.ask-wide > * { min-height: 50px; justify-content: center; text-align: center; white-space: normal; padding-block: 6px; }
.ask-for { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; color: var(--ink-3); font-size: 0.82rem; font-weight: 700; }
.ask-for .i { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ask-group + .ask-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ask-group h3 { justify-content: space-between; }
.ask-group h3 b { font-size: 0.9rem; color: var(--ink-3); }
.ask-countries { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ask-countries button, .ask-countries span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 10px;
            border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 0.88rem; font-weight: 700; }
.ask-countries button:hover { border-color: var(--tone, var(--accent-line)); background: var(--tone-wash, var(--mist)); }
.ask-countries button i { font-style: normal; font-size: 0.76rem; color: var(--ink-3); font-weight: 800; }
.ask-countries button.ask-rest { border-style: dashed; color: var(--accent-ink); }
.ask-countries span { background: var(--mist); border-color: transparent; }
.ask-other { display: grid; gap: 6px; margin-top: 14px; font-size: 0.86rem; font-weight: 800; color: var(--ink-2); }
.ask-other select { min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); font: inherit; }
.ask-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 12px 14px; border-radius: 14px;
            background: var(--mist); color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; }
.ask-note .i { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--accent-ink); }
.ask-note.ask-warn { background: var(--orange-soft); color: var(--ink); }
.ask-note.ask-warn .i { color: var(--orange-ink); }
.ask-note.ask-quiet { background: transparent; padding: 2px 4px; color: var(--ink-3); font-size: 0.84rem; }
.ask-note.ask-quiet .i { color: var(--ink-3); }
.ask-card.ask-connect { border-color: var(--orange); background: linear-gradient(180deg, var(--orange-soft), var(--paper) 55%); }
.ask-quote { margin: 12px 0 0; padding: 10px 14px; border-inline-start: 3px solid var(--orange); border-radius: 0 10px 10px 0;
             background: var(--paper); color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
[dir="rtl"] .ask-quote { border-radius: 10px 0 0 10px; }
.ask-send { margin-top: 14px; }
.ask-or { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: 0.9rem; font-weight: 700; }
.ask-sa { display: inline-block; margin-top: 12px; padding: 8px 0; color: var(--accent-ink); font-size: 0.88rem; font-weight: 800; }
.ask-card.ask-advice { background: var(--mist); border-color: transparent; }
.ask-card.ask-all { padding-block: 18px; }
.ask-card.ask-facts .ask-lines { margin-top: 12px; }
.ask-card.ask-passport .ask-countries { margin-top: 14px; }
.ask-countries.ask-plain { gap: 8px; }
.ask-note.ask-info { border: 1px solid var(--line); }
.ask-holder { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; color: var(--ink-3); font-size: 0.86rem; font-weight: 700; }
.ask-holder .i { width: 16px; height: 16px; }
.ask-holder button { min-height: 36px; padding: 0 10px; color: var(--accent-ink); font-weight: 800; text-decoration: underline; }
.ask-more { display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; padding: 6px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--paper); }
.ask-more:focus-within { border-color: var(--accent-line); box-shadow: var(--ring); }
.ask-person { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
              color: var(--ink-2); font-size: 0.9rem; font-weight: 700; }
.ask-person a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--accent-ink); font-weight: 800; }
.ask-person a .i { width: 17px; height: 17px; }
@media (max-width: 719px) {
  .ask-sheet { padding: 22px 16px; }
  .ask-card { padding: 14px; }
  .ask-acts.ask-wide { grid-template-columns: minmax(0, 1fr); }
  .ask-acts > * { flex: 1 1 100%; justify-content: center; }
}
.pass > .plan:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* The fare rules in plain words — the AI's reading, marked as such, above the airline's own. */
.plain-ask { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 16px;
             border-radius: 12px; font-weight: 800; font-size: 0.9rem; color: var(--accent-ink);
             border: 1.5px dashed var(--accent-line); background: var(--mist); }
.plain-ask .i { width: 18px; height: 18px; color: var(--orange); }
.plain-ask.busy { opacity: 0.7; cursor: progress; }
.plain-rules { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--mist); }
.plain-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.plain-head .i { width: 18px; height: 18px; color: var(--orange); }
.plain-head b { color: var(--heading); }
.plain-head small { color: var(--ink-3); font-size: 0.78rem; font-weight: 600; }
.plain-rules ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; color: var(--ink-2); font-weight: 600; font-size: 0.92rem; }

/* ── the results page, 29 Sep 2026 ──────────────────────────────────────────────── */
/* A card flashes when a shared link brings the page to it, so the eye lands on the right one. */
.r-card.flash { animation: card-flash 1.4s ease; }
@keyframes card-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--orange), var(--shadow-card); } 100% { box-shadow: var(--shadow-card); } }
@media (prefers-reduced-motion: reduce) { .r-card.flash { animation: none; outline: 3px solid var(--orange); } }
/* The same airline's other times, folded under its first card. */
.fold { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); margin: -16px auto 18px; padding: 18px 14px 10px;
        border-radius: 0 0 16px 16px; font-weight: 800; font-size: 0.88rem; color: var(--accent-ink); background: var(--mist); }
.fold .i { width: 16px; height: 16px; }
.fold .amt { font-weight: 900; }
.r-share { margin-inline-start: 0; }
/* The price tip under the nearby days. */
/* The days and the two tools, in one block above the flights. The tools are buttons in the
   strip's own header row until one is opened; opened, it takes a row to itself. */
.days-block { position: relative; z-index: 2; margin: -58px 0 16px; padding: 14px 16px 12px; border-radius: 22px; background: var(--paper);
  box-shadow: 0 28px 50px -34px rgba(6, 20, 39, 0.55), var(--shadow-card); }
.shop-edit + .wrap .days-block { margin-top: 0; }
.days-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.days-head > #days-switch { margin-inline-end: auto; min-width: 0; }
.days-head > #days-switch:empty, .days-head > div:empty { display: none; }
.days-head .days-title { margin: 0 4px; }
.days-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--mist); max-width: 100%; }
.days-switch button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 11px;
                      font-weight: 800; font-size: 0.9rem; color: var(--ink-2); white-space: nowrap; }
.days-switch button .i { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.days-switch button small { font-weight: 700; font-size: 0.82rem; color: var(--ink-3); }
.days-switch button em { font-style: normal; font-weight: 900; font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; background: var(--good-wash); color: var(--good-ink); }
.days-switch button.on { background: var(--paper); color: var(--heading); box-shadow: var(--shadow-card); }
.days-switch button.on .i { color: var(--orange); }
.days-two .days-title { display: none; }
.days-head .follow-box, .days-head .near-box { margin: 0; }
.days-head .follow-box:not(.open):not(.sent), .days-head .near-box.closed { border-radius: 999px; }
.days-head .follow-open, .days-head .near-open { padding: 0 16px; min-height: 44px; border-radius: 999px; gap: 8px; font-size: 0.88rem; }
.days-head .follow-open small, .days-head .near-open em { display: none; }
.days-head .follow-open .i { width: 18px; height: 18px; }
.days-head .near-open span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.days-head .follow-box.open, .days-head .follow-box.sent, .days-head .near-box:not(.closed) { flex: 1 1 100%; order: 5; }
/* **Two offers a customer can take, not two labels** (Steven, 15 Oct 2026: *"these two seem
   faded … so 100% the customer won't see them"*). White pills on the white days card had no
   edge at all; a pale blue outline after them read as disabled and he hated it. They wear
   the deep blue of the chosen day and the *Return fares* tab — the design he brought — with
   white words and the icon in a white disc, so they are read as buttons. */
.days-head .follow-box:not(.open):not(.sent), .days-head .near-box.closed {
  background: var(--dusk-blue); box-shadow: var(--dusk-shadow);
  transition: filter 0.15s ease, transform 0.15s ease; }
.days-head .follow-box:not(.open):not(.sent):hover, .days-head .near-box.closed:hover { filter: brightness(1.1); transform: translateY(-1px); }
.days-head .follow-open, .days-head .near-open { color: #fff; padding-inline-start: 6px; }
.days-head .follow-open:hover, .days-head .near-open:hover { background: transparent; }
.days-head .follow-open .i, .days-head .near-open .i { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--paper);
  color: var(--orange); box-sizing: border-box; }
.days-head .follow-open b, .days-head .near-open b { color: #fff; }
.days-head .near-open span { color: rgba(255, 255, 255, 0.78); }
.days-block .usual { margin: 10px 0 0; padding: 0 6px; background: none; box-shadow: none; font-size: 0.88rem; }
.days-block .usual small { display: inline; margin: 0; }
.describe[hidden] { display: none; }
.fchip.describe-chip .i { color: var(--orange); }
@media (max-width: 719px) {
  .days-block { margin-top: -38px; padding: 12px 10px 10px; border-radius: 18px; }
  .shop-edit + .wrap .days-block { margin-top: 0; }
  .days-switch { display: flex; width: 100%; }
  .days-switch button { flex: 1 1 0; justify-content: center; padding: 0 8px; gap: 6px; flex-wrap: wrap; min-height: 46px; row-gap: 0; }
  .days-head .follow-box:not(.open):not(.sent), .days-head .near-box.closed { flex: 1 1 0; min-width: 0; }
  .days-head .follow-open, .days-head .near-open { width: 100%; justify-content: center; padding: 0 10px; min-height: 42px; }
  .days-head .follow-open span, .days-head .near-open span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* The heading takes its own line, so the two offers share the next one with their words —
     beside it they were squeezed to an icon and a cut-off letter. */
  .days-head > #days-switch { flex: 1 1 100%; }
  .days-head .follow-open, .days-head .near-open { padding-inline-start: 5px; gap: 6px; }
  .days-block .usual small { display: none; }
}
.days-wrap { margin-bottom: 0; }
.days-wrap:empty { margin-bottom: 0; }
.days-wrap .days-strip { margin-bottom: 0; }
.price-tip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 4px 0; font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }
.price-tip .i { width: 18px; height: 18px; color: var(--orange); flex: none; }
.price-tip.good .i { color: var(--good); }
.price-tip.good { color: var(--good-ink); }
.price-tip b .amt { font-weight: 900; color: var(--good-ink); }
.price-tip .link { margin-inline-start: 4px; }
.winner { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px;
          background: var(--good-wash); color: var(--good-ink); font-weight: 800; font-size: 0.9rem; }
.winner .i { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.results .r-card { position: relative; z-index: 1; }

/* The trip above the booking steps (29 Sep 2026). */
.book-trip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; padding: 6px 0 14px; color: #fff; }
.book-ends { display: flex; align-items: center; gap: 12px; }
.book-ends b { font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-weight: 900; }
.book-ends .i { width: 22px; height: 22px; color: #ffb689; }
.book-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; font-size: 0.86rem; }
.book-facts span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); }
.book-facts .i { width: 16px; height: 16px; opacity: 0.7; }

/* Manage my trip: a band with the promise, the form lifted onto it, and what can be done. */
.trip-hero { padding-bottom: 96px; }
.trip-hero h1 { margin: 6px 0 8px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 900; color: #fff; }
.trip-hero p { margin: 0; max-width: 620px; opacity: 0.86; font-weight: 600; }
.trip-hero .kicker { color: #ffb689; }
.trip-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.trip-route .i { width: 26px; height: 26px; color: #ffb689; flex: none; }
.trip-hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.trip-hero-facts span { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; font-weight: 700; font-size: 0.9rem; }
.trip-hero-facts .i { width: 16px; height: 16px; opacity: 0.85; }
.trip-lifted { margin-top: -72px; position: relative; }
.trip-lifted .trip-find { box-shadow: var(--shadow-pass); }
.trip-can { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.trip-can-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-card); }
.trip-can-card .i { width: 22px; height: 22px; color: var(--accent-ink); }
.trip-can-card b { color: var(--heading); }
.trip-can-card span { font-size: 0.86rem; color: var(--ink-3); flex: 1; }
.trip-can-card a { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.86rem; color: var(--wa); }
.trip-can-card a .i { width: 15px; height: 15px; color: currentColor; }
@media (max-width: 900px) { .trip-can { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .trip-can { grid-template-columns: minmax(0, 1fr); } .trip-hero { padding-bottom: 88px; } }
.trip-find h2 { margin: 0 0 6px; font-size: 1.45rem; font-weight: 900; color: var(--heading); }

/* ── the site's own drop lists and calendars ──────────────────────────────────────
   Every <select> and date box on these pages: the real control stays in the form, hidden,
   holding the value; a person sees and presses the face below. */
select.dl-real, input.dc-real {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0 !important;
  pointer-events: none !important; clip-path: inset(50%);
}
.dl-face {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; text-align: start;
  font: inherit; color: var(--ink); cursor: pointer; background: transparent; border: 0; padding: 0;
}
.dl-said { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-face .dl-caret { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform 0.15s ease; }
.dl-face[aria-expanded="true"] .dl-caret { transform: rotate(180deg); }
.dl-face.unset .dl-said { color: var(--ink-4); }
.dl-face:disabled { cursor: not-allowed; opacity: 0.55; }
/* In a boxed field: the box the other fields have. */
.fld .dl-face, .ch-row .dl-face, .dc-wrap {
  min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2);
  background: var(--paper); font-size: 0.96rem;
}
.ch-row .dl-face { min-height: 44px; padding: 0 10px; font-weight: 700; font-size: 0.9rem; }
.fld .dl-face:focus-visible, .ch-row .dl-face:focus-visible, .dc-wrap:focus-within,
.fld .dl-face[aria-expanded="true"], .ch-row .dl-face[aria-expanded="true"] {
  outline: 0; border-color: var(--accent-line); box-shadow: var(--ring);
}
.fld.bad .dl-face, .fld.bad .dc-wrap { border-color: var(--bad); background: var(--bad-soft); }
/* In a search cell: bare, large, the way the other cells read. */
.cell.field .dl-face { font-size: 1.05rem; font-weight: 800; color: var(--heading); }
.cell.field .dl-face.unset .dl-said { font-weight: 700; font-size: 1rem; }
.sort-more .dl-face { font-weight: 800; font-size: 0.9rem; color: var(--heading); padding: 2px 0; gap: 4px; }
.known .dl-face { font-weight: 800; color: var(--accent-ink); max-width: 220px; }
.known .dl-face .dl-said, .known .dl-face.unset .dl-said { color: var(--accent-ink); }
.known .dl-face .dl-caret { color: var(--accent-ink); }
.sort-more .dl-face:focus-visible, .known .dl-face:focus-visible, .cell.field .dl-face:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; border-radius: 6px; }

/* A date: typed as day/month/year, or chosen from the calendar beside it. */
.dc-wrap { display: flex; align-items: center; gap: 6px; padding-inline-end: 6px; }
.dc-face { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 0 !important; min-height: 44px !important; font: inherit; font-family: var(--font-board); letter-spacing: 0.02em;
  color: var(--ink); outline: 0; text-align: left; }
html[dir="rtl"] .dc-face { text-align: right; }
.dc-face::placeholder { color: var(--ink-4); font-family: var(--font); letter-spacing: 0; }
.dc-face.bad { color: var(--bad); }
.dc-open { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--accent-ink); }
.dc-open:hover { background: var(--mist); }
.dc-open .i { width: 20px; height: 20px; }

/* The open list or calendar — on the page itself, never under a header or clipped by a card. */
.dress-pop {
  position: fixed; z-index: 90; overflow: auto; background: var(--paper); color: var(--ink);
  border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(6, 20, 39, 0.45); padding: 8px; animation: rise 0.14s ease;
}
.dress-pop.as-sheet {
  inset: auto 0 0 0; width: auto !important; max-height: 78vh !important; border-radius: 22px 22px 0 0;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax rgba(6, 20, 39, 0.5);
  animation: slide-up 0.2s ease;
}
body.dress-locked { overflow: hidden; }
.dl-search { height: 44px; margin: 2px 2px 8px; position: sticky; top: 0; z-index: 1; }
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-list li[role="option"] {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px;
  padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 0.94rem; color: var(--ink);
}
.dl-list li.hot, .dl-list li[role="option"]:hover { background: var(--mist); }
.dl-list li.on { color: var(--accent-ink); font-weight: 800; }
.dl-list li.on .i { width: 18px; height: 18px; flex: none; color: var(--orange); }
.dl-list li.off { opacity: 0.45; cursor: not-allowed; }
.dl-group { padding: 12px 12px 4px; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.dl-none { padding: 14px 12px; color: var(--ink-3); font-weight: 700; }
.dc-pop { padding: 12px; }
.dc-pop .cal-head { margin-bottom: 8px; }
.dc-title { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 36px; border-radius: 10px;
  font-weight: 900; color: var(--heading); font-size: 0.98rem; }
.dc-title:not(:disabled):hover { background: var(--mist); }
.dc-title .i { width: 16px; height: 16px; color: var(--ink-3); }
.dc-title:disabled { opacity: 1; cursor: default; }
.dc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dc-grid button { height: 46px; border-radius: 12px; font-weight: 800; color: var(--ink); font-size: 0.92rem; }
.dc-grid button:hover:not(:disabled) { background: var(--mist); }
.dc-grid button.on { background: var(--fill); color: #fff; }
.dc-grid button:disabled { color: var(--ink-4); opacity: 0.5; }
.dc-said { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.8rem; font-weight: 700; color: var(--ink-3); text-align: center; }
.dress-pop.as-sheet .days button { font-size: 1rem; }
.dress-pop:not(.as-sheet) .dl-head { display: none; }
.dl-head { margin: 0 2px 10px; }
.dc-years { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 264px; overflow: auto; padding: 2px; }
.dc-pop .cal-nav[hidden] { display: none; }
/* Sixteen pixels or a phone zooms the page when the search is pressed. */
.dl-search .dl-q { font-size: max(16px, 1rem); }
/* Opened from a shared link: which flight was sent, or that it has gone. */
.shared-flight { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px;
                 background: var(--orange-soft); color: var(--heading); font-weight: 800; font-size: 0.9rem; }
.shared-flight .i { width: 18px; height: 18px; flex: none; color: var(--orange); }
.shared-flight span { flex: 1; min-width: 0; }
.shared-flight.gone { background: var(--bad-soft); }
.shared-flight.gone .i { color: var(--bad); }
/* The next step on the price card, which stays in view (on a phone the bar at the foot has it). */
.summary .sum-next { width: 100%; justify-content: center; }
@media (max-width: 900px) { .summary .sum-next { display: none; } }
/* The last button waits on the promise above it: muted until the box is ticked, and the box
   itself marked when somebody presses on without it. */
.review-go.agree-first { filter: saturate(0.35); opacity: 0.7; box-shadow: none; }
.agree-hint { margin: 6px 0 0; font-size: 0.84rem; font-weight: 700; color: var(--ink-3); text-align: end; }
.agree.bad { box-shadow: 0 0 0 2px var(--bad); border-radius: 12px; background: var(--bad-soft); padding: 8px 10px; }
/* Sharing a flight: the card it will send, and the ways to send it. */
.share-sheet { width: min(460px, calc(100vw - 28px)); padding: 28px; }
.share-sheet h2 { margin-top: 0; }
.share-preview { border-radius: 18px; overflow: hidden; background: var(--navy-900); aspect-ratio: 1080 / 1350; max-height: 52vh; margin: 0 auto 16px; display: grid; place-items: center; }
.share-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.share-drawing { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 0.92rem; padding: 20px; text-align: center; }
.share-drawing .i { width: 34px; height: 34px; color: var(--orange); animation: fl-breathe-share 1.2s ease-in-out infinite alternate; }
@keyframes fl-breathe-share { from { opacity: 0.4; } }
.share-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.share-acts > * { justify-content: center; min-height: 48px; min-width: 0; width: 100%; padding-inline: 12px; }
.share-acts > :only-child, .share-acts > .btn-orange:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
@media (max-width: 719px) { .share-sheet { padding: 22px 18px; } .share-preview { max-height: 46vh; } }
@media (prefers-reduced-motion: reduce) { .share-drawing .i { animation: none; } }

/* `/flights` with no search in the address: the search card is the page, lifted onto the
   band as the trip page lifts its form. */
.shop-start { position: relative; margin-top: -64px; padding-bottom: 64px; }
.shop-start .shop-edit { margin-top: 0; }

/* A search that could not be asked: the sentence alone, at a width it reads at. */
.shop-refused { max-width: 720px; padding-top: 28px; padding-bottom: 56px; }

/* A 360px phone: the three trip choices in Arabic are 9px wider than the row. */
@media (max-width: 380px) { .trip-row > .seg button { padding-inline: 3px; font-size: 0.78rem; } }

/* ── Booking tools (4 Oct 2026): the days strip's arrows, the price alert, airports
   nearby, help choosing a fare, entry rules on the traveller, special requests, seats
   chosen together, a saved flight, a group request — and a window that says it is working. */
.days-foot { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin: 10px 4px 0; }
.days-foot .price-tip { margin: 0; }
.price-tip.soon { color: var(--ink-3); }
.price-tip.soon .i { color: var(--ink-3); animation: plan-breathe 1.2s ease-in-out infinite; }

.follow-box { margin: 0 0 18px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-card); }
.card + .follow-box, .book-main .follow-box { margin: 0; }
.follow-open { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 16px; text-align: start; }
.follow-open:hover { background: var(--mist); }
.follow-open .i { width: 22px; height: 22px; color: var(--orange); flex: none; }
.follow-open span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.follow-open b { color: var(--heading); font-weight: 900; }
.follow-open small { color: var(--ink-3); font-size: 0.84rem; font-weight: 600; }
.follow-form { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.follow-form label { display: flex; align-items: center; gap: 8px; color: var(--heading); }
.follow-form label .i { width: 20px; height: 20px; color: var(--orange); }
.follow-form p { margin: 0; }
.follow-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.follow-row input[type="email"] { flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); font: inherit; }
.follow-row input[type="email"]:focus { outline: none; border-color: var(--accent-line); box-shadow: var(--ring); }
.follow-box.sent { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: var(--good-wash); color: var(--good-ink); font-weight: 700; font-size: 0.92rem; box-shadow: none; }
.follow-box.sent .i { width: 20px; height: 20px; color: var(--good); flex: none; margin-top: 1px; }

.near-box { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-card); }
.near-box h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 1rem; font-weight: 900; color: var(--heading); }
.near-box h3 .i { width: 18px; height: 18px; color: var(--orange); }
.near-box > p { margin: 0 0 8px; }
.near-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.near-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.near-name { display: inline-flex; align-items: center; gap: 6px; color: var(--heading); }
.near-name .i { width: 16px; height: 16px; color: var(--ink-3); }
.near-name small { color: var(--ink-3); font-weight: 800; }
.near-said { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--ink-2); font-weight: 600; }
.near-said .amt { font-weight: 900; }
.near-save { font-style: normal; font-weight: 900; padding: 2px 10px; border-radius: 999px; background: var(--good-wash); color: var(--good-ink); }
.near-acts { display: inline-flex; align-items: center; gap: 14px; margin-inline-start: auto; }
.near-acts .link { font-size: 0.88rem; min-height: 32px; display: inline-flex; align-items: center; }

.fare-help { padding: 14px 18px 0; background: var(--mist); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.fare-help + .fares { border-top: 0; }
.fare-help-q { display: inline-flex; align-items: center; gap: 8px; color: var(--heading); font-size: 0.92rem; }
.fare-help-q .i { width: 18px; height: 18px; color: var(--orange); }
.fare-help-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fare-help-chips button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink-2); font-weight: 800; font-size: 0.86rem; }
.fare-help-chips button:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.fare-help-chips button.on { background: var(--fill); border-color: var(--fill); color: #fff; }
.fare-help-said { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--paper); color: var(--ink-2); font-size: 0.9rem; font-weight: 700; }
.fare-help-said .i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--good); }
.fare.suits { border-color: var(--good); box-shadow: 0 0 0 2px var(--good-wash); position: relative; }
.fare-suits { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--good-wash); color: var(--good-ink); font-size: 0.78rem; font-weight: 900; }

.book-ask { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1.5px solid currentColor; font-weight: 800; font-size: 0.86rem; color: inherit; opacity: 0.95; }
.book-ask .i { width: 16px; height: 16px; }
.book-ask:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }

.entry-line { margin: 4px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--mist); }
.entry-line.none { display: none; }
.entry-line h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 0.92rem; font-weight: 900; color: var(--heading); }
.entry-line h4 .i { width: 18px; height: 18px; color: var(--accent-ink); }
.entry-line ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.entry-line li { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; }
.entry-line li p { margin: 0; flex: 1 1 260px; min-width: 0; font-size: 0.88rem; color: var(--ink-2); font-weight: 600; }
.entry-line li b { color: var(--heading); }
.entry-foot { margin: 8px 0 0; font-size: 0.82rem; color: var(--ink-3); }
.entry-expiry { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--orange-soft); color: var(--ink-2); font-size: 0.88rem; font-weight: 700; }
.entry-expiry .i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--orange-ink); }

.wishes { margin-top: 12px; border: 1.5px solid var(--line); border-radius: 14px; }
.wishes summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 800; color: var(--heading); min-height: 44px; }
.wishes summary::-webkit-details-marker { display: none; }
.wishes summary .i { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
.wishes summary small { margin-inline-start: auto; color: var(--ink-3); font-weight: 600; font-size: 0.82rem; text-align: end; }
.wishes[open] summary { border-bottom: 1px solid var(--line); }
.wishes-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.wishes-body fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; }
.wishes-body legend { padding: 0; margin-bottom: 8px; font-size: 0.84rem; font-weight: 800; color: var(--ink-2); }
.wishes-body p { margin: 0; }
/* Where the meal is chosen instead — a quiet line, not a warning. */
.wish-next { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; color: var(--ink-3); }
.wish-next svg { flex: none; inline-size: 16px; block-size: 16px; margin-block-start: 2px; color: var(--accent-ink); }
.wish { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); cursor: pointer; position: relative; }
.wish input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.wish input:checked + .fl-box { background: var(--fill); border-color: var(--fill); }
.wish input:checked + .fl-box::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.wish input:focus-visible + .fl-box { box-shadow: var(--ring); }
.wish-said { background: var(--mist); }

.seat-suggest { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.seat-suggest .btn-line .i { width: 16px; height: 16px; }
.seat-said { font-size: 0.88rem; font-weight: 700; }
.seat-said.ok { color: var(--good-ink); }
.seat-said.no { color: var(--bad); }

.ask-loading { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 44px 12px 0; border-radius: 12px; background: var(--orange-soft); color: var(--heading); font-size: 0.92rem; }
[dir="rtl"] .ask-loading { margin: 0 0 12px 44px; }
.ask-loading .progress-bar { flex: 1 1 60px; background: var(--paper); }
.ask-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--paper); border-top-color: var(--orange); animation: spin 0.8s linear infinite; }
.ask-sheet.is-busy .ask-cards, .ask-sheet.is-busy .ask-chips, .ask-sheet.is-busy .ask-holder { opacity: 0.6; pointer-events: none; transition: opacity 0.15s ease; }
.ask-pressed { border-color: var(--orange) !important; color: var(--heading) !important; cursor: progress; }
.ask-pressed::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-inline-start: 8px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--orange); animation: spin 0.8s linear infinite; vertical-align: -1px; flex: none; }
@media (prefers-reduced-motion: reduce) { .ask-spin, .ask-pressed::after { animation-duration: 2.4s; } }

.ask-fares { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ask-fares a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink-2); }
.ask-fares a:hover { border-color: var(--accent-line); background: var(--mist); }
.ask-fare-to { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.ask-fare-to .i { width: 16px; height: 16px; color: var(--accent-ink); }
.ask-fare-to b { color: var(--heading); }
.ask-fare-to small { color: var(--ink-3); font-weight: 600; flex-basis: 100%; }
.ask-fare-from { flex: none; font-size: 0.88rem; }
.ask-fare-from b { color: var(--good-ink); font-weight: 900; }

.group-link { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--mist); color: var(--accent-ink); font-weight: 800; font-size: 0.86rem; text-align: start; min-height: 40px; }
.group-link .i { width: 18px; height: 18px; flex: none; }
.group-link:hover { text-decoration: underline; }
.group-sheet .form-grid { margin-bottom: 14px; }
.group-form { display: flex; flex-direction: column; }
.group-form .btn-orange { align-self: flex-start; }

@media (max-width: 720px) {
  .near-acts { margin-inline-start: 0; }
  .wishes summary small { display: none; }
  .follow-row .btn-orange { flex: 1 1 auto; }
  .group-form .btn-orange { align-self: stretch; }
}
.near-box.closed { padding: 0; }
.near-open { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: 16px; text-align: start; color: var(--ink-2); font-size: 0.92rem; }
.near-open:hover { background: var(--mist); }
.near-open .i { width: 18px; height: 18px; color: var(--orange); flex: none; }
.near-open span { min-width: 0; }
.near-open b { color: var(--heading); margin-inline-end: 6px; }
.near-open em { font-style: normal; margin-inline-start: auto; color: var(--accent-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.days-foot .price-tip > span { flex: 1 1 200px; min-width: 0; }
.day-wait { animation: plan-breathe 1.2s ease-in-out infinite; }
/* A return's two strips (8 Oct 2026): the day out and the day back, each under a line
   saying which end it moves and where the other end stays. */
.days-one + .days-one { margin-top: 16px; }
.days-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 4px 8px; font-size: 0.95rem; font-weight: 900; color: var(--heading); }
.days-title .i { width: 17px; height: 17px; color: var(--orange); flex: none; align-self: center; }
.days-title small { font-size: 0.84rem; font-weight: 700; color: var(--ink-3); }

/* ── Tools of 8 Oct 2026: is this a good price, a price waited for, compare, continue where
   you left off, and the microphone on the ask bar. */
.usual { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-card); font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); }
.usual .i { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--ink-3); }
.usual b { color: var(--heading); margin-inline-end: 4px; }
.usual small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--ink-3); }
.usual-low .i, .usual-low b { color: var(--good-ink); }
.usual-high .i { color: var(--orange); }

.follow-target { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }
.follow-target-box { display: inline-flex; align-items: center; gap: 8px; }
.follow-target-box input { width: 108px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-weight: 800; }
.follow-target-box input:focus { outline: 0; border-color: var(--accent-line); box-shadow: var(--ring); }
.follow-target-box i { font-style: normal; font-size: 0.84rem; color: var(--ink-3); }

.r-compare.on { color: var(--good-ink); }
.compare-bar { position: fixed; z-index: 40; inset-inline: 0; bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 10px max(16px, calc((100vw - 1180px) / 2)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -10px 28px -18px rgba(6, 20, 39, 0.45); }
/* The bar stands over the foot of the page: the list ends above it, not under it. */
.shop-wrap:has(+ .compare-bar) { padding-bottom: 120px; }
.compare-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.compare-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--mist); font-size: 0.9rem; color: var(--ink); }
.compare-chip .al-plate { transform: scale(0.8); transform-origin: center; }
.compare-chip button { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--ink-3); }
.compare-chip button:hover { background: var(--paper); color: var(--ink); }
.compare-chip button .i { width: 14px; height: 14px; }
.compare-said { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--ink-3); }
.compare-acts { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
.compare-sheet { width: min(1040px, calc(100vw - 28px)); }
.compare-sheet h2 { margin-top: 0; }
.cmp-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 14px; }
.cmp-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.cmp-col header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cmp-col header b { display: block; color: var(--heading); overflow-wrap: anywhere; }
.cmp-col header small { color: var(--ink-3); font-size: 0.84rem; }
.cmp-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; margin: 0; }
.cmp-tags em { font-style: normal; font-size: 0.78rem; font-weight: 900; padding: 3px 10px; border-radius: 999px; background: var(--good-wash); color: var(--good-ink); }
.cmp-j { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--mist); }
.cmp-j span { font-size: 0.8rem; font-weight: 800; color: var(--ink-3); }
.cmp-j b { font-size: 1.05rem; color: var(--heading); }
.cmp-j small { font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; }
.cmp-later { margin: 0; font-size: 0.86rem; color: var(--ink-3); }
.cmp-col .facts { margin: 0; }
.cmp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.cmp-price small { color: var(--ink-3); font-size: 0.84rem; }
@media (max-width: 719px) {
  /* Four things in a card's foot do not fit a phone on one line: they wrap as whole words. */
  .r-foot { flex-wrap: wrap; gap: 2px 14px; }
  .r-foot .r-link { white-space: nowrap; }
}
@media (max-width: 859px) {
  .cmp-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 82vw); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .cmp-col { scroll-snap-align: start; }
  .compare-acts { margin-inline-start: 0; width: 100%; justify-content: space-between; }
  .compare-bar { padding: 10px 16px; }
}

.resume { display: flex; align-items: stretch; gap: 0; margin-top: 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11, 31, 58, 0.05); overflow: hidden; }
.resume-go { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.resume-go:hover { background: var(--mist); }
.resume-said { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 800; color: var(--orange); }
.resume-said .i { width: 15px; height: 15px; }
.resume-go b { font-size: 1.02rem; color: var(--heading); }
.resume-go small { color: var(--ink-2); font-size: 0.88rem; }
.resume-go em { font-style: normal; font-size: 0.84rem; color: var(--ink-3); }
.resume-x { display: grid; place-items: center; flex: none; width: 46px; color: var(--ink-3); border-inline-start: 1px solid var(--line); }
.resume-x:hover { background: var(--mist); color: var(--ink); }
.resume-x .i { width: 16px; height: 16px; }

.ask-mic { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--accent-ink); }
.ask-mic:hover { background: var(--mist); }
.ask-mic .i { width: 20px; height: 20px; }
/* While it listens the ring follows the voice (`--loud`, set from the page as it hears), so
   somebody speaking sees that they are heard before a word is written. */
.ask-mic.on { background: var(--orange); color: #fff;
              box-shadow: 0 0 0 calc(2px + var(--loud, 0) * 9px) color-mix(in srgb, var(--orange) 30%, transparent);
              transition: box-shadow .09s linear; }
.ask-mic.busy { opacity: .55; cursor: progress; }

/* The trip page's tools (8 Oct 2026): a row of four, each a line of what it gives. */
.trip-tool-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.trip-tool { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-align: start; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.trip-tool:hover:not(:disabled) { background: var(--mist); border-color: var(--accent-line); }
.trip-tool:disabled { cursor: progress; opacity: 0.75; }
.trip-tool.on { border-color: var(--accent-line); background: var(--mist); }
.trip-tool .i { width: 22px; height: 22px; flex: none; color: var(--orange); }
.trip-tool .ask-spin { width: 18px; height: 18px; border-color: var(--line); border-top-color: var(--orange); }
.trip-tool b { display: block; color: var(--heading); font-size: 0.95rem; }
.trip-tool small { display: block; color: var(--ink-3); font-size: 0.82rem; line-height: 1.45; }
.trip-tools .notice { margin-top: 12px; }
.trip-remind { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.trip-remind label { display: block; margin-bottom: 8px; color: var(--heading); }
.trip-q .ask-chips { margin-top: 0; }
.trip-q-row { margin-top: 12px; }
.trip-q-row input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; }
.trip-q-row input:focus { outline: 0; border-color: var(--accent-line); box-shadow: var(--ring); }
.trip-answer { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--mist); }
.trip-asked { margin: 0 0 8px; font-weight: 800; color: var(--heading); }
.trip-answer ul { margin: 0 0 10px; padding-inline-start: 20px; line-height: 1.75; color: var(--ink); }
.trip-answer li + li { margin-top: 4px; }

/* What they want from the hotel (8 Oct 2026): one line under the hotel form, and its chips. */
.wish-box { margin-top: 14px; padding: 12px 14px; border-radius: 16px; border: 1px dashed var(--line-2); }
.wish-box label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--heading); font-size: 0.92rem; }
.wish-box label .i { width: 17px; height: 17px; color: var(--orange); flex: none; }
.wish-box label small { color: var(--ink-3); font-weight: 600; }
.wish-row { display: flex; gap: 8px; }
.wish-row input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; }
.wish-row input:focus { outline: 0; border-color: var(--accent-line); box-shadow: var(--ring); }
.wish-row .btn-line { min-height: 44px; flex: none; }
.wish-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wish-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--mist); color: var(--ink); font-size: 0.86rem; font-weight: 700; }
[dir="rtl"] .wish-chip { padding: 3px 12px 3px 4px; }
.wish-chip button { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-3); }
.wish-chip button:hover { background: var(--paper); color: var(--ink); }
.wish-chip button .i { width: 13px; height: 13px; }
.wish-read { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0; font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.wish-read .i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--good); }

/* A hotel with the flight, on the review step. */
.stay-open, .stay-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; color: var(--ink); }
.stay-open { padding: 16px 20px; border-radius: inherit; }
.stay-open:hover, .stay-pick:hover { background: var(--mist); }
.stay-open .i, .stay-pick .i, .stay-picked .i { width: 22px; height: 22px; flex: none; color: var(--orange); }
.stay-open b, .stay-pick b, .stay-picked b { display: block; color: var(--heading); }
.stay-open small, .stay-pick small, .stay-picked small { display: block; color: var(--ink-3); font-size: 0.84rem; }
/* The offer of a hotel: a pale blue ground with a dashed edge, so it reads as something that
   can be added rather than as one more section of the form — and no warm colour, because
   nothing here has to be done. */
.stay-card.closed { padding: 0; background: color-mix(in srgb, var(--accent-line) 7%, var(--paper)); box-shadow: none; border: 1.5px dashed color-mix(in srgb, var(--accent-line) 45%, transparent); }
.stay-card.closed .stay-open:hover { background: color-mix(in srgb, var(--accent-line) 6%, transparent); }
.stay-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--stub); }
.stay-open .stay-ico .i { color: var(--stub-ink); }
.stay-words { min-width: 0; }
.stay-open small.stay-when { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font-weight: 700; font-size: 0.8rem; }
.stay-open .stay-when .i { width: 14px; height: 14px; color: var(--accent-ink); }
.stay-open em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; margin-inline-start: auto; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--accent-line); font-weight: 800; font-size: 0.9rem; color: var(--accent-ink); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.stay-open em .i { width: 15px; height: 15px; color: inherit; }
.stay-open:hover em { background: var(--fill); border-color: var(--fill); color: #fff; }
@media (max-width: 560px) {
  .stay-open { flex-wrap: wrap; }
  .stay-words { flex: 1 1 0; }
  .stay-open em { flex: 1 1 100%; justify-content: center; margin: 4px 0 0; }
}
.stay-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-top: 12px; }
.stay-pick { min-height: 60px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); }
.stay-pick.any { border-style: dashed; }
.stay-picked { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.stay-wait { margin: 0; padding: 12px; color: var(--ink-3); font-weight: 700; animation: plan-breathe 1.2s ease-in-out infinite; }

/* On a telephone the fares come first: the tip is a smaller line, and the sentence saying
   one flight wins on every count gives way to that flight itself, which wears the badge. */
@media (max-width: 719px) {
  .price-tip { font-size: 0.85rem; gap: 4px 8px; }
  .winner { display: none; }
}

/* ── where a booking has got to ───────────────────────────────────────────────
   Four stops on one line. What is done is lit in green, where somebody stands now in
   orange, what is ahead is quiet. The line between two stops is lit once the first is done. */
.tracker { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 4px 0 22px; padding: 0; }
.tracker li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 6px; }
.tracker li + li::before { content: ''; position: absolute; top: 19px; inset-inline-end: 50%; width: 100%; height: 3px; border-radius: 3px; background: var(--line-2); }
.tracker li.tr-done + li::before { background: var(--good); }
.tr-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2); color: var(--ink-3); }
.tr-dot .i { width: 18px; height: 18px; }
.tr-done .tr-dot { background: var(--good); border-color: var(--good); color: #fff; }
.tr-now .tr-dot { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 0 5px var(--orange-soft); }
.tr-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-words b { font-size: 0.92rem; font-weight: 900; color: var(--heading); }
.tr-words small { font-size: 0.82rem; font-weight: 700; color: var(--ink-3); overflow-wrap: anywhere; }
.tr-words small b { font-size: inherit; color: var(--orange-ink); }
.tr-next .tr-words b { color: var(--ink-3); }
/* On a wide screen a flight reads across, as it does on its ticket: where it leaves, the
   flight itself, where it lands. On a phone it stays a line down the side. */
@media (min-width: 900px) {
  .leg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 1.15fr) minmax(0, 1fr); align-items: center; gap: 8px; padding: 16px 20px; }
  .leg.has-mark { grid-template-columns: 96px minmax(0, 1fr) minmax(170px, 1.1fr) minmax(0, 1fr); gap: 8px 14px; }
  .leg.has-mark .leg-mark { margin: 0; padding-inline-end: 14px; border-inline-end: 1px solid var(--line); align-self: stretch; }
  .leg-pt { display: flex; flex-direction: column; gap: 4px; }
  .leg-pt:last-child { align-items: flex-end; text-align: end; }
  .leg-dot { display: none; }
  .leg-when { flex-direction: row; align-items: baseline; gap: 8px; }
  .leg-when b { font-size: 1.55rem; line-height: 1.1; }
  .leg-where b { font-size: 0.98rem; }
  .leg-flight, [dir="rtl"] .leg-flight { position: relative; flex-direction: column; gap: 4px; margin: 0; padding: 0 10px; border: 0; text-align: center; }
  .leg-flight::before { content: ''; align-self: stretch; border-top: 2px dashed var(--line-2); margin-bottom: 8px; }
}
@media (max-width: 719px) {
  /* The question box on a phone: the mark at its start repeated the one on the Ask button and
     left the hint too little room, so «اسألنا عن أي شيء…» broke over two lines with the
     second cut off (12 Oct 2026). The box keeps the room for the words. */
  .ask-lead { display: none; }
  .ask-field { gap: 4px; }
  .ask-field textarea { padding-inline: 10px 4px; }
  .ask-field .plan-go { padding: 0 12px; }
  /* On a telephone the four stops stand one under another, the line down their side. */
  .tracker { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tracker li { flex-direction: row; align-items: center; text-align: start; gap: 12px; padding: 0; }
  .tracker li + li::before { top: -16px; inset-inline-end: auto; inset-inline-start: 18px; width: 3px; height: 18px; }
  .tr-dot { width: 38px; height: 38px; flex: none; }
  /* The booking header's chips, smaller on a phone: they were pushing the first box down. */
  .book-facts { font-size: 0.78rem; gap: 5px; }
  .book-facts span { min-height: 28px; padding: 0 9px; }
  .book-trip { gap: 6px 14px; padding-bottom: 8px; }
  .next-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ref-hint { grid-template-columns: minmax(0, 1fr); }
  .ref-sample { justify-self: start; }
}