/* ============================================
   TripCloud — Mobile-first agent workspace
   Faithful port of the design's styles.css
   ============================================ */

:root {
  /* Surface */
  --ink: oklch(0.22 0.03 250);
  --ink-2: oklch(0.34 0.025 250);
  --ink-3: oklch(0.50 0.02 250);
  --ink-4: oklch(0.66 0.015 250);
  --line: oklch(0.90 0.008 250);
  --line-2: oklch(0.94 0.005 250);
  --paper: oklch(0.985 0.004 90);
  --paper-2: oklch(0.965 0.006 90);
  --surface: #ffffff;
  --tint: oklch(0.96 0.012 200);

  /* Brand — defaults to the "Studio" theme. Overridden at runtime by TRVL3_applyTheme
     (see _Layout.cshtml) when the user picks a different theme. */
  --brand:      oklch(0.50 0.13 255);
  --brand-ink:  oklch(0.30 0.11 255);
  --brand-tint: oklch(0.95 0.025 255);
  --accent:     oklch(0.76 0.13 50);
  --accent-tint: oklch(0.96 0.04 50);

  /* Chrome — header + sidebar surface colors. Same Studio defaults. */
  --header-bg:   oklch(0.985 0.005 80);
  --header-fg:   oklch(0.22 0.03 250);
  --header-line: oklch(0.92 0.006 80);
  --sidebar-bg:   oklch(0.24 0.02 250);
  --sidebar-fg:   oklch(0.94 0.008 250);
  --sidebar-line: oklch(0.16 0.02 250);

  /* Semantic */
  --good: oklch(0.62 0.13 155);
  --good-tint: oklch(0.95 0.03 155);
  --warn: oklch(0.78 0.15 80);
  --warn-tint: oklch(0.96 0.04 80);
  --danger: oklch(0.60 0.20 25);
  --danger-tint: oklch(0.96 0.04 25);
  --info: oklch(0.60 0.12 245);
  --info-tint: oklch(0.96 0.03 245);

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-he: 'Heebo', 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px oklch(0.22 0.03 250 / 0.06);
  --shadow-md: 0 4px 16px oklch(0.22 0.03 250 / 0.08);
  --shadow-lg: 0 16px 40px oklch(0.22 0.03 250 / 0.12);

  /* Drawer direction */
  --drawer-hide: translateX(-100%);
}
[dir="rtl"] { --drawer-hide: translateX(100%); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[dir="rtl"] body { font-family: var(--font-he); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* Utility */
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.mono { font-family: var(--font-mono); font-feature-settings: "ss02"; }
.fill { flex: 1; min-width: 0; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }
.tiny { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.spacer { flex: 1; }
.tr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ============================================
   App shell — truly responsive, mobile-first

   Mobile  (< 720px):  full viewport, statusbar+appbar+scroll+tabbar
   Tablet  (720–959):  full viewport, content max-width-centered, still tab bar
   Desktop (>= 960):   sidebar + workspace, no tab bar, no hamburger
   ============================================ */
#stage, .shell {
  min-height: 100vh;
  background: var(--paper);
}
.device {
  width: 100%;
  min-height: 100vh;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* App container fills the device (no fake status-bar offset — that was removed). */
.app {
  position: static;
  inset: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--paper);
  overflow: hidden;
}

/* Desktop sidebar styles live in the responsive block further down
   (search for ".desktop-side .ds-item"). Mobile-default keeps it hidden. */

/* Top app bar */
.appbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
  min-height: 56px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.appbar .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.appbar .sub { font-size: 12px; color: var(--ink-3); }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--ink);
  background: transparent;
  transition: background .15s;
  flex-shrink: 0;
  position: relative;
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn.tint { background: var(--brand-tint); color: var(--brand-ink); }
.icon-btn .badge-dot {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--accent);
  border: 2px solid var(--paper);
}

/* Scroll surface */
.scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  scroll-behavior: smooth;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}
.scroll::-webkit-scrollbar { width: 6px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* Bottom tab bar — hidden on mobile (footer buttons removed) and desktop. */
.tabbar {
  display: none;
  align-items: stretch;
  justify-content: space-around;
  background: oklch(1 0 0 / 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(env(safe-area-inset-bottom, 14px) + 6px);
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-md);
  position: relative;
  text-decoration: none;
}
.tabbar a[aria-current="page"] { color: var(--brand-ink); }
.tabbar a[aria-current="page"]:not(.primary)::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 18%;
  height: 2.5px;
  background: var(--brand);
  border-radius: 0 0 4px 4px;
}
.tabbar a.primary .fab {
  width: 46px; height: 46px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px oklch(0.22 0.03 250 / 0.30);
  margin-top: -14px;
}

/* Floating action button (used by some screens) */
.fab-floating {
  position: absolute;
  inset-inline-end: 18px;
  bottom: 80px;
  width: 56px; height: 56px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  box-shadow: 0 12px 30px oklch(0.22 0.03 250 / 0.30);
  z-index: 5;
}

/* Pinned action bar at the bottom of a scrolling view (used on registration / auth flows). */
.sticky-bottom {
  position: sticky;
  bottom: 0;
  background: oklch(1 0 0 / 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  padding: 14px 16px calc(env(safe-area-inset-bottom, 0) + 14px);
  margin-top: 8px;
}

/* === Card ============================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.card.flat { border: 1px solid var(--line-2); }
.card.warm { background: oklch(0.985 0.012 50); }
.card.pad { padding: 16px; }

/* === Hero ============================================ */
.hero {
  padding: 22px 22px 28px;
  background:
    radial-gradient(700px 220px at -10% -10%, oklch(0.94 0.08 215 / 0.7), transparent 50%),
    linear-gradient(170deg, var(--brand-ink) 0%, oklch(0.20 0.04 250) 100%);
  color: var(--paper);
}

.hero-alert {
  background: oklch(1 0 0 / 0.08);
  border: 1px solid oklch(1 0 0 / 0.12);
  padding: 14px;
  color: white;
  border-radius: 14px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-alert .icon-tile {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* === Buttons ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  background: var(--ink);
  color: var(--paper);
  transition: transform .08s, opacity .15s, background .15s;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.brand { background: var(--brand-ink); }
.btn.accent { background: var(--accent); color: white; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.tint { background: var(--brand-tint); color: var(--brand-ink); border-color: transparent; }
.btn.sm { height: 38px; padding: 0 14px; font-size: 13px; }
.btn.lg { height: 54px; padding: 0 24px; font-size: 16px; }
.btn.block { width: 100%; }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }

/* === Inputs ========================================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.input {
  height: 52px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 16px;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.input::placeholder { color: var(--ink-4); }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.input.with-icon { padding-inline-start: 44px; }
textarea.input { height: auto; padding: 14px 16px; resize: vertical; min-height: 80px; }
select.input { padding-inline-end: 36px; appearance: none; }
.input-wrap { position: relative; width: 100%; }
.input-wrap > .icon {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 14px;
  display: flex;
  align-items: center;
  color: var(--ink-3);
}

/* === Pills / chips =================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--line-2);
  cursor: pointer;
}
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.tint { background: var(--brand-tint); color: var(--brand-ink); border-color: transparent; }
.chip.good { background: var(--good-tint); color: var(--good); border-color: transparent; }
.chip.warn { background: var(--warn-tint); color: oklch(0.42 0.12 60); border-color: transparent; }
.chip.danger { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
.chip.info { background: var(--info-tint); color: var(--info); border-color: transparent; }
.chip.accent { background: var(--accent-tint); color: oklch(0.45 0.15 35); border-color: transparent; }

/* === Lists =========================================== */
.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--paper-2); }

/* === KPI ============================================= */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 14px 4px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
  justify-content: space-between;
}
.kpi .label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
}
.kpi .value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.kpi .delta { font-size: 11px; color: var(--good); font-weight: 600; }
.kpi .delta.down { color: var(--danger); }
.kpi .row-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }

/* === Avatar ========================================== */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  flex-shrink: 0;
}
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }

/* === Section header ================================== */
.section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.section-h h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.section-h a { font-size: 13px; font-weight: 600; color: var(--brand-ink); cursor: pointer; }

/* === Logo ============================================ */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--ink);
}
.logo .mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 30%, oklch(0.85 0.16 80), transparent 60%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-ink) 100%);
  position: relative;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.2);
  flex-shrink: 0;
}
.logo .mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px solid white;
  border-top-color: transparent;
  border-right-color: transparent;
  opacity: 0.85;
}

/* Progress bar */
.bar {
  height: 6px;
  background: var(--line-2);
  border-radius: 99px;
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 99px;
}

/* Image placeholder */
.placeholder-img {
  background:
    repeating-linear-gradient(45deg, oklch(0.92 0.01 250) 0 12px, oklch(0.95 0.01 250) 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Sparkline svg helpers */
.spark-line { stroke: var(--brand); stroke-width: 2; fill: none; }
.spark-area { fill: var(--brand-tint); opacity: 0.6; }

/* === Mobile menu drawer ============================== */
.drawer-scrim {
  position: absolute;
  inset: 0;
  background: oklch(0.22 0.03 250 / 0.50);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  z-index: 9;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 84%;
  max-width: 330px;
  background: var(--paper);
  box-shadow: 0 0 60px oklch(0 0 0 / 0.25);
  transform: var(--drawer-hide);
  transition: transform .28s cubic-bezier(.32,.72,.32,1);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  padding: 36px 20px 18px;
  background: linear-gradient(165deg, var(--brand-ink) 0%, oklch(0.20 0.04 250) 100%);
  color: white;
  position: relative;
}
.drawer-head .close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  color: white;
  background: oklch(1 0 0 / 0.1);
}
.tenant-card {
  margin-top: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  background: oklch(1 0 0 / 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid oklch(1 0 0 / 0.1);
}
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.drawer-group { padding: 4px 0; }
.drawer-group > .tiny { padding: 12px 20px 6px; font-size: 10px; }
.drawer-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 20px;
  background: transparent;
  color: var(--ink);
  text-align: start;
  position: relative;
  text-decoration: none;
}
.drawer-item:hover { background: var(--paper-2); }
.drawer-item.active { background: var(--brand-tint); color: var(--brand-ink); }
.drawer-item.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 4px;
  background: var(--brand);
}
.drawer-item .di-icon { color: var(--ink-3); flex-shrink: 0; }
.drawer-item.active .di-icon { color: var(--brand-ink); }
.drawer-item .di-label { font-size: 14px; font-weight: 600; }
.drawer-item .di-sub { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.drawer-foot { padding: 12px 18px 18px; border-top: 1px solid var(--line-2); }

/* Hotel/product card */
.product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 12px;
}
.product-card .hero-img { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--paper-2); }
.product-card .body { padding: 14px 16px; }

/* Compare two cells */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Pill stat */
.pill-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--paper-2);
  color: var(--ink-2);
}

/* ============================================
   Responsive: desktop sidebar layout
   Mobile-first defaults above keep working below the breakpoint.
   At >= 900px we replace the phone preview with a real
   sidebar + workspace layout that fills the viewport.
   ============================================ */

/* Desktop sidebar — hidden on mobile by default */
.desktop-side { display: none; }

.scroll-inner {
  /* On mobile this is just a passthrough container */
  width: 100%;
}

@media (min-width: 900px) {
  /* Shell becomes the sidebar+workspace layout */
  body {
    background: oklch(0.97 0.005 250);
  }
  .shell {
    min-height: 100vh;
    height: 100vh;
    padding: 0;
    background: transparent;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    place-items: stretch;
  }

  /* Phone frame goes away — the device fills remaining width */
  .device {
    --device-w: auto;
    --device-h: auto;
    width: auto;
    height: 100vh;
    flex: 1;
    min-width: 0;
    border-radius: 0;
    box-shadow: none;
    background: oklch(0.97 0.005 250);
    overflow: hidden;
  }

  /* Status bar is a mobile preview only — hidden on desktop */
  .statusbar { display: none !important; }

  /* App sits flush at the top now (no status bar offset) */
  .app { inset: 0; }

  /* Desktop sidebar: 240px dark column on the inline-start */
  .desktop-side {
    display: flex;
    flex-direction: column;
    width: 240px;
    flex-shrink: 0;
    background: oklch(0.22 0.03 250);
    color: oklch(0.94 0.005 250);
    padding: 18px 14px;
    gap: 2px;
    overflow-y: auto;
    height: 100vh;
  }
  .desktop-side .ds-group {
    padding: 16px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: oklch(0.65 0.02 250);
  }
  .desktop-side .ds-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    color: oklch(0.82 0.01 250);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
  }
  .desktop-side .ds-item:hover { background: oklch(0.28 0.03 250); color: white; }
  .desktop-side .ds-item[aria-current="page"] {
    background: oklch(1 0 0 / 0.08);
    color: white;
  }
  .desktop-side .ds-item[aria-current="page"]::before {
    content: "";
    width: 3px; height: 18px;
    background: var(--accent);
    border-radius: 4px;
    margin-inline-end: -8px;
    margin-inline-start: -8px;
    flex-shrink: 0;
  }
  .desktop-side .ds-label { flex: 1; min-width: 0; }
  .desktop-side .ds-badge {
    font-size: 10px;
    padding: 0 6px;
    height: 18px;
    border-radius: 99px;
    background: oklch(1 0 0 / 0.1);
    color: white;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
  }
  .desktop-side .ds-user {
    margin: 6px 4px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: oklch(1 0 0 / 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* ===== Sidebar collapse toggle ===== */
  .desktop-side {
    position: relative;
    transition: width .25s cubic-bezier(.32,.72,.32,1), padding .25s;
  }
  .side-toggle {
    position: absolute;
    top: 22px;
    inset-inline-end: -12px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 2px 6px oklch(0 0 0 / 0.18);
    display: grid; place-items: center;
    cursor: pointer;
    z-index: 5;
    transition: transform .25s;
  }
  .side-toggle:hover { background: white; }
  .side-collapse-toggle:checked ~ .desktop-side .side-toggle { transform: rotate(180deg); }
  [dir="rtl"] .side-toggle { transform: rotate(180deg); }
  [dir="rtl"] .side-collapse-toggle:checked ~ .desktop-side .side-toggle { transform: rotate(0deg); }

  /* Collapsed state — icon rail */
  .side-collapse-toggle:checked ~ .desktop-side {
    width: 68px;
    padding: 18px 10px;
  }
  .side-collapse-toggle:checked ~ .desktop-side .ds-logo-text,
  .side-collapse-toggle:checked ~ .desktop-side .ds-group,
  .side-collapse-toggle:checked ~ .desktop-side .ds-label,
  .side-collapse-toggle:checked ~ .desktop-side .ds-badge,
  .side-collapse-toggle:checked ~ .desktop-side .ds-user .fill,
  .side-collapse-toggle:checked ~ .desktop-side .ds-user > a {
    display: none;
  }
  .side-collapse-toggle:checked ~ .desktop-side .ds-item {
    justify-content: center;
    padding: 10px;
    gap: 0;
  }
  .side-collapse-toggle:checked ~ .desktop-side .ds-item[aria-current="page"]::before {
    display: none;
  }
  .side-collapse-toggle:checked ~ .desktop-side .ds-item[aria-current="page"] {
    background: var(--brand);
    color: white;
  }
  .side-collapse-toggle:checked ~ .desktop-side .logo {
    justify-content: center;
    margin: 6px 0 14px !important;
  }
  .side-collapse-toggle:checked ~ .desktop-side .ds-user {
    justify-content: center;
    padding: 8px;
  }
  /* Hover tooltip when collapsed (shows the label as a popover) */
  .side-collapse-toggle:checked ~ .desktop-side .ds-item:hover::after {
    content: attr(data-label);
    position: absolute;
    inset-inline-start: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 4px 12px oklch(0 0 0 / 0.2);
  }

  /* Appbar becomes the desktop work bar */
  .appbar {
    padding: 14px 28px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    min-height: 64px;
    gap: 14px;
  }
  .appbar .title { font-size: 22px; }
  .appbar .sub { font-size: 13px; }
  /* Hide the hamburger menu button on desktop — sidebar replaces it */
  .appbar > a.icon-btn:first-child { display: none; }

  /* Hide the bottom tab bar and floating FAB — sidebar replaces them */
  .tabbar { display: none !important; }
  .fab-floating { display: none !important; }
  /* Tab bar is hidden on desktop, so drop the reserved bottom padding */
  .scroll { padding-bottom: 0; }

  /* Constrain content width so it reads well on wide screens */
  .scroll-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 28px 60px;
  }

  /* Dashboard hero / KPI grid feel more like a desktop dashboard */
  .scroll-inner > .hero {
    border-radius: var(--r-lg);
    padding: 28px 32px 30px;
  }
  .scroll-inner > .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 18px 0 8px;
    gap: 14px;
  }
  .kpi { min-height: 110px; padding: 16px 18px; }
  .kpi .value { font-size: 30px; }

  /* Section headers + cards align with the wider content */
  .scroll-inner > .section-h { padding: 18px 4px 8px; }
  .scroll-inner > div[style*="padding:0 14px"] { padding: 0 !important; }
  .scroll-inner > div[style*="padding: 0 14px"] { padding: 0 !important; }
  .scroll-inner > div[style*="padding:14px"] { padding: 0 0 14px !important; }
  .scroll-inner > div[style*="padding: 14px"] { padding: 0 0 14px !important; }

  /* Auth pages: keep the phone-like form column readable on desktop */
  .app .col[style*="padding:0 18px 18px"],
  .app .col[style*="padding: 0 18px 18px"] {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }

  /* RTL: sidebar naturally floats to the right because of flex+rtl direction */

  .drawer-scrim, .drawer { display: none !important; }
}

/* Wider desktop: more breathing room */
@media (min-width: 1280px) {
  .scroll-inner { max-width: 1320px; padding: 24px 36px 80px; }
}

/* =====================================================================
   UNIFIED CHROME (.d-*)  — header + sidebar/drawer shell, used by every
   non-bare page via _Layout.cshtml. Previously lived inline in the
   Dashboard page; lifted here so all pages share the same chrome.
   ===================================================================== */

/* Hide any leftover design-preview status bar (.statusbar elements no longer rendered) */
.statusbar { display: none !important; }
.device    { display: flex; flex-direction: column; }

.d-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.d-root {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: oklch(0.97 0.005 250);
}
.d-root *, .d-root *::before, .d-root *::after { box-sizing: border-box; }

/* TRVL3 logo image — sits in the top bar on every viewport (inline-start). */
.d-topbar-logo {
    display: inline-flex;
    align-items: center;
    height: 28px;
    flex-shrink: 0;
    text-decoration: none;
}
.d-topbar-logo img { height: 100%; width: auto; display: block; }

/* User pill — avatar + name + tenant + chev. Desktop-only; mobile uses the drawer. */
.d-user-pill {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    border-radius: 99px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    flex-shrink: 0;
    min-width: 0;
    max-width: 220px;
}
.d-user-pill:hover { background: var(--paper); }
.d-user-pill-av {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: white;
    display: grid; place-items: center;
    font-weight: 700; font-size: 12px;
    flex-shrink: 0;
}
.d-user-pill-meta {
    display: flex; flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.d-user-pill-name { font-size: 13px; font-weight: 700; }
.d-user-pill-tenant {
    font-size: 11px; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d-user-pill-chev { color: var(--ink-3); display: inline-flex; flex-shrink: 0; }

/* Mobile menu drawer (checkbox-controlled, no JS) */
.d-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.d-scrim {
    position: fixed; inset: 0;  /* viewport-anchored so click-out works while scrolling */
    background: oklch(0.22 0.03 250 / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 30;
}
.d-drawer {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 86%;
    max-width: 340px;
    min-height: 100vh;     /* extends past viewport if items overflow — page scroll reveals them */
    background: var(--paper);
    box-shadow: 0 0 60px oklch(0 0 0 / 0.25);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.32,.72,.32,1);
    z-index: 31;
    display: flex;
    flex-direction: column;
}
[dir="rtl"] .d-drawer { transform: translateX(100%); inset-inline-start: 0; inset-inline-end: auto; }
.d-menu-toggle:checked ~ .d-scrim { opacity: 1; pointer-events: auto; }
.d-menu-toggle:checked ~ .d-drawer { transform: translateX(0); }
.d-drawer-head {
    padding: 32px 20px 18px;
    background: linear-gradient(165deg, var(--brand-ink) 0%, oklch(0.20 0.04 250) 100%);
    color: white;
    position: relative;
}
.d-drawer-close {
    position: absolute;
    top: 12px; inset-inline-end: 12px;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 99px;
    color: white;
    background: oklch(1 0 0 / 0.12);
    cursor: pointer;
}
.d-drawer-av {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: oklch(1 0 0 / 0.16);
    color: white;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 800; font-size: 20px;
    border: 2px solid oklch(1 0 0 / 0.2);
}
.d-drawer-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-top: 12px; letter-spacing: -0.01em; }
.d-drawer-mail { font-size: 12px; opacity: 0.75; margin-top: 2px; }
.d-drawer-tenant {
    margin-top: 14px;
    padding: 8px 10px;
    border-radius: 10px;
    background: oklch(1 0 0 / 0.08);
    border: 1px solid oklch(1 0 0 / 0.1);
    display: flex; align-items: center; gap: 10px;
}
.d-tmark {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent), oklch(0.65 0.18 30));
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; font-size: 12px; color: white;
}
.d-drawer-body { padding: 8px 0; }  /* no internal scroll — drawer extends naturally */
.d-drawer-group { padding: 4px 0; }
.d-drawer-group-label {
    padding: 14px 20px 6px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.d-drawer-item {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 20px;
    color: var(--ink);
    position: relative;
    text-decoration: none;
}
.d-drawer-item:hover { background: var(--paper-2); }
.d-drawer-item.active { background: var(--brand-tint); color: var(--brand-ink); }
.d-drawer-item.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 8px; bottom: 8px;
    width: 3px; border-radius: 4px;
    background: var(--brand);
}
.d-drawer-item .di-icon { color: var(--ink-3); flex-shrink: 0; }
.d-drawer-item.active .di-icon { color: var(--brand-ink); }
.d-drawer-item .di-label { font-size: 14px; font-weight: 600; }
.d-drawer-item .di-sub { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.d-drawer-badge {
    font-size: 10px; padding: 0 8px; height: 20px;
    border-radius: 99px;
    background: var(--accent-tint); color: oklch(0.45 0.15 35);
    display: inline-flex; align-items: center; font-weight: 700;
}
.d-drawer-foot {
    padding: 12px 18px 18px;
    border-top: 1px solid var(--line-2);
}
.d-signout {
    width: 100%; height: 42px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 700; font-size: 13px;
    color: var(--ink);
    text-decoration: none;
}

/* Top bar — sticky so it stays pinned while the workspace scrolls.
   Chrome colors come from the active theme (--header-* set by TRVL3_applyTheme).
   Falls back to neutral paper/line tokens for no-JS visits. */
.d-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
    background: var(--header-bg, var(--paper));
    color: var(--header-fg, var(--ink));
    border-bottom: 1px solid var(--header-line, var(--line-2));
    min-height: 56px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.d-topbar .d-iconbtn { color: var(--header-fg, var(--ink)); }
.d-iconbtn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 99px;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
    position: relative;
    text-decoration: none;
    border: 0;
}
.d-iconbtn:hover { background: var(--paper-2); }
.d-iconbtn .badge-dot {
    position: absolute;
    top: 7px; inset-inline-end: 9px;
    width: 8px; height: 8px;
    border-radius: 99px;
    background: var(--accent);
    border: 2px solid var(--paper);
}
/* (.d-topbar-title / .d-topbar-sub removed — page title lives in the work-bar inside the workspace) */

/* Scroll area + content. The 16px bottom inset is the only reserve we need
   now that the mobile tab bar is gone. */
.d-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    background: oklch(0.97 0.005 250);
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
}
.d-scroll::-webkit-scrollbar { width: 6px; }
.d-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.d-content {
    padding: 0 0 28px;
    max-width: 100%;
}

/* Work bar — page title lives inside the workspace on every viewport so the
   chrome header stays title-free. Pages can opt out via
   ViewData["HidePageTitle"] = true (e.g. Dashboard). */
.d-work-bar {
    display: block;
    padding: 14px 14px 8px;          /* mobile gutter — matches .d-section */
}
.d-work-bar h1 {
    font-family: var(--font-display);
    font-weight: 800; font-size: 22px;
    letter-spacing: -0.025em;
    margin: 0;
}
.d-work-bar .sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

/* ============ Desktop sidebar — hidden on mobile ============ */
.d-sidebar { display: none; }

/* ============ TABLET (>= 720px) — wider content padding ============ */
@media (min-width: 720px) {
    .d-section { padding: 0 22px; }
}

/* ============ DESKTOP (>= 1024px) ============ */
@media (min-width: 1024px) {
    body { background: oklch(0.97 0.005 250); }
    .device {
        flex-direction: column !important;
        align-items: stretch !important;
        /* no fixed height — body/page is the scroll container on desktop */
    }

    /* Hide mobile-only chrome */
    .d-menu-toggle, .d-scrim, .d-drawer { display: none !important; }
    .d-burger { display: none !important; }

    /* Desktop logo gets a bit more height; user pill becomes the rightmost slot */
    .d-topbar-logo { height: 36px; margin-inline-end: 8px; }
    .d-user-pill   { display: inline-flex; margin-inline-start: 4px; }

    /* Body row — natural height; the document is the scroll container,
       so we DON'T constrain or hide overflow here. */
    .d-body {
        flex-direction: row;
        align-items: flex-start;
    }

    /* Desktop sidebar — dark rail. Chrome colors driven by the active theme
       (--sidebar-* set by TRVL3_applyTheme). Falls back to dark navy.
       Sticky to the viewport just below the sticky header; internal scroll
       only when the menu is taller than the visible area. */
    .d-sidebar {
        display: flex;
        flex-direction: column;
        width: 240px;
        flex-shrink: 0;
        background: var(--sidebar-bg, oklch(0.16 0.025 250));
        color: var(--sidebar-fg, oklch(0.94 0.005 250));
        padding: 18px 14px;
        gap: 2px;
        position: sticky;
        top: 68px;                       /* matches .d-topbar min-height on desktop */
        align-self: flex-start;
        max-height: calc(100vh - 68px);  /* fills the viewport below the header */
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: oklch(0.4 0.02 250) transparent;
        border-inline-end: 1px solid var(--sidebar-line, oklch(0.10 0.02 250));
        transition: width .25s cubic-bezier(.32,.72,.32,1), padding .25s;
    }
    .d-sidebar::-webkit-scrollbar { width: 6px; }
    .d-sidebar::-webkit-scrollbar-thumb { background: oklch(0.4 0.02 250); border-radius: 99px; }
    .d-sidebar .ds-item .ds-label,
    .d-sidebar .ds-item { min-width: 0; }
    .d-sidebar .ds-item .ds-label {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .d-sidebar .ds-group {
        padding: 16px 10px 6px;
        font-size: 11px; font-weight: 700;
        letter-spacing: 0.06em; text-transform: uppercase;
        color: oklch(0.65 0.02 250);
    }
    .d-sidebar .ds-item {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        color: oklch(0.82 0.01 250);
        font-size: 14px; font-weight: 600;
        text-decoration: none;
        position: relative;
    }
    .d-sidebar .ds-item:hover { background: oklch(0.28 0.03 250); color: white; }
    .d-sidebar .ds-item[aria-current="page"] {
        background: oklch(1 0 0 / 0.08);
        color: white;
    }
    .d-sidebar .ds-item[aria-current="page"]::before {
        content: "";
        width: 3px; height: 18px;
        background: var(--accent);
        border-radius: 4px;
        margin-inline-start: -12px;
        margin-inline-end: 0;
        flex-shrink: 0;
    }
    .d-sidebar .ds-label { flex: 1; min-width: 0; }
    .d-sidebar .ds-badge {
        font-size: 10px; padding: 0 6px; height: 18px;
        border-radius: 99px;
        background: oklch(1 0 0 / 0.10);
        color: white;
        display: inline-flex; align-items: center; font-weight: 700;
    }
    .d-sidebar .ds-sub { font-size: 11px; color: oklch(0.65 0.02 250); margin-top: 1px; }
    .d-sidebar .ds-foot {
        margin-top: auto;
        padding: 8px;
        border-radius: 10px;
        background: oklch(1 0 0 / 0.06);
        display: flex; align-items: center; gap: 10px;
    }
    .d-sidebar .ds-foot .av {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: var(--accent);
        color: white;
        display: grid; place-items: center;
        font-weight: 700; font-size: 12px;
        flex-shrink: 0;
    }
    .d-sidebar .ds-foot .nm { font-size: 12.5px; font-weight: 700; color: white; }
    .d-sidebar .ds-foot .tn { font-size: 11px; color: oklch(0.7 0.02 250); }
    .d-sidebar .ds-foot a { color: oklch(0.7 0.02 250); }

    /* Sidebar collapse toggle — in-flow inside the dark sidebar.
       Expanded: aligned to the inline-end (top-right in LTR, top-left in RTL).
       Collapsed: centered horizontally above the icon rail. */
    .d-side-toggle {
        position: relative;
        inset: auto;
        align-self: flex-end;
        width: 30px; height: 30px;
        margin-bottom: 8px;
        flex-shrink: 0;
        border-radius: 50%;
        background: oklch(1 0 0 / 0.08);
        color: oklch(0.94 0.005 250);
        border: 1px solid oklch(1 0 0 / 0.12);
        display: grid; place-items: center;
        cursor: pointer;
        z-index: 5;
        transition: transform .25s, background .15s;
    }
    .d-side-toggle:hover { background: oklch(1 0 0 / 0.18); color: white; }
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .d-side-toggle {
        align-self: center;
        transform: rotate(180deg);
    }
    [dir="rtl"] .d-side-toggle { transform: rotate(180deg); }
    [dir="rtl"] .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .d-side-toggle { transform: rotate(0deg); }

    /* Collapsed state — icon-only rail */
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar {
        width: 68px;
        padding: 18px 10px;
    }
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-group,
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-label,
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-badge,
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-sub,
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-foot .fill,
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-foot > a {
        display: none;
    }
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-item {
        justify-content: center;
        padding: 10px;
        gap: 0;
    }
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-item[aria-current="page"]::before { display: none; }
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-item[aria-current="page"] {
        background: var(--brand);
        color: white;
    }
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-foot {
        justify-content: center;
        padding: 8px;
    }
    .d-side-collapse-toggle:checked ~ .d-body .d-sidebar .ds-item:hover::after {
        content: attr(data-label);
        position: absolute;
        inset-inline-start: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--ink);
        color: white;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        z-index: 20;
        box-shadow: 0 4px 12px oklch(0 0 0 / 0.2);
    }

    /* Workspace — flows in the document; no internal scroll, no fixed height.
       The viewport's own scrollbar handles long pages, header + sidebar stay
       sticky. */
    .d-root {
        position: static;
        inset: auto;
        flex: 1;
        min-width: 0;
        background: oklch(0.97 0.005 250);
    }
    .d-scroll {
        overflow: visible;
        background: transparent;
        padding-bottom: 0;
    }

    .d-topbar {
        padding: 14px 28px;
        min-height: 68px;
        gap: 14px;
        background: var(--paper);
    }

    .d-content {
        padding: 22px 28px 60px;
        max-width: 1320px;
        margin: 0 auto;
        width: 100%;
    }
    .d-work-bar { padding: 0 4px 22px; }
    .d-work-bar h1 { font-size: 28px; }
    .d-section { padding: 0; }
}

/* Very wide */
@media (min-width: 1440px) {
    .d-content { padding: 24px 36px 80px; max-width: 1480px; }
}

/* =====================================================================
   THEME PICKER  — desktop user-pill dropdown + mobile drawer "Appearance"
   ===================================================================== */

/* User pill needs a positioning context for the dropdown */
.d-user-wrap { position: relative; }

/* Desktop dropdown menu — hidden by default; .open class shows it */
.d-user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 40px oklch(0 0 0 / 0.15);
    z-index: 40;
    overflow: hidden;
}
.d-user-menu.open { display: block; }

.d-user-menu-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line-2);
}
.d-user-menu-av {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--brand);
    color: white;
    display: grid; place-items: center;
    font-weight: 800; font-size: 14px;
    flex-shrink: 0;
}
.d-user-menu-name { font-size: 14px; font-weight: 700; }
.d-user-menu-mail { font-size: 11px; color: var(--ink-3); margin-top: 1px; }

.d-user-menu-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line-2);
    cursor: pointer;
}
.d-user-menu-row:hover { background: var(--paper-2); }
.d-user-menu-row .di-icon { color: var(--ink-3); flex-shrink: 0; }
.d-user-menu-row .fill { font-size: 13px; font-weight: 600; }
.d-user-menu-row .d-row-chev { color: var(--ink-4); }

.d-user-menu-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-2);
}
.d-user-menu-section-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 10px;
}
.d-user-menu-theme-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.d-user-menu-theme-head .di-icon { color: var(--ink-3); flex-shrink: 0; }

.d-user-menu-signout {
    color: var(--danger);
    border-bottom: 0;
    padding: 12px 16px;
}
.d-user-menu-signout .di-icon { color: var(--danger); }

/* Mobile drawer: Appearance group's theme head */
.d-drawer-theme {
    padding: 8px 20px 12px;
}
.d-drawer-theme-head {
    display: flex; align-items: center; gap: 14px;
    padding: 8px 0 12px;
}
.d-drawer-theme-head .di-icon { color: var(--ink-3); flex-shrink: 0; }
.d-drawer-theme .d-swatches { padding: 0; }

/* ===== Swatch grid (shared by desktop dropdown + mobile drawer) ===== */
.d-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.d-swatch {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 6px;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1;
    display: grid; place-items: center;
    transition: border-color .15s, transform .1s;
}
.d-swatch:hover { transform: translateY(-1px); }
.d-swatch.active { border-color: var(--ink); }
/* Swatch tile previews the actual chrome the theme paints:
   upper 55% = sidebar background, lower 45% = header background, brand dot in the corner.
   Hard-stop gradient = no gradient blur between the two surfaces. */
.d-swatch-tile {
    width: 100%; height: 100%;
    border-radius: 8px;
    background: linear-gradient(to bottom,
        var(--sw-sidebar) 0%, var(--sw-sidebar) 55%,
        var(--sw-header)  55%, var(--sw-header)  100%);
    position: relative;
    display: block;
    box-shadow: inset 0 0 0 1px var(--line-2);
}
.d-swatch-dot {
    position: absolute;
    bottom: 3px; right: 3px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--sw-brand);
    border: 1.5px solid var(--surface);
}
.d-swatch-check {
    display: none;
    position: absolute;
    top: -4px; right: -4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    place-items: center;
    border: 2px solid var(--surface);
}
.d-swatch.active .d-swatch-check { display: grid; }

.d-theme-label {
    font-size: 12px;
    color: var(--ink-3);
    text-align: center;
    margin-top: 10px;
    font-weight: 500;
}

@media (max-width: 1023px) {
    /* Dropdown hidden on mobile — drawer carries the same picker */
    .d-user-menu { display: none !important; }
    /* Desktop header nav dropdown is hidden on mobile — the hamburger + .d-drawer cover it */
    .d-nav-wrap   { display: none !important; }
}

/* =====================================================================
   HEADER NAV DROPDOWN  — desktop primary navigation lives here
   (replaces the former left .d-sidebar rail)
   ===================================================================== */

.d-nav-wrap { position: relative; display: inline-flex; }

.d-nav-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--header-line, var(--line-2));
    border-radius: 99px;
    background: transparent;
    color: var(--header-fg, var(--ink));
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    transition: background .15s, border-color .15s;
}
.d-nav-btn:hover { background: var(--paper-2); }
.d-nav-btn[aria-expanded="true"] { background: var(--paper-2); border-color: var(--line); }
.d-nav-btn-icon { display: inline-flex; }
.d-nav-btn-label { white-space: nowrap; }
.d-nav-btn-chev { color: var(--ink-3); display: inline-flex; flex-shrink: 0; transition: transform .15s; }
.d-nav-btn[aria-expanded="true"] .d-nav-btn-chev { transform: rotate(180deg); }

.d-nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    width: 340px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 40px oklch(0 0 0 / 0.15);
    z-index: 40;
    padding: 6px;
}
.d-nav-menu.open { display: block; }
.d-nav-menu::-webkit-scrollbar { width: 6px; }
.d-nav-menu::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

.d-nav-menu-group { padding: 6px 0; }
.d-nav-menu-group + .d-nav-menu-group { border-top: 1px solid var(--line-2); }
.d-nav-menu-group-label {
    padding: 8px 12px 4px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3);
}

.d-nav-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
}
.d-nav-menu-item:hover { background: var(--paper-2); }
.d-nav-menu-item.active {
    background: var(--brand-tint);
    color: var(--brand-ink);
}
.d-nav-menu-item .di-icon { color: var(--ink-3); flex-shrink: 0; display: inline-flex; }
.d-nav-menu-item.active .di-icon { color: var(--brand-ink); }
.d-nav-menu-item-label { font-size: 13px; font-weight: 600; }
.d-nav-menu-item-sub   { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.d-nav-menu-item.active .d-nav-menu-item-sub { color: var(--brand-ink); opacity: 0.75; }

.d-nav-menu-badge {
    font-size: 10px; padding: 0 7px; height: 18px;
    border-radius: 99px;
    background: var(--brand);
    color: white;
    display: inline-flex; align-items: center; font-weight: 700;
    flex-shrink: 0;
}

/* =====================================================================
   AUTH PAGES (Login + Register)
   Mobile: single column form, full width.
   Desktop: 50/50 split — form on the left (cream), marketing hero on the right.
   ===================================================================== */

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

.auth-form-side {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    min-height: 100vh;
}

/* Compact mobile header strip — hairline divider stands in for the wasted whitespace. */
.auth-form-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line-2);
    flex-shrink: 0;
}

.auth-form-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* top-align — shorter forms shouldn't leave a void above the title */
    padding: 18px 18px 28px;
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

.auth-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.auth-progress > span {
    flex: 1; height: 4px;
    border-radius: 99px;
    background: var(--line);
}
.auth-progress > span.done { background: var(--brand-ink); }

.auth-step-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.auth-h1 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 12px;
    color: var(--ink);
}
.auth-sub {
    font-size: 15px;
    color: var(--ink-3);
    line-height: 1.55;
    margin: 0 0 24px;
    max-width: 460px;
}

/* Custom dark-filled checkbox (terms, "keep me signed in") */
.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.auth-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.auth-check-box {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--brand-ink);
    color: white;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.auth-check-label {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.45;
}

/* Bottom action row — Back (ghost) + Continue (brand) */
.auth-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}
.auth-actions .btn-back {
    flex: 0 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
}
.auth-actions .btn-continue {
    flex: 1;
    margin-inline-start: auto;
    background: var(--brand-ink);
    color: white;
    border-color: var(--brand-ink);
}

/* Marketing/hero side — hidden on mobile, shown on desktop */
.auth-marketing { display: none; }

@media (min-width: 1024px) {
    .auth-shell {
        flex-direction: row;
        min-height: 100vh;
    }
    .auth-form-side {
        flex: 1 1 50%;
        min-width: 0;
    }
    /* Split-screen has its own visual divider (the marketing panel), so no hairline needed here. */
    .auth-form-header { padding: 28px 40px 0; border-bottom: 0; }
    .auth-form-body {
        padding: 32px 60px 40px;
        max-width: 620px;
    }
    .auth-h1 { font-size: 40px; }

    .auth-marketing {
        display: flex;
        flex-direction: column;
        flex: 1 1 50%;
        min-width: 0;
        min-height: 100vh;
        background-color: oklch(0.30 0.06 250);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: white;
        padding: 56px 60px;
        position: relative;
        overflow: hidden;
    }
    .auth-marketing::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, oklch(0.20 0.05 250 / 0.55) 0%, oklch(0.20 0.05 250 / 0.25) 50%, oklch(0.20 0.05 250 / 0.65) 100%);
    }
    .auth-marketing > * { position: relative; z-index: 1; }
}

@media (min-width: 1440px) {
    .auth-form-body { padding: 32px 96px 40px; }
    .auth-marketing { padding: 64px 88px; }
}

.auth-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
    margin: 0 0 22px;
    font-weight: 500;
}
.auth-marketing-title {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 32px;
    color: white;
    max-width: 620px;
}
.auth-marketing-bullets {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.auth-marketing-bullet {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 500;
}
.auth-marketing-check {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid oklch(1 0 0 / 0.35);
    display: grid; place-items: center;
    flex-shrink: 0;
    color: white;
}

.auth-quote {
    margin-top: auto;
    background: oklch(0 0 0 / 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid oklch(1 0 0 / 0.10);
    border-radius: 16px;
    padding: 22px 26px;
    color: white;
}
.auth-quote-stars {
    color: oklch(0.85 0.16 80);
    font-size: 14px;
    letter-spacing: 4px;
}
.auth-quote-text {
    font-size: 16px;
    line-height: 1.55;
    margin: 12px 0 16px;
    opacity: 0.96;
    font-weight: 500;
}
.auth-quote-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.auth-quote-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.auth-quote-name { font-size: 14px; font-weight: 700; }
.auth-quote-role { font-size: 12px; opacity: 0.75; }

/* =====================================================================
   SEARCH RESULTS LAYOUT
   Two-column on desktop: filter rail (inline-start, sticky) + results.
   Single-column on mobile: filter rail collapses into a slide-in panel
   driven by the "Filter" chip in the sort row (TODO).
   ===================================================================== */

.results-layout {
    display: block;
}
.results-header {
    padding: 4px 14px 0;
    margin-bottom: 6px;
}
.results-header h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
}
.results-header .meta {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 2px;
}

.results-sort-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.results-sort-row::-webkit-scrollbar { display: none; }
.results-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border-radius: 99px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    flex-shrink: 0;
}
.results-sort:hover { background: var(--paper-2); }
.results-sort.active { background: var(--ink); color: white; border-color: var(--ink); }
.results-sort-fill { flex: 1; }

.results-date-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    margin: 0 14px 14px;
}
.results-date-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.results-date-cell:hover { background: var(--paper-2); color: var(--ink); }
.results-date-cell.active { background: var(--ink); color: white; }
.results-date-cell .price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: inherit; }
.results-date-cell.active .price { color: white; }

.results-summary {
    padding: 0 14px 14px;
    font-size: 13.5px;
    color: var(--ink-3);
}
.results-summary strong { color: var(--ink); }

/* Flight result card */
.flight-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
    margin: 0 14px 14px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.flight-card:hover { box-shadow: 0 4px 16px oklch(0.22 0.03 250 / 0.06); }
.flight-card-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-2);
}
.flight-card-logo {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--paper-2);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    color: var(--brand-ink);
    flex-shrink: 0;
}
.flight-card-name { font-size: 16px; font-weight: 700; }
.flight-card-sub  { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.flight-card-price-block { text-align: end; }
.flight-card-price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.015em;
}
.flight-card-price-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.flight-card-times {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
}
.flight-card-time { display: flex; flex-direction: column; }
.flight-card-time .t {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.flight-card-time .iata { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.flight-card-time.end { margin-inline-start: auto; align-items: flex-end; }
.flight-card-route {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center;
    min-width: 0;
}
.flight-card-duration {
    background: var(--paper-2);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
}
.flight-card-route-line {
    width: 100%; height: 1px;
    background: var(--line);
    margin: 6px 0;
}
.flight-card-stops {
    font-size: 12px;
    font-weight: 600;
}
.flight-card-stops.nonstop { color: var(--good); }
.flight-card-stops.stop    { color: var(--accent); }

.flight-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
}
.flight-card-margin {
    font-size: 12.5px;
    color: var(--ink-3);
}
.flight-card-margin strong { color: var(--good); font-weight: 700; }
.flight-card-select {
    margin-inline-start: auto;
    background: var(--brand-ink);
    color: white;
    border: none;
    height: 40px;
    padding: 0 22px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Hotel result card */
.hotel-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    margin: 0 14px 14px;
    text-decoration: none;
    color: inherit;
    display: grid;
    grid-template-columns: 1fr;
}
.hotel-card:hover { box-shadow: 0 4px 16px oklch(0.22 0.03 250 / 0.06); }
.hotel-card-img {
    width: 100%; height: 180px;
    object-fit: cover;
    background: var(--paper-2);
}
.hotel-card-body {
    padding: 16px 18px;
    display: flex; flex-direction: column;
    gap: 6px;
}
.hotel-card-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.hotel-card-area { font-size: 12.5px; color: var(--ink-3); }
.hotel-card-foot {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
}
.hotel-card-price { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.hotel-card-price-sub { font-size: 11px; color: var(--ink-3); }

@media (min-width: 720px) {
    .hotel-card { grid-template-columns: 260px 1fr; }
    .hotel-card-img { height: 100%; min-height: 180px; }
}

/* ===== Filter rail ===== */
.filter-rail {
    display: none; /* mobile: hidden by default — a future "Filter" chip will open it as a sheet */
    flex-direction: column;
    width: 280px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}
.filter-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px 14px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line-2);
}
.filter-rail-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    margin: 0;
    color: var(--ink);
}
.filter-rail-icon { color: var(--ink-3); display: inline-flex; }
.filter-rail-reset {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.filter-rail-reset:hover { color: var(--brand-ink); }
.filter-rail-body {
    padding: 4px 0;
}

.filter-section {
    border-bottom: 1px solid var(--line-2);
}
.filter-section:last-child { border-bottom: 0; }
.filter-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.filter-section summary::-webkit-details-marker { display: none; }
.filter-chev {
    color: var(--ink-3);
    display: inline-flex;
    transition: transform .15s;
}
.filter-section[open] .filter-chev { transform: rotate(180deg); }
.filter-section-body {
    padding: 0 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    padding: 4px 0;
}
.filter-check input { position: absolute; opacity: 0; pointer-events: none; }
.filter-check-box {
    width: 20px; height: 20px;
    border-radius: 6px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    display: grid; place-items: center;
    flex-shrink: 0;
    color: transparent;
    transition: background .12s, border-color .12s, color .12s;
}
.filter-check input:checked ~ .filter-check-box {
    background: var(--brand-ink);
    border-color: var(--brand-ink);
    color: white;
}
.filter-check-label { flex: 1; min-width: 0; }
.filter-check-count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-4);
}

.filter-tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.filter-tile {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.filter-tile span {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ink-3);
}
.filter-tile.active {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-ink);
}
.filter-tile.active span { color: var(--brand-ink); }

.filter-range {
    position: relative;
    height: 32px;
    padding: 0 6px;
    margin: 6px 0 4px;
}
.filter-range-track {
    position: absolute;
    inset-inline: 6px;
    top: 50%;
    height: 4px;
    background: var(--line);
    border-radius: 99px;
    transform: translateY(-50%);
}
.filter-range-fill {
    position: absolute;
    top: 0; height: 100%;
    background: var(--brand-ink);
    border-radius: 99px;
}
.filter-range-thumb {
    position: absolute;
    top: 50%;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--brand-ink);
    transform: translate(-50%, -50%);
}
[dir="rtl"] .filter-range-thumb { transform: translate(50%, -50%); }
.filter-range-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    padding: 0 6px;
}

.filter-rail-foot {
    padding: 14px 18px;
    border-top: 1px solid var(--line-2);
    background: var(--surface);
}

/* Desktop split layout */
@media (min-width: 1024px) {
    .results-layout {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
    }
    .filter-rail {
        display: flex;
        /* No sticky / no max-height — the rail flows with the page and renders
           every filter section in full instead of scrolling within itself. */
    }
    .results-header,
    .results-sort-row,
    .results-summary { padding-inline: 0; }
    .results-date-strip,
    .flight-card,
    .hotel-card { margin-inline: 0; }
}

/* =====================================================================
   FLIGHT RESULTS — combination card (two legs + payment panel)
   ===================================================================== */
.combo-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    /* Was overflow: hidden — switched to visible so tooltips can escape the card. The
       inner panels (.combo-pay, .combo-actions) get their own matching radii below so
       the rounded corners still read right visually. */
    overflow: visible;
    margin: 0 14px 14px;
    transition: box-shadow .15s, border-color .15s;
    position: relative;
}
/* On mobile the .combo-pay sits along the bottom of the card → round bottom corners. */
.combo-card .combo-pay { border-radius: 0 0 16px 16px; }
.combo-card:hover { box-shadow: 0 4px 16px oklch(0.22 0.03 250 / 0.06); }
.combo-card[hidden] { display: none !important; }

.combo-legs { padding: 4px 0; min-width: 0; }
.combo-leg {
    display: grid;
    grid-template-columns: 56px minmax(140px, 1.1fr) auto minmax(140px, 1fr) auto minmax(110px, auto);
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    min-width: 0;
}
.combo-leg + .combo-leg { border-top: 1px solid var(--line-2); }

.combo-leg-logo {
    width: 44px; height: 44px;
    border-radius: 10px;
    overflow: hidden;
    display: grid; place-items: center;
    flex-shrink: 0;
    /* The slot is intentionally backgroundless — the SVG file carries its own coloured
       background and rounded corners. The .combo-leg-logo-text fallback below paints
       its own background when no image loads. */
    background: transparent;
}
.combo-leg-logo img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px;
}
.combo-leg-logo-text {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--paper-2);
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-weight: 800; font-size: 12px;
    letter-spacing: 0.5px;
}
.combo-leg-date { min-width: 0; }
.combo-leg-date .d { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.combo-leg-date .c { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

.combo-leg-time { display: flex; flex-direction: column; align-items: flex-start; }
.combo-leg-time.end { align-items: flex-end; }
.combo-leg-time .t { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.combo-leg-time .iata { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-weight: 600; }

.combo-leg-route {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding: 0 6px;
    min-width: 120px;
}
.combo-leg-route .dur {
    font-size: 12px; color: var(--ink-3); font-weight: 500;
}
.combo-leg-route .line {
    width: 100%; height: 2px;
    background: var(--line);
    border-radius: 99px;
    position: relative;
    /* When the leg has stops the markup injects 1-3 .line-dot children — flex distributes
       them evenly so 1 stop = centered, 2 stops = trisected, 3 stops = quartered. */
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.combo-leg-route .line.has-stops { background: var(--accent); }
.combo-leg-route .line.nonstop { background: var(--good); }
.combo-leg-route .stops {
    font-size: 12px; font-weight: 600;
    color: var(--ink-3);
}
.combo-leg-route .stops.nonstop { color: var(--good); }
.combo-leg-route .stops.has-stops { color: var(--accent); }

.combo-leg-extras {
    display: flex; align-items: center; gap: 12px;
    color: var(--ink-3);
}
.combo-leg-bag {
    display: inline-flex; align-items: center;
    color: var(--ink-3);
    position: relative;
}
.combo-leg-bag.not-included { color: var(--ink-4); }
.combo-leg-bag.not-included::after {
    content: ''; position: absolute;
    inset-inline-start: 4px; inset-inline-end: 4px;
    top: 50%; height: 1.5px;
    background: currentColor;
    transform: rotate(-30deg);
    border-radius: 2px;
}
.combo-leg-info {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600;
    color: var(--ink-3);
    text-decoration: none;
    background: transparent; border: 0; cursor: pointer;
    padding: 0;
}
.combo-leg-info:hover { color: var(--brand-ink); }

.combo-pay {
    border-top: 1px solid var(--line-2);
    background: var(--paper-2);
    padding: 16px 22px;
    display: flex; flex-direction: column; gap: 8px;
    align-items: stretch;
    position: relative;
}
.combo-pay-badge {
    align-self: flex-end;
    font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 99px;
    border: 1px solid transparent;
    background: var(--paper-2);
    color: var(--ink-2);
}
/* Charter — warm orange */
.combo-pay-badge.charter {
    background: oklch(0.96 0.04 30);
    color: oklch(0.45 0.18 35);
    border-color: oklch(0.88 0.07 35);
}
/* Regular (GDS) — cool brand-blue */
.combo-pay-badge.regular {
    background: var(--brand-tint);
    color: var(--brand-ink);
    border-color: oklch(0.85 0.06 255);
}
/* NDC — green */
.combo-pay-badge.ndc {
    background: oklch(0.95 0.05 145);
    color: oklch(0.40 0.13 150);
    border-color: oklch(0.85 0.08 145);
}
/* Low cost — muted neutral */
.combo-pay-badge.lcc {
    background: oklch(0.96 0.012 270);
    color: oklch(0.40 0.06 270);
    border-color: oklch(0.88 0.02 270);
}

/* Source pill — sits alongside the supplier-class badge in the pay panel; one variant
   per registered provider so the user can spot at a glance which connector returned
   each offer (and use the Source filter on the rail to isolate them). */
.combo-pay-source {
    align-self: flex-end;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 9px; border-radius: 99px;
    border: 1px solid transparent;
    background: var(--paper-2);
    color: var(--ink-3);
    cursor: help;
}
.combo-pay-source.src-amadeus      { background: oklch(0.96 0.025 260); color: oklch(0.34 0.13 265); border-color: oklch(0.88 0.04 265); }
.combo-pay-source.src-travelport   { background: oklch(0.95 0.04 25);   color: oklch(0.42 0.16 30);  border-color: oklch(0.87 0.07 30); }
.combo-pay-source.src-alp          { background: oklch(0.95 0.05 145);  color: oklch(0.38 0.12 150); border-color: oklch(0.85 0.08 145); }
.combo-pay-source.src-travelfusion { background: oklch(0.95 0.05 320);  color: oklch(0.40 0.15 320); border-color: oklch(0.86 0.08 320); }
.combo-pay-source.src-sabre        { background: oklch(0.95 0.04 80);   color: oklch(0.40 0.13 80);  border-color: oklch(0.86 0.07 80); }

/* "Prices from N sources" trigger — replaces the single-source pill when this same flight
   was returned by multiple providers. Visually richer than the pill so the user notices
   there's an aggregate view to open. */
.combo-pay-source-multi {
    align-self: flex-end;
    appearance: none;
    background: var(--brand-tint);
    color: var(--brand-ink);
    border: 1px solid oklch(0.85 0.06 255);
    border-radius: 99px;
    padding: 4px 12px;
    font: inherit; font-size: 11px; font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, color .15s, transform .12s;
}
.combo-pay-source-multi:hover { background: var(--brand); color: white; }
.combo-pay-source-multi span { font-size: 13px; line-height: 1; font-weight: 800; }

/* ----- Prices-by-source modal: per-row layout ----- */
.prices-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.prices-row {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}
.prices-row.is-cheapest {
    background: var(--brand-tint);
    border-color: var(--brand);
}
.prices-row-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: transparent;
}
.prices-row.is-cheapest .prices-row-icon {
    background: var(--brand);
    color: white;
}
.prices-row-source {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
}
.prices-row.is-cheapest .prices-row-source { color: var(--brand-ink); }
.prices-row-amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--ink);
}
.prices-row.is-cheapest .prices-row-amount { color: var(--brand-ink); }
.prices-row-tag {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--brand);
    color: white;
    padding: 3px 8px;
    border-radius: 99px;
}

/* Optional per-source accent stripe on the left edge of each row, mirroring the
   source-pill colors from .combo-pay-source. Lets the user spot Travelport vs.
   Amadeus etc. at a glance even without reading the label. */
.prices-row.src-amadeus      { border-inline-start: 4px solid oklch(0.34 0.13 265); }
.prices-row.src-travelport   { border-inline-start: 4px solid oklch(0.42 0.16 30); }
.prices-row.src-alp          { border-inline-start: 4px solid oklch(0.38 0.12 150); }
.prices-row.src-travelfusion { border-inline-start: 4px solid oklch(0.40 0.15 320); }
.prices-row.src-sabre        { border-inline-start: 4px solid oklch(0.40 0.13 80); }
.combo-pay-label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.combo-pay-amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1;
}
.combo-pay-avg { font-size: 12px; color: var(--ink-3); }
.combo-pay-breakdown {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; color: var(--ink-3); font-weight: 600;
    text-decoration: none;
    background: transparent; border: 0; cursor: pointer;
    padding: 0; align-self: flex-start;
}
.combo-pay-breakdown:hover { color: var(--brand-ink); }
.combo-pay-select {
    margin-top: 4px;
    background: var(--brand-ink);
    color: white;
    border: 0;
    height: 44px;
    border-radius: 12px;
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.combo-pay-select:hover { filter: brightness(1.05); }

@media (min-width: 980px) {
    .combo-card { grid-template-columns: minmax(0, 1fr) 240px; }
    .combo-pay {
        border-top: 0;
        border-inline-start: 1px solid var(--line-2);
        /* Side-by-side on desktop → pay panel rounds on the right edges, not bottom. */
        border-radius: 0 16px 16px 0;
    }
    [dir="rtl"] .combo-pay { border-radius: 16px 0 0 16px; }
}

/* =====================================================================
   FLIGHT RESULTS — filter rail extras (dual-thumb range, results-count
   header chip, airline rows with logos / price-from chips).
   ===================================================================== */
.filter-results-count {
    padding: 14px 18px 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--ink);
}
.filter-sort-row {
    padding: 10px 18px 14px;
}
.filter-sort-row select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px; font-weight: 600;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Dual-thumb range slider — two range inputs overlapped on a common track. */
.dual-range {
    position: relative;
    height: 36px;
    padding: 0 8px;
}
.dual-range-readout {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dual-range-readout span {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 4px 10px;
}
.dual-range-track {
    position: absolute;
    inset-inline: 8px;
    top: 50%;
    height: 4px;
    background: var(--line);
    border-radius: 99px;
    transform: translateY(-50%);
    pointer-events: none;
}
.dual-range-fill {
    position: absolute;
    top: 0; height: 100%;
    background: var(--brand-ink);
    border-radius: 99px;
}
.dual-range input[type="range"] {
    position: absolute;
    inset-inline: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 16px);
    height: 22px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--brand-ink);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 3px oklch(0.22 0.03 250 / 0.2);
}
.dual-range input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--brand-ink);
    cursor: pointer;
    pointer-events: auto;
}
.dual-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.dual-range input[type="range"]::-moz-range-track { background: transparent; }

.filter-airline-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.filter-airline-row .name { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.filter-airline-row .logo {
    width: 28px; height: 20px;
    background: var(--paper-2);
    border-radius: 4px;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 800; font-size: 10px;
    color: var(--brand-ink);
    overflow: hidden;
    flex-shrink: 0;
}
.filter-airline-row .logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.filter-from-chip {
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 700;
    color: var(--ink-3);
    white-space: nowrap;
}

/* =====================================================================
   SEARCH ENGINE TABS  (rendered by Pages/Shared/_SearchTabs.cshtml)
   Horizontal pill tabs that switch between Flights / Hotels / Cars /
   Activities / Packages. Scrolls horizontally on narrow phones.
   ===================================================================== */
.search-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 14px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 14px;
    background: var(--surface);
}
.search-tabs::-webkit-scrollbar { display: none; }
.search-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 99px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-3);
    background: transparent;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.search-tab:hover { background: var(--paper-2); color: var(--ink); }
.search-tab.active {
    background: var(--brand-tint);
    color: var(--brand-ink);
}
.search-tab-icon { display: inline-flex; color: inherit; }

@media (min-width: 720px) {
    .search-tabs { padding: 14px 22px 14px; gap: 8px; }
    .search-tab  { padding: 10px 16px; font-size: 14px; }
}
@media (min-width: 1024px) {
    .search-tabs { margin-bottom: 18px; }
}

/* === Language picker ==================================
   No-JS disclosure (<details>/<summary>) so it works under
   our strict CSP (no inline event handlers). Two variants:
   .lang-picker          — compact "chip" used in the auth header
   .lang-picker-drawer   — full-width row used in the mobile drawer
   ====================================================== */
.lang-picker {
    position: relative;
    display: inline-block;
}
.lang-picker > summary {
    list-style: none;
    cursor: pointer;
}
.lang-picker > summary::-webkit-details-marker { display: none; }
.lang-picker > summary::marker { display: none; content: ""; }

.lang-picker-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lang-picker-chev {
    display: inline-flex;
    transition: transform .15s ease;
    color: inherit;
    opacity: 0.7;
}
.lang-picker[open] > summary .lang-picker-chev { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 60;
    margin: 0;
    padding: 6px;
    list-style: none;
    min-width: 220px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.18), 0 4px 10px -4px rgba(0, 0, 0, 0.10);
}
.lang-menu li { margin: 0; }

.lang-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
}
.lang-menu-item:hover { background: var(--paper-2); color: var(--ink); }
.lang-menu-item.active { background: var(--brand-tint); color: var(--brand-ink); }
.lang-menu-native { flex: 1; min-width: 0; }
.lang-menu-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lang-menu-item.active .lang-menu-label { color: var(--brand); }
.lang-menu-check { display: inline-flex; color: var(--brand); }

/* Drawer variant: summary fills the row like other drawer items,
   menu opens beneath it (still absolutely positioned). */
.lang-picker-drawer { display: block; width: 100%; }
.lang-picker-drawer > summary.d-drawer-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
}
.lang-picker-drawer .lang-menu {
    position: static;
    margin-block-start: 8px;
    margin-inline-start: 36px;
    inset: auto;
    min-width: 0;
    max-height: none;
    box-shadow: none;
    border-color: var(--line-2);
}

/* =====================================================================
   FLIGHT RESULTS — search summary bar (Route / Dates / Travellers / Edit)
   Sits between the search tabs and the results-layout grid. Three labeled
   cells + an Edit pill that round-trips back to /Flights/Index preserving
   every query-string value.
   ===================================================================== */
.search-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0 14px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 8px;
}
.search-summary-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    min-width: 0;
}
.search-summary-cell + .search-summary-cell { border-top: 1px solid var(--line-2); }
.search-summary-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--brand-tint);
    color: var(--brand-ink);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.search-summary-label {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.search-summary-value {
    font-size: 14px;
    color: var(--ink);
    font-weight: 800;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-summary-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--brand-ink);
    color: white;
    border: 0;
    border-radius: 12px;
    padding: 0 22px;
    height: 48px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    margin: 0 4px 4px;
}
.search-summary-edit:hover { filter: brightness(1.1); }
@media (min-width: 900px) {
    .search-summary {
        grid-template-columns: 1fr 1fr 1fr auto;
        gap: 8px;
        padding: 10px;
        align-items: stretch;
    }
    .search-summary-cell + .search-summary-cell { border-top: 0; border-inline-start: 1px solid var(--line-2); }
    .search-summary-edit { margin: 0; height: auto; }
}
@media (min-width: 1024px) {
    .search-summary { margin-inline: 0; }
}

/* =====================================================================
   FLIGHT RESULTS — top-pick highlight row (Cheapest / Best Value / Fastest)
   Three side-by-side cards above the offer list. Each is a real <button>
   so it focuses and clicks correctly via keyboard; the JS handler reads
   data-pick-sort and drives the existing sort dropdown.
   ===================================================================== */
.highlight-meta {
    margin: 4px 14px 10px;
}
.highlight-meta-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    margin: 0;
    color: var(--ink);
}
.highlight-meta-sub {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 2px;
}
.highlight-meta-sub strong { color: var(--ink); font-weight: 800; }

.highlight-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 14px 14px;
}
.highlight-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px;
    text-align: start;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    color: inherit;
    font: inherit;
}
.highlight-card:hover {
    box-shadow: 0 4px 14px oklch(0.22 0.03 250 / 0.08);
    border-color: var(--brand);
    transform: translateY(-1px);
}
.highlight-card.active {
    border-color: var(--brand-ink);
    box-shadow: 0 0 0 1px var(--brand-ink) inset;
}
.highlight-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.highlight-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.highlight-icon.cheapest {
    background: oklch(0.93 0.07 145);
    color: oklch(0.40 0.13 150);
}
.highlight-icon.best {
    background: var(--brand-tint);
    color: var(--brand-ink);
}
.highlight-icon.fastest {
    background: oklch(0.93 0.05 255);
    color: oklch(0.40 0.12 260);
}
.highlight-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.6px;
    color: var(--ink);
}
.highlight-sub {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-top: 1px;
}
.highlight-flight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
}
.highlight-pill {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--paper-2);
    color: var(--brand-ink);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 800; font-size: 11px;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
.highlight-times {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    white-space: nowrap;
}
.highlight-airline {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.highlight-price {
    margin-inline-start: auto;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ink);
    white-space: nowrap;
}
@media (min-width: 720px) {
    .highlight-row { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1024px) {
    .highlight-row, .highlight-meta { margin-inline: 0; }
}

/* =====================================================================
   FLIGHT SEARCH — full-page loader overlay shown on Flights/Index when
   the search form submits. Disappears with the document on navigation.
   ===================================================================== */
.search-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: oklch(0.98 0.005 250 / 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    animation: search-loader-in .18s ease both;
}
.search-loader[hidden] { display: none; }
.search-loader-card {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    padding: 28px 36px 26px;
    box-shadow: 0 24px 48px oklch(0.22 0.03 250 / 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 320px;
    max-width: 420px;
}
.search-loader-sky {
    position: relative;
    width: 260px;
    height: 56px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(180deg,
        oklch(0.96 0.025 230) 0%,
        oklch(0.94 0.035 220) 100%);
}
.search-loader-plane {
    position: absolute;
    top: 50%;
    color: var(--brand-ink);
    transform: translateY(-50%);
    animation: search-loader-plane 2.4s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px oklch(0.30 0.10 250 / 0.25));
}
.search-loader-cloud {
    position: absolute;
    width: 14px; height: 4px;
    background: oklch(1 0 0 / 0.7);
    border-radius: 99px;
    animation: search-loader-cloud 3.6s linear infinite;
}
@keyframes search-loader-plane {
    0%   { left: -14%; transform: translateY(-50%) rotate(0deg); }
    45%  { left: 50%;  transform: translateY(-50%) translateY(-3px) rotate(-2deg); }
    55%  { left: 50%;  transform: translateY(-50%) translateY(-3px) rotate(2deg); }
    100% { left: 110%; transform: translateY(-50%) rotate(0deg); }
}
@keyframes search-loader-cloud {
    0%   { right: -20%; opacity: 0; }
    20%  { opacity: 0.85; }
    80%  { opacity: 0.85; }
    100% { right: 120%; opacity: 0; }
}
.search-loader-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--ink);
    text-align: center;
}
.search-loader-sub {
    font-size: 13px;
    color: var(--ink-3);
    text-align: center;
    min-height: 1.4em;
    transition: opacity .25s ease;
}
@keyframes search-loader-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .search-loader-plane,
    .search-loader-cloud { animation: none; }
}

/* =====================================================================
   TOOLTIPS — pure-CSS, applied via data-tip="..."
   Multi-line content is supported via &#10; (LF) in the attribute value;
   white-space: pre-line preserves the breaks in the rendered bubble.

   Stacking: the trigger is forced into its own stacking context on hover
   (position: relative + isolation: isolate + z-index bump) so the bubble
   floats above sibling cards, the filter rail, sticky headers, etc. We
   use z-index 9999 so the tooltip also sits above modal overlays (z=100).
   Card-level overflow: hidden was removed (see .combo-card) so the bubble
   isn't visually clipped at the card border.
   ===================================================================== */
[data-tip] { position: relative; }
[data-tip]:hover, [data-tip]:focus, [data-tip]:focus-within {
    z-index: 9999;
}
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    background: oklch(0.22 0.03 250);
    color: white;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: pre-line;
    max-width: 260px;
    width: max-content;
    text-align: center;
    box-shadow: 0 4px 12px oklch(0.20 0.03 250 / 0.20);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 9999;
}
[data-tip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: oklch(0.22 0.03 250);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 9999;
}
[data-tip]:hover::after,
[data-tip]:focus::after,
[data-tip]:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before,
[data-tip]:focus::before,
[data-tip]:focus-within::before { opacity: 1; }
[data-tip=""]::after,
[data-tip=""]::before { display: none; }

/* When applied to the route block on a result card, keep the bubble above the line. */
.combo-leg-route[data-tip]::after { bottom: calc(100% + 10px); }

/* =====================================================================
   FLIGHT DETAILS PAGE — single-offer detail layout
   ===================================================================== */
.detail-section {
    margin: 0 14px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}
.detail-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 14px 20px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line-2);
}
.detail-section-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--brand-ink); }
.detail-section-sub   { font-size: 13px; color: var(--ink-3); font-weight: 600; }

.detail-leg {
    display: grid;
    grid-template-columns: 56px minmax(160px, 1fr) minmax(140px, 1fr) minmax(120px, 1fr) minmax(140px, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px 22px;
}
.detail-leg-logo {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--paper-2);
    color: var(--brand-ink);
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-weight: 800; font-size: 12px;
    flex-shrink: 0;
    overflow: hidden;
}
.detail-leg-logo img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.detail-leg-meta { font-size: 13px; }
.detail-leg-meta .muted { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.detail-leg-time .d { font-family: var(--font-mono); font-weight: 700; font-size: 14.5px; }
.detail-leg-time.end { text-align: end; }
.detail-leg-time .muted { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

.detail-leg-route {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding: 0 6px;
}
.detail-leg-route .dur { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.detail-leg-route .line {
    width: 100%; height: 2px;
    background: var(--line);
    border-radius: 99px;
    position: relative;
    display: flex; align-items: center; justify-content: space-around;
}
.detail-leg-route .line.has-stops { background: var(--accent); }
.detail-leg-route .line.nonstop { background: var(--good); }

/* ----- Stop dots on the route line (Results + Details) ----- */
.line-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent);
    position: relative;
    /* Vertically centred on the 2px line via the flex parent (align-items: center). */
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--surface);   /* white halo so the dot reads on top of the line */
}
.line.nonstop .line-dot { border-color: var(--good); }
.line-dot-more {
    /* The "+N" overflow chip uses a filled dot so it visually reads as an aggregate. */
    background: var(--accent);
}
.line-dot-iata {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
    white-space: nowrap;
    background: var(--surface);
    padding: 0 3px;
    border-radius: 3px;
    pointer-events: none;
}
.line-dot-more .line-dot-iata { color: white; background: var(--accent); padding: 1px 5px; }
.detail-leg-route .stops { font-size: 12px; font-weight: 700; }
.detail-leg-route .stops.nonstop  { color: var(--good); }
.detail-leg-route .stops.has-stops { color: var(--accent); }

.detail-layover {
    border-top: 1px dashed var(--line-2);
    background: var(--paper-2);
    padding: 8px 22px;
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 600;
}

.detail-pay {
    margin: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
}
.detail-pay-left { display: flex; flex-direction: column; gap: 4px; }
.detail-pay-left .muted { font-size: 12.5px; color: var(--ink-3); }
.detail-pay-amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.detail-pay-right { display: flex; align-items: center; gap: 10px; }
@media (min-width: 1024px) {
    .detail-section, .detail-pay { margin-inline: 0; }
}

/* =====================================================================
   FLIGHTS LANDING PAGE — large product tabs, trip-type pills + bundle
   toggle, horizontal 5-cell search bar, filter chip row, trending grid.
   ===================================================================== */

/* ---- Product tabs (.search-tabs) override on the landing page only ---- */
.search-tabs.lg {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px;
    margin: 0 14px 16px;
    border-bottom: 0;
    gap: 6px;
}
.search-tabs.lg .search-tab {
    padding: 12px 22px;
    font-size: 14.5px;
    font-weight: 700;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: 99px;
    height: 44px;
}
.search-tabs.lg .search-tab.active {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}
.search-tabs.lg .search-tab:hover:not(.active) { background: var(--paper-2); }

/* ---- Trip-type pills + Add-a-hotel toggle ---- */
.flights-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 14px 12px;
}
.trip-pills {
    display: flex;
    gap: 8px;
    background: var(--paper-2);
    border-radius: 99px;
    padding: 4px;
}
.trip-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 99px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
    border: 0;
    background: transparent;
}
.trip-pill input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.trip-pill.active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 3px oklch(0.20 0.03 250 / 0.10);
}
.trip-pill-icon {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-3);
}
.trip-pill.active .trip-pill-icon { color: var(--brand-ink); }

.bundle-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
}
.bundle-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bundle-toggle .toggle-switch {
    position: relative;
    width: 38px; height: 22px;
    background: var(--line);
    border-radius: 99px;
    transition: background .15s;
    flex-shrink: 0;
}
.bundle-toggle .toggle-switch::after {
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 2px oklch(0.20 0.03 250 / 0.25);
    transition: left .15s;
}
.bundle-toggle input:checked + .toggle-switch { background: var(--brand-ink); }
.bundle-toggle input:checked + .toggle-switch::after { left: 18px; }

/* ---- The 5-cell search bar ---- */
.search-bar {
    display: grid;
    /* Columns: [FROM] [swap] [TO] [Dates — combined] [Travellers] [Search] */
    grid-template-columns: 1fr auto 1fr 1.2fr 1fr auto;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: visible;
    margin: 0 14px;
    min-height: 96px;
    position: relative;   /* anchors the absolute-positioned .cal-pop / .pax-pop popovers below the bar */
}
.srch-cell {
    position: relative;
    padding: 14px 18px;
    min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
    justify-content: center;
}
.srch-cell + .srch-cell { border-inline-start: 1px solid var(--line-2); }
.srch-cell-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-3);
    font-weight: 700;
}
.srch-cell-display {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: start;
    display: flex; flex-direction: column;
    color: inherit;
    font: inherit;
    min-width: 0;
}
.srch-cell-iata {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.1;
}
.srch-cell-city {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.srch-cell-airport {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.srch-cell-main {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
}
.srch-cell-sub {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-top: 2px;
}
.srch-cell-sub .dot { margin: 0 4px; color: var(--ink-4); }
.srch-cell-edit {
    width: 100%;
    padding: 6px 0;
    border: 0;
    border-bottom: 2px solid var(--brand-ink);
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    outline: none;
}
.srch-cell.editing .srch-cell-edit { display: block; }
.srch-cell .ac-pop {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    min-width: 100%;
    width: 420px;
    max-width: calc(100vw - 28px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px oklch(0.20 0.03 250 / 0.12);
    z-index: 50;
    max-height: 380px;
    overflow-y: auto;
    padding: 6px;
}

/* ----- Autocomplete rows (cities + airports) ----- */
.ac-row {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 10px 12px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: start;
    font: inherit;
    color: var(--ink);
}
.ac-row + .ac-row { margin-top: 2px; }
.ac-row:hover { background: var(--paper-2); }
.ac-row.is-sub { padding-inline-start: 32px; }   /* indent sub-airports under their metro */
.ac-row.is-selected { background: var(--paper-2); }
.ac-row-icon {
    width: 36px; height: 36px;
    background: var(--paper-2);
    border-radius: 10px;
    display: grid; place-items: center;
    color: var(--ink-2);
    flex-shrink: 0;
}
.ac-row.is-sub .ac-row-icon { background: transparent; }
.ac-row-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ac-row-line {
    font-size: 14px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-row-line strong { font-weight: 800; }
.ac-row-iata { font-weight: 700; }
.ac-row-sub  { font-size: 12px; color: var(--ink-3); }
.ac-row-check {
    color: var(--brand);
    display: inline-flex;
    align-items: center;
}

/* Native date inputs are styled as compact buttons that overlay the cell.
   When the user clicks the display, JS focuses the input which fires the
   native picker. We never show the visible input value — the display
   spans render the formatted date. */
.srch-cell-date {
    position: absolute;
    inset: 0;
    opacity: 0;
    border: 0;
    cursor: pointer;
    z-index: 1;
}

/* Swap button between FROM and TO */
.srch-swap {
    display: grid; place-items: center;
    width: 44px;
    background: transparent;
    border: 0;
    color: var(--ink-3);
    cursor: pointer;
    align-self: center;
    height: 44px;
    margin-inline: -10px;
    border-radius: 99px;
    z-index: 2;
    transition: background .15s, color .15s, transform .15s;
}
.srch-swap:hover { background: var(--paper-2); color: var(--brand-ink); transform: rotate(180deg); }

/* Search submit button on the right */
.srch-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ink);
    color: white;
    border: 0;
    padding: 0 28px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    margin: 6px 6px 6px 0;
    border-radius: 12px;
}
.srch-go:hover { filter: brightness(1.1); }

/* Travellers popover */
.pax-pop {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 24px oklch(0.20 0.03 250 / 0.12);
    z-index: 60;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pax-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pax-row-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.pax-row-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.pax-stepper { display: inline-flex; align-items: center; gap: 6px; }
.pax-stepper button {
    width: 28px; height: 28px;
    border: 1px solid var(--line); background: var(--surface);
    border-radius: 50%; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--ink-2);
    line-height: 1; padding: 0;
}
.pax-stepper button:hover { background: var(--paper-2); }
.pax-stepper [data-count] { width: 22px; text-align: center; font-weight: 700; }
.pax-row select {
    border: 1px solid var(--line); border-radius: 8px;
    padding: 6px 10px; font: inherit; background: var(--surface); color: var(--ink);
}
.pax-row-cabin { border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 6px; }

/* ----- Per-child age list (rendered inside .pax-pop, between adults and the cabin row) ----- */
.pax-children { display: flex; flex-direction: column; gap: 8px; }
.pax-child-row {
    display: grid;
    grid-template-columns: 70px 1fr 28px;
    align-items: center;
    gap: 8px;
}
.pax-child-row select {
    width: 100%;
    border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 10px; font: inherit; background: var(--surface); color: var(--ink);
}
.pax-remove-child {
    width: 28px; height: 28px;
    border: 0; background: transparent;
    border-radius: 50%;
    color: var(--ink-4); font-size: 18px; line-height: 1; cursor: pointer;
}
.pax-remove-child:hover { background: var(--paper-2); color: var(--danger); }
.pax-add-child {
    align-self: flex-start;
    background: transparent;
    border: 0;
    color: var(--brand-ink);
    font: inherit; font-weight: 700; font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
}
.pax-add-child:hover { text-decoration: underline; }
.pax-add-child span { display: inline-block; margin-inline-end: 6px; font-weight: 800; }

/* ---- Filter chip row beneath the search bar ---- */
.search-filters {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 14px 14px 0;
}
.search-filters .fill { flex: 1; }
.filter-chip-row {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 99px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.filter-chip-row input { margin: 0; }
.filter-chip-row:hover { background: var(--paper-2); }
.filter-chip-row.source-pill { cursor: default; }

/* ---- Trending destinations grid ---- */
.trending { margin: 22px 14px 0; }
.trending-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-3);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.trending-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.dest-card {
    position: relative;
    display: flex; flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    color: white;
    text-decoration: none;
    overflow: hidden;
    padding: 14px 16px 16px;
    isolation: isolate;
}
.dest-card-tint {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, oklch(0 0 0 / 0.10) 0%, oklch(0 0 0 / 0.55) 100%);
    z-index: -1;
}
.dest-card-route {
    align-self: flex-start;
    background: oklch(1 0 0 / 0.92);
    color: var(--ink);
    padding: 4px 10px;
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}
.dest-card-foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.dest-card-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 4px oklch(0 0 0 / 0.35);
}
.dest-card-price {
    font-size: 13px;
    text-shadow: 0 1px 4px oklch(0 0 0 / 0.35);
}
.dest-card-price strong { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.dest-card-price .muted { color: oklch(1 0 0 / 0.7); }
.dest-card:hover { transform: translateY(-2px); transition: transform .15s; }

@media (min-width: 720px) {
    .trending-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- Responsive collapse for the search bar on narrow viewports ---- */
@media (max-width: 1023px) {
    .search-bar {
        grid-template-columns: 1fr 1fr;
    }
    .srch-cell + .srch-cell { border-inline-start: 0; border-top: 1px solid var(--line-2); }
    .srch-swap { grid-column: 1 / -1; height: 36px; }
    .srch-go { grid-column: 1 / -1; margin: 6px; height: 48px; }
}
@media (min-width: 1024px) {
    .search-tabs.lg, .flights-strip, .search-bar, .search-filters, .trending { margin-inline: 0; }
}

/* =====================================================================
   CALENDAR POPOVER  — shared two-month range picker, opens from Depart / Return
   ===================================================================== */
.cal-pop {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 30;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 16px 40px oklch(0 0 0 / 0.18);
    padding: 18px;
    min-width: 660px;
    max-width: calc(100vw - 28px);
}
.cal-tabs {
    display: inline-flex;
    background: var(--paper-2);
    padding: 4px;
    border-radius: 99px;
    gap: 2px;
    margin-bottom: 14px;
}
.cal-tab {
    background: transparent;
    border: 0;
    padding: 6px 18px;
    border-radius: 99px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.cal-tab:hover  { color: var(--ink); }
.cal-tab.active { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 4px oklch(0 0 0 / 0.08); }
.cal-flex-note {
    background: var(--brand-tint);
    color: var(--brand-ink);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    margin-bottom: 12px;
}
.cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.cal-nav-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ink-3);
    display: grid; place-items: center;
}
.cal-nav-btn:hover { background: var(--paper-2); color: var(--ink); }
.cal-nav-title {
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    color: var(--ink-3);
    letter-spacing: 0.01em;
}
.cal-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.cal-month-head {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 10px;
}
.cal-week-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: lowercase;
    margin-bottom: 6px;
}
.cal-week-head span { padding: 4px 0; }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}
.cal-day {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    height: 36px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    border-radius: 0;
    position: relative;
    z-index: 0;
}
.cal-day:hover:not([disabled]):not(.cal-day-blank) { background: var(--paper-2); border-radius: 8px; }
.cal-day-blank { visibility: hidden; pointer-events: none; }
.cal-day-past  { color: var(--ink-4); cursor: not-allowed; }
.cal-day-today { box-shadow: inset 0 0 0 1.5px var(--line); border-radius: 8px; }
.cal-day-in-range {
    background: var(--brand-tint);
    color: var(--brand-ink);
    border-radius: 0;
}
.cal-day-start, .cal-day-end {
    background: var(--brand-tint);
    color: var(--brand);
    font-weight: 800;
    z-index: 1;
}
.cal-day-start { border-top-left-radius: 18px; border-bottom-left-radius: 18px; }
.cal-day-end   { border-top-right-radius: 18px; border-bottom-right-radius: 18px; }
.cal-day-start.cal-day-end { border-radius: 18px; }
[dir="rtl"] .cal-day-start { border-radius: 0 18px 18px 0; }
[dir="rtl"] .cal-day-end   { border-radius: 18px 0 0 18px; }
[dir="rtl"] .cal-day-start.cal-day-end { border-radius: 18px; }
.cal-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-2);
}
.cal-foot-hint {
    font-size: 13px;
    color: var(--ink-3);
}
.cal-foot .fill { flex: 1; }
.cal-clear {
    background: transparent;
    border: 0;
    color: var(--ink-3);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
}
.cal-clear:hover { color: var(--ink); }

/* Compact down a touch on tablets; the two-month grid still fits on phones via wrap */
@media (max-width: 720px) {
    .cal-pop { min-width: 0; width: calc(100vw - 28px); padding: 14px; }
    .cal-months { grid-template-columns: 1fr; gap: 18px; }
}

/* =====================================================================
   RESULTS CARD — bottom-of-card action row
   ===================================================================== */
.combo-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0 4px;
    margin-top: 8px;
    border-top: 1px solid var(--line-2);
}
.combo-action-link {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 6px;
    border-radius: 6px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.combo-action-link:hover { background: var(--brand-tint); }
.combo-action-link svg { display: inline-block; vertical-align: -2px; }
.combo-action-sep { color: var(--ink-4); font-weight: 700; }

/* Charter / combination get accent treatments so they read as "watch this" */
.combo-action-charter { color: oklch(0.55 0.16 60); }       /* warm amber */
.combo-action-charter:hover { background: oklch(0.95 0.04 60); }
.combo-action-combo   { color: oklch(0.45 0.14 280); }      /* indigo */
.combo-action-combo:hover { background: oklch(0.95 0.04 280); }

/* =====================================================================
   POPOVER HIDDEN-ATTRIBUTE GUARD
   Some popovers picked up explicit `display` rules elsewhere that override the
   HTML `hidden` attribute (which would normally apply display: none). Force them
   to honor the attribute so toggling via JS reliably shows/hides them.
   ===================================================================== */
.pax-pop[hidden],
.ac-pop[hidden],
.cal-pop[hidden],
.modal[hidden],
[data-pax-pop][hidden],
[data-ac-pop][hidden],
[data-cal-pop][hidden] { display: none !important; }

/* =====================================================================
   MODAL — used by Results / Details for baggage, terms, charter, combination
   ===================================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: oklch(0.18 0.02 250 / 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.modal-card {
    position: relative;
    background: var(--surface);
    border-radius: 16px;
    padding: 24px 28px;
    max-width: 760px;
    width: 100%;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    box-shadow: 0 24px 60px oklch(0 0 0 / 0.25);
    z-index: 1;
}
.modal-close {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    width: 32px; height: 32px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--ink-3);
    cursor: pointer;
    display: grid; place-items: center;
}
.modal-close:hover { background: var(--paper-2); color: var(--ink); }
.modal-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 12px;
}
.modal-subtitle {
    font-size: 13px;
    color: var(--brand);
    font-weight: 700;
    margin-top: -4px;
}
.modal-hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}
.modal-hero-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--brand-tint);
    color: var(--brand-ink);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.modal-body { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.modal-body p { margin: 0 0 12px; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-intro { color: var(--ink-3); font-size: 13px; }
.modal-foot { display: flex; justify-content: flex-end; margin-top: 18px; }
.modal-foot-hint {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 14px;
}
.modal-bullets {
    margin: 0 0 12px;
    padding-inline-start: 18px;
    display: flex; flex-direction: column; gap: 6px;
}
.modal-bullets li { color: var(--ink-2); }

/* ----- Baggage details grid inside the baggage modal ----- */
.bag-grid {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.bag-grid-head, .bag-grid-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) repeat(3, 130px);
    align-items: center;
}
.bag-grid-head {
    background: var(--paper-2);
    padding: 14px 16px;
}
.bag-grid-row {
    padding: 14px 16px;
    border-top: 1px solid var(--line-2);
}
.bag-grid-th {
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.bag-grid-icon { color: var(--ink-2); }
.bag-grid-th-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.bag-grid-th-sub   { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-top: 1px; }
.bag-grid-route { font-size: 13.5px; color: var(--ink); }
.bag-grid-arrow { color: var(--ink-3); margin: 0 4px; }
.bag-grid-cell  { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bag-grid-check {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand);
    display: grid; place-items: center;
}
.bag-grid-x {
    color: var(--ink-4);
    font-size: 18px;
    font-weight: 800;
}
.bag-grid-amount { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.bag-grid-amount.muted { color: var(--ink-4); font-weight: 500; }

@media (max-width: 720px) {
    .bag-grid-head, .bag-grid-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .bag-grid-head { display: none; }
    .bag-grid-row { padding: 12px; }
    .bag-grid-cell::before {
        content: attr(data-label);
        font-size: 11px; color: var(--ink-3); font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.04em;
    }
}

/* ----- Card-terms modal layout ----- */
.terms-block { display: flex; flex-direction: column; gap: 14px; }
.terms-row {
    background: var(--brand-tint);
    border-radius: 12px;
    padding: 14px 18px;
}
.terms-row-route {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-ink);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
}
.terms-row-line {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--ink);
    padding: 4px 0;
}
.terms-row-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: white;
    color: var(--brand);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.terms-row-info { color: var(--ink-3); display: inline-flex; cursor: help; }

/* =====================================================================
   DETAILS PAGE — banners (charter / combination) + per-leg baggage row
   ===================================================================== */
.detail-banner-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 14px 16px;
}
.detail-banner {
    appearance: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: start;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    font: inherit;
    color: var(--ink);
    transition: background .15s, border-color .15s;
}
.detail-banner:hover { background: var(--paper-2); }
.detail-banner .fill { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.detail-banner .fill strong { font-size: 14px; font-weight: 800; }
.detail-banner .fill .muted { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.detail-banner-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.detail-banner-chev { color: var(--ink-4); flex-shrink: 0; }
.detail-banner-charter {
    background: oklch(0.98 0.025 60);
    border-color: oklch(0.85 0.10 60);
}
.detail-banner-charter .detail-banner-icon {
    background: oklch(0.92 0.08 60);
    color: oklch(0.45 0.16 60);
}
.detail-banner-charter:hover { background: oklch(0.95 0.04 60); }
.detail-banner-combo {
    background: oklch(0.97 0.025 280);
    border-color: oklch(0.85 0.10 280);
}
.detail-banner-combo .detail-banner-icon {
    background: oklch(0.92 0.07 280);
    color: oklch(0.45 0.15 280);
}
.detail-banner-combo:hover { background: oklch(0.95 0.04 280); }

/* Per-leg baggage row inside .detail-section: icons + Baggage details + Card terms */
.detail-bag-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 0 0;
    margin-top: 14px;
    border-top: 1px solid var(--line-2);
}
.detail-bag-row .fill { flex: 1; }