/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --bg:          #0a0f1e;
  --bg2:         #0d1527;
  --surface:     #111d35;
  --surface2:    #162040;
  --border:      #1e2d4a;
  --border2:     #253860;

  --blue:        #1d4ed8;   /* club primary */
  --blue-dark:   #1e3a8a;
  --blue-deeper: #172554;
  --blue-hover:  #2563eb;

  --gold:        #facc15;   /* club accent */
  --gold-dark:   #ca8a04;
  --gold-glow:   rgba(250,204,21,.35);
  /* Text + trim accent. Defaults to --gold so existing clubs are unchanged;
     set it separately for a club whose accent is not its selection colour. */
  --accent:      #facc15;

  --sold-bg:     #1f2937;
  --sold-text:   #6b7280;
  --sold-border: #374151;

  --text:        #f1f5f9;
  --muted:       #94a3b8;
  --success:     #22c55e;
  --danger:      #ef4444;
  --warning:     #f59e0b;

  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   18px;

  /* Theme-overridable computed values — set by applyConfig() in JS */
  --bg-glow:           rgba(29,78,216,.25);
  --bg-glow-light:     rgba(29,78,216,.2);
  --primary-shadow:    rgba(29,78,216,.4);
  --available-hover-bg: #e8f0ff;
  --btn-primary-hover: #fde047;
}

/* ── Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% -10%, var(--bg-glow) 0%, transparent 70%);
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  max-width: 1600px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.header-titles { line-height: 1.25; }
.header-club {
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.header-event {
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
}
.header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.badge-price {
  background: var(--gold);
  color: var(--bg);
  font-weight: 800;
  font-size: 15px;
  padding: 6px 14px;
  border-radius: 999px;
}
.badge-count {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}
.badge-count span { color: var(--text); font-weight: 700; }

/* ── Main two-column layout ────────────────────────────────────────────── */
.main-layout {
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  align-items: flex-start;
}

/* ── Prize panel ───────────────────────────────────────────────────────── */
.prize-panel {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: 80px;
}
.prize-panel-header {
  background: var(--blue-deeper);
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.prize-panel-header h2 {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.prize-list { padding: 14px 16px; }
.prize-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
}
.prize-row:last-child { border-bottom: none; }
.prize-place {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.prize-amount {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
}
.prize-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--blue-deeper);
  border-top: 1px solid var(--border);
}
.prize-total-label { font-size: 13px; font-weight: 700; color: var(--text); }
.prize-total-amount { font-size: 17px; font-weight: 900; color: var(--accent); }
.prize-ticket-info {
  padding: 12px 16px;
  display: grid;
  gap: 8px;
  border-top: 1px dashed var(--border);
}
.prize-info-pill {
  display: flex;
  justify-content: space-between;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
}
.prize-info-pill span:first-child { color: var(--muted); }
.prize-info-pill span:last-child  { color: var(--accent); font-weight: 700; }
.prize-draw-date {
  padding: 10px 16px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.prize-draw-date strong { color: var(--text); display: block; }

/* ── Grid panel ────────────────────────────────────────────────────────── */
.grid-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Legend */
.legend {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.legend-dot {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex-shrink: 0;
}
.legend-dot.available {
  background: #ffffff;
  border: 1.5px solid var(--blue);
}
.legend-dot.selected {
  background: var(--gold);
  border: 1px solid var(--gold-dark);
}
.legend-dot.sold {
  background: var(--sold-bg);
  border: 1px solid var(--sold-border);
}
.legend-dot.reserved {
  background: var(--surface2);
  border: 2px solid var(--warning);
}

/* Grid
   Columns come from how much room a square needs, not from the ticket count.
   Deriving them from the count (total/10) collapsed the cells on a large
   board: a 300-square draw produced 30 columns of roughly 48px, far too
   narrow to read a buyer's name. auto-fill keeps every cell at least
   --sq-min wide and adds rows instead, and it adapts to narrow viewports
   without needing a breakpoint per board size. */
.ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sq-min, 94px), 1fr));
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.sq {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 4px 4px;
  /* Slightly wider than tall: names read better across than down, and it
     keeps a 300-square board from becoming an extremely long page. */
  aspect-ratio: 1.25;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  border: 1.5px solid transparent;
  transition: transform 100ms ease, box-shadow 100ms ease, background 150ms ease, border-color 150ms ease;
  will-change: transform;
  /* entrance animation */
  opacity: 0;
  animation: sq-in 250ms ease-out forwards;
}
@keyframes sq-in {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Available */
.sq[data-state="available"] {
  background: #ffffff;
  border-color: var(--blue);
  color: #000000;
}
.sq[data-state="available"]:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 18px var(--primary-shadow);
  background: var(--available-hover-bg);
  border-color: var(--blue-hover);
}
.sq[data-state="available"]:active {
  transform: scale(.96);
}

/* Selected */
.sq[data-state="selected"] {
  background: var(--gold);
  border-color: var(--gold-dark);
  color: #0a0f1e;
  box-shadow: 0 0 0 3px var(--gold-glow), 0 4px 14px rgba(250,204,21,.3);
}
.sq[data-state="selected"]:hover {
  transform: translateY(-2px) scale(1.06);
}

/* Sold */
.sq[data-state="sold"] {
  background: var(--sold-bg);
  border-color: var(--sold-border);
  color: var(--sold-text);
  cursor: not-allowed;
}
.sq[data-state="sold"]:hover { transform: none; }
.sq[data-state="sold"] .sq-name { color: var(--sold-text); }

/* Reserved */
.sq[data-state="reserved"] {
  background: var(--surface2);
  border-color: var(--warning);
  color: var(--warning);
  cursor: not-allowed;
}
.sq[data-state="reserved"]:hover { transform: none; }
.sq[data-state="reserved"] .sq-name { color: var(--warning); }

/* ── Selection bar ─────────────────────────────────────────────────────── */
.selection-bar {
  display: none;
  background: var(--blue-deeper);
  border: 1px solid var(--blue-dark);
  border-radius: var(--radius);
  padding: 14px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  animation: bar-in 180ms ease-out both;
  /* Sticks near the top of the viewport once visible, so it stays in view
     while scrolling through a long grid instead of disappearing above the
     fold — the main fix for buyers losing track of how to pay. */
  position: sticky;
  top: 10px;
  z-index: 45;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.selection-bar.visible { display: flex; }
@keyframes bar-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.selection-info { display: flex; flex-direction: column; gap: 2px; }
.selection-info-count { font-size: 13px; color: var(--muted); }
.selection-info-total { font-size: 20px; font-weight: 800; color: var(--accent); }
.selection-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.selection-pill {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  color: var(--text);
}
.selection-pill:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.selection-actions { display: flex; gap: 8px; }

/* ── Sticky bottom buy bar — the second, always-visible purchase CTA ────── */
.sticky-buy-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--blue-deeper) 60%, transparent);
  pointer-events: none;
}
.sticky-buy-bar.visible { display: flex; }
/* .btn.btn-sticky-buy (two classes) so this reliably beats .btn / .btn-primary's
   padding and font-size regardless of source order — this button needs to be
   unmistakably bigger than the normal buttons, not the same size. */
.btn.btn-sticky-buy {
  pointer-events: auto;
  width: 100%;
  max-width: 520px;
  padding: 16px 20px;
  font-size: 16px;
  border-radius: 999px;
  box-shadow: 0 6px 24px var(--gold-glow), 0 2px 10px rgba(0,0,0,.45);
  animation: sticky-buy-pulse 2.2s ease-in-out infinite;
}
@keyframes sticky-buy-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@media (max-width: 700px) {
  .btn.btn-sticky-buy { font-size: 17px; padding: 17px 18px; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms, transform 80ms, box-shadow 120ms, opacity 120ms;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

.btn-primary {
  background: var(--gold);
  border-color: var(--gold-dark);
  color: var(--bg);
}
.btn-primary:hover:not(:disabled) {
  background: var(--btn-primary-hover);
  box-shadow: 0 4px 14px var(--gold-glow);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border2);
  color: var(--muted);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface2);
  color: var(--text);
}

.btn-danger {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.4);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger);
  color: #fff;
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5,10,25,.75);
  display: none;
  place-items: center;
  z-index: 100;
  padding: 16px;
  overflow-y: auto;   /* fallback so content can never be stranded off-screen */
}
.modal-backdrop.open {
  display: grid;
  animation: fade-in 120ms ease-out both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* The modal must never grow taller than the screen. It has no scrolling of its
   own, so on a short viewport the footer — which holds the pay button — ends up
   below the fold and completely unreachable: the buyer sees the form but has no
   way to pay. Cap the height and let the body scroll between a pinned header
   and footer. dvh rather than vh so mobile browser chrome cannot eat the
   footer. */
.modal {
  width: min(540px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  overflow: hidden;
  animation: modal-pop 150ms ease-out both;
}
.modal-header, .modal-footer { flex-shrink: 0; }
@keyframes modal-pop {
  from { opacity: .8; transform: scale(.96) translateY(8px); }
  to   { opacity: 1;  transform: scale(1)  translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--blue-deeper);
}
.modal-header h2 { font-size: 17px; font-weight: 800; color: var(--text); }
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  transition: color 120ms, background 120ms;
}
.modal-close:hover { color: var(--text); background: var(--surface2); }

.modal-body {
  padding: 20px;
  display: grid;
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;   /* without this a flex child refuses to shrink and will not scroll */
}

.modal-summary {
  background: var(--blue-deeper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-summary-squares { font-size: 13px; color: var(--muted); }
.modal-summary-squares strong { color: var(--text); }
.modal-summary-amount { font-size: 20px; font-weight: 900; color: var(--accent); }

.form-row { display: grid; gap: 6px; }
.form-row label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.form-row input {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 150ms, box-shadow 150ms;
  outline: none;
}
.form-row input:focus {
  border-color: var(--blue-hover);
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}
.form-row input.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}
.form-row input::placeholder { color: var(--border2); }

.modal-notice {
  background: rgba(250,204,21,.07);
  border: 1px solid rgba(250,204,21,.2);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.modal-notice strong { color: var(--accent); }

.modal-notice.modal-notice-warn {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.3);
  margin-top: 10px;
}
.modal-notice.modal-notice-warn strong { color: var(--warning); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* ── Payment overlay ───────────────────────────────────────────────────── */
.payment-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,10,25,.88);
  display: none;
  place-items: center;
  z-index: 200;
}
.payment-overlay.open { display: grid; }
.payment-card {
  width: min(440px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.payment-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.payment-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.payment-card p  { font-size: 14px; color: var(--muted); line-height: 1.5; }
.payment-card .payment-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast.success { border-color: rgba(34,197,94,.5);  color: var(--success); }
.toast.error   { border-color: rgba(239,68,68,.5);  color: var(--danger);  }
.toast.info    { border-color: rgba(250,204,21,.4); color: var(--accent);    }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.site-footer strong { color: var(--text); }
.site-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.site-footer a:hover { text-decoration: underline; }

/* ── Loading skeleton ──────────────────────────────────────────────────── */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sq-min, 94px), 1fr));
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.skeleton-sq {
  aspect-ratio: 1.25;
  border-radius: 9px;
  background: var(--surface2);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: .8; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .prize-panel { display: none; }
  .mobile-prize { display: block; }
}
@media (min-width: 1025px) {
  .mobile-prize { display: none; }
}

.mobile-prize {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0;
}
.mobile-prize-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border);
}
.mobile-prize-item {
  background: var(--surface);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-prize-item .place { font-size: 12px; color: var(--muted); font-weight: 600; }
.mobile-prize-item .amount { font-size: 15px; font-weight: 800; color: var(--accent); }
.mobile-prize-header {
  background: var(--blue-deeper);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.mobile-prize-header h3 { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.mobile-prize-total { font-size: 14px; font-weight: 800; color: var(--accent); }

@media (max-width: 700px) {
  /* Shrink the floor rather than fixing a column count, so auto-fill keeps
     choosing the best fit for the actual viewport. */
  .ticket-grid, .skeleton-grid {
    --sq-min: 76px;
    grid-template-rows: unset;
    grid-auto-flow: row;
    gap: 5px;
    padding: 12px;
  }
  .main-layout { padding: 12px; gap: 12px; }
}
@media (max-width: 500px) {
  .ticket-grid, .skeleton-grid {
    --sq-min: 62px;
    grid-template-rows: unset;
    grid-auto-flow: row;
    gap: 4px;
    padding: 10px;
  }
  .header-inner { padding: 10px 14px; }
  .modal-body { padding: 16px; gap: 12px; }
  .modal-footer { padding: 12px 16px; }
}

/* ── Urgency banner ────────────────────────────────────────────────────── */
.urgency-banner {
  display: none;
  text-align: center;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
}
.urgency-banner.urgency-warn {
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.3);
  color: var(--warning);
}
.urgency-banner.urgency-critical {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.3);
  color: #f87171;
  animation: pulse-banner 2s ease-in-out infinite;
}
@keyframes pulse-banner {
  0%, 100% { opacity: 1; }
  50%       { opacity: .75; }
}

/* ── Physical & Digital Disclaimer ────────────────────────────────────── */
.physical-digital-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 20px;
  padding: 28px 20px;
}
.physical-digital-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.pd-heading {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  margin-bottom: 20px;
}
.pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.pd-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.pd-card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 7px;
  letter-spacing: .02em;
}
.pd-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}

/* ─── Admin-only styles ─────────────────────────────────────────────────── */
.admin-body {
  background: var(--bg);
  min-height: 100vh;
}

.admin-header {
  background: var(--blue-deeper);
  border-bottom: 3px solid var(--accent);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-header h1 { font-size: 20px; font-weight: 800; color: var(--accent); }
.admin-header p  { font-size: 13px; color: var(--muted); }

.admin-wrap { max-width: 1200px; margin: 0 auto; padding: 20px; display: grid; gap: 20px; }

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-wrap: wrap;
}
.admin-card-header h2 { font-size: 16px; font-weight: 700; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--border);
}
.stat-cell {
  background: var(--surface);
  padding: 16px;
  text-align: center;
}
.stat-cell .stat-val { font-size: 26px; font-weight: 900; }
.stat-cell .stat-lbl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.stat-cell.available .stat-val { color: var(--blue-hover); }
.stat-cell.reserved  .stat-val { color: var(--warning); }
.stat-cell.sold      .stat-val { color: var(--success); }
.stat-cell.raised    .stat-val { color: var(--accent); }

.admin-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.filter-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border2);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--blue);
  border-color: var(--blue-hover);
  color: #fff;
}
.filter-btn.active { background: var(--blue-dark); }

.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  white-space: nowrap;
}
.admin-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--surface2); }

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status-pill.available { background: rgba(29,78,216,.2);  color: #60a5fa; border: 1px solid rgba(29,78,216,.4); }
.status-pill.reserved  { background: rgba(245,158,11,.15); color: var(--warning); border: 1px solid rgba(245,158,11,.35); }
.status-pill.sold      { background: rgba(34,197,94,.15);  color: var(--success);  border: 1px solid rgba(34,197,94,.35); }

.admin-actions { display: flex; gap: 6px; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 7px; }

/* Login screen */
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  background-image: radial-gradient(ellipse 70% 40% at 50% 0%, var(--bg-glow-light) 0%, transparent 60%);
}
.login-card {
  width: min(380px, 90vw);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: grid;
  gap: 18px;
}
.login-card h1 { font-size: 20px; font-weight: 800; color: var(--accent); text-align: center; }
.login-card p  { font-size: 13px; color: var(--muted); text-align: center; }
.login-error   { font-size: 13px; color: var(--danger); text-align: center; display: none; }
.login-error.show { display: block; }

/* ── Fatal-error fallback banner (global error handler) ───────────────────
   No rule for this class existed anywhere in the template. A <div> with no
   matching CSS still renders — the browser default for a div is
   display:block — so this banner was visible on every single page load,
   unconditionally, regardless of whether any error had actually occurred.
   That is what showed up as "Something went wrong on this page" on
   Balmoral's draw.html from the day it was ported: not a JS error, just a
   missing display:none. */
.fatal-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #7f1d1d;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.fatal-banner.show { display: flex; }
.fatal-banner button {
  background: #fff;
  color: #7f1d1d;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-weight: 700;
  cursor: pointer;
}
.fatal-banner button:hover { background: #fecaca; }

/* ── Post-payment confirmation ────────────────────────────────────────────
   Text/trim uses --accent (consistent with the rest of the theme split);
   the icon badge keeps --gold since it is a celebratory highlight rather
   than body text. */
.payment-success {
  position: fixed;
  inset: 0;
  background: rgba(5,10,25,.92);
  display: none;
  place-items: center;
  z-index: 250;
  padding: 20px;
  animation: ps-fade 0.35s ease both;
}
.payment-success[style*="flex"] { display: grid !important; }
.payment-success-card {
  width: min(460px, 100%);
  background: var(--surface);
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-lg);
  padding: 36px 28px 28px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px var(--gold-glow);
  animation: ps-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.payment-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold);
  color: #0a0f1e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  margin: 0 auto 18px;
}
.payment-success-card h2 {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.payment-success-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 10px;
}
.payment-success-sub {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 22px !important;
}
.payment-success-sub strong { color: var(--accent); font-weight: 800; }
.payment-success-sub a { color: var(--accent); text-decoration: underline; }
.payment-success-card .btn { margin-top: 4px; min-width: 180px; }
@keyframes ps-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-pop {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}