/* Arabic and right-to-left (Arabic helper, night 2; decision 10, DESIGN 3 and 7, CONTRACT2).
   styles.css already uses logical properties, so the layout turns by itself; this file only adds what
   Arabic type needs, and the one-tap language switch. Nothing here edits styles.css: it overrides it. */

/* ---------- 1. the language switch (both languages): top corner, inline end, its own layer ---------- */
.lang-layer {
  position: fixed; z-index: 70; pointer-events: none;
  inset-block-start: calc(var(--safe-t) + var(--s2)); inset-inline-end: var(--s4);
}
.lang-switch {
  pointer-events: auto; min-block-size: 48px; min-inline-size: 48px; padding-inline: var(--s4);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-full); background: var(--night-glass); color: var(--cream);
  box-shadow: inset 0 0 0 1.5px rgba(185, 198, 228, 0.55), 0 4px 14px rgba(8, 14, 32, 0.35);
  font: 600 0.9375rem/1 var(--f-ui); letter-spacing: 0.01em;
  transition: transform var(--d-press) var(--ease-arrive);
}
.lang-switch[lang="ar"] { font: 500 1rem/1 var(--f-ar); letter-spacing: 0; }
.lang-switch[lang="en"] { font-family: "Hanken Grotesk", system-ui, "Segoe UI", sans-serif; }
.lang-switch:active { transform: scale(0.96); }
@media (hover: hover) { .lang-switch:hover { box-shadow: inset 0 0 0 1.5px var(--gold), 0 4px 14px rgba(8, 14, 32, 0.35); } }
/* on the narrowest phones the switch keeps its 48px height but takes less width, so the bar's title has more room */
@media (max-width: 360px) {
  .lang-switch { padding-inline: var(--s3); font-size: 0.875rem; }
  .lang-switch[lang="ar"] { font-size: 0.9375rem; }
}
/* the top bars leave room for it at their inline end, so their titles never run under it */
.has-lang-switch .topbar { padding-inline-end: calc(var(--s4) + var(--lang-w, 96px) + var(--s2)); }
.has-lang-switch .ticket-cover .topbar { padding-inline-end: calc(var(--lang-w, 96px) + var(--s2)); }

/* ---------- 2. Arabic type: Noto Naskh Arabic (vendor/fonts, already loaded for the basmala) ---------- */
html[dir="rtl"] {
  --f-display: var(--f-ar);
  --f-ui: var(--f-ar);
}
html[dir="rtl"] body { line-height: 1.75; }
/* Naskh has tall ascenders and deep descenders: the tight display line heights open up a little */
html[dir="rtl"] .sheet h2,
html[dir="rtl"] .sheet h3,
html[dir="rtl"] .topbar .title,
html[dir="rtl"] .door-scene .to,
html[dir="rtl"] .flight-bar .caption,
html[dir="rtl"] .ticket h2 { line-height: 1.45; }
html[dir="rtl"] .btn { line-height: 1.4; letter-spacing: 0; }
/* letter spacing breaks the joins between Arabic letters, and Arabic has no small capitals */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .topbar .sub,
html[dir="rtl"] .ticket .seatbox .k,
html[dir="rtl"] .ticket .fact .k,
html[dir="rtl"] .mark .ini { letter-spacing: 0; font-variant-caps: normal; text-transform: none; }
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .topbar .sub,
html[dir="rtl"] .ticket .seatbox .k,
html[dir="rtl"] .ticket .fact .k { font-size: 0.875rem; }

/* ---------- 3. things that stay left to right inside Arabic ---------- */
/* the seat pass code and phone numbers read the same in both languages */
html[dir="rtl"] .ticket .code,
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"] { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .ticket .code { font-family: "Hanken Grotesk", system-ui, sans-serif; }

/* ---------- 4. pointing icons ---------- */
/* styles.css already flips .flip-rtl (the back arrow) and the quiet chevron; the play and skip
   triangles point the way time runs and are left as they are (DESIGN 7: only back and chevrons turn). */