/* Dark Theme with Neon Accents */
:root {
  /* Base Colors */
  --color-bg: #0a0a0a;
  --color-bg-elevated: #141414;
  --color-text: #e0e0e0;
  --color-text-muted: #a0a0a0;

  /* Neon Accent Colors */
  --color-primary: #00ff88;
  --color-primary-glow: rgba(0, 255, 136, 0.3);
  --color-secondary: #00d4ff;
  --color-secondary-glow: rgba(0, 212, 255, 0.3);
  --color-accent: #ff00ff;

  /* Semantic Colors */
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #f59e0b;

  /* Borders & Overlays */
  --border-color: rgba(255, 255, 255, 0.1);
  --overlay-color: rgba(0, 0, 0, 0.8);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Primary Elements */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #000;
  font-weight: 700;
  box-shadow: 0 0 20px var(--color-primary-glow);
}




.btn-primary:hover {
  box-shadow: 0 0 30px var(--color-primary-glow);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-primary);
}

.content__ticket:not(:last-child) {
    margin-bottom: 16px;
}

.content__ticket {
    border: 1px solid #e9e9e9;
    border-radius: var(--border-radius);
    padding: 16px;
    transition: .3s ease;
}

.btn-secondary:hover {
  background: rgba(0, 255, 136, 0.1);
  box-shadow: 0 0 20px var(--color-primary-glow);
}

/* Header */
.site-header {
  background: rgba(10, 10, 10, 0.8);
}

.logo {
  color: var(--color-primary);
}

.main-nav a {
  color: var(--color-text);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--color-primary);
}

/* Hero */
.hero {
  background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.05) 0%, transparent 70%);
}

.hero-title {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Add text shadow for better readability over video */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
}

.hero-subtitle {
  /* Ensure subtitle is readable over video */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hero-actions .btn {
  /* Add shadow to buttons for better visibility */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Trust Markers */
.trust-item svg {
  color: var(--color-primary);
}

/* Filters */
.filter-chip.active {
  background: var(--color-primary);
  color: #000;
  border-color: var(--color-primary);
}

/* Table */
.tickets-table {
  background: var(--color-bg-elevated);
}

.tickets-table th {
  background: rgba(0, 255, 136, 0.05);
  color: var(--color-primary);
}

.tickets-table .btn {
  background: var(--color-primary);
  color: #000;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.tickets-table .btn:hover {
  box-shadow: 0 0 15px var(--color-primary-glow);
}

/* Match Badge */
.match-badge {
  background: var(--color-primary);
  color: #000;
}

/* Category Cards */
.category-card.selected {
  border-color: var(--color-primary);
  background: rgba(0, 255, 136, 0.05);
  box-shadow: 0 0 20px var(--color-primary-glow);
}

.category-price {
  color: var(--color-primary);
}

/* Forms */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary-glow);
}

/* Footer */
.footer-col a:hover {
  color: var(--color-primary);
}

.social-links a:hover {
  background: var(--color-primary);
  color: #000;
}

/* Cookie Banner */
.cookie-banner {
  background: rgba(10, 10, 10, 0.98);
  border-top-color: var(--color-primary);
}

/* FAQ */
.faq-item[open] {
  border-color: var(--color-primary);
}

.faq-item summary:hover {
  background: rgba(0, 255, 136, 0.05);
}

/* Links */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-secondary);
}

/* Selection */
::selection {
  background: var(--color-primary);
  color: #000;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}