/* SPOOK STUDIO × BOOM BATTLE BAR — M•A•C EDITORIAL STYLESHEET */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Montserrat:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg-primary: #070609;
  --bg-surface: #201336;
  --bg-surface-elevated: #2c1a4b;
  --bg-card: rgba(15, 8, 28, 0.45);
  --border-dim: #4d3372;
  --border-bright: #7c4fae;
  --border-glow: rgba(168, 85, 247, 0.35);
  
  --smoky-purple: #23153c;
  --smoky-purple-dark: #190e2b;
  --smoky-purple-light: #341e57;
  --smoky-purple-hover: #3d2366;
  --smoky-purple-border: #56387d;
  --smoky-purple-border-bright: #8b5cf6;
  --smoky-purple-glow: rgba(168, 85, 247, 0.3);
  
  --mac-red: #ff1a40;
  --mac-red-glow: rgba(255, 26, 64, 0.35);
  --mac-red-deep: #b30022;
  
  --toxic-neon: #00ff87;
  --toxic-glow: rgba(0, 255, 135, 0.25);
  
  --boom-yellow: #ffb800;
  --boom-yellow-glow: rgba(255, 184, 0, 0.3);
  
  --text-primary: #ffffff;
  --text-secondary: #cbbad9;
  --text-muted: #8e78a6;
  
  --font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Cinzel', serif;
  --font-mono: 'Space Grotesk', monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.5;
  overflow-x: hidden;
  background: transparent;
}

/* Typography Utility */
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.tracking-ultra { letter-spacing: 0.28em; }
.tracking-wide { letter-spacing: 0.12em; }

/* Custom Glows & Borders */
.glow-red {
  box-shadow: 0 0 25px var(--mac-red-glow);
}

.glow-yellow {
  box-shadow: 0 0 25px var(--boom-yellow-glow);
}

.glow-toxic {
  box-shadow: 0 0 25px var(--toxic-glow);
}

.glow-purple {
  box-shadow: 0 0 25px var(--smoky-purple-glow);
}

.border-gradient-mac {
  border: 1px solid transparent;
  background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
              linear-gradient(135deg, var(--mac-red), transparent, var(--border-bright)) border-box;
}

.glass-panel { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); 
  background: rgba(15, 8, 28, 0.45) !important;
  border: 1px solid #2a1945 !important;
}

.glass-panel-hover {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-hover:hover {
  border-color: rgba(192, 132, 252, 0.5) !important;
  transform: translateY(-2px);
  background: rgba(46, 28, 77, 0.94) !important;
  box-shadow: 0 16px 40px -5px rgba(0, 0, 0, 0.75), 0 0 30px rgba(168, 85, 247, 0.22) !important;
}

/* MAC Brand Accent Dot */
.mac-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--mac-red);
  margin: 0 4px;
  box-shadow: 0 0 8px var(--mac-red);
}

/* Animated Shimmer on Badges */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.badge-shimmer {
  background: linear-gradient(90deg, rgba(255,26,64,0.1) 0%, rgba(255,26,64,0.4) 50%, rgba(255,26,64,0.1) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite linear;
}

/* Physical Token Design Mockups */
.token-coin {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  transition: transform 0.3s ease;
  user-select: none;
}

.token-coin:hover {
  transform: scale(1.08) rotate(4deg);
}

.token-gold {
  background: radial-gradient(circle at 30% 30%, #ffe885, #d49818 60%, #875c02);
  border: 3px dashed #fff099;
  color: #2a1b02;
  box-shadow: 0 8px 20px rgba(212, 152, 24, 0.4), inset 0 2px 4px rgba(255,255,255,0.7);
}

.token-crimson {
  background: radial-gradient(circle at 30% 30%, #ff6b8b, #c4002e 60%, #590014);
  border: 3px dashed #ff99b0;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(196, 0, 46, 0.5), inset 0 2px 4px rgba(255,255,255,0.6);
}

/* Package Card States */
.package-card {
  position: relative;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  background: linear-gradient(180deg, rgba(39, 23, 65, 0.92) 0%, rgba(27, 16, 46, 0.98) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.package-card:hover:not(.selected) {
  border-color: rgba(192, 132, 252, 0.6) !important;
  background: linear-gradient(180deg, rgba(50, 29, 82, 0.95) 0%, rgba(35, 21, 60, 0.98) 100%) !important;
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.25) !important;
  transform: translateY(-3px);
}

.package-card.selected {
  border-color: var(--mac-red) !important;
  background: linear-gradient(180deg, rgba(255, 26, 64, 0.2) 0%, rgba(40, 22, 65, 0.98) 100%) !important;
  box-shadow: 0 0 35px rgba(255, 26, 64, 0.35), 0 0 25px rgba(168, 85, 247, 0.2) !important;
  transform: translateY(-3px);
}

.package-card.selected .check-circle {
  background-color: var(--mac-red);
  border-color: var(--mac-red);
  color: white;
}

/* Slot Pill Buttons (Tabs) */
.slot-pill {
  transition: all 0.2s ease;
  cursor: pointer;
  background-color: #311b51 !important;
  border: 1px solid #6b449a !important;
}

.slot-pill:hover:not(.disabled):not(.active) {
  border-color: #c084fc !important;
  background-color: #472877 !important;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.25) !important;
  transform: translateY(-1px);
}

.slot-pill.active {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.4), 0 0 30px rgba(168, 85, 247, 0.3) !important;
}

.slot-pill.active span,
.slot-pill.active p {
  color: #000000 !important;
}

/* Date Box Cards */
.date-box {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  background-color: #24153c;
  border: 1px solid #523577;
}

.date-box:hover:not(.active) {
  border-color: #a855f7 !important;
  transform: translateY(-2px);
  background-color: #361f5b !important;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.25) !important;
}

/* Date Pill Buttons */
.date-pill {
  transition: all 0.2s ease;
  cursor: pointer;
}

.date-pill:hover {
  border-color: var(--border-bright);
}

.date-pill.active {
  background: var(--mac-red);
  border-color: var(--mac-red);
  color: #ffffff;
  box-shadow: 0 0 20px var(--mac-red-glow);
}

/* Counter Buttons */
.btn-counter {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #2b1a45;
  border: 1px solid #5c3c84;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.btn-counter:hover:not(:disabled) {
  background: #3c2462;
  border-color: #a855f7;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

.btn-counter:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Quick Guest Pill Selector Buttons */
.guest-quick-btn {
  background-color: #311b51 !important;
  border: 1px solid #6b449a !important;
  color: #e9d5ff !important;
  transition: all 0.15s ease;
}

.guest-quick-btn:hover {
  background-color: #472877 !important;
  border-color: #c084fc !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

/* Smoky Purple Form Controls & Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  background-color: #311b51 !important;
  border: 1px solid #6b449a !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
  color: #a28ebe !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: #c084fc !important;
  background-color: #23143c !important;
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.25), 0 0 20px rgba(168, 85, 247, 0.25) !important;
  outline: none !important;
}

select option {
  background-color: #311b51;
  color: #ffffff;
}

label {
  color: #e2d2f7 !important;
}

/* Modals with Smoky Purple Glow */
#checkoutModal .glass-panel,
#ticketModal .glass-panel { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); 
  background: linear-gradient(180deg, #251640 0%, #170d28 100%) !important;
  border: 1px solid #6c449e !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 50px rgba(168, 85, 247, 0.28) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-dim);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-bright);
}

/* Ticket Print Styling */
@media print {
  body * {
    visibility: hidden;
  }
  #ticketModal, #ticketModal * {
    visibility: visible;
  }
  #ticketModal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: white !important;
    color: black !important;
  }
}

/* === UNIVERSAL MULTI-SCREEN RESPONSIVE CONTAINMENT === */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

#root {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}


/* Responsive modal & card safety guards */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

input, select, textarea, button {
  max-width: 100%;
  touch-action: manipulation;
}


@keyframes slowFadeInOut {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
.animate-slow-fade {
  animation: slowFadeInOut 14s infinite ease-in-out;
}