/* ============================================
   TICKETS PAGE STYLES - FIXED
   Premium dark-mode first design
   ============================================ */

/* ============================================
   DARK THEME ISOLATION
   Force dark background on every layer inside
   the tickets page so body.bg-white can't leak.
   Uses #id selectors for max specificity.
   ============================================ */
#tickets-landing-page {
  background-color: #0a0a0c !important;
  color: rgba(255, 255, 255, 0.95) !important;
  min-height: 100vh !important;
}

#tickets-landing-page .tickets-page {
  background-color: #0a0a0c !important;
}

#tickets-landing-page main {
  background-color: #0a0a0c !important;
}

#tickets-landing-page section {
  background-color: inherit;
}

/* Neutralize any .bg-white that leaks in from global Tailwind */
#tickets-landing-page .bg-white {
  background-color: transparent !important;
}

/* Hide scrollbar - ALL BROWSERS */
.tickets-content-rail .scroll-container,
.tickets-content-rail > div > div {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.tickets-content-rail .scroll-container::-webkit-scrollbar,
.tickets-content-rail > div > div::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Global scrollbar hide utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Tickets Page Base */
.tickets-page {
  --tickets-bg: #0a0a0c;
  --tickets-surface: #141418;
  --tickets-border: rgba(255, 255, 255, 0.05);
  --tickets-border-hover: rgba(255, 255, 255, 0.1);
  --tickets-primary: #2563eb;
  --tickets-accent: #facc15;
  --tickets-text: #ffffff;
  --tickets-text-muted: #9ca3af;
}

/* Hero Section */
.tickets-hero {
  min-height: 420px;
}

@media (min-width: 768px) {
  .tickets-hero {
    min-height: 480px;
  }
}

/* Category Nav */
.tickets-category-nav {
  -webkit-overflow-scrolling: touch;
}

/* Mega Panel Animation */
.tickets-mega-panel {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Content Rail */
.tickets-content-rail {
  position: relative;
}

/* Event Card - FIXED heights */
.tickets-event-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  min-height: 520px;
}

.tickets-event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Line Clamp Utilities */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pulse Animation for Hot Badge */
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Best Availability Badge Glow */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(250, 204, 21, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.8);
  }
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .tickets-hero {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .tickets-hero h1 {
    font-size: 2rem;
  }

  .tickets-category-nav {
    padding-left: 8px;
    padding-right: 8px;
  }

  .tickets-event-card {
    min-width: 300px;
  }
}

/* Focus States for Accessibility */
.tickets-page button:focus-visible,
.tickets-page a:focus-visible,
.tickets-page input:focus-visible {
  outline: 2px solid var(--tickets-primary);
  outline-offset: 2px;
}

/* Smooth Scroll Behavior */
@media (prefers-reduced-motion: no-preference) {
  .tickets-page {
    scroll-behavior: smooth;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .tickets-page {
    --tickets-border: rgba(255, 255, 255, 0.2);
    --tickets-border-hover: rgba(255, 255, 255, 0.4);
  }
}

/* Snap scrolling for carousels */
.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.snap-mandatory {
  scroll-snap-type: x mandatory;
}