/* ═══════════════════════════════════════════════════════════════════════════
   IMMERSA — Component Library (Phase 27 · Phase 2)
   ───────────────────────────────────────────────────────────────────────────
   Eleven components. Each class is self-contained — .btn works without a
   wrapper, .field works without another class. No component depends on
   being inside another. Load AFTER tokens.css + base.css, BEFORE any
   page-specific CSS. Only design-system.html links this file in Phase 2;
   pages migrate in Phase 3 onward.

   Decisions locked 2026-04-20:
     · Primary CTA is cyan (--accent), not gold. Gold is for emphasis.
     · RTL is the default. All layout uses logical properties (inline-*).
     · Units: rem for typography + spacing; px for radii + shadows + borders.
     · Every interactive element has :focus-visible via --e-glow-accent.
     · Motion respects prefers-reduced-motion (see base.css global override).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Button ===
   ───────────────────────────────────────────────────────────────────────────
   Variants : .btn-primary (cyan fill) · .btn-secondary (outlined)
              .btn-ghost (borderless) · .btn-danger · .btn-icon (square)
   Sizes    : .btn-sm (32h) · default (40h) · .btn-lg (48h)
   States   : :hover · :focus-visible · :disabled · .is-loading
   A11y     : icon-only buttons MUST provide aria-label.
              Touch target ≥ 44×44 enforced on .btn-icon at default size.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  --_h:  40px;
  --_px: var(--s-4);
  --_fs: var(--fs-sm);
  --_bg: transparent;
  --_fg: var(--text);
  --_br: var(--border-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--_h);
  min-width: var(--_h);
  padding-inline: var(--_px);
  border: 1px solid var(--_br);
  border-radius: var(--r-md);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--sans);
  font-size: var(--_fs);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}

.btn:focus-visible { outline: none; box-shadow: var(--e-glow-accent); }
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  --_bg: var(--accent);
  --_fg: #001014;
  --_br: var(--accent);
}
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  --_bg: var(--accent-2);
  --_br: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(0 229 255 / 0.22);
}

.btn-secondary {
  --_bg: transparent;
  --_fg: var(--text);
  --_br: var(--border-strong);
}
.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  --_fg: var(--accent);
  --_br: var(--accent);
}

.btn-ghost {
  --_bg: transparent;
  --_fg: var(--text);
  --_br: transparent;
}
.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  --_bg: var(--surface-2);
}

.btn-danger {
  --_bg: var(--danger);
  --_fg: #ffffff;
  --_br: var(--danger);
}
.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.08); transform: translateY(-1px); }
.btn-danger:focus-visible { box-shadow: var(--e-glow-danger); }

.btn-icon { padding-inline: 0; width: var(--_h); aspect-ratio: 1; }

.btn-sm { --_h: 32px; --_px: var(--s-3); --_fs: var(--fs-sm); border-radius: var(--r-sm); }
.btn-lg { --_h: 48px; --_px: var(--s-5); --_fs: var(--fs-base); }

/* --- Loading state — label is replaced by a centered spinner --- */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid var(--_fg);
  border-block-start-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: btn-spin 720ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Field (Input · Select · Textarea) ===
   ───────────────────────────────────────────────────────────────────────────
   Anatomy : <label> → input/select/textarea → helper | error text
   Focus   : border becomes --border-strong, + --e-glow-accent halo.
   Error   : .field--error sets border --danger + helper red.
   A11y    : label always visible (never placeholder-only).
             aria-invalid="true" on .field--error input.
             aria-describedby links input to helper/error node.
   ═══════════════════════════════════════════════════════════════════════════ */

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field-label {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
  letter-spacing: var(--tracking-normal);
}
.field-label .field-required { color: var(--danger); margin-inline-start: 2px; }

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  height: 40px;
  padding-inline: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.4;
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out),
    background   var(--dur-fast) var(--ease-out);
}

.field-textarea { height: auto; min-height: 88px; padding-block: var(--s-3); resize: vertical; line-height: var(--lh-base); }

.field-input::placeholder,
.field-textarea::placeholder { color: var(--text-dim); }

.field-input:hover:not(:disabled),
.field-select:hover:not(:disabled),
.field-textarea:hover:not(:disabled) { border-color: var(--border-strong); }

.field-input:focus-visible,
.field-select:focus-visible,
.field-textarea:focus-visible {
  border-color: var(--border-strong);
  box-shadow: var(--e-glow-accent);
  background: var(--surface);
}

.field-input:disabled,
.field-select:disabled,
.field-textarea:disabled { opacity: 0.5; cursor: not-allowed; }

/* Select chevron — uses inline SVG background, flips with dir */
.field-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aafcc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 14px;
  padding-inline-start: var(--s-4);
  padding-inline-end: calc(var(--s-4) + 18px);
}
[dir="rtl"] .field-select { background-position: left 12px center; }
[dir="ltr"] .field-select { background-position: right 12px center; }

.field-help { font-size: var(--fs-xs); color: var(--text-dim); line-height: var(--lh-snug); }

/* Error state — toggled via .field--error on wrapper */
.field--error .field-input,
.field--error .field-select,
.field--error .field-textarea { border-color: var(--danger); }
.field--error .field-input:focus-visible,
.field--error .field-select:focus-visible,
.field--error .field-textarea:focus-visible { box-shadow: var(--e-glow-danger); }
.field--error .field-help { color: var(--danger); }


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Card ===
   ───────────────────────────────────────────────────────────────────────────
   Base    : .card — surface, border, radius, --s-5 padding.
   Variant : .card--tour (media-first), .card--stat (number-first),
             .card--empty (empty state), .card--clickable (hover lift).
   Parts   : .card-media · .card-header · .card-body · .card-footer
   ═══════════════════════════════════════════════════════════════════════════ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--e-1);
  transition:
    border-color var(--dur-base) var(--ease-out),
    transform    var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out);
}

.card--flat { box-shadow: none; }

.card--clickable { cursor: pointer; }
.card--clickable:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--e-2);
}
.card--clickable:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--e-glow-accent), var(--e-2);
}

.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-4); }
.card-title { font-family: var(--sans); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: var(--tracking-normal); }
.card-eyebrow { font-family: var(--mono); font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.card-body { color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-base); }
.card-footer { display: flex; align-items: center; gap: var(--s-3); margin-block-start: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--border); }

/* --- Tour card (media on top) --- */
.card--tour { padding: 0; overflow: hidden; }
.card--tour .card-media {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.card--tour .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.card--tour.card--clickable:hover .card-media img { transform: scale(1.03); }
.card--tour .card-header,
.card--tour .card-body,
.card--tour .card-footer { padding-inline: var(--s-5); }
.card--tour .card-header { padding-block-start: var(--s-4); margin-block-end: var(--s-2); }
.card--tour .card-body { padding-block-end: var(--s-4); }
.card--tour .card-footer { padding-block: var(--s-3); margin-block-start: 0; }

/* --- Stat card (number-first) --- */
.card--stat { padding: var(--s-4) var(--s-5); }
.card--stat .stat-label { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.card--stat .stat-value { font-family: var(--mono); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-strong); font-feature-settings: 'tnum'; line-height: var(--lh-tight); margin-block-start: var(--s-2); }
.card--stat .stat-delta { font-family: var(--mono); font-size: var(--fs-xs); color: var(--success); margin-block-start: var(--s-1); }
.card--stat .stat-delta--down { color: var(--danger); }


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Modal ===
   ───────────────────────────────────────────────────────────────────────────
   Structure: [data-modal-backdrop] wraps [role="dialog"].panel.
   Sizes   : .modal-panel--sm (440) · --md (560) · --lg (720) · --xl (920)
   Motion  : backdrop fades in, panel slides +8px → 0 over --dur-base.
   A11y    : aria-modal="true", aria-labelledby="<h id>".
             Focus trap + Esc-to-close implemented by modal.js.
             Unsaved-form flag: add data-block-outside-close to prevent
             click-outside dismissal.
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-bg);
  background: rgb(5 8 15 / 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: var(--s-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.modal-panel {
  position: relative;
  z-index: var(--z-modal);
  width: 100%;
  max-width: 560px;
  max-height: min(92vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  box-shadow: var(--e-3);
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity   var(--dur-base) var(--ease-out);
}
.modal-backdrop.is-open .modal-panel { transform: translateY(0); opacity: 1; }

.modal-panel--sm { max-width: 440px; }
.modal-panel--md { max-width: 560px; }
.modal-panel--lg { max-width: 720px; }
.modal-panel--xl { max-width: 920px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  border-block-end: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title { font-family: var(--sans); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: var(--tracking-normal); }
.modal-close {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.modal-close:hover { color: var(--text); background: var(--surface-3); }
.modal-close:focus-visible { outline: none; box-shadow: var(--e-glow-accent); }

.modal-body { padding: var(--s-5) var(--s-6); overflow-y: auto; flex: 1; color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-base); }
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-block-start: 1px solid var(--border);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Toast ===
   ───────────────────────────────────────────────────────────────────────────
   Region   : .toast-region (position-fixed, aria-live).
              Mobile → bottom-center. Desktop → top-start (flips in RTL).
   Variants : .toast--success · .toast--error · .toast--info
   Motion   : slide-in 240ms, auto-dismiss 4s (8s for errors), pause on hover.
   A11y     : region has aria-live="polite", errors use role="alert".
   ═══════════════════════════════════════════════════════════════════════════ */

.toast-region {
  position: fixed;
  inset-block-end: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  inset-inline: var(--s-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  pointer-events: none;
}
@media (min-width: 768px) {
  .toast-region {
    inset-block-end: auto;
    inset-block-start: calc(var(--s-5) + env(safe-area-inset-top, 0px));
    inset-inline-start: var(--s-5);
    inset-inline-end: auto;
    align-items: flex-start;
  }
}

.toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  max-width: min(440px, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  transform: translateY(8px);
  opacity: 0;
  animation: toast-in var(--dur-base) var(--ease-out) forwards;
}
.toast.is-leaving { animation: toast-out var(--dur-fast) var(--ease-in-out) forwards; }
@keyframes toast-in  { to { transform: translateY(0);  opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-6px); opacity: 0; } }

.toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.toast--success .toast-dot { background: var(--success); box-shadow: 0 0 8px rgb(0 196 140 / 0.6); }
.toast--error   .toast-dot { background: var(--danger);  box-shadow: 0 0 8px rgb(255 77 109 / 0.6); }
.toast--info    .toast-dot { background: var(--accent);  box-shadow: 0 0 8px rgb(0 229 255 / 0.6); }

.toast-close {
  margin-inline-start: var(--s-2);
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.toast-close:hover { color: var(--text); }
.toast-close:focus-visible { outline: none; box-shadow: var(--e-glow-accent); }


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Badge ===
   ───────────────────────────────────────────────────────────────────────────
   Variants : .badge--neutral · --success · --warning · --danger · --gold
   Arabic badges: use .badge--ar to skip uppercase transform.
   ═══════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 22px;
  padding-inline: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.badge--ar {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-weight: var(--fw-medium);
}

.badge--neutral { background: var(--surface-2); border-color: var(--border2); color: var(--muted); }
.badge--success { background: rgb(0 196 140 / 0.10); border-color: rgb(0 196 140 / 0.35); color: var(--success); }
.badge--warning { background: rgb(244 184 64 / 0.10); border-color: rgb(244 184 64 / 0.35); color: var(--warning); }
.badge--danger  { background: rgb(255 77 109 / 0.10); border-color: rgb(255 77 109 / 0.35); color: var(--danger); }
.badge--gold    { background: rgb(212 168 67 / 0.10); border-color: rgb(212 168 67 / 0.40); color: var(--gold); }


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Table ===
   ───────────────────────────────────────────────────────────────────────────
   Zebra dark. Sticky header when wrapped in a scroll container.
   Numbers right-aligned via text-align: end (logical — flips in LTR).
   Pagination: .table-pagination with mono numbers.
   ═══════════════════════════════════════════════════════════════════════════ */

.table-wrap { position: relative; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }

.table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--fs-sm); color: var(--text); }
.table thead th {
  position: sticky;
  inset-block-start: 0;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: start;
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--border2);
  z-index: 1;
}
.table tbody td {
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
  line-height: var(--lh-snug);
}
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table tbody tr:nth-child(even) td { background: rgb(255 255 255 / 0.015); }
.table tbody tr:hover td { background: var(--surface-2); }
.table .num { font-family: var(--mono); font-feature-settings: 'tnum'; text-align: end; color: var(--text-strong); }

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border-block-start: 1px solid var(--border);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: var(--tracking-wide);
}


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Navigation — Sidebar · Topbar · Mobile drawer ===
   ───────────────────────────────────────────────────────────────────────────
   .nav-side   — desktop dashboard sidebar, fixed-width = --sidebar-w
   .nav-top    — topbar, sticky; +.nav-top--scrolled applies blur bg
   .nav-drawer — mobile slide-in from inline-start edge
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-side {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--bg2);
  border-inline-start: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-3);
  gap: var(--s-1);
}
[dir="ltr"] .nav-side { border-inline-start: 0; border-inline-end: 1px solid var(--border); }

.nav-side-section {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--s-4) var(--s-3) var(--s-2);
}

.nav-side-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-side-item:hover { background: var(--surface); color: var(--text); }
.nav-side-item:focus-visible { outline: none; box-shadow: var(--e-glow-accent); }
.nav-side-item.is-active { color: var(--text-strong); background: var(--surface); }
.nav-side-item.is-active::before {
  content: '';
  position: absolute;
  inset-block: var(--s-2);
  inset-inline-start: 0;
  width: 2px;
  background: var(--gold);
  border-radius: var(--r-pill);
}
.nav-side-item .nav-ico { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }

.nav-top {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--s-5);
  background: var(--bg);
  border-block-end: 1px solid var(--border);
  transition: background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out);
}
.nav-top--scrolled {
  background: rgb(5 8 15 / 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(320px, 86vw);
  background: var(--bg2);
  border-inline-end: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-3);
}
[dir="rtl"] .nav-drawer { inset-inline-start: auto; inset-inline-end: 0; border-inline-start: 1px solid var(--border); border-inline-end: 0; transform: translateX(100%); }
.nav-drawer.is-open { transform: translateX(0); }


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Empty state ===
   ───────────────────────────────────────────────────────────────────────────
   Anatomy : line-art icon → headline → sentence → single CTA.
   Use     : every list that can be empty gets this. No stock illustrations.
   ═══════════════════════════════════════════════════════════════════════════ */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--border2);
  border-radius: var(--r-lg);
  color: var(--text);
  background: var(--surface);
}

.empty-icon {
  width: 56px;
  height: 56px;
  color: var(--text-dim);
  opacity: 0.7;
}

.empty-title { font-family: var(--sans); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text-strong); }
.empty-copy  { font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); max-width: 42ch; line-height: var(--lh-base); }
.empty-action { margin-block-start: var(--s-2); }


/* ═══════════════════════════════════════════════════════════════════════════
   === Component: Loading — skeleton + spinner ===
   ───────────────────────────────────────────────────────────────────────────
   Skeleton for content > 2s. Spinner for in-flight button labels only.
   Reduced-motion: shimmer slows to 2s (from 1.4s) via global override.
   ═══════════════════════════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(90deg,
    var(--surface-2) 0%,
    var(--surface-3) 50%,
    var(--surface-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-sm);
  animation: sk-shimmer 1.4s linear infinite;
}
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton--text  { height: 0.9em; max-width: 70%; }
.skeleton--title { height: 1.25rem; max-width: 50%; }
.skeleton--block { height: 100%; }
.skeleton--circle { border-radius: 50%; }

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-block-start-color: var(--accent);
  border-radius: 50%;
  animation: btn-spin 720ms linear infinite;
  vertical-align: middle;
}
.spinner--sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }


/* ═══════════════════════════════════════════════════════════════════════════
   === Utilities: Arabic-specific ===
   ───────────────────────────────────────────────────────────────────────────
   .num-mono    — tabular mono for stats, prices, IDs.
   .num-latin   — force Latin digits in any context (tour IDs, codes).
   .currency-sar::after — appends " ر.س" in Arabic or " SAR" in English.
   ═══════════════════════════════════════════════════════════════════════════ */

.num-mono   { font-family: var(--mono); font-feature-settings: 'tnum'; }
.num-latin  { direction: ltr; unicode-bidi: isolate; font-feature-settings: 'lnum'; }

[dir="rtl"] .currency-sar::after { content: " ر.س"; color: var(--muted); font-size: 0.85em; }
[dir="ltr"] .currency-sar::before { content: "SAR "; color: var(--muted); font-size: 0.85em; }


/* ═══════════════════════════════════════════════════════════════════════════
   End of component library.
   ═══════════════════════════════════════════════════════════════════════════ */