/* Event pages (/events/<slug>, /thanks). Builds on site.css. */

.event-page { --gold: #d4af37; }
.event-page .footer { padding-bottom: calc(96px + var(--safe-b)); }

.back-btn {
  position: fixed; z-index: 40;
  top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, .55); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.back-btn svg { width: 24px; height: 24px; }

/* ── High-demand banner: real tickets left + the price-hold timer ── */
.scarcity {
  position: sticky; top: 0; z-index: 45;
  display: grid; justify-items: center; gap: 4px;
  padding: 9px 16px; padding-top: calc(9px + env(safe-area-inset-top, 0px));
  background: linear-gradient(90deg, #b3121b, #e5202b);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(229, 32, 43, .4);
}
.scarcity[hidden], .banner-hold[hidden], .banner-line[hidden] { display: none; }
.scarcity.is-live .banner-line:not(.banner-live), .scarcity.is-live .banner-hold { display: none; }
.banner-live { font-size: 13px; letter-spacing: .2em; }
.banner-line { display: flex; align-items: center; justify-content: center; gap: 10px; }
.banner-hold { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; letter-spacing: .08em; }
.banner-hold .timer {
  padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .35);
  font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
/* js/event.js measures the banner into --banner-h */
.has-banner .back-btn, .has-banner .lang-btn { top: calc(var(--banner-h, 44px) + 16px); }
.has-banner #tickets { scroll-margin-top: var(--banner-h, 44px); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

/* ── Hero: poster first, then the intro ─────────────── */
.ev-hero { position: relative; text-align: center; }
.ev-poster { position: relative; }
.ev-poster img {
  width: 100%; max-width: 560px; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0 auto;
  /* shimmer until the poster arrives, then fade it in */
  background: linear-gradient(90deg, #0c0c0c 0%, #181818 50%, #0c0c0c 100%) 0 0 / 200% 100%;
  animation: shimmer 1.3s linear infinite;
  color: transparent; transition: opacity .35s ease;
}
.ev-poster img.loaded { animation: none; background: none; }
.ev-poster::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10%;
  background: linear-gradient(to bottom, transparent, #000); pointer-events: none;
}
.ev-logo img { width: 150px; height: auto; margin: 0 auto; }
/* Event without a poster: the logo opens the page, below the fixed buttons. */
.ev-hero .ev-logo img { padding-top: calc(96px + env(safe-area-inset-top, 0px)); box-sizing: content-box; }
.ev-intro { padding: 8px 20px 8px; }
.ev-title {
  margin: 8px auto 16px; max-width: 12em;
  font-size: clamp(40px, 13vw, 64px); line-height: .95; font-weight: 800;
  letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: anywhere;
}
.ev-title .accent { display: block; color: var(--pink); }
/* Luma names used as a fallback title are long: scale them down. */
.ev-title.long { font-size: clamp(26px, 8vw, 40px); line-height: 1.05; max-width: 16em; }
.ev-title.long .accent { display: inline; }
.ev-desc { max-width: 30em; margin: 0 auto; color: var(--ink-2); font-size: 15.5px; }
.ev-vibe { margin-top: 8px; font-weight: 700; font-size: 15.5px; }
.ev-when {
  margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  font-size: 15px; font-weight: 600;
}
.ev-when > span, .ev-where { display: inline-flex; align-items: center; gap: 7px; }
.ev-when svg, .ev-where svg { width: 18px; height: 18px; color: var(--pink); flex: none; }
.ev-where { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--pink); }
.ev-where a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236, 70, 112, .5); }
.ev-cta { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.agree { font-size: 12px; color: var(--ink-3); max-width: 28em; margin: 0 auto; padding: 8px 20px 32px; text-align: center; }
.agree a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

.btn-lg { height: 56px; padding: 0 28px; font-size: 13.5px; border-radius: 12px; }
.btn-disabled { background: #2a2a2a; color: var(--ink-3); cursor: not-allowed; }
.btn-gold { background: linear-gradient(135deg, #bf953f, #fcf6ba 45%, #d4af37 60%, #aa771c); color: #2a1b00; }
.btn[disabled] { opacity: .7; }

/* ── Blocks ──────────────────────────────────────────── */
.ev-block { padding: 64px 16px 0; max-width: 520px; margin: 0 auto; }
.ev-block .kicker { margin-bottom: 20px; }

.highlights { list-style: none; display: grid; gap: 10px; }
.highlights li {
  padding: 14px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 15px; font-weight: 500;
}

.loc-card { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.map-link { display: block; }
.map {
  display: block; width: 100%; height: 220px; border: 0;
  filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95);
  pointer-events: none; /* no pan/zoom: scrolling the page stays smooth */
}
.loc-body { padding: 16px; display: grid; gap: 6px; }
.loc-venue { font-size: 17px; font-weight: 700; }
.loc-address { font-size: 13.5px; color: var(--ink-2); margin-bottom: 8px; }

/* ── Tickets ─────────────────────────────────────────── */
.tiers { list-style: none; display: grid; gap: 10px; }
.tier {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
}
.tier.on_sale { border-color: var(--pink); background: rgba(236, 70, 112, .08); }
.tier.sold_out, .tier.next { opacity: .45; }
.tier.next .tier-name, .tier.next .tier-price { color: var(--ink-2); }
.tier.sold_out .tier-price { text-decoration: line-through; }
.tier-name { font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.tier-price { font-size: 20px; font-weight: 800; white-space: nowrap; }
.tier-tag {
  display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
}
.tier-tag.live { background: var(--pink); }
.tier-tag.sold { background: #333; color: var(--ink-2); }
.tier-tag.next { border: 1px solid #444; color: var(--ink-2); }

.perks { list-style: none; display: grid; gap: 10px; margin: 20px 4px; }
.perks li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-2); }
.perks b { color: #fff; }
.perks svg { width: 18px; height: 18px; flex: none; color: var(--pink); margin-top: 1px; }
.ev-buy .btn, #tickets > .btn { width: 100%; }
#tickets > .btn { margin-top: 10px; }
.vip-options { display: grid; gap: 12px; }
/* Taller, with room at the bottom: Safari's toolbar and the iPhone home bar
   sit over the lowest strip of the screen and hid the last option. */
#vipSheet .sheet-panel { min-height: 50vh; min-height: 50svh; padding-bottom: calc(56px + var(--safe-b)); }
#vipSheet .vip-option { height: 64px; font-size: 14px; }
.vip-option { border: 1.5px solid #d4af37; color: #f3e3a3; background: #141414; }
.vip-option:hover, .vip-option:focus-visible { background: #1f1a0c; }
.vip-option svg { width: 22px; height: 22px; color: #d4af37; }
#tickets { padding-bottom: 48px; }

/* ── Sticky buy bar ──────────────────────────────────── */
.buy-bar {
  position: fixed; z-index: 50;
  left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%);
  width: calc(100% - 20px); max-width: 420px; height: 72px;
  display: flex; align-items: center; padding: 0 8px;
  background: rgba(10, 10, 10, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid #2c2c2c; border-radius: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  touch-action: manipulation;
}
.buy-bar[hidden] { display: none; }
.buy-bar .btn { flex: 1; }

/* ── Quantity sheet (same layout as the city sites) ─── */
.qty-panel { padding-top: 14px; background: #000; border-top-color: #333; }
.qty-panel::before { display: none; }
.qty-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.qty-head h3 { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.qty-close {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center; border: 1.5px solid #555; color: #fff;
}
.qty-close svg { width: 16px; height: 16px; }

.qty-list { display: grid; gap: 12px; }
.qty-opt {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px; border-radius: 12px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.qty-opt:active { transform: scale(.98); }
.qty-opt:hover { border-color: var(--pink); background: rgba(236, 70, 112, .08); }
/* Read first: ticket count (pink) and price per ticket, on the left.
   Quieter on the right: the total to pay and the SAVE pill. */
.qty-opt .meta { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 2px; }
.qty-opt .n { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pink); }
.qty-opt .save, .qty-custom .save {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 6px;
  background: var(--pink); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.qty-opt .save b, .qty-custom .save b { font-weight: 800; letter-spacing: .04em; }
.qty-opt .each { display: flex; align-items: baseline; gap: 6px; }
.qty-opt .each .new { font-size: 18px; font-weight: 800; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.qty-opt .each .per { font-size: 12px; }
.qty-opt .side { flex: none; display: grid; justify-items: end; gap: 6px; text-align: right; }
.qty-opt .price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qty-opt .price s { font-size: 12px; color: #6e6e6e; }
.qty-opt .price .new { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.qty-opt .per, .qty-custom-price .per { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); }
/* Total to pay, regular total struck through: there if wanted, not competing. */
.qty-opt .tot, .qty-custom-price .tot { font-size: 11px; color: #8a8a8a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qty-opt .tot s, .qty-custom-price .tot s { color: #5e5e5e; }
.qty-custom-price .tot.spacer { visibility: hidden; }
/* While loading, the total/arrow keep their space (just invisible) and the
   spinner sits on top, so the card doesn't shrink before the next page. */
.qty-opt.loading .side, .qty-opt.loading .arw { visibility: hidden; }
/* Arrow on the card / PromptPay buttons. */
.qty-opt .arw { flex: none; font-size: 18px; color: #fff; }
.qty-opt:disabled { opacity: .55; }
/* More than what's left: grayed out and not pickable. */
.qty-opt.off { opacity: .35; cursor: not-allowed; }
.qty-opt.off:hover { border-color: var(--line); background: var(--surface); }
.qty-opt.off:active { transform: none; }
.qty-opt.off .n, .qty-opt.off .new { color: #9a9a9a; }
.qty-custom.off { opacity: .35; }
.qty-custom.off .num, .qty-custom.off .new { color: #9a9a9a; }
.qty-custom.off .qty-buy { cursor: not-allowed; }

.spinner {
  display: none; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .6s linear infinite;
}
.qty-opt.loading .spinner, .qty-buy.loading .spinner { display: inline-block; }
.qty-opt .spinner { position: absolute; right: 16px; top: 50%; margin-top: -9px; }

.qty-custom { position: relative; margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.qty-custom[hidden] { display: none; }
.qty-custom-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #e4e4e4; margin-bottom: 10px; }
.qty-stepper { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 14px; }
.qty-stepper button {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #777; color: #fff;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.qty-stepper button:disabled { opacity: .3; }
.qty-custom .save { position: absolute; top: 14px; right: 16px; }
.qty-custom .save[hidden] { display: none; }
.qty-custom-price { display: grid; justify-items: center; gap: 4px; margin: -4px 0 14px; }
.qty-custom-price .each { display: flex; align-items: baseline; gap: 6px; }
.qty-custom-price .new { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.qty-stepper .num { min-width: 44px; text-align: center; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pink-hi); }

/* Card or PromptPay (THB events). */
.qty-list[hidden], .pay-step[hidden] { display: none; }
.pay-step { display: grid; gap: 14px; }
.pay-sum { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: #e4e4e4; text-transform: uppercase; }
.pay-methods { display: grid; gap: 12px; }
.pay-icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(236, 70, 112, .12); color: var(--pink-hi);
}
.pay-icon svg { width: 22px; height: 22px; }
.pay-opt .pay-sub { font-size: 13px; color: #b8b8b8; }
.pay-back { justify-self: center; padding: 8px 12px; background: none; color: #c8c8c8; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.pay-back:disabled { opacity: .5; }

.qty-error { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 80, 80, .12); color: #ff8a8a; font-size: 13.5px; }
.qty-foot { margin-top: 16px; text-align: center; font-size: 12.5px; color: #c8c8c8; line-height: 1.6; }

/* ── Not found / thanks ──────────────────────────────── */
.doc-center {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  /* just clear the fixed back / language buttons */
  padding: calc(28px + env(safe-area-inset-top, 0px)) 24px 40px; text-align: center; color: var(--ink-2);
}
.doc-center .ev-logo img { width: 120px; margin-bottom: 4px; }
.thanks .ev-title { margin: 4px 0; }
.thanks-icon {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pink); box-shadow: 0 0 36px var(--pink-glow); color: #fff;
}
.thanks-icon svg { width: 36px; height: 36px; }
.thanks-icon.not-paid { background: #2a2a2a; color: #ff8a8a; box-shadow: none; }
.thanks-event { color: #fff; font-size: 15px; }
.thanks-body b { color: #fff; word-break: break-all; }
.thanks-note { font-size: 12.5px; color: var(--ink-3); max-width: 26em; margin-bottom: 10px; }
.thanks-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.thanks-actions + .thanks-body { margin-top: 10px; }

/* ── Thank-you page: Luma QR ticket ──────────────────── */
.qr-card {
  width: 100%; max-width: 340px; margin: 8px auto 4px; padding: 18px 18px 16px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center;
}
.qr-title { font-size: 12px; font-weight: 800; letter-spacing: .3em; color: var(--pink); margin-bottom: 12px; }
.qr-box {
  width: 240px; height: 240px; margin: 0 auto; border-radius: 12px; background: #fff; color: #555;
  display: grid; place-items: center; align-content: center; gap: 12px; padding: 12px; font-size: 13px;
}
.qr-box .spinner { display: inline-block; border-color: rgba(0, 0, 0, .15); border-top-color: var(--pink); }
.qr-box.ready { padding: 6px; }
.qr-box.ready svg { width: 100%; height: 100%; }
.qr-box.fallback { background: var(--surface-2); color: var(--ink-2); height: auto; min-height: 120px; }
/* For the person scanning at the gate: readable at arm's length. */
.gate { margin-top: 14px; display: grid; gap: 4px; }
.gate-count { font-size: 30px; font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: .02em; }
.gate-email { font-size: 18px; font-weight: 700; color: #fff; word-break: break-all; line-height: 1.3; }
.thanks-actions { width: 100%; max-width: 340px; display: grid; gap: 10px; margin-top: 4px; }
.qr-door { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.qr-door[hidden] { display: none; }

/* Hidden "TEST · 1 TICKET" at the very bottom: a dot almost as dark as the
   page; tapping it shows the test button. */
.test-pay { position: relative; display: grid; justify-items: center; }
/* Takes no space: sits in the gap already below the terms line. */
.test-dot {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; color: #141414; font-size: 18px; line-height: 1; background: none;
}
.test-btn {
  margin-bottom: 32px; padding: 10px 16px; border-radius: 10px; border: 1px dashed #555; background: none;
  color: #a6a6a6; font-size: 11px; font-weight: 700; letter-spacing: .12em;
}
.test-btn[hidden] { display: none; }
.test-btn:disabled { opacity: .5; }
.test-note { margin-bottom: 12px; padding: 6px 10px; border: 1px dashed #555; border-radius: 8px; color: #a6a6a6; font-size: 11px; font-weight: 700; letter-spacing: .1em; }