/* Doomsday theme for the customer page: gunmetal armor, emerald energy, antique-gold trim.
   Loaded after styles.css and activated by <html class="theme-doomsday">. The admin page also
   puts the class on its seat-map panel so both maps look identical. */

.theme-doomsday {
  --bg: #030604;
  --bg-2: #07100b;
  --surface: rgba(12, 19, 15, 0.78);
  --surface-solid: #0b120e;
  --surface-hi: rgba(255, 255, 255, 0.035);
  --text: #e9efea;
  --muted: #8d9b92;

  --cyan: #39ff8a; /* main accent: emerald energy */
  --violet: #0f7a3f; /* deep forest green */
  --magenta: #e0b64a; /* antique gold trim */
  --gold: #e0b64a;
  --steel: #c9d2cd;
  --cyan-rgb: 57, 255, 138;
  --violet-rgb: 15, 122, 63;
  --magenta-rgb: 224, 182, 74;
  --line-rgb: 120, 170, 140;

  /* Re-derived here (not just inherited) so the theme also works on a single panel. */
  --border: rgba(var(--line-rgb), 0.16);
  --border-hi: rgba(var(--line-rgb), 0.32);
  --seat-available: rgba(var(--cyan-rgb), 0.12);
  --seat-available-border: rgba(var(--cyan-rgb), 0.55);
  --seat-reserved: rgba(var(--amber-rgb), 0.22);
  --seat-reserved-border: rgba(var(--amber-rgb), 0.75);
  --seat-reserved-text: #ffe2a8;
  --amber: #ffb938;
  --amber-rgb: 255, 185, 56;
  --seat-available-text: #c9ffdd;
  --seat-paid: rgba(74, 82, 77, 0.38);
  --seat-paid-border: rgba(130, 142, 135, 0.42);
  --seat-paid-text: rgba(196, 206, 200, 0.6);
  --seat-selected: linear-gradient(170deg, #ffffff 0%, #e6f2eb 55%, #b9cfc2 100%);
  --aisle-text: var(--gold);

  --primary: linear-gradient(135deg, #5dffa0, #0f7a3f);
  --radius: 10px;
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-ui: 'Rajdhani', 'Space Grotesk', system-ui, sans-serif;
}

/* ---------- Atmosphere ---------- */
.theme-doomsday body {
  background:
    radial-gradient(1000px 520px at 50% -12%, rgba(57, 255, 138, 0.16), transparent 62%),
    radial-gradient(700px 500px at 0% 30%, rgba(15, 122, 63, 0.18), transparent 65%),
    radial-gradient(700px 500px at 100% 70%, rgba(15, 122, 63, 0.14), transparent 65%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.7) 100%),
    var(--bg);
  background-attachment: fixed;
}
/* Swap the sci-fi grid for a faint hex-plate texture */
.theme-doomsday body::before {
  background-image:
    linear-gradient(30deg, rgba(var(--line-rgb), 0.045) 12%, transparent 12.5%, transparent 87%, rgba(var(--line-rgb), 0.045) 87.5%),
    linear-gradient(150deg, rgba(var(--line-rgb), 0.045) 12%, transparent 12.5%, transparent 87%, rgba(var(--line-rgb), 0.045) 87.5%),
    linear-gradient(90deg, rgba(var(--line-rgb), 0.03) 2%, transparent 2.5%, transparent 97%, rgba(var(--line-rgb), 0.03) 97.5%);
  background-size: 56px 98px;
  mask-image: radial-gradient(ellipse at 50% 10%, #000 15%, transparent 70%);
}

/* Slowly turning energy ring behind the header */
.doom-ring {
  position: fixed;
  top: -340px;
  left: 50%;
  width: 760px;
  height: 760px;
  margin-left: -380px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.13;
  background: repeating-conic-gradient(from 0deg, rgba(57, 255, 138, 0.9) 0deg 0.7deg, transparent 0.7deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64%, transparent 65%, transparent 70%, #000 71%, #000 71.6%, transparent 72%);
  mask: radial-gradient(circle, transparent 61%, #000 62%, #000 64%, transparent 65%, transparent 70%, #000 71%, #000 71.6%, transparent 72%);
  animation: doom-spin 140s linear infinite;
  filter: drop-shadow(0 0 8px rgba(57, 255, 138, 0.8));
}
@keyframes doom-spin {
  to { transform: rotate(360deg); }
}

/* Drifting green embers */
.embers,
.embers::before,
.embers::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.embers::before,
.embers::after {
  content: '';
  background-image:
    radial-gradient(1.6px 1.6px at 12% 82%, rgba(120, 255, 170, 0.9), transparent),
    radial-gradient(1.2px 1.2px at 27% 64%, rgba(120, 255, 170, 0.7), transparent),
    radial-gradient(2px 2px at 41% 91%, rgba(57, 255, 138, 0.8), transparent),
    radial-gradient(1.3px 1.3px at 58% 72%, rgba(200, 255, 220, 0.7), transparent),
    radial-gradient(1.8px 1.8px at 73% 88%, rgba(57, 255, 138, 0.8), transparent),
    radial-gradient(1.2px 1.2px at 86% 60%, rgba(120, 255, 170, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 94% 79%, rgba(224, 182, 74, 0.7), transparent),
    radial-gradient(1.4px 1.4px at 6% 55%, rgba(224, 182, 74, 0.6), transparent);
  background-size: 100% 100%;
  animation: ember-rise 22s linear infinite;
  opacity: 0.8;
}
.embers::after {
  background-size: 60% 70%;
  animation-duration: 34s;
  animation-delay: -12s;
  opacity: 0.55;
}
@keyframes ember-rise {
  0% { transform: translateY(20vh); opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.6; }
  100% { transform: translateY(-90vh); opacity: 0; }
}

/* ---------- Header ---------- */
.theme-doomsday .eyebrow { color: var(--gold); letter-spacing: 0.34em; }
.theme-doomsday .eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--gold));
  box-shadow: 0 0 10px rgba(224, 182, 74, 0.7);
}
.theme-doomsday header.site h1 {
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6e2 38%, #7f8c85 52%, #c7d1cb 70%, #f2f6f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(57, 255, 138, 0.35)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6));
}
.tagline {
  display: none;
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(57, 255, 138, 0.6);
}
.theme-doomsday .tagline { display: block; }
.theme-doomsday header.site p#event-subtitle {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---------- Armor-plate panels ---------- */
.theme-doomsday .card {
  background:
    linear-gradient(165deg, rgba(26, 36, 31, 0.9), rgba(8, 12, 10, 0.94) 55%, rgba(12, 18, 15, 0.94)),
    var(--surface-solid);
  border: 1px solid rgba(var(--line-rgb), 0.22);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.theme-doomsday .card::before {
  background: linear-gradient(90deg, transparent, rgba(224, 182, 74, 0.8), var(--cyan), rgba(224, 182, 74, 0.8), transparent);
}
/* Gold corner brackets */
.theme-doomsday .card::after {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  --c: rgba(224, 182, 74, 0.65);
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 1.5px,
    linear-gradient(var(--c), var(--c)) top left / 1.5px 16px,
    linear-gradient(var(--c), var(--c)) top right / 16px 1.5px,
    linear-gradient(var(--c), var(--c)) top right / 1.5px 16px,
    linear-gradient(var(--c), var(--c)) bottom left / 16px 1.5px,
    linear-gradient(var(--c), var(--c)) bottom left / 1.5px 16px,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 1.5px,
    linear-gradient(var(--c), var(--c)) bottom right / 1.5px 16px;
  background-repeat: no-repeat;
}

.theme-doomsday .panel h2,
.theme-doomsday .card h2 { font-weight: 700; letter-spacing: 0.18em; color: var(--steel); }
.theme-doomsday label,
.theme-doomsday .legend,
.theme-doomsday .hint,
.theme-doomsday input,
.theme-doomsday textarea { font-family: var(--font-ui); }
.theme-doomsday label { font-size: 0.78rem; font-weight: 600; }
.theme-doomsday input,
.theme-doomsday select,
.theme-doomsday textarea { font-family: var(--font-ui); font-size: 1.02rem; font-weight: 500; background-color: rgba(0, 0, 0, 0.45); }
.theme-doomsday .legend { font-size: 0.95rem; font-weight: 500; }

/* ---------- Screen ---------- */
.theme-doomsday .screen {
  color: rgba(201, 255, 221, 0.9);
  letter-spacing: 0.55em;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(57, 255, 138, 0.9);
}

/* ---------- Seats ---------- */
.theme-doomsday .seat {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: calc(var(--cell) * 0.4);
}
.theme-doomsday .seat.is-selected {
  border-color: #ffffff !important;
  color: #04140a !important;
  box-shadow:
    0 0 0 1px rgba(57, 255, 138, 0.9),
    0 0 16px rgba(57, 255, 138, 0.9),
    0 0 34px rgba(57, 255, 138, 0.45) !important;
}
/* Reserved seats also get a dashed edge so they're distinguishable without color */
.theme-doomsday .seat[data-status='reserved'] { border-style: dashed; border-width: 1.5px; }
.theme-doomsday .swatch.reserved { border-style: dashed; border-width: 1.5px; }
.theme-doomsday .seat[data-status='paid']::after { background: rgba(196, 206, 200, 0.45); }
.theme-doomsday .seatmap .aisle {
  font-family: var(--font-display);
  font-weight: 900;
  text-shadow: 0 0 10px rgba(224, 182, 74, 0.55);
}
.theme-doomsday .swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 8px rgba(57, 255, 138, 0.9);
}

/* ---------- Side panel ---------- */
.theme-doomsday .chip {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: #04140a;
  background: linear-gradient(170deg, #ffffff, #cfe2d7);
  border-color: rgba(57, 255, 138, 0.8);
  box-shadow: 0 0 10px rgba(57, 255, 138, 0.45);
}
.theme-doomsday .chip.muted {
  color: var(--muted);
  background: var(--surface-hi);
  border-color: var(--border);
  box-shadow: none;
}
.theme-doomsday .total,
.theme-doomsday .pay-amount { color: var(--cyan); }
.theme-doomsday .pay-box {
  background: rgba(57, 255, 138, 0.04);
  border-color: rgba(224, 182, 74, 0.4);
}
.theme-doomsday .pay-title { color: var(--gold); }
.theme-doomsday .ref-banner {
  background: linear-gradient(90deg, rgba(224, 182, 74, 0.16), rgba(57, 255, 138, 0.05));
  border-color: rgba(224, 182, 74, 0.45);
}
.theme-doomsday .ref-banner::before { color: var(--gold); text-shadow: 0 0 10px var(--gold); }

.theme-doomsday .btn {
  font-weight: 700;
  color: #021108;
  border-radius: 6px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.theme-doomsday .btn.secondary { color: var(--text); }

.theme-doomsday .notice.success {
  background: linear-gradient(160deg, rgba(57, 255, 138, 0.08), rgba(224, 182, 74, 0.06));
  border-color: rgba(57, 255, 138, 0.4);
}
.theme-doomsday .notice .code { text-shadow: 0 0 16px rgba(57, 255, 138, 0.9), 0 0 32px rgba(224, 182, 74, 0.4); }
.theme-doomsday .stat b { font-family: var(--font-display); font-weight: 900; }

@media (max-width: 640px) {
  .doom-ring { width: 520px; height: 520px; margin-left: -260px; top: -260px; }
  .tagline { font-size: 0.72rem; letter-spacing: 0.14em; }
}
.theme-doomsday .combo-list { font-family: var(--font-ui); border-color: rgba(var(--line-rgb), 0.3); }
.theme-doomsday .combo-option { font-size: 1.02rem; font-weight: 500; }