/* ==========================================================================
   RMUTI-SKC 30th — Premium Design System v3.0
   ========================================================================== */

/* ==========================================================================
   Design tokens — Light Mode
   ========================================================================== */
:root {
  /* Brand */
  --primary:        #c84d0d;
  --primary-dk:     #96350a;
  --primary-lt:     #e8651a;
  --primary-glow:   #f28a49;
  --primary-ultra:  #f7ae78;
  --primary-faint:  #fff3ec;

  /* Accent */
  --accent:         #2f4668;
  --accent-lt:      #5d7392;

  /* Gold */
  --gold:           hsl(43,96%,50%);
  --gold-lt:        hsl(43,96%,66%);
  --gold-dk:        hsl(43,90%,38%);

  /* Ink */
  --ink:            #211e1b;
  --ink-muted:      #5d5751;
  --ink-faint:      #756e67;
  --ink-ghost:      #a49d97;

  /* Surface */
  --surface:        hsl(0,0%,100%);
  --surface-alt:    #f6f6f5;
  --surface-tint:   #fff7f2;
  --surface-card:   hsl(0,0%,100%);
  --surface-glass:  rgba(255,255,255,0.96);

  /* Border */
  --border:         #ddd9d5;
  --border-faint:   #ebe8e5;
  --border-strong:  #bdb7b1;

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-2xl:  16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs:       0 1px 2px rgba(33,30,27,.06);
  --shadow-sm:       0 2px 8px rgba(33,30,27,.08);
  --shadow-md:       0 4px 8px rgba(33,30,27,.10);
  --shadow-lg:       0 6px 8px rgba(33,30,27,.12);
  --shadow-xl:       0 8px 8px rgba(33,30,27,.14);
  --shadow-brand:    0 2px 6px rgba(150,53,10,.22);
  --shadow-brand-lg: 0 4px 8px rgba(150,53,10,.25);
  --shadow-gold:     0 2px 6px rgba(160,110,0,.20);

  /* Status */
  --seat-available: hsl(142,72%,33%);
  --seat-pending:   hsl(38,96%,50%);
  --seat-booked:    hsl(0,78%,48%);
  --seat-selected:  hsl(24,82%,51%);
  --seat-locked:    hsl(215,14%,62%);

  /* Seat size */
  --seat-sz:  44px;
  --seat-gap: 6px;

  /* Easing */
  --ease-spring: cubic-bezier(0.22,1,0.36,1);
  --ease-out:    cubic-bezier(0.22,1,0.36,1);
  --ease-expo:   cubic-bezier(0.16,1,0.3,1);

  /* Topbar */
  --topbar-h: 72px;

  color-scheme: light;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */
[data-theme="dark"] {
  --ink:            hsl(30,16%,93%);
  --ink-muted:      hsl(30,10%,62%);
  --ink-faint:      hsl(30,8%,46%);
  --ink-ghost:      hsl(30,6%,34%);
  --surface:        hsl(22,14%,9%);
  --surface-alt:    hsl(22,14%,12%);
  --surface-tint:   hsl(22,22%,14%);
  --surface-card:   hsl(22,14%,13%);
  --surface-glass:  rgba(22,18,12,0.78);
  --border:         hsl(22,10%,21%);
  --border-faint:   hsl(22,10%,17%);
  --border-strong:  hsl(22,10%,28%);
  --primary-faint:  hsl(24,30%,16%);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.18);
  --shadow-md:  0 6px 20px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.22);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.48), 0 6px 16px rgba(0,0,0,.28);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:            hsl(30,16%,93%);
    --ink-muted:      hsl(30,10%,62%);
    --ink-faint:      hsl(30,8%,46%);
    --ink-ghost:      hsl(30,6%,34%);
    --surface:        hsl(22,14%,9%);
    --surface-alt:    hsl(22,14%,12%);
    --surface-tint:   hsl(22,22%,14%);
    --surface-card:   hsl(22,14%,13%);
    --surface-glass:  rgba(22,18,12,0.78);
    --border:         hsl(22,10%,21%);
    --border-faint:   hsl(22,10%,17%);
    --border-strong:  hsl(22,10%,28%);
    --primary-faint:  hsl(24,30%,16%);
    --shadow-sm:  0 2px 8px rgba(0,0,0,.28);
    --shadow-md:  0 6px 20px rgba(0,0,0,.38);
    --shadow-lg:  0 16px 48px rgba(0,0,0,.48);
    color-scheme: dark;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans Thai',system-ui,sans-serif;
  color: var(--ink);
  background-color: var(--surface-alt);
  background-image: linear-gradient(180deg, rgba(200,77,13,.035), transparent 320px);
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s, color .4s;
}

a { color: var(--primary-dk); text-decoration: none; }
a:hover { color: var(--primary-dk); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(232,101,26,.42);
  outline-offset: 3px;
}

/* ==========================================================================
   Utility
   ========================================================================== */
.text-brand  { color: var(--primary)!important; }
.text-accent { color: var(--accent)!important; }
.text-gold   { color: var(--gold)!important; }
.bg-brand    { background: var(--primary)!important; }
.bg-tint     { background: var(--surface-tint)!important; }
.bg-surface  { background: var(--surface)!important; }

.stat-card, .cart-card { box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Navbar
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--topbar-h);
  background: linear-gradient(100deg, hsl(24,84%,34%) 0%, hsl(24,82%,44%) 50%, hsl(24,80%,52%) 100%);
  color: #fff;
  transition: box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.topbar.is-scrolled {
  height: 56px;
  box-shadow: 0 4px 28px rgba(170,65,8,.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding-inline: 0;
}

/* Brand */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.brand-emblem {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  text-align: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff 0%, hsl(30,60%,96%) 100%);
  color: var(--primary-dk);
  line-height: 1;
  box-shadow: 0 3px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .25s var(--ease-spring);
}
.brand-lockup:hover .brand-emblem { transform: rotate(-8deg) scale(1.1); }
.brand-emblem .num {
  display: block;
  font-weight: 900;
  font-size: 1.08rem;
  letter-spacing: -.03em;
}
.brand-emblem .yr {
  display: block;
  font-weight: 700;
  font-size: .56rem;
  margin-top: 1px;
  letter-spacing: .02em;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text .t1 {
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text .t2 {
  font-size: .72rem;
  line-height: 1.25;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav buttons */
.nav-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.btn-nav, .btn-nav-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, transform .15s var(--ease-spring), box-shadow .15s;
}
.btn-nav { background: rgba(255,255,255,.92); color: var(--primary-dk); box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.btn-nav:hover { background: #fff; color: var(--primary-dk); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.btn-nav-active { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 2px 10px rgba(0,0,0,.18); }
.btn-nav-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.btn-nav-ghost:hover { background: rgba(255,255,255,.2); color: #fff; transform: translateY(-1px); border-color: rgba(255,255,255,.65); }
.btn-nav .ui-icon, .btn-nav-ghost .ui-icon { font-size: .95rem; }

/* Dark toggle */
.btn-dark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.38);
  color: #fff;
  cursor: pointer;
  transition: background .15s, transform .2s var(--ease-spring);
  font-size: .95rem;
}
.btn-dark-toggle:hover { background: rgba(255,255,255,.24); transform: rotate(22deg) scale(1.1); }

/* Mobile responsive nav */
@media (max-width: 575.98px) {
  .brand-text .t2 { display: none; }
  .brand-text .t1 { font-size: .97rem; }
  .brand-emblem { width: 38px; height: 38px; }
  .btn-nav .lbl, .btn-nav-ghost .lbl { display: none; }
  .btn-nav, .btn-nav-ghost { padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms!important; animation-duration: 0.01ms!important; }
}

/* ==========================================================================
   Hero Banner
   ========================================================================== */
.hero-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background:
    radial-gradient(ellipse 70% 140% at 92% -15%, rgba(255,200,120,.20), transparent 52%),
    radial-gradient(ellipse 50% 80% at 5% 90%, rgba(180,60,10,.22), transparent 55%),
    linear-gradient(138deg, hsl(22,88%,30%) 0%, hsl(24,84%,42%) 38%, hsl(24,80%,50%) 68%, hsl(30,88%,58%) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 40px 42px;
  box-shadow:
    0 24px 60px rgba(180,70,12,.34),
    0 8px 20px rgba(180,70,12,.18),
    inset 0 1px 0 rgba(255,255,255,.14);
  animation: heroFadeIn .65s var(--ease-expo) both;
}
/* Decorative orb top-right */
.hero-banner::before {
  content: '';
  position: absolute;
  right: -60px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%);
  pointer-events: none;
}
/* 30 watermark */
.hero-banner::after {
  content: '30';
  position: absolute;
  right: 36px;
  bottom: -44px;
  font-size: 6rem;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
  color: rgba(255,255,255,.07);
  letter-spacing: -.03em;
  pointer-events: none;
  user-select: none;
}

/* Second orb bottom-left */
.hero-orb {
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,180,80,.12), transparent 70%);
  pointer-events: none;
}

.hero-content { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 16px;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: .04em;
  animation: slideDown .55s var(--ease-expo) .08s both;
}
.hero-badge .ui-icon { color: var(--gold-lt); }

.hero-title {
  font-weight: 900;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-shadow: 0 2px 20px rgba(0,0,0,.18);
  animation: slideDown .55s var(--ease-expo) .15s both;
  text-wrap: balance;
}
.hero-sub {
  opacity: .9;
  margin: 9px 0 0;
  font-size: .93rem;
  font-weight: 500;
  animation: slideDown .55s var(--ease-expo) .22s both;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  font-size: .83rem;
  animation: slideDown .55s var(--ease-expo) .28s both;
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .15s, transform .15s var(--ease-spring);
}
.hero-meta span:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.hero-shirt-note {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.12);
  border: 1.5px dashed rgba(255,255,255,.45);
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: .88rem;
  animation: slideDown .55s var(--ease-expo) .34s both;
  transition: background .15s;
}
.hero-shirt-note:hover { background: rgba(255,255,255,.18); }

/* Countdown timer in hero */
.hero-countdown {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  animation: slideDown .55s var(--ease-expo) .36s both;
}
.hero-countdown-label {
  font-size: .78rem;
  font-weight: 700;
  opacity: .8;
  letter-spacing: .03em;
}
.hero-countdown-units {
  display: flex;
  gap: 6px;
}
.hero-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  min-width: 44px;
}
.hero-cd-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-cd-lbl {
  font-size: .6rem;
  font-weight: 600;
  opacity: .75;
  margin-top: 2px;
  letter-spacing: .03em;
}

@media (max-width:768px) {
  .hero-title { font-size: clamp(1.5rem, 5vw, 1.9rem); }
  .hero-banner { padding: 28px 26px; }
  .hero-banner::after { font-size: 6.5rem; right: 16px; bottom: -32px; }
}
@media (max-width:480px) {
  .hero-banner { padding: 22px 20px; }
  .hero-cd-num { font-size: 1.1rem; }
  .hero-cd-unit { min-width: 38px; padding: 5px 8px; }
}

/* ==========================================================================
   Section header (เลือกโต๊ะ)
   ========================================================================== */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.section-title {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.02em;
}
.section-subtitle {
  color: var(--ink-muted);
  font-size: .83rem;
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ==========================================================================
   Legend
   ========================================================================== */
.legend-wrap {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  transition: background .4s, border-color .4s;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .81rem;
  font-weight: 600;
  color: var(--ink);
  padding: 5px 12px 5px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1.5px solid var(--border);
  transition: transform .15s var(--ease-spring), box-shadow .15s;
  white-space: nowrap;
  cursor: default;
  box-shadow: var(--shadow-xs);
}
.legend-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); color: var(--ink); }
.legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.14);
}

/* ==========================================================================
   Venue Map
   ========================================================================== */
.venue-wrap {
  overflow-x: auto;
  padding: 0 4px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.venue-inner { width: fit-content; min-width: min-content; margin: 0 auto; }

.venue-stage-bar {
  background:
    radial-gradient(ellipse 140% 200% at 50% -30%, rgba(255,210,80,.28), transparent 55%),
    linear-gradient(135deg, hsl(24,80%,28%), hsl(22,85%,38%));
  color: #fff;
  text-align: center;
  letter-spacing: .36em;
  font-weight: 800;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  margin-bottom: 40px;
  text-indent: .36em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .9rem;
  box-shadow:
    0 8px 28px rgba(200,90,20,.38),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 0 rgba(0,0,0,.18);
  width: 100%;
  position: relative;
  border: 1px solid rgba(255,180,60,.25);
}
.venue-stage-bar::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  bottom: -16px;
  height: 16px;
  background: radial-gradient(60% 100% at 50% 0, rgba(180,80,10,.22), transparent 72%);
}
.venue-stage-icon {
  font-size: 1rem;
  opacity: .7;
}
.venue-row { display: flex; align-items: center; gap: var(--seat-gap); margin-bottom: var(--seat-gap); }
.venue-row-label { width: 22px; flex: 0 0 22px; text-align: center; font-size: .72rem; font-weight: 700; color: var(--ink-faint); }
.venue-col-header { margin-bottom: 2px; }
.venue-col-num { width: var(--seat-sz); flex: 0 0 var(--seat-sz); text-align: center; font-size: .68rem; font-weight: 600; color: var(--ink-faint); }
/* Vertical aisle (between col 6 & 7) */
.venue-aisle-gap {
  width: 36px;
  flex: 0 0 36px;
  position: relative;
  align-self: stretch;
}
.venue-row .venue-aisle-gap::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-left: 1px dashed var(--border-strong);
  opacity: .55;
}
/* ลูกศรตรงกลางทางเดินแนวตั้ง (แถบ header เท่านั้น) */
.venue-col-header .venue-aisle-gap::after {
  content: '↕';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: .6rem;
  color: var(--ink-ghost);
  line-height: 1;
  background: var(--surface);
  padding: 1px 2px;
  border-radius: 3px;
}
.venue-empty-cell { width: var(--seat-sz); height: var(--seat-sz); flex: 0 0 var(--seat-sz); }
/* Horizontal aisle (between zone rows) */
.venue-aisle-row {
  display: flex;
  align-items: center;
  gap: var(--seat-gap);
  margin: 8px 0 4px;
}
.venue-aisle-row-inner {
  flex: 1;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  border-top: 2px dashed var(--border-strong);
  border-bottom: 2px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
}
.venue-aisle-row-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-faint);
  background: var(--surface);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  white-space: nowrap;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: var(--shadow-xs);
}

.venue-zone-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px;
  color: var(--ink-faint);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.venue-zone-divider::before,
.venue-zone-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.venue-zone-name {
  white-space: nowrap;
  padding: 3px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Seat Buttons
   ========================================================================== */
.seat {
  width: var(--seat-sz);
  height: var(--seat-sz);
  flex: 0 0 var(--seat-sz);
  border-radius: 50%;
  border: none;
  font-size: .52rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: relative;
  letter-spacing: -.02em;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.16);
  transition: transform .13s var(--ease-spring), box-shadow .18s, filter .13s;
}
.seat > span { position: relative; z-index: 1; }
.seat::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35) 0%, transparent 55%);
  pointer-events: none;
}
.seat:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
  filter: brightness(1.10);
  z-index: 2;
}
.seat:active:not(:disabled) { transform: scale(.90); }

.seat--available    { background: radial-gradient(circle at 35% 30%, hsl(142,68%,52%), hsl(142,72%,33%)); }
.seat--pending      { background: radial-gradient(circle at 35% 30%, hsl(38,96%,64%), hsl(38,96%,46%)); cursor: not-allowed; }
.seat--booked       { background: radial-gradient(circle at 35% 30%, hsl(0,78%,62%), hsl(0,78%,44%)); cursor: not-allowed; }
.seat--locked_other { background: radial-gradient(circle at 35% 30%, hsl(215,14%,72%), hsl(215,14%,56%)); cursor: not-allowed; }
.seat--locked_me {
  background: radial-gradient(circle at 35% 30%, var(--primary-lt), var(--primary));
  box-shadow: 0 0 0 3px rgba(220,95,20,.40), 0 6px 18px rgba(220,95,20,.44);
  animation: seatPulse .8s ease-in-out alternate infinite;
  z-index: 2;
}
.seat:disabled { opacity: .84; }

@keyframes seatPulse {
  from { box-shadow: 0 0 0 2px rgba(220,95,20,.26), 0 4px 10px rgba(220,95,20,.26); }
  to   { box-shadow: 0 0 0 6px rgba(220,95,20,.09), 0 10px 22px rgba(220,95,20,.52); }
}

@media (max-width:768px) {
  :root { --seat-sz:32px; --seat-gap:5px; }
  .venue-aisle-gap { width:16px; flex:0 0 16px; }
  .venue-row-label { width:18px; flex:0 0 18px; }
  .venue-col-num { width:32px; flex:0 0 32px; }
  .venue-stage-bar { font-size:.78rem; padding:13px 14px; letter-spacing:.28em; margin-bottom:28px; }
}
@media (max-width:480px) {
  :root { --seat-sz:26px; --seat-gap:4px; }
  .venue-aisle-gap { width:10px; flex:0 0 10px; }
  .seat { font-size:.42rem; }
}

/* ==========================================================================
   Cart Panel
   ========================================================================== */
.cart-sticky { position: sticky; top: calc(var(--topbar-h) + 16px); }
.cart-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: background .4s, border-color .4s, box-shadow .25s;
}
.cart-card:has(#btnCheckout:not(:disabled)) {
  border-color: rgba(220,95,20,.35);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(220,95,20,.12);
}
.cart-head {
  background: linear-gradient(135deg, var(--primary-dk) 0%, var(--primary) 62%, var(--primary-lt) 100%);
  color: #fff;
  padding: 16px 20px;
  font-weight: 800;
  font-size: .95rem;
  position: relative;
  overflow: hidden;
}
.cart-head::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, transparent 58%);
  pointer-events: none;
}
.cart-head-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-head .countdown { color: #fff; font-variant-numeric: tabular-nums; font-family: 'Outfit', monospace; }

/* Empty state */
.cart-empty {
  text-align: center;
  padding: 28px 16px 20px;
  color: var(--ink-faint);
}
.cart-empty-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
  opacity: .45;
  display: block;
}
.cart-empty-text {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Cart chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-faint);
  border: 1px solid rgba(220,95,20,.2);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  margin: 2px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary-dk);
  transition: background .13s, transform .13s var(--ease-spring), opacity .2s;
  animation: chipAppear .18s var(--ease-out) both;
}
.chip:hover { transform: scale(1.05); }
.chip button {
  border: none;
  background: none;
  color: var(--primary-dk);
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  font-size: .95rem;
  padding: 0 1px;
  opacity: .7;
  transition: opacity .12s;
}
.chip button:hover { opacity: 1; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 800; }

/* Cart summary rows */
.cart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: .88rem;
  color: var(--ink-muted);
}
.cart-row.total {
  border-top: 1.5px solid var(--border);
  margin-top: 8px;
  padding-top: 10px;
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
}
.cart-total-amount {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--primary);
  line-height: 1;
}

/* Map error / loading */
.map-error { text-align: center; padding: 60px 20px; color: var(--ink-muted); font-size: 1rem; }
.map-error .ui-icon { font-size: 2.5rem; color: var(--gold); }

/* ==========================================================================
   E-Ticket
   ========================================================================== */
.ticket {
  max-width: 520px;
  margin: 0 auto;
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.ticket-head {
  background: linear-gradient(125deg, var(--primary-dk), var(--primary-lt));
  color: #fff;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.ticket-head::before {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.ticket-head::after {
  content: '';
  position: absolute;
  left: -20px; bottom: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
}
.ticket-perf {
  border-top: 2px dashed var(--border);
  position: relative;
}
.ticket-perf::before,
.ticket-perf::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface-alt);
}
.ticket-perf::before { left: -10px; }
.ticket-perf::after  { right: -10px; }

/* ==========================================================================
   Admin Sidebar
   ========================================================================== */
.sidebar { background: linear-gradient(180deg, hsl(22,20%,10%), hsl(22,16%,7%)); min-height: 100vh; }
.sidebar a {
  color: hsl(30,12%,65%);
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  margin: 2px 10px;
  font-weight: 600;
  transition: background .14s, color .14s, transform .14s;
}
.sidebar a:hover { background: rgba(220,95,20,.16); color: #fff; transform: translateX(2px); }
.sidebar a.active {
  background: linear-gradient(135deg, var(--primary-dk), var(--primary-lt));
  color: #fff;
  box-shadow: 0 4px 14px rgba(220,95,20,.36);
}

/* ==========================================================================
   Stat Cards (Admin)
   ========================================================================== */
.stat-card {
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-spring), box-shadow .2s, background .4s, border-color .4s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}

/* ==========================================================================
   Mobile Cart Bar
   ========================================================================== */
.mobile-cart-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1020;
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -6px 28px rgba(0,0,0,.10);
}
@media (min-width: 992px) {
  .mobile-cart-bar { display: none !important; }
}
body { padding-bottom: 0; }
@media (max-width:991.98px) { body.has-mobile-bar { padding-bottom: 72px; } }

/* ==========================================================================
   Shirt Product Cards
   ========================================================================== */
.shirt-product-card {
  display: flex;
  gap: 16px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  height: 100%;
  transition: box-shadow .18s, border-color .18s, transform .18s var(--ease-spring);
}
.shirt-product-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-2px); }
.shirt-product-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--surface-tint);
  color: var(--primary);
  display: grid;
  place-content: center;
  font-size: 1.35rem;
}
.shirt-product-body { flex: 1; min-width: 0; }
.shirt-size-btn.active,.pick-size.active { background: var(--primary)!important; color: #fff!important; border-color: var(--primary)!important; }
.shirt-picker-item { background: var(--surface-alt); }
.shirt-picker .pick-size { font-size: .74rem; padding: 2px 8px; }
.qty-control { color: var(--ink); background: var(--surface-alt); }
.qty-control:hover { color: var(--primary-dk); background: var(--primary-faint); }

.shirt-page-intro {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 180px;
  overflow: hidden;
  padding: 32px 36px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.shirt-page-intro::after {
  content: '30';
  position: absolute;
  right: 28px;
  bottom: -24px;
  color: var(--primary-faint);
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.shirt-page-intro .hero-content { max-width: 70ch; }
.shirt-page-intro .hero-title { color: var(--ink); text-shadow: none; animation: none; }
.shirt-page-intro .hero-sub { color: var(--ink-muted); opacity: 1; animation: none; }
.shirt-intro-icon {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--primary-faint);
  color: var(--primary-dk);
}
.product-card {
  height: 100%;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.product-image-trigger {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: #fff;
  color: var(--primary-dk);
  cursor: zoom-in;
  text-decoration: none;
}
.product-image-trigger img {
  display: block;
  width: 100%;
  height: 250px;
  padding: 10px;
  object-fit: contain;
  background: #fff;
  transition: transform .2s var(--ease-out);
}
.product-image-action {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-top: 1px solid var(--border);
  background: var(--surface-tint);
  color: var(--primary-dk);
  font-size: .82rem;
  font-weight: 700;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.product-image-trigger:hover { color: var(--primary-dk); text-decoration: none; }
.product-image-trigger:hover img { transform: scale(1.015); }
.product-image-trigger:hover .product-image-action { background: var(--primary-faint); }
.product-image-trigger:focus-visible {
  outline: 3px solid rgba(200,77,13,.42);
  outline-offset: -3px;
}

.image-lightbox-shell {
  display: flex;
  width: min(100%, 1500px);
  max-height: calc(100vh - 16px);
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-raised, 0 4px 8px rgba(33,30,27,.18));
}
.image-lightbox-header {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-card);
}
.image-lightbox-header h2 { color: var(--ink); }
.image-lightbox-header .ui-btn-outline {
  border-color: var(--border);
  background: var(--surface-alt);
  color: var(--ink);
}
.image-lightbox-header .ui-modal-close { color: var(--ink-muted); }
.image-lightbox-stage {
  display: grid;
  min-height: 0;
  flex: 1;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  background: #181513;
  touch-action: pan-x pan-y pinch-zoom;
}
.image-lightbox-stage.is-zoomed {
  display: block;
  align-items: normal;
  justify-items: normal;
}
.image-lightbox-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 128px);
  cursor: zoom-in;
  user-select: none;
}
.image-lightbox-image.is-zoomed {
  max-width: none;
  max-height: none;
  margin: 0;
  cursor: zoom-out;
}
.image-lightbox-hint {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--ink-muted);
  font-size: .82rem;
}
@media (min-width: 640px) {
  .image-lightbox-shell { max-height: calc(100vh - 48px); }
  .image-lightbox-image { max-height: calc(100vh - 160px); }
}
[data-theme="dark"] .product-image-action { color: var(--primary-ultra); }
.product-card .btn-add-cart {
  min-height: 44px;
  padding-block: .5rem;
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  white-space: nowrap;
}
.product-card .btn-add-cart:hover {
  border-color: var(--primary-dk);
  background: var(--primary-dk);
  color: #fff;
}
.product-card .btn-add-cart:disabled {
  border-color: var(--border);
  background: var(--surface-alt);
  color: var(--ink-muted);
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.toast-item {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  font-size: .87rem;
  font-weight: 600;
  min-width: 240px;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: all;
  animation: toastIn .22s var(--ease-out) both;
  transition: opacity .22s, transform .22s;
}
.toast-item.toast-success { border-color: color-mix(in srgb, var(--seat-available) 45%, var(--border)); }
.toast-item.toast-error   { border-color: color-mix(in srgb, var(--seat-booked) 45%, var(--border)); }
.toast-item.toast-warning { border-color: color-mix(in srgb, var(--seat-pending) 50%, var(--border)); }
.toast-out { opacity: 0; transform: translateX(20px); }

/* ==========================================================================
   Modal
   ========================================================================== */
.ui-modal-panel {
  background: var(--surface-card);
  border-color: var(--border);
  border-radius: var(--radius-xl);
}
.ui-modal-header  { border-bottom-color: var(--border); }
.ui-modal-footer  { border-top-color: var(--border); }
[data-theme="dark"] .bg-tint       { background: var(--surface-tint)!important; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: hsl(22,20%,9%);
  color: hsl(30,10%,60%);
  border-top: 1px solid rgba(255,255,255,.04);
}
.site-footer .font-bold  { color: hsl(30,20%,88%); }
.site-footer a { color: var(--primary-lt); }
.site-footer a:hover { color: var(--primary-ultra); text-decoration: underline; text-underline-offset: 3px; }
.footer-logo-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--primary-dk), var(--primary-lt));
  display: grid;
  place-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: #fff;
  box-shadow: 0 4px 14px rgba(220,95,20,.38);
  flex-shrink: 0;
}
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.06);
  margin: 20px 0;
}
.footer-visitor-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: hsl(30,10%,62%);
  font-size: .82rem;
  line-height: 1.4;
}
.footer-visitor-count .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--primary-lt);
}
.footer-visitor-count strong {
  color: hsl(30,20%,92%);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Lookup / Search
   ========================================================================== */
.search-box-wrap {
  background: var(--surface-card);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
  transition: background .4s, border-color .4s;
}
.search-tabs .nav-link {
  color: var(--ink-muted);
  border-radius: var(--radius-pill)!important;
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: color .15s, background .15s, border-color .15s, transform .15s var(--ease-spring);
}
.search-tabs .nav-link.active,
.search-tabs .nav-link:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}
.search-tips {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
  transition: background .4s, border-color .4s;
}
.search-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-faint);
}
.search-tip-item:first-of-type { padding-top: 0; }
.search-tip-item:last-child { border-bottom: none; padding-bottom: 0; }
.search-tip-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--primary-faint);
  color: var(--primary);
  display: grid;
  place-content: center;
  font-size: 1rem;
  border: 1px solid rgba(220,95,20,.12);
}
.search-tip-text { font-size: .87rem; color: var(--ink-muted); line-height: 1.6; }
.search-tip-text strong { color: var(--ink); display: block; margin-bottom: 1px; }

/* ==========================================================================
   Success page
   ========================================================================== */
.success-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(140deg, hsl(142,68%,42%), hsl(142,72%,30%));
  display: grid;
  place-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(30,160,60,.28);
  animation: popIn .24s var(--ease-out) both;
}
.success-icon-wrap .ui-icon { color: #fff; font-size: 2.2rem; }
.booking-confirmation {
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.booking-code-panel {
  padding: 22px 26px;
  color: #fff;
  background: #6d3215;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes chipAppear {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes popIn {
  from { transform: scale(0) rotate(-16deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up    { animation: fadeInUp .5s var(--ease-expo) both; }
.animate-fade-up-d1 { animation-delay: .08s; }
.animate-fade-up-d2 { animation-delay: .16s; }
.animate-fade-up-d3 { animation-delay: .24s; }
.animate-fade-up-d4 { animation-delay: .32s; }

/* ==========================================================================
   Admin Mobile Sidebar
   ========================================================================== */
@media (max-width:767.98px) {
  .sidebar { position: fixed; left: -240px; top: 0; bottom: 0; z-index: 1040; transition: left .22s var(--ease-out); width: 230px!important; flex: 0 0 230px!important; }
  .sidebar.open { left: 0; }
  .admin-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; backdrop-filter: blur(3px); }
  .admin-overlay.show { display: block; }
  .admin-mobile-toggle { display: inline-flex!important; }
}
.admin-mobile-toggle { display: none; }

/* ==========================================================================
   Dark mode overrides
   ========================================================================== */
[data-theme="dark"] .legend-item { background: var(--surface-alt); border-color: var(--border); color: var(--ink-muted); }
[data-theme="dark"] .legend { color: var(--ink); }
[data-theme="dark"] .text-gray-500 { color: var(--ink-muted)!important; }
[data-theme="dark"] .ui-modal-body { color: var(--ink); }
[data-theme="dark"] .border-t, [data-theme="dark"] .border-b, [data-theme="dark"] hr { border-color: var(--border)!important; }
[data-theme="dark"] table { color: var(--ink); }
[data-theme="dark"] th { color: var(--ink-muted); }
[data-theme="dark"] .venue-zone-name { background: var(--surface-tint); }
[data-theme="dark"] .venue-wrap { scrollbar-color: var(--border-strong) transparent; }
[data-theme="dark"] .search-box-wrap { background: var(--surface-card); }
[data-theme="dark"] .search-tip-icon { background: var(--surface-tint); }

/* ==========================================================================
   Checkin page
   ========================================================================== */
.checkin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .9rem;
}
.checkin-status-ok { background: hsl(142,72%,14%); color: hsl(142,72%,60%); border: 1.5px solid hsl(142,60%,28%); }
.checkin-status-warn { background: hsl(38,80%,14%); color: hsl(38,90%,66%); border: 1.5px solid hsl(38,70%,30%); }

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .topbar, .site-footer, .ui-btn, nav, .search-box-wrap, .cart-sticky, .mobile-cart-bar { display:none!important; }
  .ticket { box-shadow:none!important; border:1px solid #ccc!important; }
  body { background: #fff!important; }
}

/* ==========================================================================
   Trustworthy product polish v4
   ========================================================================== */

/* Public navigation */
.topbar {
  height: var(--topbar-h);
  background: rgba(255,255,255,.98);
  color: var(--ink);
  border-top: 4px solid var(--primary);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.topbar.is-scrolled {
  height: 64px;
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}
.brand-lockup { color: var(--ink); }
.brand-emblem {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  box-shadow: none;
  transition: background-color .18s var(--ease-out);
}
.brand-lockup:hover { color: var(--ink); }
.brand-lockup:hover .brand-emblem { transform: none; background: var(--primary-dk); }
.brand-text .t1 { font-size: 1.05rem; color: var(--ink); }
.brand-text .t2 { color: var(--ink-muted); font-size: .74rem; }
.nav-actions { gap: 4px; }
.btn-nav,
.btn-nav-ghost {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.btn-nav:hover,
.btn-nav-ghost:hover {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.btn-nav-active {
  color: var(--primary-dk);
  background: var(--primary-faint);
  border-color: #f2c7af;
  box-shadow: none;
}
.btn-nav-secondary,
.btn-nav-ghost { font-weight: 600; }
.btn-dark-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-muted);
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.btn-dark-toggle:hover { background: var(--surface-alt); color: var(--ink); transform: none; }

/* Campaign imagery stays prominent while controls remain product-like. */
.hero-carousel,
.secondary-carousel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.hero-image {
  width: 100%;
  max-height: 420px;
  aspect-ratio: 16 / 5;
  object-fit: cover;
}
.carousel-control {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.carousel-control:hover { background: #fff; }

.event-facts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 4px;
  gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.event-fact {
  display: flex;
  align-items: center;
  min-width: 170px;
  gap: 10px;
  padding: 10px 14px;
  color: var(--ink);
  border-right: 1px solid var(--border-faint);
}
.event-fact:last-child { border-right: 0; }
.event-fact > .ui-icon {
  display: grid;
  place-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--primary-dk);
  background: var(--primary-faint);
}
.event-fact > span { display: flex; flex-direction: column; min-width: 0; }
.event-fact small { color: var(--ink-muted); font-size: .72rem; line-height: 1.2; }
.event-fact strong { font-size: .86rem; line-height: 1.5; }
.event-fact-promo > .ui-icon { color: #7a4b00; background: #fff6d8; }
.event-fact-link { margin-left: auto; }
.event-fact-link:hover { color: var(--primary-dk); background: var(--primary-faint); }

/* A single ordered sequence makes the booking model visible before selection. */
.booking-guide {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 24px 0 30px;
  padding: 18px 20px;
  border-block: 1px solid var(--border);
}
.booking-guide-intro { flex: 0 0 230px; }
.booking-guide h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.booking-guide p { margin: 4px 0 0; font-size: .78rem; line-height: 1.55; color: var(--ink-muted); }
.booking-steps {
  display: flex;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.booking-steps li {
  display: flex;
  align-items: flex-start;
  flex: 1;
  gap: 9px;
  min-width: 0;
  padding: 2px 16px;
  border-right: 1px solid var(--border-faint);
}
.booking-steps li:last-child { border-right: 0; }
.booking-steps li > span:last-child { display: flex; flex-direction: column; }
.step-number {
  display: grid;
  place-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
}
.booking-steps strong { font-size: .86rem; color: var(--ink); }
.booking-steps small { margin-top: 2px; color: var(--ink-muted); font-size: .74rem; line-height: 1.5; }

/* Selection area */
.section-header { margin-bottom: 10px; }
.section-title { font-size: 1.35rem; letter-spacing: 0; }
.section-subtitle { font-size: .86rem; }
.legend-wrap {
  padding: 10px 0 14px;
  margin-bottom: 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.legend { gap: 8px 18px; }
.legend-item {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-muted);
  font-weight: 600;
}
.legend-item:hover { transform: none; box-shadow: none; border-color: transparent; color: var(--ink); }
.legend-dot { width: 13px; height: 13px; border-radius: 4px; box-shadow: none; }
.venue-panel {
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.map-scroll-hint {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: .78rem;
}
.venue-wrap { overscroll-behavior-x: contain; }
.venue-stage-bar {
  margin-bottom: 30px;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #6d3215;
  box-shadow: none;
  letter-spacing: .28em;
}
.venue-stage-bar::after { display: none; }
.venue-aisle-row-inner { opacity: 1; }
.venue-zone-divider { text-transform: none; letter-spacing: 0; }
.venue-zone-name { background: var(--surface); border-radius: var(--radius-xs); }
.seat {
  border-radius: 10px;
  font-size: .62rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), filter .16s var(--ease-out);
}
.seat::before { display: none; }
.seat:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,.20);
  filter: brightness(.96);
}
.seat:active:not(:disabled) { transform: translateY(0); }
.seat--available { background: var(--seat-available); }
.seat--pending { background: #a86600; cursor: pointer; }
.seat--booked { background: var(--seat-booked); cursor: pointer; }
.seat--locked_other { background: #77818d; }
.seat--locked_me {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(200,77,13,.24), 0 2px 4px rgba(0,0,0,.16);
  animation: none;
}
.seat:disabled { opacity: .72; }

.cart-card {
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.cart-card:has(#btnCheckout:not(:disabled)) { border-color: #e7a883; box-shadow: none; }
.cart-head { padding: 14px 16px; background: #6d3215; font-size: .9rem; }
.cart-head::after { display: none; }
.cart-total-amount,
.stat-num,
.adm-stat-num,
.hero-cd-num { font-family: 'Noto Sans Thai', system-ui, sans-serif; }
.cart-empty { padding: 24px 12px 18px; }
.chip { border-radius: 8px; animation: none; }
.chip:hover { transform: none; }

.map-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 56px 20px;
  color: var(--ink-muted);
}
.map-loading-icon {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--primary-faint);
  color: var(--primary);
}
.map-loading strong { color: var(--ink); font-size: .92rem; }
.map-loading > span:last-child { font-size: .78rem; }

/* Fixed checkout action only appears after a table is selected. */
.mobile-cart-bar {
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--surface-card);
  backdrop-filter: none;
  box-shadow: 0 -2px 8px rgba(33,30,27,.10);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
.mobile-cart-bar.is-active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-cart-label { color: var(--ink-muted); font-size: .75rem; }
.mobile-cart-bar .ui-btn { min-width: 132px; }

/* Forms and dialogs */
input:not([type='checkbox']):not([type='radio']),
select,
textarea,
.form-control,
.form-select {
  min-height: 44px;
  border-radius: 9px !important;
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
input::placeholder,
textarea::placeholder { color: var(--ink-faint) !important; opacity: 1; }
.modal-container form { background: var(--surface-card); backdrop-filter: none; border-radius: var(--radius-lg); }
.modal-container .modal-backdrop { backdrop-filter: none; }
.toast-item { border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.payment-note { color: #6d2d0c; }

/* Public booking detail: intentionally limited to table number and reserver name. */
.table-booking-dialog { max-width: 420px; }
.table-booking-panel {
  background: var(--surface-card);
  border-color: var(--border);
}
.table-booking-panel .ui-modal-header {
  background: var(--surface-alt);
  border-color: var(--border);
}
.table-booking-panel .ui-modal-title { color: var(--ink); }
.table-booking-panel .ui-modal-close { color: var(--ink-muted); }
.table-booking-details { margin: 0; }
.table-booking-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.table-booking-row:first-child { padding-top: 0; }
.table-booking-row:last-child { padding-bottom: 0; border-bottom: 0; }
.table-booking-row dt {
  color: var(--ink-muted);
  font-size: .84rem;
  font-weight: 700;
}
.table-booking-row dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* Footer */
.site-footer { background: #211c18; color: #c8c0ba; }
.footer-logo-circle { border-radius: var(--radius-sm); background: var(--primary); box-shadow: none; }

/* Page-load choreography is unnecessary in a task-oriented interface. */
.animate-fade-up,
.animate-fade-up-d1,
.animate-fade-up-d2,
.animate-fade-up-d3,
.animate-fade-up-d4 { animation: none; }

@media (max-width: 900px) {
  .booking-guide { align-items: flex-start; flex-direction: column; gap: 14px; }
  .booking-guide-intro { flex-basis: auto; }
  .booking-steps { width: 100%; }
  .booking-cart-sticky { display: none; }
}

@media (max-width: 640px) {
  :root { --topbar-h: auto; --seat-sz: 44px; --seat-gap: 5px; }
  .topbar,
  .topbar.is-scrolled { height: auto; }
  .topbar-inner { flex-wrap: wrap; gap: 6px; padding-block: 8px; }
  .brand-lockup { width: 100%; }
  .brand-emblem { width: 38px; height: 38px; }
  .brand-text .t1 { font-size: .96rem; }
  .brand-text .t2 { display: block; font-size: .67rem; }
  .nav-actions {
    width: 100%;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid var(--border-faint);
  }
  .btn-nav,
  .btn-nav-ghost { min-height: 38px; padding: 7px 9px; font-size: .76rem; }
  .btn-nav .lbl { display: inline; }
  .btn-nav-ghost .lbl { display: none; }
  .btn-dark-toggle { width: 38px; height: 38px; }
  .hero-image { aspect-ratio: 16 / 5.6; min-height: 0; }
  .carousel-control { width: 40px; height: 40px; }
  .event-facts { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .event-fact { min-width: 0; padding: 10px; border-right: 0; border-bottom: 1px solid var(--border-faint); }
  .event-fact:nth-child(odd) { border-right: 1px solid var(--border-faint); }
  .event-fact:nth-last-child(-n+2) { border-bottom: 0; }
  .event-fact-link { margin-left: 0; }
  .event-fact > .ui-icon { flex-basis: 30px; width: 30px; height: 30px; }
  .event-fact small { font-size: .68rem; }
  .event-fact strong { font-size: .77rem; }
  .booking-guide { margin: 18px 0 24px; padding: 16px 0; }
  .booking-steps { flex-direction: column; gap: 12px; }
  .booking-steps li { padding: 0; border-right: 0; }
  .booking-steps small { font-size: .76rem; }
  .section-title { font-size: 1.2rem; }
  .section-subtitle { font-size: .8rem; }
  .legend { gap: 9px 14px; }
  .legend-item { font-size: .76rem; }
  .map-scroll-hint { display: flex; }
  .venue-panel > .p-3 { padding: 12px; }
  .venue-aisle-gap { width: 18px; flex-basis: 18px; }
  .venue-row-label { width: 22px; flex-basis: 22px; }
  .venue-col-num { width: var(--seat-sz); flex-basis: var(--seat-sz); }
  .venue-stage-bar { margin-bottom: 24px; }
  .cart-card { margin-top: 4px; }
  .toast-container { right: 12px; left: 12px; bottom: 88px; align-items: stretch; }
  .toast-item { min-width: 0; max-width: none; }
  .shirt-page-intro { min-height: 0; padding: 24px 20px; }
  .shirt-page-intro::after { right: 12px; font-size: 5.5rem; }
}

[data-theme="dark"] .topbar,
[data-theme="dark"] .topbar.is-scrolled { background: #191715; border-bottom-color: var(--border); }
[data-theme="dark"] .brand-text .t1 { color: var(--ink); }
[data-theme="dark"] .hero-carousel,
[data-theme="dark"] .secondary-carousel,
[data-theme="dark"] .event-facts,
[data-theme="dark"] .venue-panel { background: var(--surface-card); }
[data-theme="dark"] .event-fact > .ui-icon { color: var(--primary-lt); background: var(--primary-faint); }
[data-theme="dark"] .btn-nav-active { border-color: #74401f; }

/* Shirt checkout: keep every modal section within the same dark-theme surface system. */
[data-theme="dark"] #shirtPayForm .bg-orange-50 { background-color: var(--surface-tint) !important; }
[data-theme="dark"] #shirtPayForm .bg-gray-50   { background-color: var(--surface-alt) !important; }
[data-theme="dark"] #shirtPayForm .bg-white     { background-color: var(--surface) !important; }
[data-theme="dark"] #shirtPayForm .border-orange-100,
[data-theme="dark"] #shirtPayForm .border-gray-200,
[data-theme="dark"] #shirtPayForm .border-gray-300 { border-color: var(--border) !important; }
[data-theme="dark"] #shirtPayForm .text-gray-700 { color: var(--ink) !important; }
[data-theme="dark"] #shirtPayForm .text-gray-600,
[data-theme="dark"] #shirtPayForm .text-gray-500 { color: var(--ink-muted) !important; }
[data-theme="dark"] #shirtPayForm .text-orange-800 { color: var(--primary-ultra) !important; }
[data-theme="dark"] #shirtPayForm .text-orange-600 { color: var(--primary-lt) !important; }
[data-theme="dark"] #shirtPayForm .hover\:bg-gray-50:hover { background-color: var(--surface-alt) !important; }
[data-theme="dark"] #shirtPayForm .payment-note { color: var(--ink) !important; }