/* =====================================================================
   Promotions & Discounts
   =====================================================================
   One sheet for three surfaces: the public promotions page, the vendor
   portal, and the QR modal that also appears on the passport. Everything
   is scoped under `.promo-` (or a `.promo-page`/`.promo-portal` body
   class), so loading this file on passport.php cannot touch the passport.

   It uses the tokens style.css already declares (--bg, --gold, --green,
   --radius) rather than inventing a palette: a promotion page that looked
   like a different product would read as an ad, which is the one thing a
   voucher page must not do.
   ===================================================================== */

.promo-page,
.promo-portal {
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(245, 158, 11, .10), transparent 70%),
    radial-gradient(700px 420px at 100% 0%, rgba(29, 78, 216, .12), transparent 65%),
    var(--bg);
  min-height: 100dvh;
}

/* The top padding clears `.page-top-nav`, which style.css fixes to the top of
   the viewport (75px on a phone, 83px above the 560px breakpoint — the same
   measured figures passport.css documents). At 34px the hero's title sat
   behind the bar and its top was clipped on desktop. */
/* The home screen links hub.css, not style.css, and hub.css does not declare
   these tokens. The modal and the QR overlay carry this class so the same
   components render identically in both homes. On the standalone pages the
   values are the ones style.css already declares — restating them is inert. */
.promo-scope {
  --gold: #f59e0b;
  --green: #10b981;
  --text: #f1f5f9;
  --text-dim: #94a3b8;
  --text-faint: #475569;
  --border: rgba(255, 255, 255, .07);
  --border-lt: rgba(255, 255, 255, .13);
  --glass: rgba(255, 255, 255, .04);
  --glass-b: rgba(255, 255, 255, .08);
  --radius: 18px;
  --radius-lg: 26px;
  --font: 'Montserrat', sans-serif;
}

.promo-main { padding-top: 96px; padding-bottom: 72px; }

/* ── Hero ───────────────────────────────────────────────────── */
.promo-hero { max-width: 760px; margin: 0 0 30px; }
.promo-kicker {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.promo-hero h1 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.promo-lede {
  margin: 0;
  max-width: 60ch;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.65;
}

.promo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin-top: 20px;
}

.promo-vendor-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--border-lt);
  border-radius: 14px;
  background: var(--glass);
  color: var(--text);
  font-size: .84rem;
  font-weight: 700;
  transition: border-color .18s, background .18s;
}
.promo-vendor-link:hover,
.promo-vendor-link:focus-visible { border-color: var(--gold); background: rgba(245, 158, 11, .08); }
.promo-vendor-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.promo-vendor-link span { color: var(--gold); }

/* ── Sections ───────────────────────────────────────────────── */
.promo-section { margin-bottom: 38px; }
.promo-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.promo-section-head h2 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.promo-count {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--glass-b);
  color: var(--text-dim);
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}
.promo-muted { color: var(--text-dim); font-size: .85rem; }
.promo-rule { margin: 22px 0; border: none; border-top: 1px solid var(--border); }

/* ── Offer cards ────────────────────────────────────────────── */
.promo-offers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  align-items: start;
}
.promo-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  transition: border-color .18s, transform .18s;
}
.promo-card:hover { border-color: var(--border-lt); }
.promo-card-head { display: flex; align-items: center; gap: 10px; }

.promo-logo {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}
.promo-logo img { width: 100%; height: 100%; object-fit: cover; }
.promo-logo--initial span {
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.promo-card-vendor { display: grid; gap: 1px; min-width: 0; }
.promo-card-vendor b {
  overflow: hidden;
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promo-card-vendor small { color: var(--text-dim); font-size: .72rem; }
.promo-card-head .promo-pill { margin-left: auto; }

.promo-pill {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.promo-pill--open { background: rgba(16, 185, 129, .14); color: #34d399; }
.promo-pill--closed { background: rgba(148, 163, 184, .12); color: var(--text-dim); }
.promo-pill--state { background: var(--glass-b); color: var(--text-dim); }

.promo-title { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
.promo-desc { margin: 0; color: var(--text-dim); font-size: .84rem; line-height: 1.55; }

.promo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--text-dim);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}
.promo-meta--block { display: grid; gap: 6px; margin-top: 18px; }

.promo-claim-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.promo-claim-row small { color: var(--text-faint); font-size: .72rem; }

.promo-state { font-size: .82rem; font-weight: 800; }
.promo-state--used { color: var(--text-dim); }
.promo-state--expired { color: var(--text-faint); }
.promo-state--void { color: #f87171; }

.promo-used { opacity: .55; filter: grayscale(1); }

.promo-terms { border-top: 1px solid var(--border); padding-top: 8px; }
.promo-terms summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: .74rem;
  font-weight: 700;
}
.promo-terms p { margin: 6px 0 0; color: var(--text-faint); font-size: .74rem; line-height: 1.5; }

/* ── Buttons ────────────────────────────────────────────────── */
.promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid var(--border-lt);
  border-radius: 11px;
  background: var(--glass);
  color: var(--text);
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}
.promo-btn:hover,
.promo-btn:focus-visible { border-color: var(--gold); background: rgba(245, 158, 11, .08); }
.promo-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.promo-btn:disabled { cursor: default; opacity: .45; }
/* `.promo-btn` sets `display:inline-flex`, which beats the UA's rule for the
   hidden attribute — the scanner's "Start camera" button would stay on screen
   after it was hidden in JS. */
.promo-btn[hidden] { display: none !important; }
.promo-btn--primary {
  border: none;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a1206;
}
.promo-btn--primary:hover,
.promo-btn--primary:focus-visible {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.promo-btn--quiet { border-color: transparent; background: transparent; color: var(--text-dim); }
.promo-btn--quiet:hover { border-color: #f87171; color: #f87171; background: rgba(248, 113, 113, .06); }
.promo-inline-link { color: var(--gold); font-size: .8rem; font-weight: 700; }
.promo-inline-link:hover { text-decoration: underline; }

/* ── Vendor directory ───────────────────────────────────────── */
.promo-vendors { display: grid; gap: 10px; }
.promo-vendor {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--glass);
}
.promo-vendor-body { min-width: 0; flex: 1; }
.promo-vendor-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.promo-vendor-top b { color: #fff; font-size: .88rem; font-weight: 800; }
.promo-vendor-body small { display: block; color: var(--text-dim); font-size: .72rem; margin-top: 1px; }
.promo-vendor-body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: .76rem;
  line-height: 1.5;
}
.promo-vendor-side { flex: 0 0 auto; color: var(--text-faint); font-size: .72rem; font-weight: 700; }

.promo-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 38px 22px;
  border: 1px dashed var(--border-lt);
  border-radius: var(--radius);
  text-align: center;
}
.promo-empty--wide { max-width: 560px; margin: 12vh auto 0; }
.promo-empty__icon { font-size: 2.2rem; line-height: 1; }
.promo-empty h1 { margin: 4px 0 0; color: #fff; font-size: 1.4rem; font-weight: 900; }
.promo-empty h3 { margin: 4px 0 0; color: #fff; font-size: 1.05rem; font-weight: 800; }
.promo-empty p { margin: 0; max-width: 46ch; color: var(--text-dim); font-size: .85rem; }
.promo-empty .promo-btn { margin-top: 6px; }

.promo-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: .78rem;
  font-weight: 700;
}
.promo-footer a:hover { color: var(--gold); }

/* ── Home-screen modal ──────────────────────────────────────── */
/* Wider than the hub's default 520px dialog: the offers are a two-column grid
   and each card carries a vendor row, a title and a claim button. */
.promotions-modal.hub-modal { width: min(780px, 100%); padding: 24px; }
.promo-modal-head { margin: 0 0 18px; padding-right: 30px; }
.promo-modal-head .modal-kicker { margin-bottom: 6px; }
.promotions-modal .promo-modal-title {
  margin: 0;
  color: #fff;
  font: 900 clamp(22px, 3.4vw, 30px)/1.1 var(--display, var(--font));
  letter-spacing: -.01em;
  text-transform: none;
}
/* `.hub-modal p` (0,1,1) beats the components' own paragraph rules, so the
   ones that carry layout here are restated at modal scope. */
.promotions-modal .promo-lede {
  margin: 8px 0 0;
  max-width: 60ch;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
}
.promotions-modal .promo-desc,
.promotions-modal .promo-muted {
  margin: 0;
  color: var(--text-dim);
  font-size: .84rem;
  line-height: 1.55;
}
.promotions-modal .promo-section { margin-bottom: 26px; }
.promotions-modal .promo-section:last-of-type { margin-bottom: 10px; }
.promotions-modal .promo-footer { margin-top: 4px; }

.promo-flash {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 13px;
  border: 1px solid var(--border-lt);
  border-radius: 12px;
  background: var(--glass);
  color: var(--text);
  font-size: .82rem;
  line-height: 1.5;
}
.promo-flash--success { border-color: rgba(16, 185, 129, .38); background: rgba(16, 185, 129, .10); }
.promo-flash--error   { border-color: rgba(248, 113, 113, .42); background: rgba(248, 113, 113, .10); }
.promo-flash--info    { border-color: rgba(59, 130, 246, .38); background: rgba(59, 130, 246, .10); }

.promo-qr-loading { margin: 0; color: #111; font-size: .8rem; }

/* ── QR modal (also used on passport.php) ───────────────────── */
.promo-qr-modal { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 20px; }
.promo-qr-modal[hidden] { display: none !important; }
.promo-qr-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 18, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.promo-qr-card {
  position: relative;
  width: min(360px, 100%);
  padding: 26px 22px 22px;
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0c1738, #060f2a);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  text-align: center;
}
.promo-qr-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  color: var(--text-dim);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.promo-qr-close:hover,
.promo-qr-close:focus-visible { color: #fff; background: rgba(255, 255, 255, .13); }
.promo-qr-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.promo-qr-kicker {
  margin: 0 0 2px;
  color: var(--gold);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.promo-qr-card h2 { margin: 0 0 14px; color: #fff; font-size: 1.1rem; font-weight: 800; }
.promo-qr-frame {
  display: grid;
  place-items: center;
  width: 248px;
  height: 248px;
  margin: 0 auto;
  padding: 4px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  font-size: .7rem;
  font-weight: 700;
  overflow: hidden;
}
.promo-qr-frame canvas, .promo-qr-frame svg { display: block; max-width: 100%; height: auto; }
.promo-qr-code {
  margin: 12px 0 4px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.promo-qr-hint { margin: 0; color: var(--text-faint); font-size: .72rem; line-height: 1.45; }

/* ── Vendor portal ──────────────────────────────────────────── */
/* Same fixed `.page-top-nav` as the public page — the portal's top nav is the
   same component. */
.promo-portal-main { padding-top: 96px; padding-bottom: 72px; }

.promo-portal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
  margin-bottom: 16px;
}
.promo-portal-id { flex: 1; min-width: 180px; }
.promo-portal-id h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.promo-portal-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 5px 0 0;
  color: var(--text-dim);
  font-size: .76rem;
}
.promo-portal-open { flex: 0 0 auto; }

.promo-event-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.promo-event-switch a {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: .74rem;
  font-weight: 700;
}
.promo-event-switch a:hover { border-color: var(--border-lt); color: var(--text); }
.promo-event-switch a.is-active { border-color: var(--gold); color: var(--gold); background: rgba(245, 158, 11, .08); }

.promo-alert {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-lt);
  border-radius: 12px;
  font-size: .82rem;
  line-height: 1.5;
}
.promo-alert--warn { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .09); color: #fcd34d; }
.promo-alert--error { border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .08); color: #fca5a5; }

.promo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255, 255, 255, .025);
}
.promo-tabs a {
  flex: 1 1 auto;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--text-dim);
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
}
.promo-tabs a:hover { color: var(--text); background: var(--glass); }
.promo-tabs a.is-active { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1a1206; }
.promo-tabs a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.promo-form {
  display: grid;
  gap: 12px;
  max-width: 640px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
}
.promo-form label {
  display: grid;
  gap: 6px;
  color: var(--text-dim);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.promo-form label small { color: var(--text-faint); font-size: .7rem; font-weight: 500; }
.promo-form input[type="text"],
.promo-form input[type="number"],
.promo-form input[type="datetime-local"],
.promo-form input[type="file"],
.promo-form select,
.promo-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-lt);
  border-radius: 10px;
  background: rgba(3, 11, 31, .7);
  color: var(--text);
  font-family: var(--font);
  font-size: .85rem;
  line-height: 1.45;
}
.promo-form select { appearance: auto; }
.promo-form textarea { resize: vertical; }
.promo-form input:focus,
.promo-form select:focus,
.promo-form textarea:focus {
  border-color: var(--gold);
  outline: 2px solid rgba(245, 158, 11, .35);
  outline-offset: 1px;
}
.promo-form input::placeholder, .promo-form textarea::placeholder { color: var(--text-faint); }
.promo-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.promo-form .promo-btn { justify-self: start; }

.promo-portal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.promo-portal-actions form { display: contents; }

.promo-offers--portal { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.promo-redeem-ok {
  max-width: 460px;
  margin: 0 0 20px;
  padding: 20px;
  border: 1px solid rgba(16, 185, 129, .4);
  border-radius: var(--radius);
  background: rgba(16, 185, 129, .08);
  text-align: center;
}
.promo-redeem-ok__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #04130d;
  font-size: 1.3rem;
  font-weight: 900;
}
.promo-redeem-ok h3 { margin: 0 0 6px; color: #6ee7b7; font-size: 1.05rem; font-weight: 900; }
.promo-redeem-ok p { margin: 2px 0; color: var(--text); font-size: .84rem; }

.promo-scanner {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-bottom: 18px;
}
.promo-scanner-stage {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border-lt);
  border-radius: var(--radius);
  background: #01040d;
}
.promo-scanner-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo-scanner-frame {
  position: absolute;
  inset: 14%;
  border: 2px solid rgba(245, 158, 11, .8);
  border-radius: 14px;
  box-shadow: 0 0 0 999px rgba(2, 6, 18, .35);
  pointer-events: none;
}

.promo-scan-form { max-width: 420px; }

.promo-history { display: grid; gap: 8px; max-width: 640px; }
.promo-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--glass);
  font-size: .82rem;
}
.promo-history-row b { display: block; color: #fff; font-size: .82rem; }
.promo-history-row small { color: var(--text-dim); font-size: .72rem; }
.promo-history-row > small { white-space: nowrap; }

/* ── Small screens ──────────────────────────────────────────── */
@media (max-width: 560px) {
  /* The nav is 75px here; 88px leaves the same visual gap as 96px does on
     desktop. This used to be 22px, parking the hero behind the bar. */
  .promo-main, .promo-portal-main { padding-top: 88px; padding-bottom: 52px; }
  .promo-offers, .promo-offers--portal { grid-template-columns: minmax(0, 1fr); }
  .promo-hero-actions { flex-direction: column; align-items: stretch; }
  .promo-portal-head { align-items: flex-start; }
  .promo-portal-open { width: 100%; }
  .promo-portal-open .promo-btn { width: 100%; }
  .promo-qr-frame { width: 220px; height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .promo-card,
  .promo-btn,
  .promo-vendor-link { transition: none; }
  .promo-card:hover,
  .promo-vendor-link:hover { transform: none; }
}