/**
 * TixKart dark aurora theme — layout & component overrides.
 * All colours, font sizes, and spacing tokens live in tokens.css (section 12).
 */
@import url('./tokens.css');

html:has(body.tk-dark),
html:has(body.hp-preview) {
  background: var(--dark-bg-deep) !important;
  background-image: none !important;
  scroll-behavior: smooth;
}

:is(body.tk-dark, body.hp-preview) {
  color: var(--text-primary);
  background: transparent !important;
}

:is(body.tk-dark, body.hp-preview) .bg-orbs {
  display: none !important;
}

/* ── Fixed aurora (never scrolls) ── */
:is(body.tk-dark, body.hp-preview) .hp-aurora {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(
    ellipse 100% 70% at 50% -5%,
    var(--dark-aurora-purple) 0%,
    var(--dark-bg) 50%,
    var(--dark-bg-deep) 100%
  );
}

:is(body.tk-dark, body.hp-preview) .hp-aurora-mesh {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse 50% 40% at 18% 28%, rgba(214, 41, 214, 0.6), transparent 58%),
    radial-gradient(ellipse 45% 35% at 78% 22%, rgba(139, 92, 246, 0.5), transparent 55%),
    radial-gradient(ellipse 40% 45% at 62% 68%, rgba(34, 211, 238, 0.32), transparent 52%),
    radial-gradient(ellipse 35% 30% at 28% 72%, rgba(163, 230, 53, 0.2), transparent 50%);
  animation: tk-aurora-drift 22s ease-in-out infinite;
}

:is(body.tk-dark, body.hp-preview) .hp-aurora-streak {
  position: absolute;
  top: 10%;
  left: -20%;
  width: 140%;
  height: 50%;
  background: linear-gradient(
    115deg,
    transparent 5%,
    rgba(214, 41, 214, 0.5) 25%,
    rgba(34, 211, 238, 0.35) 42%,
    rgba(251, 191, 36, 0.2) 52%,
    transparent 85%
  );
  transform: rotate(-7deg);
  filter: blur(32px);
  animation: tk-streak-pulse 12s ease-in-out infinite;
}

:is(body.tk-dark, body.hp-preview) .hp-aurora-streak--2 {
  top: 26%;
  height: 34%;
  opacity: 0.9;
  transform: rotate(-4deg);
  animation-delay: -5s;
  background: linear-gradient(
    120deg,
    transparent 10%,
    rgba(124, 58, 237, 0.4) 40%,
    rgba(214, 41, 214, 0.3) 55%,
    transparent 78%
  );
}

:is(body.tk-dark, body.hp-preview) .hp-aurora-beam {
  position: absolute;
  top: 5%;
  right: -10%;
  width: 60%;
  height: 70%;
  background: conic-gradient(
    from 200deg,
    transparent,
    rgba(214, 41, 214, 0.2),
    rgba(6, 182, 212, 0.15),
    transparent
  );
  filter: blur(48px);
  animation: tk-beam-sweep 18s ease-in-out infinite;
}

:is(body.tk-dark, body.hp-preview) .hp-aurora-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

:is(body.tk-dark, body.hp-preview) .hp-holo-grid {
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(rgba(214, 41, 214, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 41, 214, 0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  transform: rotate(8deg) scale(1.35);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 30%, black 15%, transparent 72%);
}

:is(body.tk-dark, body.hp-preview) .hp-holo-prism {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    transparent 25%,
    rgba(255, 0, 255, 0.06) 42%,
    rgba(0, 255, 255, 0.04) 52%,
    transparent 72%
  );
  mix-blend-mode: screen;
}

:is(body.tk-dark, body.hp-preview) .hp-holo-scan {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(255, 255, 255, 0.018) 2px,
    rgba(255, 255, 255, 0.018) 3px
  );
  transform: translate3d(0, var(--holo-scan-y, 0px), 0);
  mix-blend-mode: overlay;
}

:is(body.tk-dark, body.hp-preview) .hp-scroll-surface {
  position: relative;
  z-index: 1;
}

@keyframes tk-aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(1.5%, -1%) scale(1.03); }
}
@keyframes tk-streak-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
@keyframes tk-beam-sweep {
  0%, 100% { transform: rotate(0deg); opacity: 0.75; }
  50% { transform: rotate(4deg); opacity: 1; }
}

/* ── Logo ── */
:is(body.tk-dark, body.hp-preview) .brand-logo {
  filter: var(--logo-filter);
}

:is(body.tk-dark, body.hp-preview) .brand-tagline {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Header & nav ── */
:is(body.tk-dark, body.hp-preview) .site-header {
  top: env(safe-area-inset-top, 0);
  z-index: 200;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: var(--header-border-radius);
  border-left: none;
  border-right: none;
  border-top: none;
  background: var(--header-dark-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--header-dark-border);
}

:is(body.tk-dark, body.hp-preview) .nav-links {
  color: var(--text-primary);
}

:is(body.tk-dark, body.hp-preview) .nav-links a:hover {
  color: var(--nav-link-hover);
}

:is(body.tk-dark, body.hp-preview) .nav-ghost {
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

:is(body.tk-dark, body.hp-preview) .nav-btn {
  background: var(--dark-gradient-btn) !important;
  color: var(--color-white) !important;
  border: none !important;
  box-shadow: 0 0 24px var(--dark-neon-glow);
}

:is(body.tk-dark, body.hp-preview) .nav-menu-bar {
  background: var(--nav-menu-dark-bg);
  border-top-color: var(--header-dark-border);
}

:is(body.tk-dark, body.hp-preview) .nav-menu-list a {
  color: var(--text-muted);
}

:is(body.tk-dark, body.hp-preview) .nav-menu-list a:hover,
:is(body.tk-dark, body.hp-preview) .nav-menu-list a.active {
  color: var(--dark-accent-soft);
  background: rgba(214, 41, 214, 0.12);
}

:is(body.tk-dark, body.hp-preview) .nav-toggle-bar {
  background: var(--color-white);
}

/* ── Typography ── */
:is(body.tk-dark, body.hp-preview) .section-title,
:is(body.tk-dark, body.hp-preview) .center-title,
:is(body.tk-dark, body.hp-preview) .company-hero h1,
:is(body.tk-dark, body.hp-preview) .legal-doc h1,
:is(body.tk-dark, body.hp-preview) .legal-doc h2,
:is(body.tk-dark, body.hp-preview) .legal-doc h3,
:is(body.tk-dark, body.hp-preview) .hero-copy h1 {
  color: var(--text-heading);
}

:is(body.tk-dark, body.hp-preview) .section-sub,
:is(body.tk-dark, body.hp-preview) .center-sub,
:is(body.tk-dark, body.hp-preview) .company-lead,
:is(body.tk-dark, body.hp-preview) .legal-doc,
:is(body.tk-dark, body.hp-preview) .hero-lead {
  color: var(--text-muted);
}

:is(body.tk-dark, body.hp-preview) .gradient-text {
  background: var(--dark-gradient-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Search ── */
:is(body.tk-dark, body.hp-preview) .search-box {
  background: var(--search-dark-bg) !important;
  border-color: var(--search-dark-border) !important;
  box-shadow: var(--search-dark-glow);
}

:is(body.tk-dark, body.hp-preview) .search-box input {
  color: var(--color-white);
}

:is(body.tk-dark, body.hp-preview) .search-box input::placeholder {
  color: var(--text-faint);
}

:is(body.tk-dark, body.hp-preview) .search-btn {
  background: var(--dark-gradient-btn);
  color: var(--color-white);
}

:is(body.tk-dark, body.hp-preview) .search-hint {
  color: var(--text-muted);
}

/* ── Cards & sections ── */
:is(body.tk-dark, body.hp-preview) .event-card-v2,
:is(body.tk-dark, body.hp-preview) .browse-tile,
:is(body.tk-dark, body.hp-preview) .step-card,
:is(body.tk-dark, body.hp-preview) .card,
:is(body.tk-dark, body.hp-preview) .testimonial,
:is(body.tk-dark, body.hp-preview) .company-card,
:is(body.tk-dark, body.hp-preview) .contact-card {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

:is(body.tk-dark, body.hp-preview) .event-card-body h3,
:is(body.tk-dark, body.hp-preview) .company-card h3 {
  color: var(--text-primary);
}

:is(body.tk-dark, body.hp-preview) .event-venue,
:is(body.tk-dark, body.hp-preview) .event-date,
:is(body.tk-dark, body.hp-preview) .event-desc {
  color: var(--text-muted);
}

:is(body.tk-dark, body.hp-preview) .price {
  color: var(--dark-accent-soft);
}

/* ── Hero extras ── */
:is(body.tk-dark, body.hp-preview) .hero-badge {
  color: var(--text-secondary);
}

:is(body.tk-dark, body.hp-preview) .stats-bar {
  background: var(--glass);
  border-color: var(--glass-border);
  backdrop-filter: blur(12px);
}

:is(body.tk-dark, body.hp-preview) .stat span {
  color: var(--text-muted);
}

:is(body.tk-dark, body.hp-preview) .cat-pill {
  background: var(--surface-muted);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

/* ── Company / About / Contact ── */
:is(body.tk-dark, body.hp-preview) .company-eyebrow,
:is(body.tk-dark, body.hp-preview) .legal-eyebrow {
  color: var(--dark-accent-soft);
}

:is(body.tk-dark, body.hp-preview) .company-lead a {
  color: var(--dark-accent-soft);
}

:is(body.tk-dark, body.hp-preview) .company-stat strong {
  color: var(--color-white);
}

:is(body.tk-dark, body.hp-preview) .company-stat span {
  color: var(--text-muted);
}

:is(body.tk-dark, body.hp-preview) .contact-form label {
  color: var(--text-secondary);
}

:is(body.tk-dark, body.hp-preview) .contact-form input,
:is(body.tk-dark, body.hp-preview) .contact-form textarea,
:is(body.tk-dark, body.hp-preview) .contact-form select {
  background: var(--panel-bg-input);
  border-color: var(--glass-border);
  color: var(--color-white);
}

:is(body.tk-dark, body.hp-preview) .contact-form input::placeholder,
:is(body.tk-dark, body.hp-preview) .contact-form textarea::placeholder {
  color: var(--text-faint);
}

/* ── Legal ── */
:is(body.tk-dark, body.hp-preview) .legal-doc {
  background: var(--glass);
  border-color: var(--glass-border);
  color: var(--text-muted);
  backdrop-filter: blur(16px);
}

:is(body.tk-dark, body.hp-preview) .legal-doc a {
  color: var(--dark-accent-soft);
}

:is(body.tk-dark, body.hp-preview) .legal-hero {
  border-bottom-color: var(--header-dark-border);
}

/* ── Checkout ── */
body.tk-dark.checkout-page {
  background: transparent !important;
  color: var(--text-primary);
}

body.tk-dark.checkout-page .checkout-header {
  background: var(--header-dark-bg);
  border-bottom-color: var(--header-dark-border);
  backdrop-filter: blur(16px);
}

body.tk-dark.checkout-page .checkout-panel,
body.tk-dark.checkout-page .checkout-event {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  backdrop-filter: blur(12px);
}

body.tk-dark.checkout-page .checkout-form input {
  background: var(--panel-bg-input);
  border-color: var(--glass-border);
  color: var(--color-white);
}

body.tk-dark.checkout-page .checkout-form label {
  color: var(--text-secondary);
}

body.tk-dark.checkout-page .checkout-meta {
  color: var(--text-muted);
}

body.tk-dark.checkout-page #event-title {
  color: var(--color-white);
}

body.tk-dark.checkout-page .checkout-pay-btn,
body.tk-dark.checkout-page .btn-magenta {
  background: var(--dark-gradient-btn);
  box-shadow: 0 0 20px var(--dark-neon-glow);
}

/* ── Footer ── */
:is(body.tk-dark, body.hp-preview) .footer {
  background: var(--footer-dark-bg);
  border-top: 1px solid var(--footer-dark-border);
  color: var(--text-muted);
}

:is(body.tk-dark, body.hp-preview) .footer-col strong {
  color: var(--color-white);
}

:is(body.tk-dark, body.hp-preview) .footer-col a:hover,
:is(body.tk-dark, body.hp-preview) .footer-legal-inline a:hover {
  color: var(--dark-accent-soft);
}

:is(body.tk-dark, body.hp-preview) .footer-bottom {
  border-top-color: var(--footer-dark-border);
}

/* ── Dev preview banner ── */
body.hp-preview .dev-preview-banner {
  position: relative;
  z-index: 301;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.45rem 1rem;
  font-size: var(--dev-banner-font-size);
  font-weight: 600;
  color: var(--dev-banner-text);
  background: var(--dev-banner-bg);
  border-bottom: 1px solid var(--dev-banner-border);
  backdrop-filter: blur(12px);
}

body.hp-preview .dev-preview-banner a {
  color: var(--dev-banner-link);
  text-decoration: underline;
}

/* Subtle card float on scroll (Y only — no Z to avoid bleeding above header) */
:is(body.tk-dark, body.hp-preview) .event-card-v2,
:is(body.tk-dark, body.hp-preview) .browse-tile,
:is(body.tk-dark, body.hp-preview) .step-card,
:is(body.tk-dark, body.hp-preview) .card,
:is(body.tk-dark, body.hp-preview) .testimonial,
:is(body.tk-dark, body.hp-preview) .company-card,
:is(body.tk-dark, body.hp-preview) .contact-card,
:is(body.tk-dark, body.hp-preview) .legal-doc {
  transform: translateY(var(--card-float, 0px));
}

/* ── Cross-screen consistency (company, legal, checkout, tickets, modal) ── */
:is(body.tk-dark, body.hp-preview) .company-panel,
:is(body.tk-dark, body.hp-preview) .about-card,
:is(body.tk-dark, body.hp-preview) .faq-item,
:is(body.tk-dark, body.hp-preview) .contact-form-panel {
  background: var(--glass);
  border-color: var(--glass-border);
  color: var(--text-secondary);
}

:is(body.tk-dark, body.hp-preview) .company-panel h2,
:is(body.tk-dark, body.hp-preview) .company-panel h3,
:is(body.tk-dark, body.hp-preview) .contact-section-title,
:is(body.tk-dark, body.hp-preview) .contact-card h3,
:is(body.tk-dark, body.hp-preview) .about-value strong {
  color: var(--text-heading);
}

:is(body.tk-dark, body.hp-preview) .company-panel a,
:is(body.tk-dark, body.hp-preview) .company-meta a,
:is(body.tk-dark, body.hp-preview) .contact-card a,
:is(body.tk-dark, body.hp-preview) .map-link,
:is(body.tk-dark, body.hp-preview) .faq-item div a {
  color: var(--link-color);
}

:is(body.tk-dark, body.hp-preview) .company-panel a:hover,
:is(body.tk-dark, body.hp-preview) .company-meta a:hover,
:is(body.tk-dark, body.hp-preview) .contact-card a:hover,
:is(body.tk-dark, body.hp-preview) .map-link:hover,
:is(body.tk-dark, body.hp-preview) .faq-item div a:hover {
  color: var(--link-hover);
}

:is(body.tk-dark, body.hp-preview) .about-card strong {
  color: var(--accent-stat);
}

:is(body.tk-dark, body.hp-preview) .about-value {
  background: var(--note-bg);
  border-color: var(--note-border);
}

:is(body.tk-dark, body.hp-preview) .form-field label,
:is(body.tk-dark, body.hp-preview) .form-field label span {
  color: var(--text-secondary);
}

:is(body.tk-dark, body.hp-preview) .form-field label span {
  color: var(--accent-eyebrow);
}

:is(body.tk-dark, body.hp-preview) .form-field input,
:is(body.tk-dark, body.hp-preview) .form-field select,
:is(body.tk-dark, body.hp-preview) .form-field textarea {
  background: var(--panel-bg-input);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

:is(body.tk-dark, body.hp-preview) .form-success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

:is(body.tk-dark, body.hp-preview) .legal-note {
  background: var(--note-bg);
  border-left-color: var(--note-border);
}

:is(body.tk-dark, body.hp-preview) .legal-contact-panel {
  background: var(--highlight-panel-bg);
  border-color: var(--highlight-panel-border);
}

:is(body.tk-dark, body.hp-preview) .legal-doc code {
  background: var(--surface-muted);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

:is(body.tk-dark, body.hp-preview) .company-nav-links a.active,
:is(body.tk-dark, body.hp-preview) .legal-nav-links a.active {
  color: var(--accent-eyebrow);
}

:is(body.tk-dark, body.hp-preview) .btn-outline {
  background: transparent;
  border-color: var(--btn-outline-color);
  color: var(--btn-outline-color);
}

:is(body.tk-dark, body.hp-preview) .stat strong {
  color: var(--color-white);
}

:is(body.tk-dark, body.hp-preview) .event-preview-backdrop {
  background: rgba(7, 8, 15, 0.72);
}

:is(body.tk-dark, body.hp-preview) .event-preview-dialog {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  color: var(--text-primary);
}

:is(body.tk-dark, body.hp-preview) .event-preview-title,
:is(body.tk-dark, body.hp-preview) .preview-value {
  color: var(--text-heading);
}

:is(body.tk-dark, body.hp-preview) .event-preview-meta dt,
:is(body.tk-dark, body.hp-preview) .preview-key {
  color: var(--text-muted);
}

:is(body.tk-dark, body.hp-preview) .event-preview-close {
  background: var(--surface-muted);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

:is(body.tk-dark, body.hp-preview) .event-preview-close:hover {
  background: rgba(214, 41, 214, 0.35);
}

:is(body.tk-dark, body.hp-preview) .preview-totals {
  background: var(--totals-bg);
}

:is(body.tk-dark, body.hp-preview) .preview-booking-form input,
:is(body.tk-dark, body.hp-preview) .booking-ticket-line input {
  background: var(--panel-bg-input);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

body.tk-dark.checkout-page,
body.tk-dark .checkout-page {
  background: transparent !important;
}

body.tk-dark.checkout-page .checkout-header,
body.tk-dark .checkout-header {
  background: var(--header-dark-bg);
  border-bottom-color: var(--header-dark-border);
}

body.tk-dark.checkout-page .checkout-panel,
body.tk-dark.checkout-page .success-card,
body.tk-dark .ticket-card {
  background: var(--glass);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

body.tk-dark.checkout-page .ticket-line input[type='number'],
body.tk-dark.checkout-page .checkout-form input {
  background: var(--panel-bg-input);
  border-color: var(--glass-border);
  color: var(--text-primary);
}

body.tk-dark.checkout-page .checkout-pay-btn {
  background: var(--btn-primary-gradient);
  box-shadow: var(--btn-primary-shadow);
}

body.tk-dark .tickets-header h1 {
  color: var(--text-heading);
}

body.tk-dark.search-page {
  background: transparent !important;
}

body.tk-dark.search-page .search-topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0);
  z-index: 200;
}

/* Mobile nav drawer */
@media (max-width: 900px) {
  :is(body.tk-dark, body.hp-preview) .site-header {
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
  }

  :is(body.tk-dark, body.hp-preview) .nav-links.is-open {
    background: rgba(11, 14, 20, 0.98);
    border-color: var(--header-dark-border);
  }

  :is(body.tk-dark, body.hp-preview) .brand-tagline {
    display: none;
  }
}