/* 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);
  --glass: rgba(255, 255, 255, 0.94);
  --pass-top: #fffaf6;
  --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;
    --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; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
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); }
.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 ───────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: clamp(600px, 84vh, 800px);
  background: var(--navy-900); color: #fff; overflow: hidden; isolation: isolate;
}
.hero-art, .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art img { object-fit: cover; object-position: 70% 40%; }
[dir="rtl"] .hero-art img { object-position: 30% 40%; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 20, 39, 0.82) 0%, rgba(6, 20, 39, 0.5) 38%, rgba(6, 20, 39, 0) 68%),
    linear-gradient(180deg, rgba(6, 20, 39, 0.55) 0%, rgba(6, 20, 39, 0) 22%, rgba(6, 20, 39, 0) 60%, rgba(6, 20, 39, 0.55) 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.82) 0%, rgba(6, 20, 39, 0.5) 38%, rgba(6, 20, 39, 0) 68%),
    linear-gradient(180deg, rgba(6, 20, 39, 0.55) 0%, rgba(6, 20, 39, 0) 22%, rgba(6, 20, 39, 0) 60%, rgba(6, 20, 39, 0.55) 100%);
}
.hero-copy { position: relative; padding-top: clamp(128px, 17vh, 164px); padding-bottom: 200px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86);
}
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: 18px 0 18px; max-width: 24ch; font-size: clamp(2.5rem, 4.6vw, 3.8rem); text-wrap: balance;
  line-height: 1.04; font-weight: 900; letter-spacing: -0.025em;
  text-shadow: 0 2px 30px rgba(6, 20, 39, 0.35);
}
html[lang="ar"] .hero h1 { max-width: 22ch; line-height: 1.3; letter-spacing: 0; font-weight: 800; }
.hero h1 span { color: #ffb689; }
.lede { max-width: 46ch; margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: rgba(255, 255, 255, 0.86); }
.hero-marks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-marks span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 700; font-size: 0.86rem; backdrop-filter: blur(6px);
}
.hero-marks .i { width: 17px; height: 17px; color: #ffb689; }

/* ── the pass: the search card ──────────────────────────────────────────────── */
.search-slot { position: relative; z-index: 5; margin-top: -170px; }
.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;
}
.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 ────────────────────────────────────────────────────────────── */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
/* 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: 14px; padding: 18px 18px 14px; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-card); }
.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 ──────────────────────────────────────────────────────────────────── */
.band { padding: 96px 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; }
.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; }

.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px;
  border-radius: 20px; background: var(--paper); text-align: start; border: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -24px rgba(11, 31, 58, 0.35); border-color: transparent; }
.service-icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--fill); color: #fff; margin-bottom: 8px; transition: background 0.2s ease; }
.service:hover .service-icon { background: var(--orange); }
.service-icon .i { width: 24px; height: 24px; }
.service b { font-size: 1.08rem; color: var(--heading); }
.service > span:not(.service-icon):not(.service-go) { color: var(--ink-3); font-size: 0.92rem; }
.service-go { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; color: var(--orange); font-weight: 800; font-size: 0.88rem; }
.service-go .i { width: 16px; height: 16px; transition: transform 0.2s ease; }
.service:hover .service-go .i { transform: translateX(3px); }
[dir="rtl"] .service:hover .service-go .i { transform: scaleX(-1) translateX(3px); }

.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.place { position: relative; aspect-ratio: 4 / 5; 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) 38%, rgba(6, 20, 39, 0.88) 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-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; }
.how-no { position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); font-weight: 900; font-size: 1.1rem; font-family: var(--font-board); }
.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 12px 12px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(170deg, var(--navy-800), var(--navy-950)); }
.mock-screen img { width: 104px; height: auto; margin: 0 auto 4px; }
.mock-glow { position: absolute; inset: auto -20% -30% -20%; height: 60%; background: radial-gradient(closest-side, rgba(242, 101, 34, 0.55), transparent); }
.mock-search { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.95); }
.mock-search i { display: block; height: 8px; border-radius: 4px; background: var(--mist); }
.mock-search i + i { width: 62%; }
.mock-pass { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: #fff; }
.mock-pass b { font-family: var(--font-board); font-size: 0.85rem; color: var(--navy-900); }
.mock-pass .i { width: 16px; height: 16px; color: var(--orange); }
[dir="rtl"] .mock-pass .i { transform: scaleX(-1); }
.mock-go { height: 26px; border-radius: 9px; background: var(--orange); }
#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; }
.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: 26px; }
.signin-sheet h2 { font-size: 2rem; }
.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; }
.with-eye { position: relative; display: block; }
.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); }
.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: 96px; }
.manage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.manage-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-card); border: 1px solid transparent; transition: transform 0.18s ease, border-color 0.18s ease; }
.manage-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.manage-card:first-child { background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); color: rgba(255, 255, 255, 0.78); }
.manage-card:first-child b { color: #fff; }
.manage-card:first-child .manage-ico { background: rgba(255, 255, 255, 0.1); color: #ffb689; }
.manage-card:first-child em { color: #ffb689; }
.manage-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mist); color: var(--accent-ink); margin-bottom: 8px; }
.manage-ico .i { width: 22px; height: 22px; }
.manage-card b { font-size: 1.05rem; color: var(--heading); }
.manage-card > span:not(.manage-ico) { font-size: 0.9rem; color: var(--ink-3); flex: 1; }
.manage-card em { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-style: normal; font-weight: 800; font-size: 0.86rem; color: var(--wa); }
.manage-card:first-child em .i, .manage-card em .i { width: 16px; height: 16px; }

/* ── airlines — the marks on white plates, as on every ticket ─────────────── */
.carriers { padding-top: 96px; }
.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;
  background: radial-gradient(120% 90% at 85% 120%, rgba(242, 101, 34, 0.28), transparent 60%),
              linear-gradient(165deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
}
[dir="rtl"] .doc-hero { background: radial-gradient(120% 90% at 15% 120%, rgba(242, 101, 34, 0.28), transparent 60%),
              linear-gradient(195deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%); }
.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)); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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; }
  .hero { min-height: 0; }
  .hero-copy { padding-top: 104px; padding-bottom: 190px; }
  .hero h1 { font-size: 2.35rem; }
  html[lang="ar"] .hero h1 { font-size: 1.72rem; }
  .search-slot { margin-top: -160px; }
  .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)); gap: 10px; }
  .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); }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .service { padding: 16px; gap: 4px; border-radius: 16px; }
  .service-icon { width: 40px; height: 40px; margin-bottom: 4px; }
  .service b { font-size: 0.98rem; }
  .service > span:not(.service-icon):not(.service-go) { display: none; }
  .band { padding: 64px 0; }
  .how-steps { grid-template-columns: minmax(0, 1fr); }
  .how-steps li::before { display: none; }
  .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; }
  .app .store { width: auto; }
  .app-qr { display: none; }
  .app .stores { flex-direction: row; flex-wrap: wrap; }
  .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; }
  .manage-grid { grid-template-columns: minmax(0, 1fr); }
  /* 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 { color: #fff; padding: 104px 0 30px;
  background: radial-gradient(90% 140% at 90% 130%, rgba(242, 101, 34, 0.26), transparent 60%),
              linear-gradient(165deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%); }
[dir="rtl"] .trip-band { background: radial-gradient(90% 140% at 10% 130%, rgba(242, 101, 34, 0.26), transparent 60%),
              linear-gradient(195deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%); }
.trip-band-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.trip-ends { display: flex; align-items: center; gap: 18px; }
.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 { font-family: var(--font-board); font-weight: 600; opacity: 0.7; letter-spacing: 0.08em; }
.trip-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; }
.trip-mid .i { width: 26px; height: 26px; color: #ffb689; }
.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-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 700; font-size: 0.93rem; opacity: 0.9; }
.trip-facts span { display: inline-flex; align-items: center; gap: 7px; }
.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: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); font-weight: 800; color: #fff; }
.trip-change:hover { background: rgba(255, 255, 255, 0.2); }
.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; }
.shop-side { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow: auto; border-radius: 20px; scrollbar-width: thin; }
.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). */
.days-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-card); }
.day-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 13px; min-height: 64px; transition: background 0.15s ease; position: relative; }
.day-cell:hover:not(:disabled) { background: var(--mist); }
.day-cell small { font-size: 0.78rem; font-weight: 700; color: var(--ink-3); }
.day-cell b .amt { font-size: 0.92rem; }
.day-cell.on { background: var(--fill); }
.day-cell.on small, .day-cell.on .amt, .day-cell.on .amt small { color: #fff; }
.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; }
.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: 26px; height: 18px; border-radius: 4px; 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); }
.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); }
.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; }
@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 16px 16px; }
.fl-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fl-head b { font-size: 1.05rem; font-weight: 900; color: var(--heading); }
.fl-head span { font-size: 0.82rem; color: var(--ink-3); font-weight: 700; }
.fl-head button { margin-inline-start: auto; font-weight: 800; color: var(--accent-ink); font-size: 0.86rem; }
.fl-group { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fl-group:last-of-type { border-bottom: 0; }
.fl-group h4 { margin: 0 0 8px; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
html[lang="ar"] .fl-group h4 { letter-spacing: 0; text-transform: none; font-size: 0.86rem; }
.fl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; border-radius: 10px; padding: 0 4px; }
.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: 30px; height: 22px; flex: none; }
/* 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.76rem; 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. */
.al-plate { display: inline-grid; place-items: center; width: 52px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid var(--line); padding: 3px 5px; 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: space-between; gap: 12px; padding: 14px 18px 0; }
.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); }
.r-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; padding: 10px 18px 12px; align-items: center; }
.r-journeys { display: flex; flex-direction: column; gap: 10px; }
.j-head { display: block; font-size: 0.76rem; font-weight: 800; color: var(--ink-3); margin-bottom: 2px; }
.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.35rem; color: var(--heading); line-height: 1.1; }
.j-end b sup { font-size: max(11px, 0.62rem); color: var(--orange-ink); margin-inline-start: 2px; }
.j-end span { font-family: var(--font-board); font-size: 0.8rem; color: var(--ink-3); font-weight: 600; }
.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(--orange-ink); }
.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(--orange); box-shadow: 0 0 0 2px var(--paper); }
.r-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: end; }
.r-price small { font-size: 0.78rem; color: var(--ink-3); font-weight: 700; }
.r-price .btn-orange { margin-top: 6px; }
.r-bag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 800; }
.r-bag .i { width: 15px; height: 15px; }
.r-bag.yes { color: var(--good); }
.r-bag.no { color: var(--ink-3); }
.r-foot { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px dashed var(--line-2); }
.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; }
.r-note { font-size: 0.8rem; color: var(--ink-3); font-weight: 700; margin-inline-start: auto; }
.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 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); }
.j-detail h5 { margin: 14px 0 8px; font-size: 0.86rem; font-weight: 900; color: var(--heading); }
.leg { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.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(--orange-soft); }
.layover .i { width: 16px; height: 16px; color: var(--orange-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 { background: linear-gradient(165deg, var(--navy-950), var(--navy-900)); padding: 86px 0 18px; margin-top: -76px; }
.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); }
.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; }
.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; } }

.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); }
.seat-plan { overflow-x: auto; padding: 16px; border-radius: 40px 40px 16px 16px; background: var(--mist); max-height: 420px; }
.seat-grid { display: grid; gap: 5px; justify-content: center; }
.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); }
.choice-flight h5 { margin: 8px 0; font-size: 0.86rem; color: var(--heading); }
.choice-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 12px; margin-bottom: 8px; font-weight: 700; font-size: 0.9rem; color: var(--ink-2); }
.choice-row select { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); padding: 0 10px; }
.extras { display: flex; flex-direction: column; gap: 10px; }
.extra { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; }
.extra input { width: 20px; height: 20px; accent-color: var(--orange); }
.extra.on { border-color: var(--orange); background: var(--orange-soft); }
.extra-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mist); color: var(--accent-ink); }
.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 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; }
.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; }
  .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); }

.summary { background: var(--paper); border-radius: 20px; box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sum-route { display: flex; align-items: center; gap: 12px; }
.sum-route b { display: flex; align-items: center; gap: 6px; font-weight: 900; color: var(--heading); }
.sum-route small { display: block; font-size: 0.8rem; color: var(--ink-3); text-transform: capitalize; }
.sum-lines { list-style: none; margin: 0; padding: 12px 0; border-block: 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); padding: 38px 36px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.done-card h1 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 900; color: var(--heading); }
.done-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--good-wash); color: var(--good); }
.done-icon .i { width: 32px; height: 32px; }
.done-number { margin: 0; font-size: 1.05rem; color: var(--ink-2); }
.done-number b { font-family: var(--font-board); font-size: 1.3rem; color: var(--orange-ink); }
.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); }
.done-total { display: flex; gap: 8px; align-items: baseline; }
.done-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.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; 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; }
  .book-side { position: static; order: -1; }
  .book-side .sum-trust, .book-side .sum-lines { 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 small { display: block; font-size: 0.74rem; font-weight: 800; color: var(--ink-3); }
  .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) {
  .trip-band { padding: 92px 0 22px; }
  .trip-band-row { gap: 14px; }
  .trip-change { margin-inline-start: 0; width: 100%; justify-content: center; }
  .trip-facts { font-size: 0.86rem; }
  .days-strip { grid-template-columns: repeat(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; }
  .sort-tab span { font-size: 0.74rem; }
  .r-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* 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. */
  .r-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; text-align: start; border-top: 1px dashed var(--line-2); padding-top: 10px; }
  .r-price small { grid-column: 1 / -1; text-align: end; }
  .r-price .btn-orange { grid-column: 1 / -1; margin-top: 8px; justify-content: center; }
  .j-end b { font-size: 1.15rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 18px 16px; }
  .done-card { padding: 28px 20px; }
  .describe { grid-template-columns: auto minmax(0, 1fr); }
  .describe-go { grid-column: 1 / -1; }
  .choice-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .step span { display: none; }
  .step.on span { display: inline; }
  .extra { grid-template-columns: auto minmax(0, 1fr) auto; }
  .extra-icon { display: none; }
}
@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 { white-space: nowrap; }
.j-line { display: block; }
.days-strip.loading { pointer-events: none; }
.traveller .card-head h2 { display: flex; align-items: center; gap: 8px; }

/* ── 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). */
.plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
        padding: 16px 18px 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)); }
.plan-mark { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 1rem; color: var(--heading); cursor: text; }
.plan-mark .i { width: 20px; height: 20px; color: var(--orange); flex: none; }
.plan-mark small { font-size: 0.82rem; font-weight: 700; color: var(--ink-3); }
.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; }
.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; }
.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-mark small { flex-basis: 100%; }
  .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; }
.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 ────────────────────────────────────────────────
   Top picks: five questions answered at the top of the list, each a card that jumps to its
   flight. On a phone they scroll sideways rather than stacking five tall cards. */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: start;
        border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-card); border: 1.5px solid transparent;
        transition: transform 0.15s ease, border-color 0.15s ease; }
.pick:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.pick em { font-style: normal; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange-ink); }
html[lang="ar"] .pick em { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
.pick-cheapest em, .pick-bag em { color: var(--good-ink); }
.pick-fastest em { color: var(--accent-ink); }
.pick-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pick-line b { font-size: 0.86rem; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-line .al-plate { width: 34px; height: 24px; flex: none; }
.pick-price .amt { font-size: 1.2rem; font-weight: 900; color: var(--heading); }
.pick small { font-size: 0.78rem; color: var(--ink-3); font-weight: 700; }
@media (max-width: 719px) {
  .picks { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  .pick { flex: 0 0 62%; scroll-snap-align: start; }
}
/* A card flashes when a pick 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. */
.days-wrap { margin-bottom: 18px; }
.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; gap: 6px 16px; font-weight: 700; font-size: 0.88rem; opacity: 0.88; }
.book-facts span { display: inline-flex; align-items: center; gap: 6px; }
.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-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, .choice-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;
}
.choice-row .dl-face { min-height: 44px; padding: 0 10px; font-weight: 700; font-size: 0.9rem; }
.fld .dl-face:focus-visible, .choice-row .dl-face:focus-visible, .dc-wrap:focus-within,
.fld .dl-face[aria-expanded="true"], .choice-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-strip.wide { grid-auto-rows: auto; row-gap: 6px; }
.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; }
.days-more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; margin-inline-start: auto; min-height: 32px; }
.days-more .i { width: 16px; height: 16px; }
.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; }
.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; }
}
@media (max-width: 719px) {
  .days-strip.wide { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); }
}
.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; }
.days-guide { display: flex; align-items: flex-start; gap: 8px; margin: 8px 4px 0; font-size: 0.86rem; color: var(--ink-3); font-weight: 600; }
.days-guide .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }