/**
 * Laugh United — brand tokens, nav duotone, dark theme, hero keyframes.
 * Source: designer.standuptix.dev/projects/laughunited/css/{custom,theme-dark}.css
 * Product defaults: no announcement marquee; dark theme always on.
 */
:root {
  --cc-brand: #412a76;
  --cc-brand-dark: #2f1e57;
  --cc-brand-soft: rgba(65, 42, 118, 0.12);
  --cc-brand-soft-2: rgba(65, 42, 118, 0.22);
  --cc-brand-soft-3: rgba(65, 42, 118, 0.32);
  --cc-accent: #edc236;
  --cc-accent-dark: #d3a91e;

  --venue-accent: var(--cc-brand);
  --venue-accent-hover: var(--cc-brand-dark);

  --dk-ground: #131019;
  --dk-raised: #241d31;
  --dk-media: #2a2338;
  --dk-ink: #f5f3fa;
  --dk-body: #a9a1bf;
  --dk-mute: #7e7596;
  --dk-faint: #5a5372;
  --dk-line: rgba(150, 132, 200, 0.16);
  --dk-line-soft: rgba(150, 132, 200, 0.09);
  --cc-brand-text: #ab90ec;
}

::selection {
  background: var(--cc-brand);
  color: #fff;
}

[x-cloak] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* Fixed header: nav row only (108px). No marquee. */
main {
  padding-top: 108px;
}

/* Light duotone (unused when dark remaps below; kept for structure parity) */
.cc-nav-duotone {
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--cc-brand) 10%, transparent) 0%,
      color-mix(in srgb, var(--cc-brand) 2%, transparent) 38%,
      transparent 52%,
      color-mix(in srgb, var(--cc-accent) 10%, transparent) 78%,
      color-mix(in srgb, var(--cc-accent) 22%, transparent) 100%
    ),
    #fff;
  border-bottom: 1px solid color-mix(in srgb, var(--cc-brand) 22%, transparent);
}

/* ─── Dark theme (site default) ───────────────────────────────── */
body,
.bg-white {
  background-color: var(--dk-ground) !important;
}
.bg-neutral-900 {
  background-color: #17121f !important;
}
.bg-neutral-800 {
  background-color: var(--dk-raised) !important;
}
.bg-neutral-50,
.bg-neutral-50\/40,
.bg-neutral-100 {
  background-color: var(--dk-raised) !important;
}
.bg-neutral-200 {
  background-color: var(--dk-media) !important;
}

.text-neutral-900,
.text-black {
  color: var(--dk-ink) !important;
}
.text-neutral-600,
.text-neutral-500 {
  color: var(--dk-body) !important;
}
.text-neutral-700 {
  color: var(--dk-body) !important;
}
.text-neutral-400 {
  color: var(--dk-mute) !important;
}
/* Important-variant inputs (e.g. promo code field). Tailwind's !important utilities live in a
   cascade layer and beat unlayered !important rules, so retarget the colour token they read. */
.\!text-neutral-900 {
  --color-neutral-900: var(--dk-ink);
}

/* Promo prices: original amount crossed out next to the discounted one. */
.slashed {
  text-decoration: line-through;
  opacity: 0.6;
  margin-right: 0.25rem;
}
.text-neutral-300 {
  color: var(--dk-faint) !important;
}

.border-neutral-200,
.border-neutral-200\/60 {
  border-color: var(--dk-line) !important;
}
.border-neutral-100 {
  border-color: var(--dk-line-soft) !important;
}
.border-white\/10 {
  border-color: var(--dk-line) !important;
}

.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--dk-line) !important;
}
.divide-neutral-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--dk-line-soft) !important;
}

.hover\:text-neutral-900:hover,
.hover\:text-black:hover {
  color: #fff !important;
}
.hover\:bg-neutral-50:hover,
.hover\:bg-neutral-100:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.hover\:bg-neutral-200:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

.text-\[color\:var\(--cc-brand\)\] {
  color: var(--cc-brand-text) !important;
}
.border-\[color\:var\(--cc-brand\)\] {
  border-color: var(--cc-brand-text) !important;
}
.focus\:border-\[color\:var\(--cc-brand\)\]:focus {
  border-color: var(--cc-brand-text) !important;
}

.cc-nav-duotone {
  background:
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--cc-brand) 28%, transparent) 0%,
      color-mix(in srgb, var(--cc-brand) 8%, transparent) 40%,
      transparent 52%,
      color-mix(in srgb, var(--cc-accent) 8%, transparent) 78%,
      color-mix(in srgb, var(--cc-accent) 16%, transparent) 100%
    ),
    #191322;
  border-bottom: 1px solid var(--dk-line);
}

::placeholder {
  color: var(--dk-faint) !important;
}

.cc-view-fade {
  animation: ccFadeIn 0.3s ease;
}

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

.cc-hero-fade {
  animation: ccHeroFadeUp 0.6s ease both;
}
.cc-hero-fade-delay-1 { animation-delay: 0.1s; }
.cc-hero-fade-delay-2 { animation-delay: 0.2s; }

@keyframes ccHeroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cc-hero-progress {
  width: 0%;
  animation: ccHeroProgress 6s linear forwards;
}

@keyframes ccHeroProgress {
  from { width: 0%; }
  to { width: 100%; }
}

.cc-image-reveal {
  animation: ccImageReveal 0.8s ease both;
}

@keyframes ccImageReveal {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-view-fade,
  .cc-hero-fade,
  .cc-hero-progress,
  .cc-image-reveal {
    animation: none;
  }
  .cc-hero-progress { width: 100%; }
}

/* ─── Typography (mockup: Montserrat site-wide) ───────────────── */
body,
button,
input,
select,
textarea {
  font-family: 'Montserrat', sans-serif;
}

/* ─── Primary CTAs (mockup: purple fill, gold label, 10px radius) ─ */
a.bg-neutral-900.text-white.font-bold.rounded-\[10px\],
button.bg-neutral-900.text-white.font-bold.rounded-\[10px\],
a.bg-black.text-white.font-bold.rounded-\[10px\],
button.bg-black.text-white.font-bold.rounded-\[10px\] {
  background-color: var(--cc-brand) !important;
  color: var(--cc-accent) !important;
}

a.bg-neutral-900.text-white.font-bold.rounded-\[10px\]:hover,
button.bg-neutral-900.text-white.font-bold.rounded-\[10px\]:hover,
a.bg-black.text-white.font-bold.rounded-\[10px\]:hover,
button.bg-black.text-white.font-bold.rounded-\[10px\]:hover,
a.bg-neutral-900.text-white.font-bold.rounded-\[10px\].hover\:bg-neutral-800:hover,
button.bg-neutral-900.text-white.font-bold.rounded-\[10px\].hover\:bg-neutral-800:hover,
a.bg-black.text-white.font-bold.rounded-\[10px\].hover\:bg-neutral-800:hover,
button.bg-black.text-white.font-bold.rounded-\[10px\].hover\:bg-neutral-800:hover {
  background-color: var(--cc-brand-dark) !important;
  color: var(--cc-accent) !important;
}

a.bg-neutral-900.text-white.font-bold.rounded-full,
button.bg-neutral-900.text-white.font-bold.rounded-full,
a.bg-neutral-900.text-white.hover\:bg-neutral-700.font-bold.rounded-full,
.amount-btn.bg-neutral-900.text-white {
  background-color: var(--cc-brand) !important;
  color: var(--cc-accent) !important;
}

a.bg-neutral-900.text-white.font-bold.rounded-full:hover,
button.bg-neutral-900.text-white.font-bold.rounded-full:hover,
a.bg-neutral-900.text-white.hover\:bg-neutral-700.font-bold.rounded-full:hover {
  background-color: var(--cc-brand-dark) !important;
  color: var(--cc-accent) !important;
}

.font-bold.rounded-\[10px\].bg-\[var\(--venue-accent\)\].text-white,
.font-bold.rounded-\[10px\].bg-\[var\(--venue-accent\)\].text-white:is(a, button, span) {
  color: var(--cc-accent) !important;
}

.font-bold.rounded-\[10px\].bg-\[var\(--venue-accent\)\].text-white.hover\:opacity-90:hover,
.font-bold.rounded-\[10px\].bg-\[var\(--venue-accent\)\].text-white.hover\:opacity-95:hover,
.font-bold.rounded-\[10px\].bg-\[var\(--venue-accent\)\].text-white.hover\:bg-\[var\(--venue-accent-hover\)\]:hover {
  opacity: 1 !important;
  background-color: var(--cc-brand-dark) !important;
  color: var(--cc-accent) !important;
}

/* Icon toggles (list/grid): active = brand purple, white icon */
.bg-neutral-100.rounded-full > button.bg-neutral-900.text-white,
.bg-neutral-100.rounded-full > button.bg-neutral-900.text-white:hover {
  background-color: var(--cc-brand) !important;
  color: #fff !important;
}

/* Calendar view toggle active */
button.bg-neutral-900.text-white.hover\:bg-black.rounded-full {
  background-color: var(--cc-brand) !important;
  color: #fff !important;
}

button.bg-neutral-900.text-white.hover\:bg-black.rounded-full:hover {
  background-color: var(--cc-brand-dark) !important;
}

/* Mobile nav drawer — raised panel on dark ground */
.cc-nav-drawer {
  background-color: var(--dk-raised) !important;
  color: var(--dk-ink) !important;
}

/* Filter / calendar popovers */
.cc-popover-panel {
  background-color: var(--dk-raised) !important;
  border-color: var(--dk-line) !important;
}

/* Ticket CTAs: mockup uses 10px corners (not Tailwind pill/full) */
a.group\/btn.rounded-\[10px\],
a.group\/btn.rounded-full,
button.group\/btn.rounded-\[10px\],
button.group\/btn.rounded-full {
  border-radius: 10px !important;
}

/* Newsletter / confirmation modals */
dialog .rounded-2xl.bg-white {
  background-color: var(--dk-raised) !important;
  border: 1px solid var(--dk-line);
}