/* =============================================
   SnapDraw Design Tokens (Batch 1)
   Introduces CSS custom properties for colors, spacing, radius, shadows, transitions.
   Non-destructive: existing classes continue to work.
   ============================================= */
:root {
  /* Brand palette */
  --color-brand-50: #f0f7ff;
  --color-brand-100: #dbeafe; /* light border */
  --color-brand-200: #b6d0f7; /* subtle shadow tint */
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa; /* gradient start */
  --color-brand-500: #3b82f6; /* primary base */
  --color-brand-600: #2563eb; /* primary hover / focus */
  --color-brand-700: #1e40af;
  --color-accent-gold: #ffd700;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-text-primary: #1e293b;
  --color-text-secondary: #3b4a6b;
  --color-surface: #f7faff;
  --color-bg: #ffffff;

  /* Elevation & effects */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 4px rgba(59,130,246,0.08);
  --shadow-md: 0 4px 10px rgba(60,120,200,0.08);
  --shadow-lg: 0 4px 24px rgba(60,120,200,0.10);

  /* Shape & spacing */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Typography */
  --font-stack: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-size-sm: 0.85rem;
  --font-size-base: 1rem;
  --font-size-md: 1.05rem;
  --font-size-lg: 1.15rem;
  --font-weight-medium: 500;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;

  /* Transitions */
  --transition-fast: 120ms cubic-bezier(.4,0,.2,1);
  --transition-normal: 180ms cubic-bezier(.4,0,.2,1);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(96,165,250,0.45);
  /* Button sizing */
  --btn-min-width: 160px;
  /* Header */
  --header-height: 64px;
  --header-bg: rgba(255,255,255,0.88);
  --header-border: var(--color-brand-100);
}

/* Align checkboxes and their labels in forms */
/* ---------- Global Reset & Base Typography (non-destructive) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-stack); line-height: var(--line-height-base); color: var(--color-text-primary); background: var(--color-bg); }
body { padding-top: var(--header-height); }

/* Utility spacing helpers */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-16 { margin-top: 16px !important; }
.mb-16 { margin-bottom: 16px !important; }
.p-0 { padding: 0 !important; }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-secondary { color: var(--color-text-secondary); }
.fw-medium { font-weight: var(--font-weight-medium); }

/* Focus visibility */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Smooth transitions opt-in */
.transition { transition: var(--transition-normal); }

/* Surface helper */
.surface-card { background: var(--color-surface); border: 1.5px solid var(--color-brand-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
  margin: 0 8px 0 0;
  vertical-align: middle;
}
label.checkbox-label {
  font-size: 1em;
  color: #3b4a6b;
  cursor: pointer;
  margin: 0;
}
/* Removed duplicate body reset (was overriding header offset). Center-align text for landing context via container classes instead if necessary. */


/* Base (will be overridden by fluid rules later, kept for non-landing usages) */
.logo {
  margin-top: 0;
  margin-bottom: 10px;
  width: 320px;
  max-width: 95vw;
  filter: drop-shadow(0 2px 12px #b6d0f7);
}

/* h1 removed from landing page, so style can be kept or removed if not used elsewhere */

.tagline {
  font-size: 1.15em;
  color: #3b4a6b;
  margin-bottom: 32px;
  margin-top: 0;
  font-weight: 500;
}

/* Hero (mobile-first, footer-aware) */
.hero-section {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  background: none;
  padding: 4px 0 4px;
}

.hero-card {
  background: #f7faff;
  padding: 28px 22px 26px;
  border-radius: 16px;
  box-shadow: 0 3px 18px rgba(60, 120, 200, 0.10);
  max-width: 420px;
  width: 100%;
  margin: 8px auto 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1.5px solid #dbeafe;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: center;
}

.button {
  background-color: #3b82f6;
  color: white;
  padding: 14px 32px;
  margin: 0;
  border: none;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59,130,246,0.08);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.button.primary {
  background: linear-gradient(90deg, #60a5fa 60%, #2563eb 100%);
}
.button.secondary {
  background: #e0e7ff;
  color: #2563eb;
  border: 1.5px solid #b6d0f7;
}
.button:hover {
  background: #2563eb;
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 16px rgba(59,130,246,0.16);
}
.button.secondary:hover {
  background: #dbeafe;
  color: #1e40af;
}
/* New button system (progressive). Existing .button retained; .btn can be adopted gradually. */
.btn {
  --_bg: var(--color-brand-500);
  --_bg-hover: var(--color-brand-600);
  --_bg-active: var(--color-brand-700);
  --_text: #fff;
  --_border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-stack);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--_border);
  background: var(--_bg);
  color: var(--_text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  position: relative;
  min-width: var(--btn-min-width);
}
.btn:hover { background: var(--_bg-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn:active { background: var(--_bg-active); transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: var(--shadow-xs); }

/* Variants */
.btn--secondary { --_bg: #e0e7ff; --_bg-hover: #d1ddff; --_bg-active: #bfdbfe; --_text: var(--color-brand-600); --_border: var(--color-brand-200); }
/* Increase text contrast on hover by updating variable */
.btn--secondary:hover { --_text: var(--color-brand-700); }
.btn--gradient { --_text:#fff; --_border:transparent; background: linear-gradient(135deg,var(--color-brand-500),var(--color-brand-600)); }
.btn--gradient:hover { background: linear-gradient(135deg,var(--color-brand-500),var(--color-brand-700)); }
.btn--gradient:active { background: linear-gradient(135deg,var(--color-brand-600),var(--color-brand-700)); }
/* Alternate gradient with gold accent */
.btn--gradient-alt { --_text:#fff; --_border:transparent; background: linear-gradient(135deg,#f59e0b,#d97706); }
.btn--gradient-alt:hover { background: linear-gradient(135deg,#f59e0b,#b45309); }
.btn--gradient-alt:active { background: linear-gradient(135deg,#d97706,#92400e); }
.btn--outline { --_bg: rgba(255,255,255,0.15); --_bg-hover: rgba(255,255,255,0.30); --_bg-active: rgba(255,255,255,0.40); --_text: var(--color-brand-600); --_border: var(--color-brand-300); backdrop-filter: blur(8px); }
.btn--danger { --_bg: var(--color-danger); --_bg-hover: #b91c1c; --_bg-active: #991b1b; }
.btn--success { --_bg: var(--color-success); --_bg-hover: #15803d; --_bg-active: #166534; }
/* Ghost: make hover background less subtle and add a border for clarity */
.btn--ghost { --_bg: transparent; --_bg-hover: var(--color-brand-100); --_bg-active: var(--color-brand-200); --_text: var(--color-brand-600); --_border: var(--color-brand-100); box-shadow: none; }
.btn--ghost:hover { --_border: var(--color-brand-200); --_text: var(--color-brand-700); }

/* Size modifiers */
.btn--sm { padding: 0.55rem 1rem; font-size: var(--font-size-sm); }
.btn--lg { padding: 1rem 2rem; font-size: var(--font-size-lg); }

/* Icon alignment helper */
.btn > svg, .btn .icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* Sizing helpers */
.btn--auto { min-width: unset; }
.btn--full { width: 100%; min-width: 0; }

/* Allow combining old/new: .button.btn for immediate upgrade of hover/focus ring */
.button.btn { box-shadow: var(--shadow-sm); }

/* Do not apply text input sizing to checkboxes/radios */
input:not([type="checkbox"]):not([type="radio"]) {
  margin: 6px;
  padding: 10px;
  width: 80%;
  max-width: 300px;
  border: 1.5px solid #b6d0f7;
  border-radius: 6px;
  background: #f7faff;
  color: #2563eb;
  font-size: 1em;
  transition: border 0.2s;
}
input:focus {
  border: 1.5px solid #2563eb;
  outline: none;
}
/* Enhanced form controls */
input, select, textarea {
  font-family: var(--font-stack);
  background: var(--color-surface);
  border: 1.5px solid var(--color-brand-200);
  border-radius: var(--radius-sm);
  color: var(--color-brand-600);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:hover, select:hover, textarea:hover { border-color: var(--color-brand-300); }
input:focus, select:focus, textarea:focus { border-color: var(--color-brand-600); box-shadow: var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--color-brand-50); cursor: not-allowed; opacity: .7; }
input.error, select.error, textarea.error { border-color: var(--color-danger); }
input.success, select.success, textarea.success { border-color: var(--color-success); }
textarea { resize: vertical; min-height: 90px; }

.section {
  max-width: 400px;
  margin: 40px auto;
  text-align: center;
  background: #f7faff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(60, 120, 200, 0.08);
  border: 1.5px solid #dbeafe;
  overflow-wrap: anywhere; /* prevent overflow from long emails/urls on iOS */
}
/* Centering for the Buy Tickets panel */
#ticketPurchase {
  max-width: 420px;
  width: 100%;
  margin: 40px auto; /* horizontal centering */
  text-align: center;
  background: #f7faff;
  padding: 28px 22px 26px;
  border-radius: 16px;
  box-shadow: 0 3px 18px rgba(60,120,200,0.10);
  border: 1.5px solid #dbeafe;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Slightly tighter inputs inside ticket purchase */
#ticketPurchase input { width: 100%; max-width: 320px; }
/* Ensure checkbox rows align left and don't push content */
#ticketPurchase label { width: 100%; text-align: left; }
#ticketPurchase label > span { display: flex; align-items: center; justify-content: flex-start; }
#ticketPurchase input[type="checkbox"] { width: 18px; height: 18px; margin-right: 8px; }
@media (max-width:640px){
  #ticketPurchase { margin: 24px auto; padding: 24px 18px 22px; }
}
#landingPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.hidden {
  display: none !important;
}
/* Tables (added) */
.table-wrapper { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
thead { background: var(--color-brand-50); }
thead th { text-align: left; font-weight: 600; padding: 10px 12px; color: var(--color-text-secondary); border-bottom: 2px solid var(--color-brand-100); }
tbody td { padding: 8px 12px; border-bottom: 1px solid var(--color-brand-100); }
tbody tr:nth-child(even) { background: var(--color-brand-50); }
tbody tr:hover { background: var(--color-brand-100); }
caption { caption-side: bottom; padding: 8px; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

@keyframes spinGlow {
  0% { text-shadow: 0 0 8px #2563eb, 0 0 16px #fff; }
  100% { text-shadow: 0 0 24px #ffd700, 0 0 32px #fff; }
}

/* Accessibility helpers */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }

/* Toast notifications */
.toast-viewport { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:10px; z-index:1300; width:clamp(240px,90vw,420px); pointer-events:none; }
.toast { pointer-events:auto; background:var(--color-text-primary); color:#fff; padding:14px 18px; border-radius:var(--radius-md); font-size:0.95rem; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; animation:toast-in var(--transition-normal); position:relative; }
.toast.success { background:var(--color-success); }
.toast.error { background:var(--color-danger); }
.toast button.toast-close { background:transparent; border:none; color:inherit; font-size:1.1rem; line-height:1; cursor:pointer; padding:4px; border-radius:var(--radius-sm); }
.toast button.toast-close:hover { background:rgba(255,255,255,0.15); }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,10px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; } }

/* Saved status checkmark */
.save-status { display:inline-flex; align-items:center; font-size:0.85rem; gap:4px; margin-left:8px; opacity:0; transform:translateY(-4px); transition:opacity 200ms, transform 200ms; color:var(--color-success); font-weight:500; }
.save-status--visible { opacity:1; transform:translateY(0); }
.save-status svg { width:14px; height:14px; display:block; }

/* Header */
.sd-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center; /* center logo */
  padding: 0 20px;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--header-border);
  z-index: 1100;
}
.sd-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-brand-600);
}
.sd-header__logo img { height: 40px; width: auto; display: block; }
.sd-header__actions { display: flex; align-items: center; gap: 12px; position: absolute; right: 20px; top: 0; height: 100%; }
.sd-header__menu { position: relative; }

@media (max-width: 640px) {
  :root { --btn-min-width: 138px; }
  .sd-header { padding: 0 10px; height: 56px; }
  body { padding-top: 56px; }
  /* Respect iOS safe areas on small screens */
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: calc(env(safe-area-inset-bottom) + 8px); }
  .section { margin: 16px auto; padding: 16px; max-width: min(92vw, 420px); }
  .sd-header__logo img { height: 32px; }
  .hero-section { padding: 2px 0 2px; }
  .hero-card { padding: 24px 18px 22px; margin: 4px auto 6px; }
  .logo { width: clamp(210px, 64vw, 300px); }
  .btn { padding: 0.7rem 1.15rem; font-size: 0.95rem; }
  .tagline { font-size: 1rem; margin-bottom: 18px; }
}

/* Tablet / mid-range (small landscape tablets & large phones in landscape) */
@media (min-width: 641px) and (max-width: 899px) {
  :root { --btn-min-width: 150px; }
  .hero-section { padding: 4px 0 4px; }
  .hero-card { max-width: 500px; padding: 30px 24px 28px; margin-top: 8px; }
  .logo { width: clamp(250px, 46vw, 340px); }
  .tagline { font-size: 1.12rem; margin-top: 4px; }
  .btn { padding: 0.75rem 1.25rem; font-size: 0.97rem; }
  .sd-header__logo img { height: 38px; }
  .sd-header__logo span { font-size: 1.04rem; }
}

@media (min-width: 900px) {
  .hero-section { padding: 4px 0 6px; }
  .hero-card { max-width: 520px; padding: 34px 28px 32px; margin-top: 10px; }
  .logo { width: clamp(300px, 40vw, 360px); }
  .tagline { font-size: 1.18rem; margin-top: 4px; }
  .btn { padding: 0.8rem 1.45rem; font-size: 0.98rem; }
  .sd-header__logo img { height: 44px; }
  .sd-header__logo span { font-size: 1.08rem; }
}