/* ═══════════════════════════════════════════════════════
   NATIER TIX — tix.css
   Platform-wide overrides, responsive fixes, mobile-first
   polish for the public ticketing platform.
   Works on top of main.css + home.css
═══════════════════════════════════════════════════════ */

/* ── Page loader brand update ── */
.pl-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.pl-logo span { color: var(--lime); }

/* ════════════════════════════════
   NAV — gold accent on Tix brand
════════════════════════════════ */
.nav-logo span { color: var(--lime); }
.logo-blip { background: var(--lime); animation: blip-gold 2s ease-in-out infinite; }
@keyframes blip-gold {
  0%,100% { box-shadow: 0 0 0 0 rgba(231,154,31,.5); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}
.nav-cta {
  background: var(--lime) !important;
  color: var(--char, #0e0c09) !important;
}
.nav-cta:hover {
  background: var(--gold-lt, #f0c040) !important;
  box-shadow: 0 8px 24px var(--gold-glow, rgba(231,154,31,.35)) !important;
}
/* Nav sign-in link */
.nav-link-auth {
  font-family: var(--ff-mono);
  font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--white-sub); padding: .5rem .8rem;
  border-radius: var(--r); transition: color .2s;
}
.nav-link-auth:hover { color: var(--lime); }

/* Mobile menu gold hover */
.mob-menu a:hover { color: var(--lime); }

/* ════════════════════════════════
   HERO — bg text update
════════════════════════════════ */
.hbt-line1, .hbt-line2 {
  -webkit-text-stroke: 1.5px rgba(231,154,31,.18);
}
.hbt-line2 { -webkit-text-stroke-color: rgba(231,154,31,.11); }

/* ════════════════════════════════
   FEATURED CARD — flyer image fill
════════════════════════════════ */
.hp-feat-card { position: relative; }

/* Flyer image hero card */
.feat-flyer-card {
  background: var(--char);
  border: 1px solid rgba(231,154,31,.25);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  position: relative;
}
.feat-flyer-card:hover {
  border-color: rgba(231,154,31,.55);
  box-shadow: 0 24px 70px rgba(231,154,31,.14);
  transform: translateY(-4px);
}
.feat-flyer-img {
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover; display: block;
  transition: transform .4s;
}
.feat-flyer-card:hover .feat-flyer-img { transform: scale(1.03); }
.feat-flyer-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(14,12,9,.96) 0%, rgba(14,12,9,.5) 55%, transparent 100%);
  padding: 1.4rem;
}
.feat-flyer-name {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: 1.7rem; font-weight: 900; text-transform: uppercase;
  line-height: 1; color: var(--white); margin-bottom: .3rem;
}
.feat-flyer-sub {
  font-size: .73rem; color: var(--white-sub); margin-bottom: .9rem;
}
.feat-flyer-foot {
  display: flex; align-items: center;
  justify-content: space-between; gap: .8rem;
}
.feat-flyer-price {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: 2rem; font-weight: 900; color: var(--lime);
  line-height: 1;
}
.feat-flyer-price small {
  font-size: .8rem; color: var(--white-sub);
  font-family: var(--ff-body); font-weight: 400;
}
.feat-flyer-badge {
  position: absolute; top: .9rem; left: .9rem;
  font-family: var(--ff-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--lime); color: var(--char);
  padding: .28rem .65rem; border-radius: 4px;
}

/* Flyer placeholder (no image) */
.feat-ph-tix {
  width: 100%; aspect-ratio: 4/5;
  background: linear-gradient(135deg, rgba(231,154,31,.08) 0%, rgba(14,12,9,1) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem;
}
.feat-ph-tix-letter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 8rem; font-weight: 900;
  color: rgba(231,154,31,.15); line-height: 1;
}

/* ════════════════════════════════
   EVENT GRID CARDS — gold theme
════════════════════════════════ */
.ev-card:hover {
  border-color: rgba(231,154,31,.35) !important;
  box-shadow: 0 20px 50px rgba(231,154,31,.08) !important;
}
.ev-card .btn-ev {
  background: var(--lime) !important;
  color: var(--char) !important;
}
.ev-card .btn-ev:hover { background: var(--gold-lt) !important; }
.ev-card .ev-date { color: var(--lime) !important; }
.ev-card .ev-price { color: var(--lime) !important; }

/* Theme tag on cards */
.ev-theme-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--ff-mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime);
  background: rgba(231,154,31,.08);
  border: 1px solid rgba(231,154,31,.18);
  padding: .2rem .55rem; border-radius: 4px;
  margin-bottom: .55rem; width: fit-content;
}

/* Attractions list on card */
.ev-attractions {
  font-size: .72rem; color: var(--white-dim);
  margin-bottom: .8rem; line-height: 1.5;
}
.ev-attractions span {
  display: inline-block;
  margin-right: .5rem;
}

/* ════════════════════════════════
   CHECKOUT MODAL
════════════════════════════════ */
.modal { border-color: rgba(231,154,31,.18) !important; }
.m-input:focus {
  border-color: var(--lime) !important;
  box-shadow: 0 0 0 3px rgba(231,154,31,.12) !important;
}
.m-price { color: var(--lime) !important; }
#mPayBtn {
  background: var(--lime) !important; color: var(--char) !important;
}
#mPayBtn:hover { background: var(--gold-lt) !important; }

/* Ticket qty row */
.m-qty-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(231,154,31,.06); border: 1px solid rgba(231,154,31,.15);
  border-radius: var(--r-lg); padding: 1rem 1.2rem; margin-bottom: 1.3rem;
}
.m-qty-info-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--white-sub); margin-bottom: .15rem;
}
.m-qty-info-sub { font-size: .72rem; color: var(--white-dim); }

/* ════════════════════════════════
   SUCCESS TICKET MODAL — gold
════════════════════════════════ */
.tk-qr { border-color: rgba(231,154,31,.3) !important; }
.tk-code { color: var(--lime) !important; background: rgba(231,154,31,.1) !important; }
#tkQrImg { border-radius: 4px; }

/* ════════════════════════════════
   ACCOUNT BANNER
════════════════════════════════ */
.acct-banner { border-color: rgba(231,154,31,.22) !important; }

/* ════════════════════════════════
   STRIPE MARQUEE
════════════════════════════════ */
.hp-stripe { background: var(--lime); }
.hp-stripe-inner span { color: var(--char); }

/* ════════════════════════════════
   FILTER BUTTONS — gold active
════════════════════════════════ */
.f-btn.active,
.f-btn:hover {
  background: var(--lime) !important;
  color: var(--char) !important;
  border-color: var(--lime) !important;
}

/* ════════════════════════════════
   PAGE LOADER
════════════════════════════════ */
.page-loading {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--char);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s .1s, visibility .5s .1s;
}
.page-loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loading-inner { text-align: center; }
.pl-bar {
  width: 160px; height: 2px; background: rgba(255,255,255,.07);
  border-radius: 2px; margin: 1.2rem auto 0; overflow: hidden;
  position: relative;
}
.pl-bar::after {
  content: ''; position: absolute; left: -40%;
  width: 40%; height: 100%;
  background: var(--lime);
  animation: plBar 1.2s ease-in-out infinite;
}
@keyframes plBar {
  0%   { left: -40%; }
  100% { left: 110%; }
}

/* ════════════════════════════════
   REVEAL ANIMATION
════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════
   RESPONSIVE — MOBILE FIRST
════════════════════════════════ */

/* ── iPhone SE / very small phones (< 390px) ── */
@media (max-width: 389px) {
  .hp-t-big { font-size: clamp(3.5rem, 18vw, 5.5rem) !important; }
  .hp-stub { flex-direction: column; }
  .hp-stub-right { width: 100%; flex-direction: row; gap: 1rem; padding: .8rem 1rem; }
  .hp-actions { flex-direction: column; }
  .hp-actions .hp-btn-primary,
  .hp-actions .hp-btn-outline { width: 100%; text-align: center; }
  .hp-stats { gap: .8rem; }
  .hp-stat-n { font-size: 1.4rem; }
  .ev-grid { grid-template-columns: 1fr; }
  .modal-body { padding: 1.2rem; }
  .m-event-title { font-size: 1.4rem; }
  .tk-info { grid-template-columns: 1fr; }
}

/* ── Standard phones (390–600px) ── */
@media (max-width: 600px) {
  /* Hero */
  .hp-inner { padding-top: 2rem; padding-bottom: 1.5rem; gap: 1.5rem; }
  .hp-title  { margin-bottom: 1.2rem; }
  .hp-t-big  { font-size: clamp(4rem, 16vw, 6.5rem); }
  .hp-stub   { max-width: 100%; }
  .hp-actions { flex-wrap: wrap; }
  .hp-actions .hp-btn-primary,
  .hp-actions .hp-btn-outline { flex: 1 1 140px; text-align: center; }
  .hp-stats  { gap: 1rem; }
  .hp-stat-n { font-size: 1.6rem; }

  /* Right column (shown above on mobile via order:-1) */
  .hp-right { flex-direction: row; align-items: center; justify-content: center; gap: 1rem; }
  .hp-spin-badge { width: 90px; height: 90px; }
  .hp-feat-card  { max-width: 200px; }
  .feat-flyer-name { font-size: 1.2rem; }
  .feat-flyer-price { font-size: 1.5rem; }

  /* Sections */
  .ev-section { padding: 4rem 0; }
  .ev-hd { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .filter-row { margin-bottom: 1.5rem; }
  .ev-grid { grid-template-columns: 1fr; gap: 1rem; }
  .ev-card-skeleton { height: 260px; }

  /* Account banner */
  .acct-banner { padding: 2rem 1.5rem; }
  .acct-banner-title { font-size: clamp(1.6rem,7vw,2.5rem); }

  /* Book section */
  .book-section { padding: 4rem 0; }
  .book-inner { flex-direction: column; gap: 1.5rem; }
  .book-inner .hp-btn-primary { width: 100%; text-align: center; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .foot-bottom { flex-direction: column; gap: .3rem; }

  /* Modals */
  .modal { border-radius: 16px; }
  .modal-body { padding: 1.5rem; }
  .m-event-title { font-size: 1.5rem; }
  .m-price { font-size: 1.8rem; }
  .tk-qr { width: 140px; height: 140px; }
  .tk-event { font-size: 1.4rem; }
  .tk-info { grid-template-columns: 1fr 1fr; }
}

/* ── Tablets (601–900px) ── */
@media (min-width: 601px) and (max-width: 900px) {
  .hp-t-big { font-size: clamp(5rem, 13vw, 7.5rem); }
  .hp-right { flex-direction: row; gap: 2rem; align-items: flex-start; }
  .hp-spin-badge { width: 110px; height: 110px; }
  .hp-feat-card  { max-width: 260px; flex: 1; }
  .ev-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Large tablet / small desktop (901–1100px) ── */
@media (min-width: 901px) and (max-width: 1100px) {
  .hp-inner { gap: 2rem; }
  .hp-feat-card { max-width: 300px; }
  .ev-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Wide desktop (1400px+) ── */
@media (min-width: 1400px) {
  .container { max-width: 1360px; }
  .ev-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Modal — always centered, safe on all screen sizes ── */
.modal-overlay {
  padding: 1rem;
  align-items: flex-start;
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
  overflow-y: auto;
}
@media (min-height: 700px) {
  .modal-overlay { align-items: center; }
}
.modal {
  margin: auto;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

/* Safe area support for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
  #nav {
    padding-left: max(2.5rem, env(safe-area-inset-left));
    padding-right: max(2.5rem, env(safe-area-inset-right));
  }
}

/* ── Smooth scroll everywhere ── */
html { scroll-behavior: smooth; }

/* ── Focus rings for accessibility ── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Tap highlight off on mobile ── */
* { -webkit-tap-highlight-color: transparent; }

/* ════════════════════════════════
   HERO BG TEXT — responsive clamp
════════════════════════════════ */
@media (max-width: 600px) {
  .hbt-line1, .hbt-line2 {
    font-size: clamp(22vw, 28vw, 120px);
  }
}

/* ════════════════════════════════
   EVENT SECTION HEADING — mobile
════════════════════════════════ */
@media (max-width: 600px) {
  .ev-hd-title { font-size: clamp(2rem, 10vw, 3.5rem); }
  .acct-banner-title { font-size: clamp(1.5rem, 7vw, 2.8rem); }
  .ev-hd-title em, .acct-banner-title em { color: var(--lime); }
}

/* ════════════════════════════════
   STUB RESPONSIVE
════════════════════════════════ */
@media (max-width: 480px) {
  .hp-stub { flex-wrap: wrap; }
  .hp-stub-right {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.2rem;
  }
  .hp-stub-tear { display: none; }
}

/* ════════════════════════════════
   HERO BACKGROUND SLIDESHOW
   No dots. No arrows. Pure crossfade.
════════════════════════════════ */
.hp-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  z-index: 0;
  transform: scale(1);
  animation: none;
}
.hp-slide.active {
  opacity: 1;
}

/* Subtle Ken Burns on active slide */
.hp-slide.active {
  animation: kenburns 9s ease-in-out forwards;
}
@keyframes kenburns {
  0%   { transform: scale(1);    background-position: center center; }
  100% { transform: scale(1.06); background-position: center 55%; }
}

/* Dark overlay — keeps text readable on any image */
.hp-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,  rgba(14,12,9,.82) 0%, rgba(14,12,9,.45) 55%, rgba(14,12,9,.25) 100%),
    linear-gradient(to bottom, rgba(14,12,9,.35) 0%, rgba(14,12,9,.1) 40%, rgba(14,12,9,.75) 100%);
}

/* Noise grain on top */
.hp-bg-noise {
  position: absolute; inset: 0; z-index: 2;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Gold spotlight pulse on top */
.hp-spot {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,154,31,.12) 0%, transparent 70%);
  top: -100px; right: -100px;
  z-index: 2;
  animation: spotPulse 6s ease-in-out infinite;
  pointer-events: none;
}

/* Desktop size fix — constrain hero content scale */
@media (min-width: 1200px) {
  .hp-inner {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }
  .hp-t-big {
    font-size: clamp(5rem, 9vw, 8rem) !important;
  }
  .hp-stub {
    max-width: 420px;
  }
  .hp-feat-card {
    max-width: 310px;
  }
  .hp-spin-badge {
    width: 120px;
    height: 120px;
  }
}
@media (min-width: 1440px) {
  .hp-t-big {
    font-size: clamp(5rem, 8vw, 7.5rem) !important;
  }
  .hp-inner {
    padding-top: 2rem;
  }
}

/* ════════════════════════════════
   LOGO GRADIENT ACCENT
   Gold → Red-orange (from DJ NYZEKID logo)
════════════════════════════════ */
:root {
  --logo-grad: linear-gradient(90deg, #e79a1f 0%, #d45a18 50%, #b03910 100%);
  --logo-grad-glow: rgba(231,154,31,.22);
  --navy: #040323;
  --navy2: #080620;
}

/* Apply logo gradient to key accent elements */
.nav-cta,
.hp-btn-primary,
.btn-primary,
#mPayBtn {
  background: var(--logo-grad) !important;
  color: #fff !important;
  border: none !important;
}
.nav-cta:hover,
.hp-btn-primary:hover,
.btn-primary:hover,
#mPayBtn:hover {
  background: linear-gradient(90deg, #f0b535 0%, #e06820 50%, #c04010 100%) !important;
  box-shadow: 0 8px 28px rgba(176,57,16,.35) !important;
}

/* Gold stripe — logo gradient */
.hp-stripe { background: var(--logo-grad) !important; }
.hp-stripe-inner span { color: #fff !important; }

/* Spin badge */
.hp-spin-badge svg circle { fill: #e79a1f; }

/* Active filter button */
.f-btn.active, .f-btn:hover {
  background: var(--logo-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Auth tab active */
.auth-tab.active {
  background: var(--logo-grad) !important;
  color: #fff !important;
}

/* Dash tab active */
.dash-tab.active {
  color: var(--lime) !important;
  border-bottom-color: var(--lime) !important;
}

/* Ticket code chip */
.tix-code { color: var(--lime) !important; background: var(--lime-dim) !important; }

/* Stat card hover */
.stat-card:hover { border-color: rgba(231,154,31,.28) !important; }

/* User avatar */
.nav-user-avatar { background: var(--logo-grad) !important; color: #fff !important; }
.nav-user-btn { background: rgba(231,154,31,.08) !important; border-color: rgba(231,154,31,.18) !important; }
.nav-user-btn:hover { background: rgba(231,154,31,.14) !important; border-color: rgba(231,154,31,.3) !important; }

/* ════════════════════════════════
   LIGHT / DARK THEME TOGGLE
════════════════════════════════ */

/* ── Toggle button ── */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 8000;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(4,3,35,.75);
  border: 1px solid rgba(231,154,31,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .25s, background .25s, box-shadow .25s, transform .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.theme-toggle:hover {
  border-color: rgba(231,154,31,.6);
  box-shadow: 0 6px 24px rgba(231,154,31,.2);
  transform: scale(1.08);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: opacity .25s, transform .3s;
  position: absolute;
}
/* Sun icon — shown in dark mode (click to go light) */
.theme-toggle .icon-sun {
  color: #e79a1f;
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
/* Moon icon — shown in light mode (click to go dark) */
.theme-toggle .icon-moon {
  color: #a0a0c0;
  opacity: 0;
  transform: rotate(-30deg) scale(.7);
}

/* When light mode is active — swap icons */
[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(30deg) scale(.7);
}
[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #040323;
}
[data-theme="light"] .theme-toggle {
  background: rgba(255,255,255,.85);
  border-color: rgba(4,3,35,.2);
}

/* ── LIGHT MODE overrides ── */
[data-theme="light"] {
  --black:    #f5f4ff;
  --black2:   #eceaf8;
  --black3:   #e2e0f4;
  --black4:   #d8d6ee;
  --black5:   #ccc9e4;
  --white:    #0d0b2a;
  --white-sub:#3a3860;
  --white-dim:#6a68a0;
  --glass-bg: rgba(245,244,255,0.75);
  --glass-border: rgba(231,154,31,0.18);
}

[data-theme="light"] body {
  background: #f0eeff;
  color: #0d0b2a;
}

[data-theme="light"] #nav {
  background: rgba(240,238,255,.88);
  border-bottom-color: rgba(4,3,35,.1);
}

[data-theme="light"] .mob-menu {
  background: #f0eeff;
}

[data-theme="light"] .hero-poster {
  background: #f0eeff;
}

[data-theme="light"] .hp-bg-overlay {
  background:
    linear-gradient(to right, rgba(240,238,255,.88) 0%, rgba(240,238,255,.55) 55%, rgba(240,238,255,.25) 100%),
    linear-gradient(to bottom, rgba(240,238,255,.4) 0%, rgba(240,238,255,.1) 40%, rgba(240,238,255,.8) 100%);
}

[data-theme="light"] .hp-bg-text {
  -webkit-text-stroke-color: rgba(4,3,35,.07) !important;
}

[data-theme="light"] .hbt-line1,
[data-theme="light"] .hbt-line2 {
  -webkit-text-stroke: 1.5px rgba(4,3,35,.08) !important;
}

[data-theme="light"] .hp-eyebrow span { color: #3a3860; }
[data-theme="light"] .hp-eye-dot { background: #e79a1f; }

[data-theme="light"] .hp-t-small,
[data-theme="light"] .hp-t-italic { color: #3a3860 !important; }

[data-theme="light"] .hp-t-big { color: #0d0b2a !important; }
[data-theme="light"] .hp-t-gold { color: #b03910 !important; }

[data-theme="light"] .hp-stub {
  background: rgba(4,3,35,.06);
  border-color: rgba(231,154,31,.3);
}
[data-theme="light"] .hp-stub-detail .hp-stub-lbl { color: #6a68a0; }
[data-theme="light"] .hp-stub-detail .hp-stub-val { color: #0d0b2a; }
[data-theme="light"] .hp-barcode { color: rgba(4,3,35,.5); }

[data-theme="light"] .hp-btn-outline {
  border-color: rgba(4,3,35,.25);
  color: #0d0b2a;
}
[data-theme="light"] .hp-btn-outline:hover {
  background: rgba(4,3,35,.06);
}

[data-theme="light"] .hp-stat-n { color: #0d0b2a; }
[data-theme="light"] .hp-stat-l { color: #6a68a0; }

[data-theme="light"] .ev-section { background: #eceaf8; }
[data-theme="light"] .ev-card {
  background: #fff;
  border-color: rgba(4,3,35,.1);
}
[data-theme="light"] .ev-card:hover { border-color: rgba(231,154,31,.4) !important; }
[data-theme="light"] .ev-name { color: #0d0b2a; }
[data-theme="light"] .ev-venue { color: #3a3860; }
[data-theme="light"] .ev-attractions { color: #6a68a0; }

[data-theme="light"] .acct-banner-section { background: #e2e0f4; }
[data-theme="light"] .acct-banner {
  background: #fff;
  border-color: rgba(231,154,31,.25);
}
[data-theme="light"] .acct-banner-title { color: #0d0b2a; }
[data-theme="light"] .acct-banner-sub { color: #3a3860; }

[data-theme="light"] .book-section { background: #0d0b2a; }

[data-theme="light"] .site-footer { background: #0d0b2a; }

[data-theme="light"] .modal {
  background: #fff;
  border-color: rgba(231,154,31,.2);
}
[data-theme="light"] .m-event-title { color: #0d0b2a; }
[data-theme="light"] .m-event-meta { color: #6a68a0; }
[data-theme="light"] .m-label { color: #3a3860; }
[data-theme="light"] .m-input {
  background: rgba(4,3,35,.04);
  border-color: rgba(4,3,35,.15);
  color: #0d0b2a;
}
[data-theme="light"] .m-input::placeholder { color: #9090b0; }
[data-theme="light"] .m-input:focus {
  border-color: #e79a1f !important;
  box-shadow: 0 0 0 3px rgba(231,154,31,.15) !important;
}
[data-theme="light"] .m-qty-row {
  background: rgba(231,154,31,.06);
  border-color: rgba(231,154,31,.2);
}
[data-theme="light"] .m-qty-info-label { color: #3a3860; }
[data-theme="light"] .m-qty-info-sub { color: #6a68a0; }

/* Dashboard light */
[data-theme="light"] .dash-welcome { color: #0d0b2a; }
[data-theme="light"] .dash-tab { color: #6a68a0; }
[data-theme="light"] .dash-tab:hover { color: #0d0b2a; }
[data-theme="light"] .stat-card {
  background: #fff;
  border-color: rgba(4,3,35,.1);
}
[data-theme="light"] .stat-val { color: #0d0b2a; }
[data-theme="light"] .tix-card {
  background: #fff;
  border-color: rgba(4,3,35,.1);
}
[data-theme="light"] .tix-name { color: #0d0b2a; }

/* Auth light */
[data-theme="light"] .auth-card {
  background: #fff;
  border-color: rgba(4,3,35,.1);
}
[data-theme="light"] .a-input {
  background: rgba(4,3,35,.04);
  border-color: rgba(4,3,35,.15);
  color: #0d0b2a;
}

/* ════════════════════════════════
   NATIER LOGO IMAGE — nav, loader, footer, auth
════════════════════════════════ */

/* Nav logo */
.nav-logo {
  display: flex; align-items: center; gap: .55rem;
}
.nav-logo-img {
  width: 26px; height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.nav-logo-text {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: 1.3rem; font-weight: 900;
  letter-spacing: .04em;
}
.nav-logo-text strong {
  font-weight: 900;
  background: var(--logo-grad, linear-gradient(90deg,#e79a1f,#b03910));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Page loader */
.pl-logo-img {
  width: 44px; height: 44px;
  object-fit: contain;
  margin: 0 auto 1rem;
  display: block;
  animation: plLogoFloat 2s ease-in-out infinite;
}
@keyframes plLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.pl-logo strong {
  background: var(--logo-grad, linear-gradient(90deg,#e79a1f,#b03910));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Auth page large logo */
.auth-logo {
  display: flex; flex-direction: column;
  align-items: center; gap: .6rem;
  margin-bottom: 1.5rem;
}
.auth-logo-img {
  width: 48px; height: 48px;
  object-fit: contain;
}
.auth-logo-text {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: 1.6rem; font-weight: 900;
  letter-spacing: .04em;
}
.auth-logo-text strong {
  background: var(--logo-grad, linear-gradient(90deg,#e79a1f,#b03910));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer brand */
.foot-brand {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .4rem;
}
.foot-brand-img {
  width: 24px; height: 24px;
  object-fit: contain;
}
.foot-brand span {
  font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  font-size: 1.4rem; font-weight: 900;
  letter-spacing: .04em;
}
.foot-brand strong {
  background: var(--logo-grad, linear-gradient(90deg,#e79a1f,#b03910));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mobile sizing */
@media (max-width: 600px) {
  .nav-logo-img  { width: 28px; height: 28px; }
  .nav-logo-text { font-size: 1.1rem; }
  .auth-logo-img { width: 60px; height: 60px; }
  .pl-logo-img   { width: 52px; height: 52px; }
}

/* ── Event countdown badge ── */
.ev-countdown {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(231,154,31,.12);
  color: var(--gold);
  border: 1px solid rgba(231,154,31,.25);
  padding: .15rem .5rem; border-radius: 4px;
  margin-top: .25rem;
}
.ev-countdown-soon {
  background: rgba(74,222,128,.1);
  color: #4ade80;
  border-color: rgba(74,222,128,.25);
}
.ev-countdown-now {
  background: rgba(176,57,16,.15);
  color: #f07a40;
  border-color: rgba(176,57,16,.3);
  animation: countdownPulse 1.5s ease-in-out infinite;
}
@keyframes countdownPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .6; }
}