/* ============================================================
   برج أبو طيارة — Brand tokens & shared components
   Concept: a night window at the top of the tower. The menu reads
   like an airport departure board, set under a brass altimeter,
   with the tower's red obstruction light as the only warm signal.
   ============================================================ */
:root {
  /* Color */
  --night:   #0A1324;   /* page ground: Baghdad sky after sunset   */
  --night-2: #0F1B33;   /* raised surfaces                          */
  --night-3: #16243F;   /* inputs, price flaps, hover               */
  --rule:    #24345A;   /* hairlines                                */
  --brass:   #D9AE62;   /* primary accent: brass instruments        */
  --brass-hi:#F2D9A6;   /* lit windows, highlights                  */
  --ink:     #ECEFF6;   /* main text                                */
  --mist:    #93A0BC;   /* secondary text                           */
  --beacon:  #E5544B;   /* tower obstruction light (sparingly)      */
  --ok:      #5FC7A0;
  --warn:    #E9B949;
  --paper:   #F1E6CD;   /* boarding pass stock                      */
  --paper-ink:#14203A;

  /* Type */
  --font-display: 'Reem Kufi', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-board: 'Handjet', 'IBM Plex Sans Arabic', ui-monospace, monospace;

  /* Scale */
  --fs-xs: .78rem; --fs-sm: .88rem; --fs-md: 1rem; --fs-lg: 1.2rem;
  --fs-xl: 1.6rem; --fs-2xl: 2.2rem; --fs-3xl: 3rem;

  --radius: 12px;
  --radius-sm: 8px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brass-hi); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Sky & beacon ---------- */
.sky {
  position: relative;
  background-color: var(--night);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(242,217,166,.75), transparent 60%),
    radial-gradient(1px 1px at 33% 42%, rgba(236,239,246,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 12%, rgba(236,239,246,.7), transparent 60%),
    radial-gradient(1px 1px at 76% 34%, rgba(242,217,166,.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 8%, rgba(236,239,246,.6), transparent 60%),
    radial-gradient(1px 1px at 46% 64%, rgba(236,239,246,.35), transparent 60%),
    radial-gradient(1px 1px at 22% 72%, rgba(236,239,246,.3), transparent 60%),
    linear-gradient(180deg, #081022 0%, var(--night) 55%, #101D38 100%);
  background-size: 260px 220px, 300px 260px, 340px 240px, 280px 300px, 360px 280px, 320px 300px, 300px 340px, 100% 100%;
  overflow: hidden;
}
.skyline { display: block; width: 100%; height: 56px; color: #142242; }
.skyline .lit { fill: var(--brass-hi); opacity: .55; }

.beacon { animation: beacon 2.6s steps(1, end) infinite; }
@keyframes beacon { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } }
@media (prefers-reduced-motion: reduce) {
  .beacon { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Brand lockup ---------- */
.lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.lockup .mark { flex: none; }
.lockup .kicker { font-size: var(--fs-sm); color: var(--mist); line-height: 1; margin-bottom: 6px; }
.lockup .name { font-family: var(--font-display); font-weight: 700; color: var(--brass); line-height: 1.15; }
.lockup .latin { font-family: var(--font-board); letter-spacing: .22em; color: var(--mist); font-size: var(--fs-sm); line-height: 1; direction: ltr; text-align: right; }

/* ---------- Departure board strip ---------- */
.board {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-family: var(--font-body); font-size: .95rem; line-height: 1.4;
  color: var(--brass-hi);
  background: rgba(10,19,36,.72);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}
.board .sep { color: var(--rule); }
/* Handjet is only for digits and Latin (its Arabic letters do not join on iPhone Safari): wrap numbers in .bn */
.bn { font-family: var(--font-board); font-weight: 500; font-size: 1.2em; line-height: 1; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); vertical-align: middle; }
.dot.closed { background: var(--beacon); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-md);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brass); color: var(--night); }
.btn-primary:hover { background: var(--brass-hi); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-hi); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Form controls ---------- */
.field { display: grid; gap: 6px; }
.field label, .label { font-size: var(--fs-sm); color: var(--mist); font-weight: 500; }
.input, .select, .textarea {
  width: 100%; min-height: 46px;
  background: var(--night-3); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 10px 12px; color: var(--ink);
}
.textarea { min-height: 84px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(217,174,98,.18); }
.input::placeholder, .textarea::placeholder { color: #5d6a87; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--rule);
  background: var(--night-2); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer;
}
.chip[aria-pressed="true"], .chip.is-active { background: var(--brass); border-color: var(--brass); color: var(--night); }
.chip[disabled] { opacity: .4; cursor: not-allowed; }
.chip svg { width: 18px; height: 18px; }

.badge {
  display: inline-block; font-size: .72rem; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 999px;
  color: var(--brass-hi); border: 1px solid rgba(217,174,98,.45); background: rgba(217,174,98,.08);
  white-space: nowrap;
}

.notice { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-sm); color: var(--mist); }
.notice.error { border-color: rgba(229,84,75,.55); color: #F3B3AE; background: rgba(229,84,75,.08); }
.notice.ok { border-color: rgba(95,199,160,.5); color: #BDEBD9; background: rgba(95,199,160,.08); }

/* ---------- Boarding pass ---------- */
.pass {
  --notch: 14px;
  position: relative;
  background: var(--paper); color: var(--paper-ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.pass-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--paper-ink); color: var(--brass);
  padding: 12px 18px;
}
.pass-head .t { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.pass-head .en { font-family: var(--font-board); letter-spacing: .2em; font-size: .95rem; color: var(--brass-hi); direction: ltr; }
.pass-body { padding: 16px 18px 18px; display: grid; gap: 14px; }
.pass .lbl { font-size: .74rem; color: #5B6683; font-weight: 600; letter-spacing: .02em; }
.pass .val { font-weight: 600; font-size: 1rem; }
.pass .code { font-family: var(--font-board); font-size: 3.1rem; line-height: 1; letter-spacing: .06em; direction: ltr; text-align: right; }
.pass-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pass-grid > div { min-width: 0; }
.pass-route { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pass-route .line { flex: 1; height: 0; border-top: 2px dashed #B8A985; position: relative; }
.pass-route svg { width: 20px; height: 20px; color: var(--paper-ink); }
.pass-perf {
  position: relative; height: 0; border-top: 2px dashed #C9BB98; margin: 0 18px;
}
.pass-perf::before, .pass-perf::after {
  content: ""; position: absolute; top: calc(var(--notch) / -2 - 1px);
  width: var(--notch); height: var(--notch); border-radius: 50%; background: var(--night);
}
.pass-perf::before { right: calc(-18px - var(--notch) / 2); }
.pass-perf::after { left: calc(-18px - var(--notch) / 2); }
.pass-foot { padding: 14px 18px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; padding: 6px 12px; border-radius: 999px; background: rgba(20,32,58,.08); }
.status-pill .dot { width: 9px; height: 9px; }
.st-pending .dot { background: var(--warn); }
.st-confirmed .dot, .st-seated .dot, .st-done .dot { background: #2E9C76; }
.st-cancelled .dot, .st-no_show .dot { background: var(--beacon); }
@media (max-width: 460px) {
  .pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass .code { font-size: 2.6rem; }
}

/* ---------- Spinner / skeleton ---------- */
.skeleton { background: linear-gradient(90deg, var(--night-2), var(--night-3), var(--night-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--radius-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }