/* ═══════════════════════════════════════════════════════════════════════════
   Rihla — page-scoped styles

   These blocks used to live as inline <style> in each page's <head>. Moved here
   verbatim (C-08) so every rule is in the stylesheet and cache-able; loaded after
   the shared stylesheets, exactly where the inline blocks sat in the cascade.
   Each section belongs to ONE page; keep it that way.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── index.html ─────────────────────────────────────────────────────── */
/* Header hierarchy (C-20): eyebrow → headline → lead, then one toolbar row
   (search | tabs) from 900px. Home-only modifier so the same header component
   on partnerships / reviews is untouched. Grid areas mirror under [dir=rtl]. */
body.noir .sl-page-header-home { padding-bottom: var(--sp-7); }
body.noir .sl-page-header-home + .page-content { padding-top: var(--sp-6); }
body.noir .sl-page-header-home .sl-page-header-sub { font-size: var(--fs-4); max-width: 52ch; }
body.noir .sl-page-header-home .sl-search { margin-top: var(--sp-6); }
body.noir .sl-page-header-home .sl-page-header-tabs { margin-top: var(--sp-4); }
@media (min-width: 900px) {
  body.noir .sl-page-header-home .sl-page-header-inner {
    display: grid; grid-template-columns: minmax(0, 560px) 1fr; column-gap: var(--sp-5); align-items: center;
    grid-template-areas: "pill pill" "title title" "sub sub" "search tabs";
  }
  body.noir .sl-page-header-home .sl-label-pill { grid-area: pill; justify-self: start; }
  body.noir .sl-page-header-home .sl-page-header-title { grid-area: title; }
  body.noir .sl-page-header-home .sl-page-header-sub { grid-area: sub; }
  body.noir .sl-page-header-home .sl-search { grid-area: search; max-width: none; }
  body.noir .sl-page-header-home .sl-page-header-tabs { grid-area: tabs; justify-self: end; margin-top: var(--sp-6); }
}
/* Search field on tokens, with the system focus ring. */
body.noir .sl-search-icon { opacity: 1; color: var(--text-2); display: flex; }
body.noir .sl-search-input {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
body.noir .sl-search-input::placeholder { color: var(--text-2); }
body.noir .sl-search-input:focus { outline: none; border-color: var(--cyan); background: var(--surface-2); box-shadow: var(--focus-ring); }

/* Grid: token gap, equal-height cards; 1 event → featured wide card, 2 → a
   balanced pair, 3+ → the shared auto-fill grid (renderEvents sets data-count). */
#events-grid { gap: var(--sp-5); align-items: stretch; }
#events-grid .event-card-body { flex: 1 1 auto; padding: var(--sp-5) var(--sp-5) var(--sp-3); }
@media (min-width: 700px) {
  #events-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  #events-grid[data-count="1"] > .event-card { display: grid; grid-template-columns: minmax(280px, 46%) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  #events-grid[data-count="1"] > .event-card .card-gloss { grid-area: 1 / 1 / -1 / -1; }
  #events-grid[data-count="1"] > .event-card .ev-cover { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; min-height: 320px; height: 100%; }
  #events-grid[data-count="1"] > .event-card .event-card-body { padding: var(--sp-6) var(--sp-6) var(--sp-3); align-self: end; }
  #events-grid[data-count="1"] > .event-card .event-card-title { font-size: var(--fs-5); }
  #events-grid[data-count="1"] > .event-card .event-card-footer { margin-top: 0; }
  #events-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #events-grid[data-count="2"] .ev-cover { aspect-ratio: 2 / 1; }
}

/* Cover: scales with the column (16:9), token gradient fallback, top scrim so
   the chips sit on a known ground. Past cards dim the artwork only. */
#events-grid .ev-cover { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--bg-2); }
/* Posters are portrait phone-size flyers; on narrow screens a 16:9 crop chops off
   the artist name and other bottom-anchored artwork, so switch to a taller ratio. */
@media (max-width: 699px) {
  #events-grid .ev-cover { aspect-ratio: 3 / 4; background-position: center top; }
}
#events-grid .ev-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,6,8,.55) 0%, rgba(5,6,8,0) 45%); }
#events-grid .ev-cover-fallback { background-image: var(--gradient-rihla); }
#events-grid .ev-cover-fallback::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 110% at 30% 0%, rgba(255,255,255,.16), transparent 60%); }
#events-grid .event-card.is-past .ev-cover { filter: saturate(.55) brightness(.8); transition: filter var(--dur-2) var(--ease); }
#events-grid .event-card.is-past:hover .ev-cover { filter: saturate(.85) brightness(.92); }
/* One dark glass chip recipe for the cover chips; logical insets for RTL. */
#events-grid .ev-genre-chip, #events-grid .ev-past-chip {
  position: absolute; top: var(--sp-3); z-index: 1; display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(5,6,8,.62); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
}
#events-grid .ev-genre-chip { inset-inline-start: var(--sp-3); color: var(--text); }
#events-grid .ev-past-chip  { inset-inline-end: var(--sp-3); color: var(--text-2); background: rgba(5,6,8,.78); border-color: var(--line-strong); }
#events-grid .ev-soon-chip  { color: #1a1200; background: #f5c04a; border-color: #f5c04a; font-weight: 700; }
#events-grid .ev-soon { color: #f5c04a; font-size: var(--fs-2, 14px); }
html[dir="rtl"] #events-grid .ev-genre-chip, html[dir="rtl"] #events-grid .ev-past-chip { letter-spacing: 0; }
/* Card text: nothing below --text-2 on a card (AA at 11–13px). */
#events-grid .event-card-title { margin: 0 0 4px; font-weight: 700; }
#events-grid .event-card-arabic { font-size: var(--fs-2); color: var(--text-2); margin-bottom: var(--sp-3); }
#events-grid .event-card-price { font-weight: 700; font-size: var(--fs-4); font-variant-numeric: tabular-nums; }
#events-grid .event-card-price span { font-size: var(--fs-1); font-weight: 600; color: var(--text-2); }
#events-grid .ev-view-details { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); font-weight: 700; color: var(--cyan); white-space: nowrap; }
#events-grid .ev-view-details .ri { transition: margin var(--dur-2) var(--ease); }
#events-grid .event-card:hover .ev-view-details .ri { margin-inline-start: var(--sp-1); }

/* Empty state spans the grid; CTA below the heading. */
#events-grid > .empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-5); }
#events-grid > .empty-state .btn { margin-top: var(--sp-3); }

/* Skeleton — same anatomy as a card. Shimmer halts under prefers-reduced-motion (styles.css). */
#events-grid > .ev-skeleton { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
#events-grid .ev-skeleton .loading-shimmer { border: 0; border-radius: var(--r-sm); }
#events-grid .ev-skeleton .ev-skeleton-cover { aspect-ratio: 16 / 9; border-radius: 0; }
#events-grid .ev-skeleton-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
#events-grid .ev-skeleton-line { height: 12px; width: 70%; }
#events-grid .ev-skeleton-title { height: 20px; width: 85%; }
#events-grid .ev-skeleton-short { width: 45%; }
#events-grid .ev-skeleton-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
#events-grid .ev-skeleton-price { height: 16px; width: 110px; }

/* ── event-detail.html ──────────────────────────────────────────────── */
@keyframes tpIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.tp-animate{animation:tpIn .35s ease forwards;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Ported from partiful.css (C-06): the seat-map summary is a deliberately WHITE card tied to the
   white floor plan, so its text must be dark. (The pale "Total" panel is gone — C-21 moved it
   onto noir tokens: .tp-summary below.) */
.smap-summary { color: #111; }
.smap-summary h3 { color: #000; }

/* Hero (C-21): the cover image sits behind the text as a blurred, darkened
   backdrop, and beside it as the poster. Text tokens are unchanged; the scrim
   guarantees the contrast floor whatever the photo. */
body.noir .event-detail-hero { position: relative; overflow: hidden; }
body.noir .event-detail-hero-img { z-index: 0; opacity: 0; mix-blend-mode: normal; filter: blur(28px) saturate(1.15); transform: scale(1.12);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  transition: opacity var(--dur-3) ease; }
body.noir .event-detail-hero.has-cover .event-detail-hero-img { opacity: .42; }
body.noir .event-detail-hero.has-cover::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,6,8,.55) 0%, rgba(5,6,8,.78) 100%); }
.ed-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: end; }
.ed-hero-text { min-width: 0; }
/* Posters vary in aspect ratio and carry text/contact info edge-to-edge, so a forced
   crop cuts real content off. Scale the whole image to fit instead of cropping it. */
.ed-poster { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; background: var(--bg-2); border-radius: var(--r-card); box-shadow: var(--shadow-lg); order: -1; }
@media (min-width: 900px) { .ed-hero-grid { grid-template-columns: minmax(0, 1fr) 300px; } .ed-poster { order: 0; max-height: none; aspect-ratio: 3 / 4; } }
/* Coming soon: the poster photo is the hero background — sharp, covering the hero, layered over the
   dark backdrop. The scrim keeps the title legible; on phones it is dimmer behind the text. */
body.noir .event-detail-hero.is-soon .event-detail-hero-img { filter: none; transform: none; opacity: .5; background-repeat: no-repeat; background-size: cover; background-position: center top;
  -webkit-mask-image: none; mask-image: none; }
body.noir .event-detail-hero.is-soon::after { background: linear-gradient(90deg, rgba(5,6,8,.88) 0%, rgba(5,6,8,.55) 55%, rgba(5,6,8,.25) 100%); }
@media (max-width: 899px) {
  body.noir .event-detail-hero.is-soon .event-detail-hero-img { opacity: .4; background-size: cover; background-position: center top; }
  body.noir .event-detail-hero.is-soon::after { background: linear-gradient(180deg, rgba(5,6,8,.55) 0%, rgba(5,6,8,.8) 100%); }
}
.ed-sk { border-radius: var(--r-sm); } .ed-sk-pill { height: 20px; width: 100px; border-radius: var(--r-pill); margin-bottom: 16px; } .ed-sk-title { height: 52px; width: 65%; margin-bottom: 10px; } .ed-sk-meta { height: 20px; width: 38%; }
.ed-crumb { margin-bottom: var(--sp-4); }
/* Info row: date · venue (map link) · artist, wrapping, icons in soft cyan. */
.event-detail-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-2); }
body.noir .event-detail-meta-row { margin: 0; font-size: var(--fs-2); display: flex; align-items: center; gap: 6px; }
.event-detail-meta-row > .ri { color: var(--cyan-soft); }
.ed-map-link { color: var(--cyan-soft); text-decoration: underline; text-underline-offset: 2px; }
.ed-map-link-ic { white-space: nowrap; }

/* Layout: description left, ticket widget right and sticky from 900px; with no
   description (.is-solo) the widget keeps today's single centred column. */
.ed-layout { max-width: 1140px; margin: 0 auto; padding: var(--sp-7) var(--sp-5) var(--sp-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.ed-aside { order: -1; min-width: 0; }
.ed-layout.is-solo { grid-template-columns: minmax(0, 480px); justify-content: center; }
.ed-layout.is-solo .ed-main { display: none; }
body.noir .ticket-picker { position: static; max-width: none; min-width: 0; }
@media (min-width: 900px) {
  .ed-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-7); align-items: start; }
  .ed-aside { order: 0; position: sticky; top: 96px; }
  .ed-layout.is-solo { grid-template-columns: minmax(0, 480px); }
  .ed-layout.is-solo .ed-aside { position: static; }
}
body.noir .ed-section-title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-4); letter-spacing: -.02em; color: var(--text); margin: 0 0 var(--sp-3); text-transform: none; }
body.noir .ed-desc { font-size: var(--fs-3); color: var(--text-2); line-height: 1.8; white-space: pre-line; max-width: 65ch; margin: 0 0 var(--sp-5); }

/* Ticket widget on the system: heading 800, tokenised total panel, stepper
   with disabled states, helper text readable, block CTA. */
body.noir .ticket-picker h3 { font-weight: 800; margin-bottom: var(--sp-5); }
.ticket-type-so { font-size: var(--fs-1); font-weight: 400; color: var(--text-3); }
html[dir="rtl"] body.noir .ticket-type-option:not(.sold-out):hover { transform: translateX(-4px); }
body.noir .ticket-type-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
body.noir .ticket-type-price span { font-size: var(--fs-1); color: var(--text-2); }
.ed-qty { margin: var(--sp-4) 0 var(--sp-2); }
body.noir .qty-picker { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px; margin-top: var(--sp-2); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); }
body.noir .qty-picker .qty-btn { width: 40px; height: 40px; border-color: transparent; background: var(--surface-2); }
body.noir .qty-picker .qty-btn:hover { background: var(--cyan); color: var(--cyan-ink); border-color: transparent; }
body.noir .qty-picker .qty-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; background: var(--surface-2); color: var(--text); }
body.noir .qty-num { min-width: 44px; font-size: 20px; font-variant-numeric: tabular-nums; }
html[dir="rtl"] .qty-picker { direction: ltr; }   /* − left, + right in both languages */
@media (max-width: 640px) { body.noir .qty-picker .qty-btn { width: 44px; height: 44px; } }
body.noir .tp-summary { background: rgba(42,169,224,.06); border: 1px solid rgba(42,169,224,.18); border-radius: var(--r-input); padding: var(--sp-4); margin: var(--sp-4) 0; }
body.noir .tp-summary-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-2); color: var(--text-2); margin-bottom: var(--sp-2); }
body.noir .tp-summary-row strong { font-weight: 700; color: var(--text); }
body.noir .tp-total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--text); }
body.noir .tp-total-amount { color: var(--cyan-soft); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px var(--cyan-glow); }
html[dir="rtl"] .tp-total-amount, html[dir="rtl"] #price-summary { direction: ltr; unicode-bidi: isolate; }
.ed-buy { width: 100%; justify-content: center; }
body.noir .tp-note { font-size: var(--fs-2); font-weight: 500; line-height: 1.5; color: var(--text-2); text-align: center; margin-top: var(--sp-3); }
.ed-soldout { padding: var(--sp-6) var(--sp-5); margin: 0 auto; max-width: 360px; text-align: center; }
.ed-soldout-ic { color: var(--text-3); margin-bottom: var(--sp-3); }
.ed-soldout-ic .ri-svg { width: 48px; height: 48px; }
.ed-soldout .sl-section-title { font-size: var(--fs-4); margin-bottom: var(--sp-2); }
.ed-soldout .sl-btn { margin-top: var(--sp-2); }

/* Checkout-return banner: semantic tone on its own tint, opaque so it stays
   legible over the white seat-map section. */
.ed-banner { position: sticky; top: 0; z-index: 1000; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2); padding: 12px 20px; font-size: var(--fs-2); font-weight: 600; text-align: center; border-bottom: 1px solid var(--line-2); }
.ed-banner[data-tone="ok"]   { color: var(--ok);   background: linear-gradient(rgba(74,222,128,.12), rgba(74,222,128,.12)), var(--bg-1); }
.ed-banner[data-tone="warn"] { color: var(--warn); background: linear-gradient(rgba(251,191,36,.12), rgba(251,191,36,.12)), var(--bg-1); }
.ed-banner[data-tone="bad"]  { color: var(--bad);  background: linear-gradient(rgba(255,125,125,.12), rgba(255,125,125,.12)), var(--bg-1); }
.ed-banner[data-tone="info"] { color: var(--cyan); background: linear-gradient(rgba(42,169,224,.12), rgba(42,169,224,.12)), var(--bg-1); }
.ed-banner-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ed-banner-x { cursor: pointer; margin-inline-start: var(--sp-3); opacity: .85; color: inherit; background: none; border: 0; padding: 4px; display: inline-flex; }

/* ── Cinema-style seat map ─────────────────────────────────────────── */
.smap-wrap{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start;}
@media(max-width:880px){.smap-wrap{grid-template-columns:1fr;}}
.smap-wrap > div{min-width:0;}  /* let the map cell shrink so smap-scroll can scroll instead of overflowing the card */
.smap-viewport{position:relative;}
/* The map is its own scroll box (both axes) so zooming keeps the spot under
   the finger in place. Always laid out left-to-right: it is a floor plan, and
   RTL scroll origins would flip the zoom maths on the Arabic site. */
.smap-scroll{overflow:auto;-webkit-overflow-scrolling:touch;padding:6px 2px 12px;direction:ltr;
  max-height:min(78vh,900px);
  touch-action:pan-x pan-y;}  /* one finger pans natively; two-finger pinch reaches our JS zoom */
.smap-sizer{position:relative;overflow:hidden;}          /* JS sets it to the scaled floor size */
.smap-floor{position:absolute;top:0;left:0;min-width:max-content;transform-origin:0 0;}  /* JS scales it */
/* Fixed to the viewport, not the (much taller once zoomed-in) map container —
   otherwise zooming in pushes these below the fold and the only way back out
   is scrolling past the whole floor plan and the footer to find them again.
   Hidden until an IntersectionObserver confirms the map itself is on screen,
   so they don't float over unrelated content once the user scrolls away
   (e.g. up to the ticket summary, or down past the map to the footer). */
.smap-zoom{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:50;display:flex;flex-direction:row;gap:6px;
  opacity:0;pointer-events:none;transition:opacity .15s ease;}
.smap-zoom.is-visible{opacity:1;pointer-events:auto;}
.smap-zoom button{width:38px;height:38px;border-radius:10px;border:1.5px solid #cbd5e1;background:#fff;
  color:#111;font-size:17px;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;user-select:none;-webkit-tap-highlight-color:transparent;}
.smap-zoom button:active{background:#e0f2fe;border-color:#2ba4d8;}
.stage-wrap{position:relative;text-align:center;margin-bottom:30px;}
.stage{margin:0 auto;max-width:min(70%,520px);height:52px;border-radius:0 0 60px 60px;
  background:#e2e4e8;color:#111;display:flex;align-items:center;justify-content:center;gap:14px;
  font-weight:800;font-size:15px;box-shadow:0 8px 22px rgba(0,0,0,.10);}
.stage .st-ar{font-size:20px;}
.stage .st-en{font-size:10px;letter-spacing:.4em;color:#6b7280;}
.smap-venue{position:absolute;top:8px;right:6px;font-size:14px;font-weight:600;color:#374151;}
.tables-grid{display:flex;align-items:stretch;justify-content:center;min-width:max-content;margin:0 auto;}
.seat-block{display:grid;gap:12px 8px;justify-items:center;align-content:center;}
.smap-center{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 8px;min-width:170px;}
.smap-aisle-line{flex:1 1 auto;width:34px;min-height:22px;
  border-left:2px dashed rgba(0,0,0,.28);border-right:2px dashed rgba(0,0,0,.28);}
.seat-table{position:relative;width:116px;height:110px;}
.seat-table-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:7px;
  background:#fff;border:2px solid #1f2937;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;color:#111;}
/* A table past 8 chairs (3 per side, up to L) gets a slightly larger centre. */
.seat-table.is-wide .seat-table-core{width:56px;height:56px;}
.seat-table-core .st-label{font-size:16px;line-height:1;}
.seat-table-core .st-free{font-size:7px;font-weight:700;color:#94a3b8;margin-top:2px;}
.seat-chair{position:absolute;width:21px;height:21px;transform:translate(-50%,-50%);border-radius:6px 6px 9px 9px;
  border:2px solid #22c55e;background:#f0fdf4;color:#166534;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .12s,background .14s,border-color .14s;user-select:none;}
.seat-chair.free:hover{transform:translate(-50%,-50%) scale(1.25);box-shadow:0 3px 11px rgba(34,197,94,.45);z-index:5;}
.seat-chair.selected{border-color:#1d4ed8;background:#1d4ed8;color:#fff;transform:translate(-50%,-50%) scale(1.16);
  box-shadow:0 4px 13px rgba(29,78,216,.5);animation:chairPop .28s cubic-bezier(.34,1.56,.64,1);z-index:6;}
@keyframes chairPop{0%{transform:translate(-50%,-50%) scale(.9)}55%{transform:translate(-50%,-50%) scale(1.42)}100%{transform:translate(-50%,-50%) scale(1.16)}}
.seat-chair.held{border-color:#cbd5e1;background:#e2e8f0;color:#94a3b8;cursor:not-allowed;}
.seat-chair.sold{border-color:#475569;background:#475569;color:#cbd5e1;cursor:not-allowed;}
.seat-lock{position:absolute;top:-7px;right:-7px;font-size:10px;filter:grayscale(.2);}

.smap-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;font-weight:600;color:#475569;margin:6px 0 18px;}
.smap-legend span{display:flex;align-items:center;gap:6px;}
.lg-swatch{width:16px;height:16px;border-radius:5px;display:inline-block;}

.smap-summary{position:sticky;top:20px;background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:18px 20px;}
.smap-summary h3{font-family:'Bowlby One',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 12px;color:#000;font-weight:normal;}
.sum-seat{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:7px 0;border-bottom:1px solid #f1f5f9;}
.sum-seat button{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:15px;line-height:1;}
/* Collapsible bottom sheet on phones: collapsed by default (a slim bar with
   a mini summary + Reserve button) so the map stays fully explorable;
   tap/pull the bar to expand the full seat list. */
.sum-sheethead{display:none;}
@media(max-width:880px){
  .smap-summary{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:16px 16px 0 0;z-index:60;
    box-shadow:0 -10px 30px rgba(0,0,0,.16);max-height:60vh;overflow:auto;margin:0;
    padding-top:10px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
    transform:translateY(calc(100% - 104px));transition:transform .3s ease;will-change:transform;}
  .smap-summary.expanded{transform:translateY(0);}
  .sum-sheethead{display:block;cursor:pointer;-webkit-tap-highlight-color:transparent;margin-bottom:14px;}
  .sum-grip{width:44px;height:5px;border-radius:3px;background:#d1d5db;margin:0 auto 10px;}
  .sum-mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  #sum-mini{font-size:14px;font-weight:700;color:#111;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sum-mini-btn{flex-shrink:0;min-height:44px;padding:0 18px;border-radius:999px;border:none;background:#2ba4d8;
    color:#fff;font-size:14px;font-weight:800;cursor:pointer;}
  .sum-mini-btn:disabled{background:#e2e8f0;color:#94a3b8;}
  /* Phones: a box about two-thirds of the screen tall, leaving room to scroll
     the page past it; the bottom padding clears the collapsed summary sheet. */
  .smap-scroll{max-height:68vh;max-height:68dvh;padding-bottom:130px;}
  /* Clear the collapsed bottom sheet's always-visible ~104px strip. */
  .smap-zoom{bottom:calc(104px + env(safe-area-inset-bottom,0px) + 16px);}
}

/* ── login.html ─────────────────────────────────────────────────────── */
/* WhatsApp number field: country-code selector + national number */
.wa-field { display: flex; gap: var(--sp-2); }
.wa-cc { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-input); background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.wa-cc:hover { background: var(--surface-2); }
/* body.noir prefix: beats the global body.noir :focus-visible (0,2,1) so the field keeps its own ring + radius. */
body.noir .wa-cc:focus-visible { outline: none; border-color: var(--cyan); border-radius: var(--r-input); box-shadow: var(--focus-ring); }
.wa-cc[aria-expanded="true"] { border-color: var(--cyan); }
.wa-cc-caret { display: inline-flex; color: var(--text-2); transition: transform var(--dur-2) var(--ease); }
.wa-cc-caret .ri-svg { width: 14px; height: 14px; }
.wa-cc[aria-expanded="true"] .wa-cc-caret { transform: rotate(180deg); }
.wa-num { flex: 1 1 auto; min-width: 0; }
.wa-pop { position: relative; margin-top: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-input);
  background: var(--bg-2); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 30; }
/* The search box is a .form-input; inside the popover it reads as the header row (hairline below, no radius). */
.wa-pop .wa-search { border-radius: 0; border-width: 0 0 1px; border-color: var(--line); background: transparent; box-shadow: none; }
body.noir .wa-pop .wa-search:focus { outline: none; border-color: var(--cyan); background: var(--surface); box-shadow: none; }
.wa-list { max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wa-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: none; background: none;
  cursor: pointer; font-size: 14.5px; text-align: start; color: var(--text); min-height: 44px; }
.wa-opt:hover, .wa-opt.active { background: rgba(42,169,224,0.10); }
.wa-opt.active { color: var(--cyan-soft); }
body.noir .wa-opt:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: var(--r-sm); }
.wa-opt .wa-opt-flag { font-size: 18px; flex: 0 0 auto; }
.wa-opt .wa-opt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-opt .wa-opt-dial { flex: 0 0 auto; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.wa-empty { padding: 16px; text-align: center; color: var(--text-2); font-size: 13px; }
@media (max-width:400px){ .wa-cc { padding: 0 9px; font-size: 14px; } }

/* ── checkout.html ──────────────────────────────────────────────────── */
/* Loading row spans both grid columns (the layout is a 2-col grid). */
body.noir .co-loading { grid-column: 1 / -1; display: flex; justify-content: center; padding: 60px 0; }
body.noir .co-loading .spinner { width: 36px; height: 36px; border-width: 3px; }

body.noir .co-crumb { margin-bottom: 20px; color: var(--text-2); }   /* the "/ Checkout" trail: --text-3 measured 3.3:1 */
body.noir .co-crumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--cyan); }
body.noir .co-crumb a:hover { color: var(--cyan-soft); }
body.noir .co-title { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 800; letter-spacing: -0.04em; color: var(--text); margin-bottom: 28px; }
body.noir .co-pm-title { margin-top: 4px; }

/* Payment-method tabs are real <button>s now; the icon slot holds a Lucide svg. */
body.noir .payment-tab { font-family: var(--font-body); font-size: 14px; font-weight: 600; }
body.noir .payment-tab .tab-icon { display: flex; justify-content: center; line-height: 0; margin-bottom: 5px; }
body.noir .payment-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* "Pay with InstaPay" deep link: InstaPay's own purple, on the .btn chassis. */
body.noir .co-pay-link {
  --btn-bg: linear-gradient(135deg, #5f27cd, #7b2ff7);
  --btn-bg-hover: linear-gradient(135deg, #6a35d6, #8a45f9);
  --btn-ink: #fff;
  --btn-line: transparent;
  --btn-glow: rgba(123,47,247,0.35);
  display: flex; width: 100%; flex-wrap: wrap; gap: 6px 10px;
  font-size: 16px; font-weight: 800; margin-bottom: 8px; white-space: normal;
}
body.noir .co-pay-link-sub { font-size: 13px; font-weight: 600; opacity: 0.85; }
body.noir .co-pay-hint { text-align: center; font-size: var(--fs-1); color: var(--text-2); margin-bottom: 16px; }
body.noir .co-pay-hint strong { color: var(--text); }
body.noir .co-pm-instruction { font-size: var(--fs-2); color: var(--text-2); margin-bottom: 6px; }
body.noir .co-pm-account { font-size: var(--fs-1); color: var(--text-2); }

/* Vodafone Cash wallet picker — shown only when several wallets are configured.
   Vodafone red stays as the selected cue (brand of the wallet, not of Rihla). */
body.noir .co-vf { margin-bottom: 20px; }
body.noir .co-vf-title { font-size: var(--fs-2); font-weight: 700; color: var(--text); margin-bottom: 8px; }
body.noir .co-vf-list { display: flex; flex-direction: column; gap: 8px; }
body.noir .vf-opt {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--line-strong); border-radius: var(--r-input); background: var(--surface);
  padding: 12px 14px; cursor: pointer;
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease;
}
body.noir .vf-opt:hover { border-color: rgba(230,0,0,0.45); }
body.noir .vf-opt.selected { border-color: #e60000; background: rgba(230,0,0,0.08); }
body.noir .vf-opt:focus-visible { outline: 3px solid rgba(230,0,0,0.35); outline-offset: 2px; }
body.noir .vf-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-3); flex: none; display: inline-block; }
body.noir .vf-opt.selected .vf-dot { border-color: #e60000; box-shadow: inset 0 0 0 4px #e60000; }
body.noir .co-vf-body { flex: 1; min-width: 0; }
body.noir .co-vf-num { display: block; font-weight: 800; font-size: 16px; letter-spacing: 0.4px; color: var(--text); }
body.noir .co-vf-label { display: block; font-size: var(--fs-1); color: var(--text-2); }
body.noir .co-vf-error { margin-top: 8px; font-size: var(--fs-2); font-weight: 600; }

body.noir .co-amount {
  background: rgba(42,169,224,0.06); border: 1px solid rgba(42,169,224,0.15); border-radius: var(--r-input);
  padding: 14px 16px; margin-bottom: 20px; font-size: 15px; font-weight: 700; color: var(--text);
}
body.noir .co-amount-val { color: var(--cyan); }
body.noir .co-req { color: var(--bad); font-weight: 700; }

/* Screenshot drop zone contents */
body.noir .co-shot-icon { display: flex; justify-content: center; color: var(--text-2); margin-bottom: 6px; }
body.noir .co-shot-icon .ri-svg { width: 30px; height: 30px; }
body.noir .co-shot-title { font-size: var(--fs-3); font-weight: 600; color: var(--text); }
body.noir .co-shot-sub { font-size: var(--fs-1); color: var(--text-2); margin-top: 4px; }
body.noir .co-shot-preview { max-width: 100%; max-height: 200px; object-fit: contain; border-radius: 8px; }

body.noir .co-error { margin-bottom: 16px; }
body.noir .co-pay-btn { width: 100%; margin-top: 8px; }
body.noir .co-btn-spin { width: 18px; height: 18px; border-width: 2px; margin-inline-end: 8px; border-color: rgba(255,255,255,0.25); border-top-color: currentColor; }

/* Reservation countdown pinned below the sticky nav so it stays in view while
   the buyer scrolls the form. Tone classes are toggled by the page timer. */
body.noir .co-hold {
  position: fixed; top: 74px; inset-inline-end: 12px; z-index: 90;
  width: min(320px, calc(100vw - 24px));
  background: rgba(42,169,224,0.12); border: 1px solid rgba(42,169,224,0.4); border-radius: var(--r-input);
  padding: 12px 16px; font-size: var(--fs-2); line-height: 1.5; color: var(--cyan-soft);
  box-shadow: 0 12px 32px rgba(0,0,0,0.30);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (min-width: 900px) { body.noir .co-hold { top: 88px; inset-inline-end: 24px; } }
body.noir .co-hold strong { color: var(--text); }
body.noir .co-hold .ri { vertical-align: -3px; }
body.noir .co-hold-ar { text-align: end; margin-top: 3px; font-size: var(--fs-1); }
body.noir .co-hold.is-warning { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.45); color: var(--warn); }
body.noir .co-hold.is-expired { background: rgba(255,125,125,0.12); border-color: rgba(255,125,125,0.45); color: var(--bad); }
/* "Payment sent — approval may take some time" notice after Confirm */
body.noir .co-sent { text-align: center; }
body.noir .co-sent-icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center;
  background: rgba(246,201,69,0.12); color: var(--gold); margin-bottom: 10px; }
body.noir .co-sent-body { color: var(--text-2); line-height: 1.6; margin: 8px 0 0; }
body.noir .co-sent-ar { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); text-align: right; color: var(--text-2); line-height: 1.7; }
body.noir .co-sent-ar strong { color: var(--text); display: block; margin-bottom: 4px; }
body.noir .co-sent-ar p { margin: 0; }
body.noir .co-sent .co-rules-actions { justify-content: center; }

body.noir .co-after { margin-top: 12px; }
body.noir .co-after strong { color: var(--text); }
body.noir .co-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Ticket rules dialog: the shared noir modal, top-aligned so long rule lists scroll. */
body.noir .co-rules { align-items: flex-start; padding: 24px 14px; overflow-y: auto; }
body.noir .co-rules-modal { max-width: 560px; width: 100%; margin-top: 6vh; }
body.noir .co-rules-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; text-align: center; margin: 0 0 18px; }
body.noir .co-rules-list { margin: 0 0 18px; padding-inline-start: 22px; font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
body.noir .co-rules-list li { margin-bottom: 8px; }
body.noir .co-rules-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 22px; }

/* ── profile.html ───────────────────────────────────────────────────── */
body.noir .pf-page { max-width: 760px; }
.pf-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px; margin-bottom: 20px; }
.pf-card h2 { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--text); }
.pf-sub { font-size: var(--fs-2); color: var(--text-2); margin: 0 0 18px; }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .pf-row { grid-template-columns: 1fr; } }
.pf-field { margin-bottom: 14px; }
.pf-field-check { margin-top: 18px; }
.pf-label { display: block; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.pf-hint { font-size: var(--fs-1); color: var(--text-2); margin-top: 5px; }
.pf-phone { display: flex; gap: 8px; }
.pf-phone select { flex: 0 0 150px; }
.pf-phone input { flex: 1; min-width: 0; }
/* Inline result message; the page toggles .err / .ok on it. */
.pf-msg { display: none; font-size: var(--fs-3); font-weight: 600; border: 1px solid transparent; border-radius: var(--r-input); padding: 11px 14px; margin-bottom: 14px; }
.pf-msg.err { display: block; background: rgba(255,125,125,0.10); border-color: rgba(255,125,125,0.35); color: var(--bad); }
.pf-msg.ok  { display: block; background: rgba(74,222,128,0.10);  border-color: rgba(74,222,128,0.35);  color: var(--ok); }
.pf-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.pf-check input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--cyan); cursor: pointer; }
.pf-check-line { display: block; }
.pf-check-ar { margin-top: 2px; }
.pf-reauth { display: none; }
.pf-reauth.show { display: block; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.pf-meta-link { display: inline-flex; align-items: center; gap: 4px; color: var(--cyan); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(42,169,224,0.45); text-underline-offset: 3px; }
.pf-meta-link:hover { color: var(--cyan-soft); text-decoration-color: currentColor; }
.pf-danger-line { border-top: 1px solid var(--line); margin: 18px 0 0; padding-top: 16px; }
/* Form-shaped skeleton until /api/auth/me answers. */
.pf-skeleton { display: grid; gap: 12px; }
.pf-skeleton .loading-shimmer { border: 0; border-radius: var(--r-sm); }
.pf-sk-title { height: 20px; width: 40%; }
.pf-sk-line { height: 12px; width: 65%; margin-bottom: 6px; }
.pf-sk-field { height: 46px; width: 100%; border-radius: var(--r-input); }
.pf-sk-btn { height: 44px; width: 150px; border-radius: var(--r-pill); margin-top: 6px; }

/* ── my-bookings.html ───────────────────────────────────────────────── */
body.noir .mb-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
body.noir .mb-pref {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 14px 18px; margin-bottom: 20px;
}
body.noir .mb-pref-label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; font-size: var(--fs-3); font-weight: 600; color: var(--text); }
body.noir .mb-pref-label .ri { color: var(--cyan); }
body.noir .mb-check { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--cyan); cursor: pointer; }
body.noir .mb-pref-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); color: var(--ok); }

body.noir .mb-grid, body.noir .mb-loading { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
@media (max-width: 400px) { body.noir .mb-grid, body.noir .mb-loading { grid-template-columns: 1fr; } }

/* Skeleton with the booking-card anatomy: header band, three meta lines, two pill buttons. */
body.noir .mb-skeleton { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
body.noir .mb-skeleton .loading-shimmer { border: 0; border-radius: var(--r-sm); }
body.noir .mb-skeleton-head { height: 62px; border-radius: 0; }
body.noir .mb-skeleton-body { display: grid; gap: 10px; padding: 20px; }
body.noir .mb-skeleton-line { height: 12px; width: 70%; }
body.noir .mb-skeleton-line.is-short { width: 45%; }
body.noir .mb-skeleton-foot { display: flex; gap: 8px; padding: 0 20px 20px; }
body.noir .mb-skeleton-pill { height: 32px; width: 110px; border-radius: var(--r-pill); }

body.noir .booking-card-titles { min-width: 0; }
body.noir .booking-card-ar { font-size: var(--fs-2); color: var(--text-2); margin-top: 2px; }
body.noir .booking-card.is-rejected { border-color: rgba(255,125,125,0.45); }
body.noir .booking-meta-row .ri { color: var(--text-3); flex-shrink: 0; }
body.noir .booking-meta-row strong { color: var(--text); }
body.noir .booking-meta-row .mb-seats { color: var(--cyan); }
body.noir .booking-meta-row.is-ok { color: var(--ok); }
body.noir .booking-meta-row.is-ok .ri { color: inherit; }
body.noir .mb-rejected { margin-bottom: 12px; }
body.noir .mb-rejected-title { font-weight: 700; }
body.noir .mb-rejected-reason { margin-top: 6px; font-size: var(--fs-2); font-weight: 600; }
body.noir .mb-rejected-note { margin-top: 6px; font-size: var(--fs-2); color: var(--text-2); }

/* ── tickets.html ───────────────────────────────────────────────────── */
/* Page states (loading / pending / not found) sit on the noir page, outside any card. */
.tk-state { text-align: center; padding: 60px 24px; }
.tk-state .spinner { width: 40px; height: 40px; border-width: 3px; margin: 0 auto 16px; display: block; }
.tk-state-icon { display: flex; justify-content: center; color: var(--text-2); margin-bottom: 14px; }
.tk-state-icon .ri-svg { width: 52px; height: 52px; }
body.noir .tk-state-title { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin-bottom: 8px; }
.tk-state-text { font-size: var(--fs-3); color: var(--text-2); margin-bottom: 22px; }
.tk-toolbar { justify-content: center; margin-bottom: 22px; }

/* Booking summary strip */
#tk-summary { text-align:center; margin-bottom:22px; }
#tk-summary h1 { font-family:var(--font-display,inherit); font-weight:800; font-size:24px; letter-spacing:-.02em; margin:0 0 4px; color:var(--text,#eaeef4); }
#tk-summary .ar { font-size:15px; font-weight:600; color:var(--text-2,#c9c9c9); }
#tk-summary .meta { color:var(--text-2); font-size:13px; margin-top:6px; line-height:1.7; }
#tk-summary .meta .ri { vertical-align: -3px; color: var(--text-3); }
#tk-count { display:inline-block; margin-top:12px; background:rgba(42,169,224,.14); border:1px solid rgba(42,169,224,.4); color:var(--cyan-soft); font-weight:800; font-size:13px; padding:6px 16px; border-radius:999px; }

/* Every ticket is rendered as a full invoice-style card (identical to the
   single-ticket invoice), one per unit, each with its OWN QR + seat, so a
   multi-ticket order prints as N proper tickets. Reuses the global
   .invoice-* classes; the poster hero + white QR stub match the invoice. */
.tk-grid { display:flex; flex-direction:column; gap:26px; max-width:600px; margin:0 auto; }
.tk-ticket { position:relative; break-inside:avoid; }
.tk-ticket.is-used { opacity:.62; }
/* Whole card faintly themed with the poster behind the details (set per-card in JS) */
.tk-ticket.has-poster { background-size:cover; background-position:center; }

/* Poster hero at the top of each card */
.tk-poster { height:200px; background-size:cover; background-position:center top; position:relative; }
.tk-poster::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,9,13,0) 35%, rgba(7,9,13,.55) 70%, #0d1017 100%); }
.tk-poster .p-title { position:absolute; inset-inline:24px; bottom:16px; z-index:2; font-family:var(--font-display,inherit); font-weight:800; font-size:24px; line-height:1.1; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.tk-poster .p-title .ar { display:block; font-size:14px; font-weight:600; color:rgba(255,255,255,.85); margin-top:2px; }
.tk-idx { position:absolute; top:14px; inset-inline-end:16px; z-index:3; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:999px; padding:4px 12px; font-size:12px; font-weight:800; letter-spacing:.4px; }
.tk-idx-row { padding:16px 18px 0; position:relative; }
.tk-idx.is-static { position:static; }
/* No cover: the index pill sits on the paper card, so it goes solid ink (white on 45% black was 3.4:1). */
.tk-ticket:not(.has-poster) .tk-idx { background:var(--color-midnight-ink,#0c0e13); border-color:transparent; }
.tk-used-badge { position:absolute; top:14px; inset-inline-start:16px; z-index:3; display:inline-flex; align-items:center; gap:4px; background:#dc2626; color:#fff; font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px; letter-spacing:.4px; }

.tk-seat { display:inline-flex; align-items:center; gap:4px; color:var(--color-rihla-blue,#2BA4D8); font-weight:700; }
.tk-total { background:rgba(43,164,216,0.08); border:1px solid rgba(43,164,216,0.2); border-radius:12px; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.tk-total .lbl { font-size:14px; color:var(--color-slate,#9aa3af); }
.tk-total .amt { font-family:var(--font-display,inherit); font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--color-rihla-blue,#2BA4D8); }
.tk-door-note { font-size:13px; color:var(--color-slate,#5d6675); margin-bottom:4px; }

/* White QR stub — QR at the start, dashed perforation, big seat code (matches invoice) */
.tk-ticket .inv-stub { display:flex; align-items:stretch; gap:16px; background:#fff; border-radius:16px; padding:18px; max-width:430px; margin:18px auto 0; text-align:start; }
.tk-ticket .inv-stub.is-qr-only { max-width:230px; justify-content:center; }
.tk-ticket .stub-qr { flex:0 0 auto; display:flex; align-items:center; }
.tk-ticket .stub-qr canvas, .tk-ticket .stub-qr img { width:170px !important; height:170px !important; display:block; }
.tk-ticket .stub-sep { flex:0 0 auto; border-inline-start:3px dashed #c9cfd8; margin:4px 0; }
.tk-ticket .stub-seats { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tk-ticket .stub-cap { font-size:12px; font-weight:700; letter-spacing:.4em; color:#5d6675; margin:2px 0 6px; }   /* on the white stub; #8a919c was 3.2:1 */
.tk-ticket .stub-code { font-family:Arial,Helvetica,sans-serif; font-weight:800; font-size:46px; line-height:1; letter-spacing:1px; color:#101319; }
.tk-ticket .stub-inv { font-family:var(--font-mono,monospace); font-size:11px; color:var(--color-slate,#5d6675); text-align:center; margin-top:12px; letter-spacing:.5px; }
.tk-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }

.tk-warn { display:flex; align-items:flex-start; gap:10px; margin:22px auto 0; max-width:600px; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.28);
  color:var(--text-2); border-radius:14px; padding:13px 18px; font-size:13px; line-height:1.6; text-align:start; }
.tk-warn .ri { color:var(--warn); flex-shrink:0; margin-top:2px; }
.tk-warn strong { color:var(--text); }

@media print {
  #tk-summary .meta, #tk-count { color:#333 !important; }
  /* Print the poster + card exactly as shown; one ticket per page. */
  .tk-ticket, .tk-ticket * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .tk-grid { display:block; max-width:none; }
  .tk-ticket { box-shadow:none !important; break-inside:avoid; page-break-inside:avoid; page-break-after:always; margin:0 auto 16px; max-width:560px; }
  .tk-actions, .tk-warn, .tk-toolbar { display:none !important; }
}

/* ── invoice.html ───────────────────────────────────────────────────── */
/* Page states (loading / not found) sit on the noir page, outside the card. */
.inv-state { text-align: center; padding: 60px 24px; }
.inv-state .spinner { width: 40px; height: 40px; border-width: 3px; margin: 0 auto 16px; display: block; }
.inv-state-icon { display: flex; justify-content: center; color: var(--text-2); margin-bottom: 14px; }
.inv-state-icon .ri-svg { width: 52px; height: 52px; }
body.noir .inv-state-title { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin-bottom: 8px; }
.inv-state-text { font-size: var(--fs-3); color: var(--text-2); margin-bottom: 22px; }
.inv-more { text-align: center; margin: 20px 0 8px; }

/* Ticket auto-styled with the event poster (event.coverImage) as its background */
#invoice-card { position:relative; overflow:hidden; }
#inv-poster { display:none; height:240px; background-size:cover; background-position:center top; position:relative; }
#inv-poster::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,9,13,0) 35%, rgba(7,9,13,.55) 70%, var(--noir-1,#0a0c11) 100%); }
#inv-poster .poster-title { position:absolute; inset-inline:24px; bottom:16px; z-index:2;
  font-family:var(--font-display,inherit); font-weight:800; font-size:26px; line-height:1.1; letter-spacing:-.02em; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.6); }
#inv-poster .poster-title .ar { display:block; font-size:15px; font-weight:600; color:rgba(255,255,255,.85); margin-top:2px; }
/* Whole card faintly themed with the poster behind the details */
#invoice-card.has-poster { background-image:linear-gradient(rgba(7,9,13,.92), rgba(7,9,13,.96)); background-size:cover; background-position:center; }
#invoice-card.has-poster .invoice-header { background:transparent; }

/* Inside the card the noir theme re-scopes --color-* to the document's own
   ink (noir.css .invoice-card), so these rules use those names, as the inline
   styles they replace did. --inv-link is the paper card's link/eyebrow blue:
   the brand cyan measures 3.6:1 on the white paper, this mix ~5.6:1. */
.invoice-card { --inv-link: color-mix(in srgb, var(--color-rihla-blue, #1b87c0) 78%, #000); }
/* Paper-card texts that measured below AA (2.6–3.2:1): footer, Arabic subtitle,
   QR eyebrow, door note, stub captions, pending copy, used stamp. */
body.noir .invoice-card .invoice-footer { color: var(--color-slate); }
body.noir .invoice-card .invoice-event-arabic { color: color-mix(in srgb, var(--gold) 55%, #000); }
body.noir .invoice-card .invoice-qr-label { color: var(--inv-link); }
body.noir .invoice-card .payment-pending-banner h3 { color: color-mix(in srgb, var(--gold) 55%, #000); }
body.noir .invoice-card .payment-pending-banner p { color: var(--color-graphite); }
body.noir .invoice-card .used-stamp { color: color-mix(in srgb, var(--bad) 60%, #000); border-color: color-mix(in srgb, var(--bad) 60%, #000); background: rgba(255,93,93,0.08); }
.inv-all { display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(42,169,224,.10); border:1px solid rgba(42,169,224,.35); border-radius:14px;
  padding:13px 18px; margin-bottom:20px; text-decoration:none; color:var(--color-midnight-ink,#0c0e13); font-size:14px; font-weight:600; }
.inv-all-text { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.inv-all-text .ri { color:var(--inv-link); }
.inv-all-cta { display:inline-flex; align-items:center; gap:4px; color:var(--inv-link); font-weight:800; white-space:nowrap; }
.inv-seats { display:inline-flex; align-items:center; gap:4px; font-weight:700; }
.inv-total { background:rgba(43,164,216,0.06); border:1px solid rgba(43,164,216,0.15); border-radius:12px; padding:14px 20px;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.inv-total-lbl { font-size:14px; color:var(--color-slate,#5d6675); }
.inv-total-amt { font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--color-rihla-blue,#1b87c0); }
.inv-pending-note { font-size:13px; margin-top:8px; }
.inv-pending-refresh { margin-top:16px; font-size:12px; color:var(--color-slate,#5d6675); }
body.noir .payment-pending-banner .ppb-icon { display:flex; justify-content:center; color:var(--gold); }
body.noir .payment-pending-banner .ppb-icon .ri-svg { width:48px; height:48px; }
/* Rejected state: a light panel on the paper card (values unchanged); the
   headline needs the body.noir prefix to out-rank the global heading colour. */
body.noir .inv-rejected { background:#fef2f2; border:1px solid rgba(220,38,38,.35); border-radius:14px; padding:24px; text-align:center; }
body.noir .inv-rejected-icon { display:flex; justify-content:center; color:#dc2626; }
body.noir .inv-rejected-icon .ri-svg { width:34px; height:34px; }
body.noir .inv-rejected-title { color:#dc2626; margin:10px 0 8px; }
body.noir .inv-rejected-body { margin:0; color:#333; }
body.noir .inv-reject-reason { background:#fff; border-inline-start:4px solid #dc2626; border-radius:8px; padding:12px 16px; margin:14px auto 0; max-width:420px; text-align:start; font-size:14px; color:#1f2937; font-weight:600; }
body.noir .inv-rejected-help { font-size:13px; margin-top:14px; color:#555; }
#inv-reject-rebook { margin-top:6px; }
.inv-door-note { font-size:13px; color:var(--color-slate,#5d6675); margin-bottom:4px; }
.inv-footer-note { font-size:11px; }

/* Poster variant (invoice + tickets): the cover sits under a 92–96% noir overlay,
   so the card is a dark surface and the paper palette flips to the noir text
   tokens. Before this, the re-inked paper colours (#0c0e13 title, #1f2430 values)
   rendered dark-on-dark whenever an event had a cover image. */
body.noir .invoice-card.has-poster {   /* (0,3,1): out-ranks noir's body.noir .invoice-card re-ink */
  --color-midnight-ink: var(--text); --color-graphite: var(--text-2); --color-slate: var(--text-2);
  --color-ash: var(--text-2); --color-rihla-blue: var(--cyan); --inv-link: var(--cyan-soft);
}
body.noir .invoice-card.has-poster .invoice-event-title,
body.noir .invoice-card.has-poster .invoice-info-item span,
body.noir .invoice-card.has-poster .inv-all { color: var(--text); }
body.noir .invoice-card.has-poster .invoice-info-item label { color: var(--text-2); }
body.noir .invoice-card.has-poster .invoice-event-arabic { color: var(--gold); }
body.noir .invoice-card.has-poster .invoice-qr-label { color: var(--cyan-soft); }
body.noir .invoice-card.has-poster .invoice-footer { background: rgba(255,255,255,0.03); color: var(--text-2); border-top-color: var(--line); }
body.noir .invoice-card.has-poster .invoice-divider { border-top-color: var(--line-strong); }
body.noir .invoice-card.has-poster .invoice-warning { background: rgba(246,201,69,0.10); border-color: rgba(246,201,69,0.35); color: var(--gold-soft); }
body.noir .invoice-card.has-poster .payment-pending-banner h3 { color: var(--gold); }
body.noir .invoice-card.has-poster .payment-pending-banner p { color: var(--text-2); }
body.noir .invoice-card.has-poster .used-stamp { color: var(--bad); border-color: rgba(255,125,125,0.45); background: rgba(255,125,125,0.10); }
body.noir .invoice-card.has-poster .btn-ghost-dark { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }
body.noir .invoice-card.has-poster .btn-ghost-dark:hover { background: var(--surface-3); }
body.noir .invoice-card.has-poster .inv-rejected { background: rgba(255,125,125,0.10); border-color: rgba(255,125,125,0.35); }
body.noir .invoice-card.has-poster .inv-rejected-icon,
body.noir .invoice-card.has-poster .inv-rejected-title { color: var(--bad); }
body.noir .invoice-card.has-poster .inv-rejected-body,
body.noir .invoice-card.has-poster .inv-rejected-help { color: var(--text-2); }
body.noir .invoice-card.has-poster .inv-reject-reason { background: var(--surface-2); color: var(--text); border-color: var(--bad); }

/* Live HTML ticket stub — QR at the start, dashed perforation, seat codes.
   The seat column SCROLLS IN PLACE inside the white card, so a booking of
   any size is fully readable by the holder and gate staff. */
#invoice-card .inv-stub { display:flex; align-items:stretch; gap:16px; background:#fff; border-radius:16px;
  padding:18px; max-width:430px; margin:0 auto; text-align:start; }
#invoice-card .stub-qr { flex:0 0 auto; display:flex; align-items:center; }
#invoice-card .stub-qr canvas, #invoice-card .stub-qr img { width:180px !important; height:180px !important; display:block; }
#invoice-card .stub-sep { flex:0 0 auto; border-inline-start:3px dashed #c9cfd8; margin:4px 0; }
#invoice-card .stub-seats { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#invoice-card .stub-cap { font-size:12px; font-weight:700; letter-spacing:.45em; color:#5d6675; margin:2px 0 6px; }   /* on the white stub; #8a919c was 3.2:1 */
#invoice-card .stub-codes { overflow-y:auto; max-height:150px; width:100%; text-align:center;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
#invoice-card .stub-codes div { font-family:Arial,Helvetica,sans-serif; font-weight:800; font-size:44px;
  line-height:1.18; letter-spacing:1px; color:#101319; white-space:nowrap; }
#invoice-card .stub-hint { font-size:10.5px; color:#5d6675; margin-top:4px; }
#invoice-card .stub-hint .ri-svg { width:12px; height:12px; }
@media print { .stub-codes { max-height:none; overflow:visible; } .stub-hint { display:none !important; } }
@media print { #inv-poster { height:190px; } }

/* ── reset-password.html ────────────────────────────────────────────── */
.rp-wrap { display:flex; align-items:center; justify-content:center; padding:24px; }
.rp-card { width:100%; max-width:440px; }
.rp-logo { text-align:center; margin-bottom:22px; }
.rp-logo img { height:34px; }

/* ── ui-kit.html (dev reference, not linked from the site) ─────────────── */
.uk { max-width: 1140px; }
.uk-section { padding: 36px 0 12px; border-top: 1px solid var(--line); }
.uk-section:first-child { border-top: 0; padding-top: 0; }
.uk-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-5); letter-spacing: -0.02em; margin: 0 0 6px; }
.uk-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3); color: var(--text-2); margin: 28px 0 12px; }
.uk-note { color: var(--text-2); font-size: var(--fs-2); line-height: 1.6; margin: 0 0 20px; max-width: 70ch; }
.uk-note code, .sl-page-header-sub code { font-family: var(--font-mono); font-size: 0.92em; color: var(--cyan-soft); }
.uk-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.uk-swatch { height: 64px; border-radius: var(--r-input); border: 1px solid var(--line); display: flex; align-items: flex-end; padding: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.uk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.uk-shape { width: 120px; height: 64px; background: var(--surface-2); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
.uk-type > div { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.uk-icons { gap: 18px; color: var(--text); }
.uk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); margin-bottom: 16px; }
.uk-table th, .uk-table td { text-align: start; vertical-align: middle; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.uk-table th { font-size: var(--fs-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.uk-table td:first-child { font-weight: 700; white-space: nowrap; }
.uk-table td:nth-child(2) { color: var(--text-2); }
.uk-table code { font-family: var(--font-mono); font-size: 11.5px; color: var(--cyan-soft); white-space: nowrap; }
.uk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; max-width: 760px; }
.uk-stack { display: grid; gap: 4px; max-width: 640px; }
.uk kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); }
@media (max-width: 720px) { .uk-form { grid-template-columns: 1fr; } }
/* The buttons table is ~1160px of nowrap columns: below that it scrolls inside itself (never the page). */
@media (max-width: 1220px) { .uk-table { display: block; overflow-x: auto; max-width: 100%; } }

/* ── reviews.html ───────────────────────────────────────────────────── */
/* The write-a-review form and the login prompt compose .card for surface,
   hairline and radius but must not lift on hover: nothing in them is a link,
   and a form that moves while you type reads as a bug. Their wrappers
   (#review-form-wrap, #login-prompt) toggle with the `hidden` attribute, so
   nothing here may set their display. */
body.noir .rv-panel { max-width: 600px; padding: 28px; margin-bottom: 40px; }
body.noir .rv-panel:hover { transform: none; border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
body.noir .rv-login { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); padding: 20px var(--sp-5); margin-bottom: var(--sp-6); }
body.noir .rv-login-title { font-weight: 700; color: var(--text); margin-bottom: var(--sp-1); }
body.noir .rv-login-sub { font-size: var(--fs-2); color: var(--text-2); }

/* Rating input — five real <button>s. At rest --text-3 outline (above the 3:1
   UI minimum); pressed = gold with the star filled. The button reset in
   styles.css already strips border/background/font; the UA padding and the
   legacy .star-btn.active scale are pinned here. Focus ring comes from the
   global body.noir :focus-visible rule. */
body.noir .stars-input { display: flex; gap: var(--sp-2); }
body.noir .star-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px; line-height: 0; border-radius: var(--r-sm);
  color: var(--text-3); transform: none;
  transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
body.noir .star-btn .ri-svg { width: 26px; height: 26px; }
body.noir .star-btn:hover { color: var(--gold); transform: scale(1.15); }
body.noir .star-btn.active { color: var(--gold); }
body.noir .star-btn.active .ri-svg { fill: currentColor; }
@media (pointer: coarse) { body.noir .star-btn { min-width: 44px; min-height: 44px; } }

/* Validation error is the shared .alert (display:flex), so `hidden` needs a
   hand to keep meaning display:none. */
body.noir .rv-error[hidden] { display: none; }
body.noir .rv-submit { width: 100%; }

/* Skeleton tiles stand in for review cards — the component's own radius
   (16px = --r-card), only the height is the page's. The empty state spans the
   grid; its Lucide icon is sized here because .empty-icon's font-size only ever
   sized the old emoji. */
body.noir .rv-skeleton { height: 180px; }
body.noir .rv-empty { grid-column: 1 / -1; }

/* ── about.html ─────────────────────────────────────────────────────── */
/* Hero: inner column + lead paragraph (were inline styles; values verbatim). */
.about-hero-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
body.noir .about-hero p { font-size: 17px; line-height: 1.7; max-width: 560px; margin: 16px auto 0; }

/* Mission: copy beside the four stat tiles on wide screens, stacked on phones.
   Was a hard two-column inline grid; the paragraphs carried inline
   color:rgba(0,0,0,.6), which noir's [style*=] rescue rule can never beat. */
.about-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 900px; margin: 0 auto; }
body.noir .about-mission .sl-section-title { margin-top: 10px; }
body.noir .about-mission p { font-size: var(--fs-3); color: var(--text-2); line-height: 1.75; }
body.noir .about-mission p + p { margin-top: 16px; }
@media (max-width: 860px) { .about-mission { grid-template-columns: 1fr; gap: 40px; } }

/* Lucide icons inside the 68px team avatars and 58px feature chips (the boxes were sized for emoji). */
body.noir .team-avatar .ri-svg { width: 28px; height: 28px; }
body.noir .sl-feature-icon .ri-svg { width: 26px; height: 26px; }

/* ── partnerships.html ──────────────────────────────────────────────── */
/* Hero stat row (C23-02/03): three compact variants of the shared .sl-stat-tile.
   (0,3,0) out-ranks noir.css `body.noir .sl-stat-tile` (0,2,0). */
body.noir .partner-hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
body.noir .partner-hero-stats .sl-stat-tile { padding: var(--sp-4) var(--sp-5); min-width: 132px; }
body.noir .partner-hero-stats .sl-stat-tile-num { font-size: var(--fs-5); font-variant-numeric: tabular-nums; }
/* 11px label on a card surface: --text-3 is ~3.4:1 there; --text-2 passes AA. */
body.noir .partner-hero-stats .sl-stat-tile-label { color: var(--text-2); margin-top: var(--sp-1); }

/* Logo slot fallback (C23-08): the partner's initials on the same cyan disc as the
   nav avatar (.avatar) when no logo is uploaded. Same element as .partner-logo-wrap;
   pages.css loads later, so equal specificity (0,2,0) wins. */
body.noir .partner-logo-fallback {
  border-radius: 50%;
  border-color: transparent;
  background: var(--gradient-rihla);
  color: var(--cyan-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 0 14px var(--cyan-glow);
}

/* ── login.html + reset-password.html (Batch E, C-25) ────────────────── */
/* Auth block under the shared nav (C25-01). The sticky .sl-nav-outer is in
   flow, so a 100dvh auth block added the nav's height to the document
   (permanent scrollbar, card sitting low). --nav-h is the nav's rendered
   height under noir: 16px outer padding + 55px pill (37px link/lang-button
   row + 2×8px padding + 2×1px border) = 71px; ≤768px the 44px burger makes
   the pill 62px → 78px. The block fills exactly the rest of the first
   viewport and the footer follows in flow. */
body.noir .auth-page,
body.noir .rp-wrap {
  --nav-h: 71px;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
}
@media (max-width: 768px) {
  body.noir .auth-page,
  body.noir .rp-wrap { --nav-h: 78px; }
}
body.noir .auth-right { min-height: 0; }   /* styles.css ≤640 forces 100dvh on it */

/* Phones (C25-03): 32px panel + 38px card padding left a 220px form at 360px. */
@media (max-width: 480px) {
  body.noir .auth-right { padding: var(--sp-5) var(--sp-4); }
  body.noir .auth-card { padding: var(--sp-5) var(--sp-4); }
  body.noir .rp-wrap { padding: var(--sp-4); }
}

/* Left-panel feature rows (C25-18): icons from icons.js, text off inline styles. */
.auth-feature-title { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
.auth-feature-sub { font-size: 13px; color: var(--text-2); }

/* Small auth texts one step up from --text-3 (3.4:1 on the card) to --text-2 (C25-09). */
body.noir .auth-footer,
body.noir .auth-left-tagline,
body.noir .auth-card .form-hint { color: var(--text-2); }
body.noir .auth-card .form-input::placeholder { color: var(--text-2); }

/* Text links (C25-08): the underline is the non-colour cue — cyan against the
   surrounding --text-2 is ~1:1, so colour alone can never separate them. */
body.noir .auth-link,
body.noir .auth-footer a {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(42,169,224,0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}
body.noir .auth-link:hover, body.noir .auth-link:focus-visible,
body.noir .auth-footer a:hover, body.noir .auth-footer a:focus-visible { color: var(--cyan-soft); text-decoration-color: currentColor; }
body.noir .auth-footer a .ri { margin-inline-end: 4px; }
body.noir .auth-forgot-row { text-align: end; margin-top: 6px; font-size: 12.5px; }

/* Inline alerts in the card (C25-12): long tokens (e-mail addresses) wrap instead of overflowing. */
body.noir .auth-card .alert-body { min-width: 0; overflow-wrap: anywhere; }

/* Marketing opt-in (C25-19). Both lines --text-2 (6.9:1); the checkbox takes the primary. */
.auth-optin { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: var(--sp-2) 0 var(--sp-4); font-size: 13px; line-height: 1.55; color: var(--text-2); }
.auth-optin input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--cyan); cursor: pointer; }
.auth-optin-line { display: block; }
.auth-optin-ar { margin-top: 2px; }

/* reset-password.html result states (C25-13): 46px status icon in the status colour. */
.rp-state { text-align: center; }
.rp-state-icon { display: flex; justify-content: center; margin-bottom: var(--sp-3); }
.rp-state-icon .ri-svg { width: 46px; height: 46px; }
.rp-state-ok { color: var(--ok); }
.rp-state-bad { color: var(--warn); }

/* Live percent-sold meter under each ticket tier name */
.tt-meter { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tt-meter-bar { flex: 0 1 96px; min-width: 56px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; }
.tt-meter-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2aa9e0, #5cc8f2); transition: width .6s ease; }
.tt-meter.full .tt-meter-bar i { background: #64748b; }
.tt-meter-pct { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
@media (max-width: 480px) { .tt-meter-bar { flex-basis: 72px; } .tt-meter-pct { font-size: 11.5px; } }