/**
 * Comedy Craft Beer — design tokens (aligned with nycc/mockup/comedy-craft-beer/views/design-system.php).
 * Prefer CSS variables in Tailwind arbitrary values: bg-[var(--cc-accent)], bg-[var(--cc-surface-dark)], etc.
 */
:root {
  --cc-accent: #F15A29;
  --cc-accent-hover: #D94E22;
  --cc-surface-dark: #1e1e1e;
  --cc-chip-dark: #383838;
  --cc-ticket-selected-bg: #fff5f0;
}

[x-cloak] { display: none !important; }
::selection { background: var(--cc-accent); color: #fff; }
@keyframes cc-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
button, a[class*="font-bold"][class*="px-"] { border-radius: 10px; }
a.cc-tab-btn { border-radius: 5px; }
.cc-no-scrollbar::-webkit-scrollbar { display: none; }
.cc-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Slide-in drawer animation (legacy + new) */
#cc-nav-drawer { transform: translateX(100%); transition: transform 0.3s ease; }
#cc-nav-drawer.cc-drawer-open { transform: translateX(0); }
#cc-drawer-backdrop { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#cc-drawer-backdrop.cc-drawer-open { opacity: 1; pointer-events: all; }
/* Simple fade for view transitions */
.cc-view-fade { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Marquee scroll for announcement */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
/* Date badge */
.cc-date-badge { min-width: 80px; }
/* Gallery hover */
.cc-gallery-item img { transition: transform 0.5s ease; }
.cc-gallery-item:hover img { transform: scale(1.05); }
/* Show card hover */
.cc-show-card:hover { box-shadow: 0 20px 40px color-mix(in srgb, var(--cc-accent) 12%, transparent); }
.cc-show-card:hover .cc-show-card-img { transform: scale(1.1); }
.cc-show-card-img { transition: transform 0.5s ease; }
/* Dotted line */
.cc-dotted-line { border-bottom: 2px dotted rgba(255,255,255,0.15); flex-grow: 1; margin: 0 1rem; position: relative; top: -2px; }
/* Sticky nav */
#cc-main-nav { transition: padding 0.3s ease, box-shadow 0.3s ease; }
#cc-main-nav.cc-nav-scrolled { background: rgba(0,0,0,0.95); backdrop-filter: blur(12px); padding-top: 1rem; padding-bottom: 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
/* Featured carousel (CC2): dots styled here so Tailwind JIT sees no JS-only classes */
#ccDots .cc2-feature-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 9999px;
  background: #525252;
  border: 0;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease, min-width 0.3s ease;
}
#ccDots .cc2-feature-dot.is-active {
  width: 32px;
  min-width: 32px;
  background: #fff;
}
#ccDots .cc2-feature-dot:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
}
/* Header logo on black: avoid white box from defaults / legacy CSS */
#cc-main-nav img.cc2-header-logo-img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none;
}

/* Carousel */
.cc-hero-carousel { overflow: hidden; }
.cc-hero-track { display: flex; transition: transform 0.5s ease; }
.cc-hero-slide { flex: 0 0 100%; }
/* Card hover lift */
.cc-hover-lift:hover { transform: translateY(-2px); }
/* Event view (mockup event.php): in-page tabs */
a.cc-event-tab:hover {
  border-color: var(--cc-accent);
  color: var(--cc-accent);
}

/* Event view: coupon prefetch (parity with template7 — strikethrough original + discounted price) */
#event-view-page .ticket-price.original.slashed,
#event-view-page .ticket-price.slashed {
  text-decoration: line-through;
  color: #a3a3a3;
  font-weight: 600;
}
#event-view-page .breakdown-base-original.slashed,
#event-view-page .breakdown-fee-original.slashed {
  text-decoration: line-through;
  color: #a3a3a3;
}
#event-view-page .ticket-price-wrapper [class^="discount-price-"]:not(:empty) {
  margin-left: 0.35rem;
  color: var(--cc-accent);
  font-weight: 700;
  text-decoration: none;
}

/* Checkout: coupon UI parity with event view (comedycraftbeer2.js toggles .slashed / .discounted) */
.evc-checkout-page .original.slashed {
  text-decoration: line-through;
  color: #a3a3a3;
  font-weight: 600;
}
.evc-checkout-page .discounted:not(:empty) {
  margin-left: 0.35rem;
  color: var(--cc-accent);
  font-weight: 700;
  text-decoration: none;
}

/* Transparent spacer above flash so the colored bar does not sit under #cc-main-nav */
.cc2-flash-nav-offset {
  height: 100px;
  flex-shrink: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .cc2-flash-nav-offset {
    height: 228px;
  }
}

/*
 * Flash (#alert-2 / #alert-3) clears the fixed header; pages that also use
 * pt-[130px] md:pt-[250px] would double the offset. Add class
 * cc2-flash-tightens-top-offset on those roots so :has() can reduce padding.
 * `body` prefix beats late Tailwind utility specificity on checkout sections.
 */
body .cc2-main-flow:has(#alert-2) .cc2-flash-tightens-top-offset,
body .cc2-main-flow:has(#alert-3) .cc2-flash-tightens-top-offset {
  padding-top: 1.25rem !important;
}
@media (min-width: 768px) {
  body .cc2-main-flow:has(#alert-2) .cc2-flash-tightens-top-offset,
  body .cc2-main-flow:has(#alert-3) .cc2-flash-tightens-top-offset {
    padding-top: 1.5rem !important;
  }
}