/* ============================================
   DUAL THEME SYSTEM
   Fandango (default) + Movies (Vintage Cinema)
   Layout is cinematic for both themes.
   Colors differ per theme.
   ============================================ */

/* DEFAULT: Fandango Theme - Orange & Blue */
:root {
  --fan-orange: #FF7300;
  --fan-orange-hover: #E56700;
  --fan-blue: #3478C1;
  --fan-dark: #333E48;
  --bg-primary: #1C1C28;
  --bg-card: #262633;
  --bg-input: #1C1C28;
  --bg-elevated: #2A2A3A;
  --bg-secondary: #2A2A3A;

  --header-border-color: #FF7300;
  --film-grain: none;
}

/* MOVIES THEME: Vintage Cinema - Warm & Classic */
[data-theme="movies"] {
  /* Surface Hierarchy - Rich Dark Browns */
  --surface: #1a1210;
  --surface-dim: #1a1210;
  --surface-container-lowest: #0d0a08;
  --surface-container-low: #1f1814;
  --surface-container: #2a2320;
  --surface-container-high: #342d28;
  --surface-container-highest: #3f3730;
  --surface-bright: #4a423a;

  /* Burgundy - Primary Action (buttons, key interactions) */
  --primary: #E84A3F;              /* Brightened red for text - 6.5:1 contrast */
  --primary-dim: #891A10;          /* Deep burgundy for backgrounds */
  --primary-container: #B02418;    /* Medium red for hover */
  --on-primary: #ffffff;
  --on-primary-container: #FFE8E6;

  /* Cream - Secondary / Elegant (accents, highlights) */
  --secondary: #D8D4BC;            /* Warm cream for text - 11.2:1 contrast */
  --secondary-dim: #B8B49C;        /* Dimmed cream */
  --secondary-container: #A8A48C;  /* Dark cream for containers */
  --on-secondary: #1a1210;

  /* Burnt Orange - Tertiary / Warmth (badges, availability) */
  --tertiary: #FFA562;             /* Brightened orange for text - 7.8:1 contrast */
  --tertiary-dim: #DC8236;         /* Burnt orange */
  --tertiary-container: #B86A28;   /* Darker orange */

  /* Brown - Quaternary / Earth */
  --quaternary: #9D6E5F;           /* Lightened brown for text - 5.1:1 contrast */
  --quaternary-dim: #714236;       /* Rich brown */

  /* Text Hierarchy - Optimized for contrast */
  --on-surface: #F5F1E8;           /* Warm white - 14.5:1 contrast */
  --on-surface-variant: #C9C5B8;   /* 8.2:1 contrast */
  --text-primary: #F5F1E8;
  --text-secondary: #C9C5B8;
  --text-muted: #9D9688;           /* 4.8:1 contrast */

  /* Structural */
  --outline: #714236;
  --outline-variant: #4a423a;
  --border: rgba(113, 66, 54, 0.3);

  /* Feedback */
  --error: #E84A3F;
  --error-dim: #B02418;
  --success: #7FB069;

  /* Glow colors - Warm vintage effects */
  --glow-primary: rgba(232, 74, 63, 0.4);
  --glow-primary-strong: rgba(232, 74, 63, 0.6);
  --glow-secondary: rgba(216, 212, 188, 0.3);
  --glow-secondary-strong: rgba(216, 212, 188, 0.5);
  --glow-tertiary: rgba(255, 165, 98, 0.4);
  --glow-tertiary-strong: rgba(255, 165, 98, 0.6);

  /* Legacy compat */
  --fan-orange: #E84A3F;
  --fan-orange-hover: #B02418;
  --fan-blue: #DC8236;
  --fan-dark: #1a1210;
  --bg-primary: #1a1210;
  --bg-card: #2a2320;
  --bg-input: #1f1814;
  --bg-elevated: #342d28;
  --bg-secondary: #2a2320;

  --header-border-color: #891A10;
  --film-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
}

/* ============================================
   FANDANGO THEME OVERRIDES
   ============================================ */

/* Header border gradient - Fandango orange */
header {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #FF7300 0%, #E56700 50%, #FF7300 100%);
  border-image-slice: 1;
}

/* ============================================
   MOVIES (VINTAGE CINEMA) THEME OVERRIDES
   ============================================ */

/* Film grain overlay - vintage warmth */
[data-theme="movies"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: var(--film-grain);
  opacity: 0.8;
  mix-blend-mode: multiply;
}

/* Header - Warm with burgundy accent */
[data-theme="movies"] header {
  background: rgba(26, 18, 16, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 3px solid var(--primary-dim);
  border-image: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6),
              0 0 40px rgba(137, 26, 16, 0.3);
}

[data-theme="movies"] .fandango-logo {
  height: 64px;
  width: auto;
  filter: drop-shadow(0 4px 12px rgba(137, 26, 16, 0.6))
          drop-shadow(0 0 20px rgba(220, 130, 54, 0.4));
}

[data-theme="movies"] .tagline {
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  color: var(--secondary);
  text-shadow: 0 2px 8px rgba(216, 212, 188, 0.3);
}

/* Buttons - Burgundy with warm glow */
[data-theme="movies"] .btn-primary {
  background: var(--primary-dim);
  color: var(--on-primary);
  box-shadow: 0 4px 16px rgba(137, 26, 16, 0.5),
              0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(232, 74, 63, 0.3);
}

[data-theme="movies"] .btn-primary:hover {
  background: var(--primary-container);
  box-shadow: 0 6px 24px rgba(137, 26, 16, 0.7),
              0 0 30px rgba(232, 74, 63, 0.4);
  transform: translateY(-2px);
}

[data-theme="movies"] .btn-secondary {
  background: transparent;
  color: var(--secondary);
  border: 2px solid rgba(216, 212, 188, 0.4);
}

[data-theme="movies"] .btn-secondary:hover {
  background: rgba(216, 212, 188, 0.1);
  border-color: var(--secondary);
  box-shadow: 0 4px 16px var(--glow-secondary);
}

/* Cards - Warm brown with tonal depth */
[data-theme="movies"] .option-card {
  background: var(--surface-container);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
              inset 0 0 0 1px rgba(113, 66, 54, 0.4),
              inset 0 1px 0 rgba(220, 130, 54, 0.1);
}

[data-theme="movies"] .option-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7),
              0 0 30px rgba(220, 130, 54, 0.3),
              inset 0 0 0 1px rgba(220, 130, 54, 0.6),
              inset 0 1px 0 rgba(220, 130, 54, 0.15);
  transform: translateY(-4px);
}

/* Add border to ticket stub notches to continue card border */
[data-theme="movies"] .card-price-section::before,
[data-theme="movies"] .card-price-section::after {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(113, 66, 54, 0.4);
}

[data-theme="movies"] .option-card:hover .card-price-section::before,
[data-theme="movies"] .option-card:hover .card-price-section::after {
  box-shadow: inset 0 0 0 1px rgba(220, 130, 54, 0.6);
}

/* Add side borders to price section */
[data-theme="movies"] .card-price-section {
  box-shadow: inset 1px 0 0 rgba(113, 66, 54, 0.4),
              inset -1px 0 0 rgba(113, 66, 54, 0.4);
}

[data-theme="movies"] .option-card:hover .card-price-section {
  box-shadow: inset 1px 0 0 rgba(220, 130, 54, 0.6),
              inset -1px 0 0 rgba(220, 130, 54, 0.6);
}

/* Add borders to card action section */
[data-theme="movies"] .card-action {
  box-shadow: inset 1px 0 0 rgba(113, 66, 54, 0.4),
              inset -1px 0 0 rgba(113, 66, 54, 0.4),
              inset 0 -1px 0 rgba(113, 66, 54, 0.4);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

[data-theme="movies"] .option-card:hover .card-action {
  box-shadow: inset 1px 0 0 rgba(220, 130, 54, 0.6),
              inset -1px 0 0 rgba(220, 130, 54, 0.6),
              inset 0 -1px 0 rgba(220, 130, 54, 0.6);
}

/* Card labels - Vintage Cinema style */
[data-theme="movies"] .label-now {
  background: rgba(255, 165, 98, 0.2);
  color: var(--tertiary);
  box-shadow: 0 2px 8px rgba(220, 130, 54, 0.3);
  border: 1px solid rgba(220, 130, 54, 0.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="movies"] .label-tonight {
  background: rgba(232, 74, 63, 0.2);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(137, 26, 16, 0.3);
  border: 1px solid rgba(232, 74, 63, 0.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="movies"] .label-matinee {
  background: rgba(216, 212, 188, 0.15);
  color: var(--secondary);
  box-shadow: 0 2px 8px rgba(216, 212, 188, 0.2);
  border: 1px solid rgba(216, 212, 188, 0.3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="movies"] .label-weekend {
  background: rgba(157, 110, 95, 0.2);
  color: var(--quaternary);
  box-shadow: 0 2px 8px rgba(113, 66, 54, 0.3);
  border: 1px solid rgba(157, 110, 95, 0.4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Typography - Epilogue headlines with warm glow */
[data-theme="movies"] .card-movie {
  font-family: 'Epilogue', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  text-shadow: 0 2px 12px rgba(216, 212, 188, 0.2);
}

[data-theme="movies"] .card-reasoning {
  color: var(--tertiary);
  font-style: italic;
  background: rgba(220, 130, 54, 0.1);
  border-left: 3px solid var(--tertiary-dim);
  box-shadow: 0 2px 8px rgba(220, 130, 54, 0.2);
}

/* Price section - burgundy highlight */
[data-theme="movies"] .card-price-amount {
  color: var(--primary);
  text-shadow: 0 2px 8px var(--glow-primary);
  font-weight: 800;
}

[data-theme="movies"] .card-poster {
  background: linear-gradient(145deg,
    #5a3a2e 0%,
    #3a221a 30%,
    #2a1812 50%,
    #3a221a 70%,
    #5a3a2e 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7),
              inset 0 2px 0 rgba(220, 130, 54, 0.15),
              inset 0 -2px 0 rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(113, 66, 54, 0.6),
              0 0 0 3px rgba(137, 26, 16, 0.3);
}

[data-theme="movies"] .option-card:hover .card-poster {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8),
              inset 0 2px 0 rgba(220, 130, 54, 0.25),
              inset 0 -2px 0 rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(113, 66, 54, 0.8),
              0 0 0 3px rgba(137, 26, 16, 0.5),
              0 0 40px rgba(220, 130, 54, 0.3);
}

[data-theme="movies"] .card-format-badge {
  color: var(--tertiary);
  text-shadow: 0 2px 6px var(--glow-tertiary);
}

/* Buy button - Burgundy warmth */
[data-theme="movies"] .buy-btn {
  background: var(--primary-dim);
  color: var(--on-primary);
  box-shadow: 0 4px 16px rgba(137, 26, 16, 0.5),
              0 2px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(232, 74, 63, 0.4);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="movies"] .buy-btn:hover {
  background: var(--primary-container);
  box-shadow: 0 6px 24px rgba(137, 26, 16, 0.7),
              0 0 30px rgba(232, 74, 63, 0.4);
  transform: translateY(-2px);
}

/* Quantity controls - Burgundy */
[data-theme="movies"] .qty-btn {
  background: var(--primary-dim);
  color: var(--on-primary);
  box-shadow: 0 4px 12px rgba(137, 26, 16, 0.4);
  border: 1px solid rgba(232, 74, 63, 0.3);
}

[data-theme="movies"] .qty-btn:hover {
  background: var(--primary-container);
  box-shadow: 0 6px 20px rgba(137, 26, 16, 0.6);
  transform: scale(1.05);
}

[data-theme="movies"] .qty-display {
  color: var(--primary);
  text-shadow: 0 2px 8px var(--glow-primary);
  font-weight: 800;
}

/* Modals - Rich brown with burgundy accent */
[data-theme="movies"] .modal-card {
  background: var(--surface-container);
  border: 1px solid rgba(137, 26, 16, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8),
              0 0 60px rgba(137, 26, 16, 0.3);
}

[data-theme="movies"] .modal-overlay {
  background: rgba(13, 10, 8, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Input - Underline aesthetic with warm accent */
[data-theme="movies"] .modal-input,
[data-theme="movies"] .signin-form input {
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(113, 66, 54, 0.5);
  border-radius: 0;
  padding: 16px 0;
  color: var(--on-surface);
}

[data-theme="movies"] .modal-input:focus,
[data-theme="movies"] .signin-form input:focus {
  border-color: var(--tertiary-dim);
  box-shadow: 0 4px 12px rgba(220, 130, 54, 0.3);
  outline: none;
}

/* Spinner - Burgundy glow */
[data-theme="movies"] .spinner {
  border-color: var(--surface-container-highest);
  border-top-color: var(--primary);
  filter: drop-shadow(0 0 20px var(--glow-primary));
}

/* Venue selector - warm outlined */
[data-theme="movies"] #venueSelect {
  background-color: var(--surface-container);
  border: 2px solid rgba(220, 130, 54, 0.4);
  font-family: 'Epilogue', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--on-surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="movies"] #venueSelect:focus {
  border-color: var(--tertiary-dim);
  box-shadow: 0 0 0 4px rgba(220, 130, 54, 0.2);
}

/* Seatmap - Vintage cinema with cream available, burnt orange selected */
/* Mini seatmap on cards */
[data-theme="movies"] .seatmap-seat.selected {
  background: var(--tertiary-dim);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(220, 130, 54, 0.5);
  border: 1px solid var(--tertiary-dim);
}

[data-theme="movies"] .seatmap-seat.available {
  background: var(--secondary-dim);
  color: var(--surface);
  border: 1px solid rgba(184, 180, 156, 0.4);
}

[data-theme="movies"] .btn-change-seats {
  color: var(--tertiary);
  border-color: rgba(220, 130, 54, 0.4);
}

[data-theme="movies"] .btn-change-seats:hover {
  background: rgba(220, 130, 54, 0.15);
  border-color: var(--tertiary-dim);
  box-shadow: 0 4px 16px rgba(220, 130, 54, 0.3);
}

/* Full seatmap modal */
[data-theme="movies"] .seatmap-modal-card {
  background: var(--surface-container);
  border: 1px solid rgba(137, 26, 16, 0.3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9),
              0 0 80px rgba(137, 26, 16, 0.3);
}

[data-theme="movies"] .seatmap-screen {
  background: linear-gradient(to bottom,
    rgba(137, 26, 16, 0.25),
    rgba(137, 26, 16, 0.05));
  border: none;
  box-shadow: 0 -20px 50px -10px rgba(137, 26, 16, 0.4);
  color: var(--primary);
  text-shadow: 0 2px 12px var(--glow-primary);
}

[data-theme="movies"] .seat.available {
  background: var(--secondary-dim);
  color: var(--surface);
  border: 1px solid rgba(184, 180, 156, 0.3);
}

[data-theme="movies"] .seat.available:hover {
  background: var(--secondary);
  box-shadow: 0 4px 12px rgba(216, 212, 188, 0.4);
  border-color: var(--secondary);
}

[data-theme="movies"] .seat.selected {
  background: var(--tertiary-dim);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(220, 130, 54, 0.6),
              0 4px 8px rgba(0, 0, 0, 0.4);
  background-image: none;
  border: 1px solid var(--tertiary-dim);
  font-weight: 800;
}

[data-theme="movies"] .seat.selected:not(.wheelchair):not(.companion)::after {
  content: none;
}

[data-theme="movies"] .seat.selected:hover {
  background: var(--tertiary);
  box-shadow: 0 0 24px rgba(220, 130, 54, 0.8),
              0 6px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="movies"] .legend-seat.available {
  background: var(--secondary-dim);
  color: var(--surface);
  border: 1px solid rgba(184, 180, 156, 0.3);
}

[data-theme="movies"] .legend-seat.selected {
  background: var(--tertiary-dim);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(220, 130, 54, 0.5);
  border: 1px solid var(--tertiary-dim);
}

[data-theme="movies"] .selected-list {
  color: var(--tertiary);
  text-shadow: 0 2px 8px var(--glow-tertiary);
  font-weight: 700;
}

[data-theme="movies"] .mini-seat {
  background: var(--tertiary-dim);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(220, 130, 54, 0.4);
  border: 1px solid var(--tertiary-dim);
  font-weight: 700;
}

/* Footer - deep brown */
[data-theme="movies"] .footer {
  background: var(--surface-container-lowest);
  border-top: 1px solid rgba(113, 66, 54, 0.3);
}

[data-theme="movies"] .footer__link:hover {
  color: var(--tertiary);
  text-shadow: 0 2px 8px var(--glow-tertiary);
}

/* Confirmation */
[data-theme="movies"] .confirm-details {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8),
              0 0 40px rgba(137, 26, 16, 0.3);
  border: 1px solid rgba(113, 66, 54, 0.4);
}

[data-theme="movies"] .conf-poster {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8),
              0 0 40px rgba(137, 26, 16, 0.4),
              0 0 60px rgba(220, 130, 54, 0.3);
}

[data-theme="movies"] .confirm-details .conf-code {
  color: var(--primary);
  text-shadow: 0 2px 12px var(--glow-primary);
}

[data-theme="movies"] .confirm-details .conf-confirmed {
  background: rgba(127, 176, 105, 0.15);
  color: var(--success);
  border: 1px solid rgba(127, 176, 105, 0.3);
}

[data-theme="movies"] .confirm-details .conf-simulated {
  background: rgba(220, 130, 54, 0.15);
  color: var(--tertiary);
  border: 1px solid rgba(220, 130, 54, 0.3);
}

/* All seen banner - burnt orange accent */
[data-theme="movies"] .all-seen-banner {
  background: rgba(220, 130, 54, 0.1);
  color: var(--tertiary);
  border: 1px solid rgba(220, 130, 54, 0.3);
  box-shadow: 0 4px 12px rgba(220, 130, 54, 0.2);
}

/* State screens */
[data-theme="movies"] .state h2 {
  font-family: 'Epilogue', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--primary);
  text-shadow: 0 2px 20px var(--glow-primary);
}

[data-theme="movies"] .state .icon {
  filter: drop-shadow(0 4px 16px var(--glow-primary));
}

/* History note - Burnt Orange */
[data-theme="movies"] .history-note {
  color: var(--tertiary);
  text-shadow: 0 2px 8px var(--glow-tertiary);
}

/* Theme toggle */
[data-theme="movies"] .theme-toggle {
  background: rgba(137, 26, 16, 0.2);
  border: 1px solid rgba(232, 74, 63, 0.3);
  color: var(--primary);
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  text-shadow: 0 2px 8px var(--glow-primary);
  box-shadow: 0 4px 12px rgba(137, 26, 16, 0.3);
}

[data-theme="movies"] .theme-toggle:hover {
  background: rgba(137, 26, 16, 0.35);
  box-shadow: 0 6px 20px rgba(137, 26, 16, 0.5);
  transform: translateY(-2px);
}

/* Modal price breakdown */
[data-theme="movies"] .mpb-total {
  color: var(--primary);
  border-top: 2px dashed rgba(113, 66, 54, 0.5);
  text-shadow: 0 2px 12px var(--glow-primary);
}

[data-theme="movies"] .mpb-movie {
  font-family: 'Epilogue', sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Ticket stub perforated lines */
[data-theme="movies"] .confirm-details .conf-price-section {
  border-top: 2px dashed rgba(113, 66, 54, 0.5);
  border-bottom: 2px dashed rgba(113, 66, 54, 0.5);
}

/* Scrollbar - burgundy accent */
[data-theme="movies"] ::-webkit-scrollbar-track {
  background: var(--surface);
}

[data-theme="movies"] ::-webkit-scrollbar-thumb {
  background: rgba(137, 26, 16, 0.5);
  border-radius: 4px;
}

[data-theme="movies"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(137, 26, 16, 0.7);
}

/* Accessibility touch targets */
[data-theme="movies"] button:not(.seat),
[data-theme="movies"] .buy-btn,
[data-theme="movies"] .btn-primary,
[data-theme="movies"] .btn-secondary {
  min-height: 44px;
  min-width: 44px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .theme-toggle {
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    font-size: 11px;
  }
}