/**
 * Comedy Break In — design tokens from mockup/comedybreakin/views/design-system.php
 * Use in Tailwind: bg-[var(--cc-accent)], bg-[var(--cc-rose)], rounded-[10px], etc.
 *
 * Page contract (Layout/default.ctp):
 * - Shell: body min-h-screen bg-neutral-950 text-white font-[Montserrat,sans-serif]
 * - Dark marketing pages: headings text-white / text-neutral-400 body (no extra bg)
 * - Light “content islands”: always pair bg-white with text-neutral-900 / text-black headings
 *   so copy is never dark-on-dark against the shell.
 * - Primary actions on light surfaces: --cc-accent / --cc-accent-hover (see .cc2-btn-cta).
 */
:root {
  /* Primary / CTA */
  --cc-accent: #d12027;
  --cc-accent-hover: #a91a20;
  /* Rose (accent alternate) */
  --cc-rose: #e85a5f;
  --cc-rose-hover: #c94448;
  /* Surfaces */
  --cc-black: #000000;
  --cc-surface-dark: #1e1e1e;
  --cc-chip-dark: #383838;
  --cc-border-dark: rgba(255, 255, 255, 0.1);
  /* Shadows (design-system: shadow-md cards, rose glow) */
  --cc-shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --cc-shadow-glow-rose: 0 20px 40px rgba(232, 90, 95, 0.2);
}

[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 — design-system “Rose Glow” */
.cc-show-card:hover { box-shadow: var(--cc-shadow-glow-rose); }
.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); }
/* Fixed header clearance (mockup comedybreakin index.php main padding) */
main.cc2-main-shell {
  padding-top: 120px;
}
@media (min-width: 768px) {
  main.cc2-main-shell {
    padding-top: 290px;
  }
}

/* ─── Design system: reusable button patterns (optional class hooks) ─── */
.cc2-btn-primary {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  background: #fff;
  color: #000;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cc2-btn-primary:hover {
  background: #e5e5e5;
}
.cc2-btn-secondary-dark {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid var(--cc-border-dark);
  border-radius: 10px;
  transition: background-color 0.2s ease;
}
.cc2-btn-secondary-dark:hover {
  background: rgba(255, 255, 255, 0.1);
}
.cc2-btn-rose {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  background: var(--cc-rose);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}
.cc2-btn-rose:hover {
  background: var(--cc-rose-hover);
}
.cc2-btn-cta {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  background: var(--cc-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 10px;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.cc2-btn-cta:hover {
  background: var(--cc-accent-hover);
}

/* ─── Paginator — design-system (opt-in: add .cc2-paginator--dark or .cc2-paginator--light on .paginator) ─── */
.cc2-paginator .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cc2-paginator .pagination > li {
  display: inline-flex;
}
.cc2-paginator .pagination > li > a,
.cc2-paginator .pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.35rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.cc2-paginator--light .pagination > li > a {
  color: #737373;
}
.cc2-paginator--light .pagination > li > a:hover {
  color: #000;
}
.cc2-paginator--dark .pagination > li > a {
  color: #737373;
}
.cc2-paginator--dark .pagination > li > a:hover {
  color: #fff;
}
.cc2-paginator--light .pagination > li.active > a,
.cc2-paginator--light .pagination > li.active > span,
.cc2-paginator--dark .pagination > li.active > a,
.cc2-paginator--dark .pagination > li.active > span {
  background: var(--cc-accent);
  color: #fff;
}
.cc2-paginator--light .pagination > li.disabled > span,
.cc2-paginator--dark .pagination > li.disabled > span {
  color: #a3a3a3;
}
/* 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 (mockup checkout.php): coupon / gift discounted amounts on dark summary cards */
.evc-checkout-page .original.slashed {
  text-decoration: line-through;
  color: #a3a3a3;
}
.evc-checkout-page .discounted:not(:empty) {
  color: var(--cc-accent);
  font-weight: 700;
}

/* ─── Legacy static pages (Templates/Comedybreakin/Pages: video, podcast, photos) ─── */
.cc2-page-marketing-legacy {
  color: #d4d4d4;
}
.cc2-page-marketing-legacy h4 {
  color: #fafafa;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  margin-top: 1.25rem;
}
.cc2-page-marketing-legacy .videosection:first-of-type h4:first-child,
.cc2-page-marketing-legacy .video-center > h4:first-child {
  margin-top: 0;
}
.cc2-page-marketing-legacy .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  background: var(--cc-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.cc2-page-marketing-legacy .btn:hover {
  background: var(--cc-accent-hover);
}
.cc2-page-marketing-legacy .cc2-legacy-youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
}
.cc2-page-marketing-legacy .cc2-legacy-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cc2-terms-page article strong {
  color: #fafafa;
  font-weight: 600;
}