@import "./_base.css";

/**
 * Modern Checkout Theme
 * Glassmorphism mit Cyan/Purple - Dark Mode Style
 * Aligned with modern/tickets.html (Event-Template)
 *
 * Coverage: Ticket Cards, Selection, Disabled, Featured, Price, Badges (all),
 *   Form Panel, Inputs, Consent, Promo, Group, Plus-One, Summary, Capacity,
 *   Timer, Waitlist, Nav, User Tickets, Feedback, Hero, Skeleton, Empty,
 *   Success, Mobile, Login Panel, Section Badge, Consent Links
 */

/* ============================================================
   CSS CUSTOM PROPERTIES - Modern Template Overrides
   ============================================================ */
.cita-checkout-modern {
  /* Error text - lighter red for readability on dark backgrounds */
  --checkout-danger-text: #fca5a5;

  /* Hover surface for ticket cards */
  --checkout-surface-hover: rgba(30, 41, 59, 0.6);

  /* Card Styling */
  --checkout-card-bg: var(--cita-bg-surface);
  --checkout-card-border: var(--cita-comp-border);
  --checkout-card-radius: 0.5rem;

  /* Button Styling - Cyan Gradient (Premium) */
  --checkout-btn-bg: linear-gradient(135deg, #06b6d4, #0891b2);
  --checkout-btn-bg-hover: linear-gradient(135deg, #22d3ee, #06b6d4);
  --checkout-btn-text: #0f172a;  /* dark on cyan */
  --checkout-btn-radius: 0.5rem;
  --checkout-input-radius: 0.375rem;
  --checkout-checkbox-radius: 0.25rem;  /* rounded-sm */
  --checkout-bar-radius: 3px;

  /* Primary & State Colors */
  --checkout-primary: #06b6d4;
  --checkout-primary-hover: #22d3ee;
  --checkout-primary-muted: rgba(6, 182, 212, 0.15);
  --checkout-focus-ring: #22d3ee;
  --checkout-success: #10b981;
  --checkout-warning: #f59e0b;
  --checkout-text-on-accent: #000000;
  --checkout-danger: #ef4444;
  --checkout-sticky-bg: rgba(15, 23, 42, 0.95);
  --checkout-text-secondary: #94a3b8;
  --checkout-warning-bg: rgba(245, 158, 11, 0.15);

  /* Radius Contract */
  --checkout-radius-sm: 0.25rem;
  --checkout-radius-md: 0.375rem;
  --checkout-radius-lg: 0.5rem;
  --checkout-radius-xl: 0.5rem;
  --checkout-radius-2xl: 0.75rem;

  /* Typography Contract */
  --checkout-font-body: 'Inter', system-ui, sans-serif;
  --checkout-font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* Shadow Contract */
  --checkout-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --checkout-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --checkout-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --checkout-shadow-glow: 0 0 20px rgba(6, 182, 212, 0.3);

  /* Surface & Text Contract */
  --checkout-surface-elevated: rgba(255, 255, 255, 0.08);
  --checkout-text-subtle: rgba(148, 163, 184, 0.8);

  /* Price Display */
  --checkout-price-size: 1.5rem;  /* text-2xl */
  --checkout-price-color: var(--cita-text-heading);
  --checkout-price-free-color: var(--cita-accent-cyan);
}

/* Base container */
.checkout-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Heading font — Space Grotesk */
.cita-checkout-modern .checkout-event-title,
.cita-checkout-modern .checkout-section-title,
.cita-checkout-modern .checkout-hero-title,
.cita-checkout-modern .checkout-ticket-option-name {
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.02em;
}

/* Heading font on primary buttons (matches success page) */
.cita-checkout-modern .checkout-btn-primary,
.cita-checkout-modern .select-ticket-btn {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
}

/* Body font — Inter (explicit) */
.cita-checkout-modern .checkout-label,
.cita-checkout-modern .checkout-input,
.cita-checkout-modern .checkout-consent-label,
.cita-checkout-modern .checkout-breadcrumb-link,
.cita-checkout-modern .checkout-badge,
.cita-checkout-modern .checkout-capacity-text,
.cita-checkout-modern .checkout-feedback {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Span children — override global span { font-family } */
[data-template="modern"] .checkout-hero-meta-item span,
[data-template="modern"] .checkout-badge span,
[data-template="modern"] .checkout-capacity-text span,
[data-template="modern"] .checkout-consent-label span,
[data-template="modern"] .checkout-breadcrumb-link span {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   TICKET CARDS - Glassmorphism Style
   ============================================================ */
.cita-checkout-modern .checkout-ticket-option {
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-card-radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.2s ease;
}

.cita-checkout-modern .checkout-ticket-option:hover:not(.checkout-ticket-option--disabled) {
  background: rgba(30, 41, 59, 0.6);  /* slate-800/60 on hover */
  border-color: rgba(6, 182, 212, 0.4);  /* subtle cyan hint */
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.08);
  transform: translateY(-2px);
}

/* Keyboard focus indicator */
.cita-checkout-modern .checkout-ticket-option:focus-visible {
  outline: 2px solid var(--cita-accent-cyan);
  outline-offset: 2px;
}

.cita-checkout-modern .checkout-ticket-option--selected {
  border-color: #06b6d4;  /* cyan-500 */
  background: rgba(6, 182, 212, 0.08);
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.15), 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Disabled State */
.cita-checkout-modern .checkout-ticket-option--disabled {
  opacity: 0.4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(30, 41, 59, 0.2);
}

/* Featured State */
.cita-checkout-modern .checkout-ticket-option--featured {
  border-color: rgba(6, 182, 212, 0.6);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(30, 41, 59, 0.4) 100%);
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.12);
}

.cita-checkout-modern .checkout-ticket-option--featured:hover {
  border-color: #06b6d4;
  box-shadow: 0 0 35px rgba(6, 182, 212, 0.2), 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   TICKET NAME & PRICE - Matching Event Template
   ============================================================ */
.cita-checkout-modern .checkout-ticket-option-name {
  font-size: 1.125rem;  /* text-lg wie modern/tickets.html */
  font-weight: 700;
}

.cita-checkout-modern .checkout-ticket-option-price {
  font-size: var(--checkout-price-size);
  font-weight: 700;
  padding: 0;
  background: none;
  border: none;
  color: var(--checkout-price-color);
}

.cita-checkout-modern .checkout-ticket-option-price--free {
  color: var(--checkout-price-free-color);
}

/* ============================================================
   PRIMARY BUTTON - Cyan Gradient Style (Premium)
   ============================================================ */
.cita-checkout-modern .checkout-btn-primary,
.cita-checkout-modern .select-ticket-btn {
  background: var(--checkout-btn-bg);
  color: var(--checkout-btn-text);
  border-radius: var(--checkout-btn-radius);
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25);
  transition: all 0.2s ease;
}

.cita-checkout-modern .checkout-btn-primary:hover:not(:disabled),
.cita-checkout-modern .select-ticket-btn:hover:not(:disabled) {
  background: var(--checkout-btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35);
}

.cita-checkout-modern .checkout-btn-primary:active:not(:disabled),
.cita-checkout-modern .select-ticket-btn:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.2);
}

/* Waitlist button keeps warning style */
.cita-checkout-modern .checkout-waitlist-btn {
  background: linear-gradient(135deg, color-mix(in srgb, var(--checkout-warning, #f59e0b) 20%, transparent) 0%, color-mix(in srgb, var(--checkout-warning, #f59e0b) 20%, black) 100%);
  color: var(--checkout-warning, #fcd34d);
  border: 1px solid color-mix(in srgb, var(--checkout-warning, #f59e0b) 30%, transparent);
  border-radius: var(--checkout-btn-radius);
}

.cita-checkout-modern .checkout-waitlist-btn:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--checkout-warning, #f59e0b) 30%, transparent) 0%, color-mix(in srgb, var(--checkout-warning, #f59e0b) 30%, black) 100%);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--checkout-warning, #f59e0b) 15%, transparent);
}

/* ============================================================
   FEATURE BADGES - Semantisches 3-Farben-System
   Gruen = Positiv (Gruppe, +1, Bereits gebucht)
   Orange = Warnung (Warteliste)
   Grau = Info/Neutral (Min-Age, Target Group, etc.)
   ============================================================ */

/* Success Badges - Gruen (Positiv) */
.cita-checkout-modern .checkout-badge--success {
  background: rgba(16, 185, 129, 0.15);  /* emerald-500/15 */
  color: #6ee7b7;  /* emerald-300 */
  border-color: rgba(16, 185, 129, 0.3);
}

/* Warning Badges - Orange */
.cita-checkout-modern .checkout-badge--warning {
  background: rgba(245, 158, 11, 0.15);  /* amber-500/15 */
  color: #fcd34d;  /* amber-300 */
  border-color: rgba(245, 158, 11, 0.3);
}

/* Neutral/Info Badges - Grau */
.cita-checkout-modern .checkout-badge--neutral,
.cita-checkout-modern .checkout-badge--info {
  background: rgba(100, 116, 139, 0.15);  /* slate-500/15 */
  color: #cbd5e1;  /* slate-300 */
  border-color: rgba(100, 116, 139, 0.3);
}

/* Featured Badge - Cyan Gradient */
.cita-checkout-modern .checkout-badge--featured {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(34, 211, 238, 0.15) 100%);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.4);
  font-weight: 600;
}

/* Danger Badge - Rot */
.cita-checkout-modern .checkout-badge--danger {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Exclusive Badge - Violet */
.cita-checkout-modern .checkout-badge--exclusive {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: white;
  border: none;
}

/* Free Badge */
.cita-checkout-modern .checkout-badge--free {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.4);
}

/* ============================================================
   FORM PANEL - Glassmorphism with Accent Line
   ============================================================ */
.cita-checkout-modern .checkout-form-panel {
  position: relative;
  background: var(--checkout-surface-elevated);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-card-radius);
}

/* Cyan accent line on top */
.cita-checkout-modern .checkout-form-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #06b6d4, transparent);
  z-index: 1;
}

/* ============================================================
   EVENT HERO - Modern Style
   ============================================================ */
.cita-checkout-modern .checkout-event-hero {
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-card-radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.cita-checkout-modern .checkout-event-hero-glow {
  display: block;
  position: absolute;
  top: -50%;
  right: -25%;
  width: 50%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* ============================================================
   NAV LINKS - Subtle Style
   ============================================================ */
.cita-checkout-modern .checkout-nav-link {
  background: transparent;
  border-color: var(--checkout-card-border);
}

.cita-checkout-modern .checkout-nav-link:hover {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.4);
  color: var(--cita-accent-cyan);
}

/* ============================================================
   USER TICKETS SECTION
   ============================================================ */
.cita-checkout-modern .checkout-user-tickets {
  background: var(--checkout-card-bg);
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-card-radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.cita-checkout-modern .checkout-ticket-card {
  background: rgba(15, 23, 42, 0.6);  /* slate-900/60 */
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-btn-radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* User Ticket Cards - Modern Glassmorphism */
.cita-checkout-modern .checkout-user-ticket-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-card-radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cita-checkout-modern .checkout-user-ticket-card:hover {
  background: rgba(15, 23, 42, 0.7);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.15);
}

/* ============================================================
   FORM INPUTS - Modern Style
   ============================================================ */
.cita-checkout-modern .checkout-form-input {
  background: var(--cita-input-bg);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-input-radius);
}

.cita-checkout-modern .checkout-form-input:focus {
  border-color: var(--cita-accent-cyan);
  box-shadow: 0 0 0 3px var(--cita-accent-cyan-subtle);
}

/* ============================================================
   GROUP BOOKING SECTION
   ============================================================ */
.cita-checkout-modern .checkout-group {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-btn-radius);
}

.cita-checkout-modern .checkout-group-btn {
  background: transparent;
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-checkbox-radius);
}

.cita-checkout-modern .checkout-group-btn:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--cita-accent-cyan);
  color: var(--cita-accent-cyan);
}

/* ============================================================
   PLUS-ONE SECTION
   ============================================================ */
.cita-checkout-modern .checkout-plus-one-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-input-radius);
}

/* ============================================================
   PRICE SUMMARY
   ============================================================ */
.cita-checkout-modern .checkout-summary {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-btn-radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ============================================================
   CONSENT CHECKBOXES
   ============================================================ */
.cita-checkout-modern .checkout-consent-checkbox-visual {
  background: var(--cita-checkbox-bg);
  border: 1.5px solid rgba(148, 163, 184, 0.5);
  border-radius: 6px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.cita-checkout-modern .checkout-consent-checkbox:hover .checkout-consent-checkbox-visual {
  border-color: rgba(6, 182, 212, 0.5);
  background: rgba(6, 182, 212, 0.06);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.1);
}

.cita-checkout-modern .checkout-consent-checkbox input:focus + .checkout-consent-checkbox-visual {
  border-color: var(--cita-accent-cyan);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.cita-checkout-modern .checkout-consent-checkbox input:checked + .checkout-consent-checkbox-visual {
  background: #06b6d4;
  border-color: #06b6d4;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.cita-checkout-modern .checkout-consent-checkbox input:checked:hover + .checkout-consent-checkbox-visual {
  background: #22d3ee;
  border-color: #22d3ee;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
}

.cita-checkout-modern .checkout-checkbox-wrapper {
  background: rgba(15, 23, 42, 0.4);
  border: 1.5px solid rgba(71, 85, 105, 0.5);
  border-radius: 6px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.cita-checkout-modern .checkout-checkbox-wrapper:hover {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.08);
}

.cita-checkout-modern .checkout-checkbox-wrapper:has(.checkout-checkbox:checked) {
  background: #06b6d4;
  border-color: #06b6d4;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

/* Consent Label Links — underline affordance */
.cita-checkout-modern .checkout-consent-label a {
  color: var(--cita-accent-cyan);
  text-decoration: underline;
  text-decoration-color: rgba(6, 182, 212, 0.35);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.cita-checkout-modern .checkout-consent-label a:hover {
  color: #22d3ee;
  text-decoration-color: #22d3ee;
}

/* Consent Label — Inter font */
.cita-checkout-modern .checkout-consent-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
}

/* Consents Group Label — "PFLICHTANGABEN" premium styling */
.modern-tickets-wrapper .checkout-consents-group-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.7);
  margin-bottom: 0.75rem;
}

/* Consents Divider — cyan gradient */
.modern-tickets-wrapper .checkout-consents-divider {
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.15), transparent);
  margin: 1rem 0;
}

/* ============================================================
   PROMO CODE SECTION - Glassmorphism
   ============================================================ */
.cita-checkout-modern .checkout-promo {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--checkout-card-border);
  border-radius: var(--checkout-btn-radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cita-checkout-modern .checkout-promo-icon {
  color: var(--cita-accent-cyan);
}

.cita-checkout-modern .checkout-promo-input {
  background: rgba(15, 23, 42, 0.6);
  border: 1.5px solid rgba(71, 85, 105, 0.4);
  border-radius: var(--checkout-input-radius);
  color: var(--cita-text-heading);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cita-checkout-modern .checkout-promo-input:hover:not(:focus) {
  border-color: rgba(100, 116, 139, 0.5);
}

.cita-checkout-modern .checkout-promo-input:focus {
  background: rgba(15, 23, 42, 0.8);
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2), 0 0 12px rgba(6, 182, 212, 0.06);
  outline: none;
}

.cita-checkout-modern .checkout-promo-input::placeholder {
  color: rgba(148, 163, 184, 0.6);
}

.cita-checkout-modern .checkout-promo-btn {
  background: rgba(6, 182, 212, 0.06);
  border: 1.5px solid rgba(6, 182, 212, 0.45);
  color: #22d3ee;
  border-radius: var(--checkout-input-radius);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  transition: all 0.2s ease;
}

.cita-checkout-modern .checkout-promo-btn:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.12);
  border-color: #06b6d4;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.15);
  transform: translateY(-1px);
}

.cita-checkout-modern .checkout-promo-btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* Promo Feedback */
.cita-checkout-modern .checkout-promo-feedback--success {
  background: rgba(16, 185, 129, 0.15);
  border-left: 3px solid #10b981;
  color: #6ee7b7;
}

.cita-checkout-modern .checkout-promo-feedback--error {
  background: rgba(239, 68, 68, 0.15);
  border-left: 3px solid #ef4444;
  color: #fca5a5;
}

/* ============================================================
   AGE CONFIRMATION - Warning Style
   ============================================================ */
.cita-checkout-modern .checkout-age-confirm {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--checkout-btn-radius);
}

.cita-checkout-modern .checkout-age-confirm-text {
  color: #fcd34d;  /* amber-300 */
}

/* ============================================================
   FEEDBACK MESSAGES
   ============================================================ */
.cita-checkout-modern .checkout-feedback,
.modern-tickets-wrapper .checkout-feedback {
  background: rgba(15, 23, 42, 0.8);
  border-radius: var(--checkout-btn-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.cita-checkout-modern .checkout-feedback--success,
.modern-tickets-wrapper .checkout-feedback--success {
  border-left: 3px solid #10b981;
  color: #6ee7b7;
}

.cita-checkout-modern .checkout-feedback--info,
.modern-tickets-wrapper .checkout-feedback--info {
  border-left: 3px solid #06b6d4;
  color: #67e8f9;
}

.cita-checkout-modern .checkout-feedback--warning,
.modern-tickets-wrapper .checkout-feedback--warning {
  border-left: 3px solid #f59e0b;
  color: #fcd34d;
}

.cita-checkout-modern .checkout-feedback--error,
.modern-tickets-wrapper .checkout-feedback--error {
  border-left: 3px solid #ef4444;
  color: #fca5a5;
}

/* ============================================================
   CAPACITY INDICATOR
   ============================================================ */
.cita-checkout-modern .checkout-capacity-bar {
  background: rgba(71, 85, 105, 0.3);
  border-radius: var(--checkout-bar-radius);
}

.cita-checkout-modern .checkout-capacity-fill {
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
  border-radius: var(--checkout-bar-radius);
  transition: width 0.5s ease;
}

.cita-checkout-modern .checkout-capacity--critical .checkout-capacity-fill {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.cita-checkout-modern .checkout-capacity-text {
  color: var(--cita-comp-text-muted);
}

.cita-checkout-modern .checkout-capacity-text strong {
  color: #22d3ee;
}

/* ============================================================
   HOLD TIMER - Glassmorphism Countdown
   ============================================================ */
.cita-checkout-modern .checkout-timer,
.modern-tickets-wrapper .checkout-timer {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--checkout-btn-radius);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fcd34d;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.cita-checkout-modern .checkout-timer--critical,
.modern-tickets-wrapper .checkout-timer--critical {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

/* ============================================================
   SKELETON / LOADING ANIMATION
   ============================================================ */
.cita-checkout-modern .checkout-skeleton,
.modern-tickets-wrapper .checkout-skeleton {
  background: linear-gradient(
    90deg,
    rgba(30, 41, 59, 0.4) 25%,
    rgba(51, 65, 85, 0.4) 50%,
    rgba(30, 41, 59, 0.4) 75%
  );
  background-size: 200% 100%;
  animation: modern-shimmer 1.5s infinite;
  border-radius: var(--checkout-input-radius);
}

@keyframes modern-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.cita-checkout-modern .checkout-empty-state {
  background: var(--checkout-card-bg);
  border: 1px dashed var(--checkout-card-border);
  border-radius: var(--checkout-card-radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cita-checkout-modern .checkout-empty-state h3 {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  color: var(--cita-text-heading);
}

.cita-checkout-modern .checkout-empty-state p {
  color: var(--cita-comp-text-muted);
}

.cita-checkout-modern .checkout-empty-icon {
  color: #06b6d4;
  opacity: 0.6;
}

/* ============================================================
   SUCCESS STATE
   ============================================================ */
.cita-checkout-modern .checkout-success-box,
.modern-tickets-wrapper .checkout-success-box {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--checkout-card-radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cita-checkout-modern .checkout-success-icon {
  color: var(--cita-accent-cyan);
}

.cita-checkout-modern .checkout-success-title {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  color: var(--cita-text-heading);
}

.cita-checkout-modern .checkout-success-text {
  color: var(--cita-comp-text-muted);
}

/* ============================================================
   ANNOUNCEMENT POPUP - Cyan Glassmorphism
   ============================================================ */
[data-template="modern"] .announcement-popup-card,
.cita-checkout-modern .announcement-popup-card,
.modern-tickets-wrapper .announcement-popup-card {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--checkout-card-radius, 0.5rem);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

[data-template="modern"] .announcement-popup-accent,
.cita-checkout-modern .announcement-popup-accent {
  color: var(--cita-accent-cyan, #06b6d4);
}

[data-template="modern"] .announcement-popup-title,
.cita-checkout-modern .announcement-popup-title {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  color: var(--cita-text-heading, #f8fafc);
}

[data-template="modern"] .announcement-popup-article,
.cita-checkout-modern .announcement-popup-article {
  background: rgba(6, 182, 212, 0.05);
  border-color: rgba(6, 182, 212, 0.15);
}

[data-template="modern"] .announcement-popup-header,
.cita-checkout-modern .announcement-popup-header {
  border-bottom-color: rgba(6, 182, 212, 0.15);
}

[data-template="modern"] .announcement-popup-footer,
.cita-checkout-modern .announcement-popup-footer {
  border-top-color: rgba(6, 182, 212, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  [data-template="modern"] .announcement-popup-card,
  .cita-checkout-modern .announcement-popup-card,
  .modern-tickets-wrapper .announcement-popup-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   MODULAR CHECKOUT INLINE FORM OVERRIDES
   Template-aware styling for ticket_inline_forms.html elements
   ============================================================ */

/* Inline form container – Cyan divider */
.modern-tickets-wrapper .ticket-checkout-inline.expanded {
  --checkout-inline-divider: rgba(6, 182, 212, 0.2);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

/* Consent Box – Cyan-tinted glassmorphism (standalone, e.g. logged-in form) */
.modern-tickets-wrapper .checkout-consent-box {
  padding: 1.25rem;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: var(--checkout-radius-lg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Consent Box INSIDE a section card: no double border/background */
.modern-tickets-wrapper .checkout-section .checkout-consent-box {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  border-radius: 0;
}

/* Person card title accent */
.modern-tickets-wrapper .checkout-section .checkout-consent-box > .text-sm.font-semibold:first-child {
  color: var(--cita-accent-cyan);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(6, 182, 212, 0.15);
}

/* More generous spacing between inner elements */
.modern-tickets-wrapper .checkout-section > .space-y-3 > * + * {
  margin-top: 1rem;
}
.modern-tickets-wrapper .checkout-section .checkout-consent-box + .checkout-consent-box {
  margin-top: 0.75rem;
}

/* Tier pricing table – no double border inside section card */
.modern-tickets-wrapper .tier-pricing-table {
  border: none;
  background: rgba(6, 182, 212, 0.04);
}

/* Min/Max label styling */
.modern-tickets-wrapper [data-checkout-group] .text-xs.checkout-helper-text {
  color: var(--checkout-text-muted, #94a3b8);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

/* Summary box – glass override */
.cita-checkout-modern .checkout-summary-box {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(71, 85, 105, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Remove button in person cards */
.modern-tickets-wrapper [data-plus-one-remove] {
  font-size: 0.75rem;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.modern-tickets-wrapper [data-plus-one-remove]:hover {
  opacity: 1;
}

/* Opacity-variant backgrounds */
.modern-tickets-wrapper .bg-slate-900\/90,
.modern-tickets-wrapper .bg-slate-900\/70,
.modern-tickets-wrapper .bg-slate-800\/50 {
  background: var(--checkout-surface-elevated) !important;
}

/* Label text */
.modern-tickets-wrapper .text-slate-200 {
  color: var(--cita-text-heading) !important;
}

/* Checkbox border */
.modern-tickets-wrapper .border-slate-600 {
  border-color: rgba(148, 163, 184, 0.2) !important;
}

/* Shadow override */
.modern-tickets-wrapper .shadow-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Checkbox checked states */
.modern-tickets-wrapper input[type="checkbox"]:checked {
  background: #06b6d4 !important;
  border-color: #06b6d4 !important;
}

/* Checkbox focus – unified cyan (fallback for non-Tailwind checkboxes) */
.modern-tickets-wrapper input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.3) !important;
  outline: none;
}

/* Focus ring */
.modern-tickets-wrapper .focus\:ring-cyan-400:focus,
.modern-tickets-wrapper .focus\:ring-emerald-400:focus,
.modern-tickets-wrapper .focus\:ring-amber-400:focus {
  --tw-ring-color: #06b6d4 !important;
}

/* Links */
.modern-tickets-wrapper a.text-cyan-400 {
  color: #22d3ee !important;
}

.modern-tickets-wrapper a.hover\:text-cyan-200:hover {
  color: #67e8f9 !important;
}

/* Qty/Wallet button overrides */
.modern-tickets-wrapper .bg-slate-800 {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.modern-tickets-wrapper .hover\:bg-slate-700:hover {
  background: rgba(6, 182, 212, 0.1) !important;
}

/* Icon accent colors – Alle Section-Icons zu einheitlichem Cyan */
.modern-tickets-wrapper .text-cyan-300 {
  color: #22d3ee !important;
}
.modern-tickets-wrapper .checkout-section-header .text-emerald-300,
.modern-tickets-wrapper .checkout-section-header .text-amber-300,
.modern-tickets-wrapper .checkout-section-header .text-emerald-200 {
  color: #22d3ee !important;
}

/* Discount text – Emerald für Rabattzeilen */
.modern-tickets-wrapper [data-checkout-summary] .text-emerald-300 {
  color: #6ee7b7 !important;
}

/* Promo Feedback Farben */
.modern-tickets-wrapper .text-rose-300 {
  color: #fca5a5 !important;
}

/* Submit Button – Cyan Gradient */
.modern-tickets-wrapper button[type="submit"] {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  border-color: #06b6d4 !important;
  color: #0f172a !important;
  border-radius: var(--checkout-radius-lg) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25) !important;
  transition: all 0.2s ease !important;
}
.modern-tickets-wrapper button[type="submit"]:hover:not(:disabled) {
  background: linear-gradient(135deg, #22d3ee, #06b6d4) !important;
  border-color: #22d3ee !important;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35) !important;
  transform: translateY(-1px);
}
.modern-tickets-wrapper button[type="submit"]:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.2) !important;
}
.modern-tickets-wrapper button[type="submit"]:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  filter: grayscale(30%);
  transform: none !important;
  box-shadow: none !important;
}
.modern-tickets-wrapper button[type="submit"]:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}

/* ============================================================
   ACCESS CODE — Modern Glassmorphism Override
   Uses CSS Custom Properties from access-code.css architecture.
   Scoped to .cita-checkout-modern (checkout page) since
   .modern-tickets-wrapper scope lives in access-code.css.
   ============================================================ */
.cita-checkout-modern .access-code-section {
  --access-code-link: rgba(148, 163, 184, 0.7);
  --access-code-link-hover: #06b6d4;
  --access-code-section-bg: rgba(6, 182, 212, 0.03);
  --access-code-section-border: rgba(71, 85, 105, 0.2);
  --access-code-trigger-hover-bg: rgba(6, 182, 212, 0.05);
  --access-code-divider: rgba(6, 182, 212, 0.1);
  --access-code-border: rgba(6, 182, 212, 0.15);
  --access-code-input-bg: rgba(15, 23, 42, 0.4);
  --access-code-input-text: #e2e8f0;
  --access-code-placeholder: rgba(148, 163, 184, 0.4);
  --access-code-focus: #06b6d4;
  --access-code-focus-ring: rgba(6, 182, 212, 0.15);
  --access-code-btn-bg: rgba(6, 182, 212, 0.1);
  --access-code-btn-bg-hover: rgba(6, 182, 212, 0.2);
  --access-code-btn-text: rgba(6, 182, 212, 0.7);
  --access-code-text-muted: rgba(148, 163, 184, 0.5);
  --access-code-clear-color: #fca5a5;
  --access-code-clear-bg: rgba(248, 113, 113, 0.08);
  --access-code-radius: 0.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cita-checkout-modern .access-code-input-group {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cita-checkout-modern .access-code-input {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.cita-checkout-modern .access-code-trigger {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8125rem;
}

/* Light Mode */
:root[data-theme="light"] .cita-checkout-modern .access-code-section {
  --access-code-link: #64748b;
  --access-code-link-hover: #0891b2;
  --access-code-section-bg: rgba(241, 245, 249, 0.5);
  --access-code-section-border: rgba(148, 163, 184, 0.25);
  --access-code-trigger-hover-bg: rgba(6, 182, 212, 0.05);
  --access-code-divider: rgba(148, 163, 184, 0.2);
  --access-code-border: rgba(148, 163, 184, 0.35);
  --access-code-input-bg: #ffffff;
  --access-code-input-text: #0f172a;
  --access-code-placeholder: rgba(148, 163, 184, 0.6);
  --access-code-focus: #0891b2;
  --access-code-focus-ring: rgba(8, 145, 178, 0.12);
  --access-code-btn-bg: rgba(14, 116, 144, 0.06);
  --access-code-btn-bg-hover: rgba(14, 116, 144, 0.12);
  --access-code-btn-text: rgba(14, 116, 144, 0.6);
  --access-code-text-muted: #94a3b8;
  --access-code-clear-color: #e11d48;
  --access-code-clear-bg: rgba(225, 29, 72, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root[data-theme="light"] .cita-checkout-modern .access-code-input-group {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Plus-One Add Button – Cyan Outline */
.modern-tickets-wrapper [data-plus-one-add] {
  background: transparent !important;
  border: 1px solid rgba(6, 182, 212, 0.4) !important;
  color: #06b6d4 !important;
  border-radius: var(--checkout-radius-lg) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}
.modern-tickets-wrapper [data-plus-one-add]:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.1) !important;
  border-color: #06b6d4 !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.1);
}
.modern-tickets-wrapper [data-plus-one-add]:focus-visible {
  outline: 2px solid var(--cita-accent-cyan);
  outline-offset: 2px;
}

/* Promo Apply Button – Cyan Outline (Premium) */
.modern-tickets-wrapper [data-promo-apply] {
  background: rgba(6, 182, 212, 0.06) !important;
  border: 1.5px solid rgba(6, 182, 212, 0.45) !important;
  color: #22d3ee !important;
  border-radius: var(--checkout-radius-lg) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: all 0.2s ease !important;
}
.modern-tickets-wrapper [data-promo-apply]:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.12) !important;
  border-color: #06b6d4 !important;
  color: #22d3ee !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.15);
  transform: translateY(-1px);
}
.modern-tickets-wrapper [data-promo-apply]:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: none;
}
.modern-tickets-wrapper [data-promo-apply]:focus-visible {
  outline: 2px solid var(--cita-accent-cyan);
  outline-offset: 2px;
}

/* Quantity +/- Buttons – Glassmorphism */
.modern-tickets-wrapper [data-qty-decrease],
.modern-tickets-wrapper [data-qty-increase] {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: var(--cita-text-heading) !important;
  border-radius: var(--checkout-radius-md) !important;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease !important;
}
.modern-tickets-wrapper [data-qty-decrease]:hover:not(:disabled),
.modern-tickets-wrapper [data-qty-increase]:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.15) !important;
  border-color: #22d3ee !important;
  color: #22d3ee !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.15);
}
.modern-tickets-wrapper [data-qty-decrease]:focus-visible,
.modern-tickets-wrapper [data-qty-increase]:focus-visible {
  outline: 2px solid var(--cita-accent-cyan);
  outline-offset: 2px;
}
.modern-tickets-wrapper [data-qty-decrease]:disabled,
.modern-tickets-wrapper [data-qty-increase]:disabled {
  opacity: 0.4 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: not-allowed !important;
}

/* Quantity Display — premium glass feel */
.modern-tickets-wrapper [data-qty-input] {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(71, 85, 105, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Group Discount Info — subtle badge styling */
.modern-tickets-wrapper [data-checkout-group] .checkout-text-secondary,
.modern-tickets-wrapper [data-checkout-group] .text-xs:not(.checkout-helper-text) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;
  color: #22d3ee;
  opacity: 0.85;
}

/* Helper Text — Inter font, subtle */
.modern-tickets-wrapper .checkout-helper-text,
.modern-tickets-wrapper .checkout-help-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.7);
  letter-spacing: 0.01em;
}

/* Price Summary – Cyan Accent */
.modern-tickets-wrapper [data-checkout-summary] {
  position: relative;
  padding-top: 1rem;
}
.modern-tickets-wrapper [data-checkout-summary]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.4), transparent);
}
.modern-tickets-wrapper [data-checkout-summary] .text-sm.font-semibold {
  color: #22d3ee !important;
}

/* ============================================================
   DARK-THEME TEMPLATE-ACCENT OVERRIDES
   ============================================================ */

/* Section Number Badge – Cyan with subtle glow */
.modern-tickets-wrapper .checkout-section-number {
  background: #06b6d4 !important;
  color: #0f172a !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
  font-size: 0.6875rem;
  font-weight: 700;
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
}

/* Login Panel – Template-aware */
.modern-tickets-wrapper [data-login-inline] {
  background: rgba(6, 182, 212, 0.08) !important;
  border-color: rgba(6, 182, 212, 0.25) !important;
}
.modern-tickets-wrapper [data-login-inline] .text-amber-100 {
  color: var(--checkout-text, #f1f5f9) !important;
}

/* Consent Links in inline forms */
.modern-tickets-wrapper a[href*="datenschutz"],
.modern-tickets-wrapper a[href*="agb"] {
  color: var(--checkout-primary-hover, #22d3ee) !important;
}

/* ============================================================
   INLINE FORM FIELD REFINEMENTS
   Fieldset sections, inputs, labels, consent boxes
   ============================================================ */

/* --- Fieldset Section – Glassmorphism Card with Accent --- */
.modern-tickets-wrapper .checkout-section {
  position: relative;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--checkout-border-subtle, rgba(71, 85, 105, 0.3));
  border-radius: var(--checkout-radius-xl);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modern-tickets-wrapper .checkout-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent);
  pointer-events: none;
}

/* --- Section Header (Legend) – anchored header bar --- */
.modern-tickets-wrapper .checkout-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cita-text-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.025em;
  /* Full-width header bar anchored to card top */
  margin: -1.25rem -1.25rem 1rem -1.25rem;
  padding: 1rem 1.25rem;
  width: calc(100% + 2.5rem);
  background: rgba(6, 182, 212, 0.08);
  border-bottom: 1px solid rgba(6, 182, 212, 0.15);
  position: relative;
}

/* Gradient underline accent replacing flat border */
.modern-tickets-wrapper .checkout-section-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.6), rgba(6, 182, 212, 0.15), transparent);
  pointer-events: none;
}

/* Title span – ensure flex alignment */
.modern-tickets-wrapper .checkout-section-header > span:last-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

/* Section header icon – subtle cyan glow */
.modern-tickets-wrapper .checkout-section-header svg {
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.4));
  flex-shrink: 0;
}

/* --- Input – Rounded Corners + Transitions --- */
.modern-tickets-wrapper .checkout-input {
  border-radius: var(--checkout-radius-md);
  background: var(--cita-input-bg);
  border-color: var(--checkout-border);
  color: var(--cita-input-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.modern-tickets-wrapper .checkout-input:hover:not(:focus):not(:disabled) {
  border-color: rgba(100, 116, 139, 0.5);
  background: rgba(15, 23, 42, 0.65);
}

.modern-tickets-wrapper .checkout-input:focus {
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2), 0 0 12px rgba(6, 182, 212, 0.06);
  outline: none;
}

.modern-tickets-wrapper .checkout-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--cita-bg-inset);
}

.modern-tickets-wrapper .checkout-input::placeholder {
  color: var(--cita-input-placeholder);
}

.modern-tickets-wrapper select.checkout-input {
  border-radius: var(--checkout-radius-md);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.modern-tickets-wrapper textarea.checkout-input {
  border-radius: var(--checkout-radius-md);
}

.modern-tickets-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.7;
  cursor: pointer;
}

/* --- Label – Larger, More Readable --- */
.modern-tickets-wrapper .checkout-label {
  font-size: 0.8125rem;
  color: var(--cita-text-secondary);
  font-weight: 500;
  margin-bottom: 0.375rem;
}

/* ============================================================
   WAITLIST FORM – MODERN THEME
   Info banner, buttons, consent items
   ============================================================ */

/* --- Info Banner – Cyan Glassmorphism --- */
.modern-tickets-wrapper .checkout-info-banner {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--checkout-radius-xl);
}

.modern-tickets-wrapper .checkout-info-banner-icon {
  background: rgba(6, 182, 212, 0.2);
  color: #22d3ee;
}

.modern-tickets-wrapper .checkout-info-banner-title {
  color: var(--cita-text-heading);
}

.modern-tickets-wrapper .checkout-info-banner-row svg {
  color: #22d3ee;
}

/* --- Info Box – Primary Theme --- */
.modern-tickets-wrapper .checkout-info-box {
  background: color-mix(in srgb, var(--checkout-primary, #06b6d4) 8%, transparent);
  border-color: color-mix(in srgb, var(--checkout-primary, #06b6d4) 25%, transparent);
  color: var(--checkout-text, #e2e8f0);
}

.modern-tickets-wrapper .checkout-info-box svg {
  color: var(--checkout-primary-hover, #22d3ee);
}

.modern-tickets-wrapper .checkout-info-box .checkout-link {
  color: var(--checkout-primary-hover, #22d3ee);
}

/* --- Waitlist Toggle Button --- */
.modern-tickets-wrapper .checkout-btn-waitlist {
  border-color: color-mix(in srgb, var(--checkout-primary) 40%, transparent);
  color: var(--checkout-text);
  border-radius: var(--checkout-radius-lg);
}

.modern-tickets-wrapper .checkout-btn-waitlist:hover {
  border-color: var(--checkout-primary);
  background: color-mix(in srgb, var(--checkout-primary) 10%, transparent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--checkout-primary) 10%, transparent);
}

/* --- Waitlist Submit --- */
.modern-tickets-wrapper .checkout-btn-waitlist-submit {
  background: linear-gradient(135deg, var(--checkout-primary), var(--checkout-primary-hover));
  border-color: var(--checkout-primary);
  color: var(--checkout-btn-text);
  border-radius: var(--checkout-radius-lg);
  font-weight: 700;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--checkout-primary) 25%, transparent);
}

.modern-tickets-wrapper .checkout-btn-waitlist-submit:hover {
  background: linear-gradient(135deg, var(--checkout-primary-hover), var(--checkout-primary));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--checkout-primary) 35%, transparent);
}

/* --- Waitlist Consent Items --- */
.modern-tickets-wrapper .checkout-consent-item {
  color: var(--checkout-text);
}

.modern-tickets-wrapper .checkout-checkbox-wrapper {
  background: var(--cita-checkbox-bg);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-checkbox-radius, 0.25rem);
}

.modern-tickets-wrapper .checkout-checkbox-wrapper:has(.checkout-checkbox:checked) {
  background: #06b6d4;
  border-color: #06b6d4;
}

.modern-tickets-wrapper .checkout-checkbox-wrapper input[type="checkbox"] {
  background: var(--cita-checkbox-bg);
  border-color: var(--checkout-border);
}

.modern-tickets-wrapper .checkout-checkbox-wrapper input[type="checkbox"]:checked {
  background: #06b6d4;
  border-color: #06b6d4;
}

.modern-tickets-wrapper .checkout-checkbox-wrapper input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

/* ============================================================
   FOCUS-VISIBLE + DISABLED STATES
   Accessible keyboard navigation across all interactive elements
   ============================================================ */

/* Global focus-visible ring */
.modern-tickets-wrapper button:focus-visible,
.modern-tickets-wrapper .checkout-input:focus-visible,
.modern-tickets-wrapper a:focus-visible {
  outline: 2px solid var(--cita-accent-cyan);
  outline-offset: 2px;
}

/* Submit button focus-visible (over gradient) */
.modern-tickets-wrapper button[type="submit"]:focus-visible {
  outline: 2px solid var(--cita-accent-cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.2) !important;
}

/* ============================================================
   LOGIN PANEL – Refined Glassmorphism Inputs
   ============================================================ */
.modern-tickets-wrapper [data-login-inline] input[type="email"],
.modern-tickets-wrapper [data-login-inline] input[type="password"],
.modern-tickets-wrapper [data-login-inline] input[type="text"] {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid var(--checkout-border-subtle, rgba(148, 163, 184, 0.2)) !important;
  border-radius: var(--checkout-radius-md, 0.5rem) !important;
  color: var(--checkout-text, #f1f5f9) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modern-tickets-wrapper [data-login-inline] input:hover:not(:focus) {
  border-color: var(--checkout-border-hover, rgba(148, 163, 184, 0.4)) !important;
}
.modern-tickets-wrapper [data-login-inline] input:focus {
  border-color: var(--checkout-primary, #06b6d4) !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
  outline: none;
}

/* Login panel buttons – Consistent with template */
.modern-tickets-wrapper [data-login-inline-submit] {
  background: var(--checkout-btn-bg, linear-gradient(135deg, #06b6d4, #0891b2)) !important;
  color: var(--checkout-btn-text, #0f172a) !important;
  border: none !important;
  border-radius: var(--checkout-radius-md, 0.5rem) !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
}
.modern-tickets-wrapper [data-login-inline-submit]:hover {
  background: var(--checkout-btn-bg-hover, linear-gradient(135deg, #22d3ee, #06b6d4)) !important;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25);
}
.modern-tickets-wrapper [data-login-inline-guest] {
  background: transparent !important;
  border: 1px solid var(--checkout-border-subtle, rgba(148, 163, 184, 0.2)) !important;
  color: var(--checkout-text, #f1f5f9) !important;
  border-radius: var(--checkout-radius-md, 0.5rem) !important;
  transition: all 0.2s ease;
}
.modern-tickets-wrapper [data-login-inline-guest]:hover {
  border-color: rgba(6, 182, 212, 0.4) !important;
  background: rgba(6, 182, 212, 0.05) !important;
}

/* ============================================================
   LIGHT THEME OVERRIDES
   Keep checkout contrast readable when data-theme="light"
   ============================================================ */
/* Light: Primary Button – Dark gradient (matches success page) */
:root[data-theme="light"] .cita-checkout-modern .checkout-btn-primary,
:root[data-theme="light"] .cita-checkout-modern .select-ticket-btn {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-btn-primary:hover:not(:disabled),
:root[data-theme="light"] .cita-checkout-modern .select-ticket-btn:hover:not(:disabled) {
  background: #0f172a;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

:root[data-theme="light"] .modern-tickets-wrapper button[type="submit"] {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15) !important;
}

:root[data-theme="light"] .modern-tickets-wrapper button[type="submit"]:hover:not(:disabled) {
  background: #0f172a !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
}

/* Light: Person cards – subtle cyan on white */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-consent-box {
  background: rgba(6, 182, 212, 0.03);
  border-color: rgba(6, 182, 212, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Light: Person title */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-section .checkout-consent-box > .text-sm.font-semibold:first-child {
  color: #0e7490;
  border-bottom-color: rgba(14, 116, 144, 0.15);
}

/* Light: Summary */
:root[data-theme="light"] .modern-tickets-wrapper [data-checkout-summary] {
  background: rgba(6, 182, 212, 0.04);
  border-color: rgba(14, 116, 144, 0.12);
}

:root[data-theme="light"] .modern-tickets-wrapper .bg-slate-900\/90,
:root[data-theme="light"] .modern-tickets-wrapper .bg-slate-900\/70,
:root[data-theme="light"] .modern-tickets-wrapper .bg-slate-800\/50,
:root[data-theme="light"] .modern-tickets-wrapper .bg-slate-800 {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

:root[data-theme="light"] .modern-tickets-wrapper .text-slate-200 {
  color: #1e293b !important;
}

:root[data-theme="light"] .modern-tickets-wrapper .border-slate-600 {
  border-color: rgba(148, 163, 184, 0.45) !important;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-section {
  background: rgba(255, 255, 255, 0.96);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-section-header {
  background: rgba(6, 182, 212, 0.04);
  border-bottom-color: rgba(14, 116, 144, 0.12);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-section-header::after {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.4), rgba(6, 182, 212, 0.08), transparent);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-section-number {
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-section-header svg {
  filter: drop-shadow(0 0 3px rgba(6, 182, 212, 0.3));
}

:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline] {
  background: rgba(14, 165, 233, 0.1) !important;
  border-color: rgba(14, 165, 233, 0.28) !important;
}

:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline] .text-amber-100 {
  color: #1e293b !important;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-info-box {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.24);
}

/* Light: ALL checkboxes (consent, membership, age, custom fields) */
:root[data-theme="light"] .modern-tickets-wrapper input[type="checkbox"] {
  background-color: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}
:root[data-theme="light"] .modern-tickets-wrapper input[type="checkbox"]:checked {
  background-color: #06b6d4 !important;
  border-color: #06b6d4 !important;
  accent-color: #06b6d4;
}
:root[data-theme="light"] .modern-tickets-wrapper .checkout-consent-checkbox input:checked + .checkout-consent-checkbox-visual svg {
  color: #ffffff !important;
}

/* Light: Consent checkbox visual */
:root[data-theme="light"] .cita-checkout-modern .checkout-consent-checkbox-visual {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.5);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-consent-checkbox:hover .checkout-consent-checkbox-visual {
  border-color: rgba(14, 116, 144, 0.5);
  background: rgba(6, 182, 212, 0.04);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.06);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-consent-checkbox input:checked + .checkout-consent-checkbox-visual {
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-checkbox-wrapper {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.45);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-checkbox-wrapper:hover {
  border-color: rgba(14, 116, 144, 0.4);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.04);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-checkbox-wrapper:has(.checkout-checkbox:checked) {
  background: #06b6d4;
  border-color: #06b6d4;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
}

/* Light: Consent label links */
:root[data-theme="light"] .cita-checkout-modern .checkout-consent-label a {
  color: #0e7490;
  text-decoration-color: rgba(14, 116, 144, 0.3);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-consent-label a:hover {
  color: #0891b2;
  text-decoration-color: #0891b2;
}

/* Light: Quantity Buttons */
:root[data-theme="light"] .modern-tickets-wrapper [data-qty-decrease],
:root[data-theme="light"] .modern-tickets-wrapper [data-qty-increase] {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #334155 !important;
}
:root[data-theme="light"] .modern-tickets-wrapper [data-qty-decrease]:hover:not(:disabled),
:root[data-theme="light"] .modern-tickets-wrapper [data-qty-increase]:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.08) !important;
  border-color: #0e7490 !important;
  color: #0e7490 !important;
}

/* Light: Plus-One + Promo Buttons */
:root[data-theme="light"] .modern-tickets-wrapper [data-plus-one-add],
:root[data-theme="light"] .modern-tickets-wrapper [data-promo-apply] {
  border-color: rgba(14, 116, 144, 0.4) !important;
  color: #0e7490 !important;
}
:root[data-theme="light"] .modern-tickets-wrapper [data-plus-one-add]:hover:not(:disabled),
:root[data-theme="light"] .modern-tickets-wrapper [data-promo-apply]:hover:not(:disabled) {
  background: rgba(14, 116, 144, 0.08) !important;
  border-color: #0e7490 !important;
}

/* Light: Input disabled text */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-input:disabled {
  color: var(--cita-comp-text-muted);
}

/* Light: Select dropdown arrow */
:root[data-theme="light"] .modern-tickets-wrapper select.checkout-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* Light: Calendar picker */
:root[data-theme="light"] .modern-tickets-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.6;
}

/* Light: Login panel */
:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline] input[type="email"],
:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline] input[type="password"],
:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline] input[type="text"] {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: #0f172a !important;
}
:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline-guest] {
  color: #334155 !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}
:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline-guest]:hover {
  border-color: #0e7490 !important;
  color: #0e7490 !important;
}

/* Light: Login panel labels */
:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline] label {
  color: #334155 !important;
}

/* Light: Login submit shadow (less prominent on white) */
:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline-submit] {
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2) !important;
}

/* Light: Password toggle icon contrast */
:root[data-theme="light"] .modern-tickets-wrapper [data-login-inline] button[type="button"] {
  color: #64748b !important;
}

/* Light: Summary Cyan → darker für Kontrast */
:root[data-theme="light"] .modern-tickets-wrapper [data-checkout-summary] .text-sm.font-semibold {
  color: #0e7490 !important;
}
:root[data-theme="light"] .modern-tickets-wrapper [data-checkout-summary] .text-emerald-300 {
  color: #059669 !important;
}

/* Light: text-rose-300 (Remove-Button, Error-Feedback) → higher contrast */
:root[data-theme="light"] .modern-tickets-wrapper .text-rose-300 {
  color: #e11d48 !important;
}

/* Light: text-amber-300 (Warning text) → higher contrast */
:root[data-theme="light"] .modern-tickets-wrapper .text-amber-300 {
  color: #d97706 !important;
}

/* Light: Remove button hover – darker rose for contrast */
:root[data-theme="light"] .modern-tickets-wrapper .hover\:text-rose-200:hover {
  color: #be123c !important;
}
:root[data-theme="light"] .modern-tickets-wrapper [data-plus-one-remove]:hover {
  background-color: rgba(225, 29, 72, 0.08) !important;
}

/* Light: Section accent */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-section::before {
  background: linear-gradient(90deg, transparent, rgba(14, 116, 144, 0.2), transparent);
}

/* Light: Feedback messages */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-feedback,
:root[data-theme="light"] .cita-checkout-modern .checkout-feedback {
  background: rgba(241, 245, 249, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
:root[data-theme="light"] .modern-tickets-wrapper .checkout-feedback--error,
:root[data-theme="light"] .cita-checkout-modern .checkout-feedback--error {
  border-left-color: var(--cita-accent-red);
  color: #991b1b;
}
:root[data-theme="light"] .modern-tickets-wrapper .checkout-feedback--success,
:root[data-theme="light"] .cita-checkout-modern .checkout-feedback--success {
  border-left-color: var(--cita-accent-green);
  color: #166534;
}
:root[data-theme="light"] .modern-tickets-wrapper .checkout-feedback--info,
:root[data-theme="light"] .cita-checkout-modern .checkout-feedback--info {
  border-left-color: var(--cita-accent-cyan);
  color: #0e7490;
}
:root[data-theme="light"] .modern-tickets-wrapper .checkout-feedback--warning,
:root[data-theme="light"] .cita-checkout-modern .checkout-feedback--warning {
  border-left-color: var(--cita-accent-amber);
  color: #92400e;
}

/* Light: Hold timer */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-timer,
:root[data-theme="light"] .cita-checkout-modern .checkout-timer {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(217, 119, 6, 0.3);
  color: #92400e;
}
:root[data-theme="light"] .modern-tickets-wrapper .checkout-timer--critical,
:root[data-theme="light"] .cita-checkout-modern .checkout-timer--critical {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
  color: #991b1b;
}

/* Light: CSS Variable overrides — ensures ALL elements using checkout vars are readable */
:root[data-theme="light"] .modern-tickets-wrapper {
  --checkout-text: #0f172a;
  --checkout-text-muted: #475569;
  --checkout-text-subtle: #64748b;
  --checkout-border: rgba(148, 163, 184, 0.45);
  --checkout-border-subtle: rgba(148, 163, 184, 0.25);
  --checkout-surface: #f1f5f9;
  --checkout-bg: #ffffff;
}

/* Light: Tailwind utility class overrides for dark-mode text colors */
:root[data-theme="light"] .modern-tickets-wrapper .text-white {
  color: #0f172a !important;
}
:root[data-theme="light"] .modern-tickets-wrapper .text-slate-300 {
  color: #334155 !important;
}
:root[data-theme="light"] .modern-tickets-wrapper .text-slate-400 {
  color: #475569 !important;
}
:root[data-theme="light"] .modern-tickets-wrapper .text-cyan-400 {
  color: #0e7490 !important;
}
:root[data-theme="light"] .modern-tickets-wrapper .text-emerald-300 {
  color: #059669 !important;
}
:root[data-theme="light"] .modern-tickets-wrapper .text-violet-300 {
  color: #6d28d9 !important;
}
:root[data-theme="light"] .modern-tickets-wrapper .text-amber-400 {
  color: #b45309 !important;
}
:root[data-theme="light"] .modern-tickets-wrapper .ticket-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}
:root[data-theme="light"] .modern-tickets-wrapper .border-slate-700\/50 {
  border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Light: Legal info text — ensure partner details are readable */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-legal-info {
  color: #475569;
  border-color: rgba(148, 163, 184, 0.35);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-legal-summary {
  color: #334155;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-legal-heading,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-legal-name {
  color: #0f172a;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-legal-details,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-legal-notice {
  color: #475569;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-legal-info[open] .checkout-legal-summary {
  border-bottom-color: rgba(148, 163, 184, 0.25);
}

/* Light: Consent label & helper text readability */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-consent-label,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-consent-text {
  color: #1e293b;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-consent-sublabel,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-consents-group-label {
  color: #64748b;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-label {
  color: #334155;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-helper-text,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-help-text {
  color: #64748b;
}

/* Light: Section icon header */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-section-icon-title {
  color: #0f172a;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-section-icon {
  color: #0e7490;
}

/* Light: Person card text */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-person-title {
  color: #0e7490;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-person-status--complete {
  color: #059669;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-person-status--incomplete {
  color: #64748b;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-person-badge {
  background: rgba(6, 182, 212, 0.1);
  color: #0e7490;
}

/* Light: Person card & summary backgrounds */
:root[data-theme="light"] .cita-checkout-modern .checkout-person-card {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root[data-theme="light"] .cita-checkout-modern details.checkout-person-details > summary {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Light: Waitlist button readability */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-btn-waitlist {
  color: #334155;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(6, 182, 212, 0.06);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-btn-waitlist:hover {
  border-color: #0e7490;
  background: rgba(6, 182, 212, 0.12);
  color: #0e7490;
}

/* Light: Info banner */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-info-banner {
  background: rgba(6, 182, 212, 0.06);
  border-color: rgba(6, 182, 212, 0.2);
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-info-banner-icon {
  background: rgba(6, 182, 212, 0.12);
  color: #0e7490;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-info-banner-title {
  color: #0f172a;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-info-banner-row {
  color: #475569;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-info-banner-note {
  color: #64748b;
}

/* Light: Semantic text utilities */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-text-muted {
  color: #64748b;
}

:root[data-theme="light"] .modern-tickets-wrapper .checkout-text-secondary {
  color: #475569;
}

/* Light-mode badge colors -- dark text on light backgrounds */
:root[data-theme="light"] .cita-checkout-modern .checkout-badge--success,
:root[data-theme="light"] .cita-checkout-modern .checkout-badge--free,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-badge--success,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-badge--free {
  background: rgba(22, 163, 74, 0.1);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.3);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-badge--warning,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-badge--warning {
  background: rgba(217, 119, 6, 0.1);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.3);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-badge--neutral,
:root[data-theme="light"] .cita-checkout-modern .checkout-badge--info,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-badge--neutral,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-badge--info {
  background: rgba(71, 85, 105, 0.1);
  color: #475569;
  border-color: rgba(71, 85, 105, 0.25);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-badge--featured,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-badge--featured {
  background: rgba(6, 182, 212, 0.08);
  color: #0e7490;
  border-color: rgba(14, 116, 144, 0.3);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-badge--danger,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-badge--danger {
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
  border-color: rgba(220, 38, 38, 0.25);
}

/* Light-mode danger text override */
:root[data-theme="light"] .cita-checkout-modern,
:root[data-theme="light"] .modern-tickets-wrapper {
  --checkout-danger-text: #dc2626;
}

/* ============================================================
   STICKY SUMMARY BAR — Modern Cyan Override
   The sticky bar is appended to document.body via JS,
   so it's OUTSIDE [data-template="modern"] scope.
   Must use body:has() with hardcoded values, not CSS vars.
   ============================================================ */
body:has([data-template="modern"]) .checkout-summary-sticky {
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(6, 182, 212, 0.12);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body:has([data-template="modern"]) .checkout-summary-sticky-total {
  color: #e2e8f0;
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
}

body:has([data-template="modern"]) .checkout-summary-sticky-label {
  color: #94a3b8;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.6875rem;
}

body:has([data-template="modern"]) .checkout-summary-sticky-btn {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #0f172a;
  border: none;
  border-radius: 0.5rem;
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25);
  transition: all 0.2s ease;
}

body:has([data-template="modern"]) .checkout-summary-sticky-btn:hover {
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35);
  transform: translateY(-1px);
}

body:has([data-template="modern"]) .checkout-summary-sticky-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.2);
}

body:has([data-template="modern"]) .checkout-summary-sticky-btn:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}

/* Light-mode sticky summary bar */
:root[data-theme="light"] body:has([data-template="modern"]) .checkout-summary-sticky {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

:root[data-theme="light"] body:has([data-template="modern"]) .checkout-summary-sticky-total {
  color: #0f172a;
}

:root[data-theme="light"] body:has([data-template="modern"]) .checkout-summary-sticky-label {
  color: #475569;
}

:root[data-theme="light"] body:has([data-template="modern"]) .checkout-summary-sticky-btn {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] body:has([data-template="modern"]) .checkout-summary-sticky-btn:hover {
  background: #0f172a;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

/* Light-mode promo section */
:root[data-theme="light"] .cita-checkout-modern [data-checkout-promo] {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(148, 163, 184, 0.3);
}

:root[data-theme="light"] .cita-checkout-modern [data-promo-input] {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.4);
  color: #0f172a;
}

:root[data-theme="light"] .cita-checkout-modern [data-promo-apply] {
  background: rgba(14, 116, 144, 0.04);
  border-color: rgba(14, 116, 144, 0.4);
  color: #0e7490;
}

:root[data-theme="light"] .cita-checkout-modern [data-promo-apply]:hover:not(:disabled) {
  background: rgba(14, 116, 144, 0.1);
  border-color: #0e7490;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-promo-btn {
  background: rgba(14, 116, 144, 0.04);
  border-color: rgba(14, 116, 144, 0.4);
  color: #0e7490;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-promo-btn:hover:not(:disabled) {
  background: rgba(14, 116, 144, 0.1);
  border-color: #0e7490;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-promo-input {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Light: Quantity display */
:root[data-theme="light"] .modern-tickets-wrapper [data-qty-input] {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(148, 163, 184, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Light: Group discount text */
:root[data-theme="light"] .modern-tickets-wrapper [data-checkout-group] .checkout-text-secondary,
:root[data-theme="light"] .modern-tickets-wrapper [data-checkout-group] .text-xs:not(.checkout-helper-text) {
  color: #0e7490;
}

/* Light: Helper text */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-helper-text,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-help-text {
  color: #64748b;
}

/* Light: Consents divider */
:root[data-theme="light"] .modern-tickets-wrapper .checkout-consents-divider {
  background: linear-gradient(90deg, transparent, rgba(14, 116, 144, 0.12), transparent);
}

/* Light-mode skeleton shimmer */
:root[data-theme="light"] .cita-checkout-modern .checkout-skeleton,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-skeleton {
  background: linear-gradient(
    90deg,
    rgba(241, 245, 249, 0.6) 25%,
    rgba(226, 232, 240, 0.6) 50%,
    rgba(241, 245, 249, 0.6) 75%
  );
  background-size: 200% 100%;
}

/* Light-mode person card hover + consent box */
:root[data-theme="light"] .cita-checkout-modern .checkout-person-card:hover,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-person-card:hover {
  border-color: rgba(14, 116, 144, 0.25);
  background: #f1f5f9;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-consent-box,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-consent-box {
  background: rgba(241, 245, 249, 0.6);
  border-color: rgba(148, 163, 184, 0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Light-mode: Announcement Popup (dark glass → light surface) */
:root[data-theme="light"] [data-template="modern"] .announcement-popup-card,
:root[data-theme="light"] .cita-checkout-modern .announcement-popup-card,
:root[data-theme="light"] .modern-tickets-wrapper .announcement-popup-card {
  background: rgba(241, 245, 249, 0.85);
  border-color: rgba(6, 182, 212, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

:root[data-theme="light"] [data-template="modern"] .announcement-popup-title,
:root[data-theme="light"] .cita-checkout-modern .announcement-popup-title {
  color: #0f172a;
}

:root[data-theme="light"] [data-template="modern"] .announcement-popup-article,
:root[data-theme="light"] .cita-checkout-modern .announcement-popup-article {
  background: rgba(241, 245, 249, 0.6);
  border-color: rgba(148, 163, 184, 0.25);
}

:root[data-theme="light"] [data-template="modern"] .announcement-popup-article-title,
:root[data-theme="light"] .cita-checkout-modern .announcement-popup-article-title {
  color: #0f172a;
}

:root[data-theme="light"] [data-template="modern"] .announcement-popup-article-body,
:root[data-theme="light"] .cita-checkout-modern .announcement-popup-article-body {
  color: #475569;
}

:root[data-theme="light"] [data-template="modern"] .announcement-popup-header,
:root[data-theme="light"] .cita-checkout-modern .announcement-popup-header {
  border-bottom-color: rgba(148, 163, 184, 0.25);
}

:root[data-theme="light"] [data-template="modern"] .announcement-popup-footer,
:root[data-theme="light"] .cita-checkout-modern .announcement-popup-footer {
  border-top-color: rgba(148, 163, 184, 0.25);
}

/* Light-mode: Promo feedback (was invisible light text on white) */
:root[data-theme="light"] .cita-checkout-modern .checkout-promo-feedback--success,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-promo-feedback--success {
  background: rgba(22, 163, 74, 0.08);
  border-left-color: #16a34a;
  color: #166534;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-promo-feedback--error,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-promo-feedback--error {
  background: rgba(220, 38, 38, 0.08);
  border-left-color: #dc2626;
  color: #991b1b;
}

/* Light-mode: Age confirmation (was #fcd34d = invisible on white) */
:root[data-theme="light"] .cita-checkout-modern .checkout-age-confirm,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-age-confirm {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.25);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-age-confirm-text,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-age-confirm-text {
  color: #92400e;
}

/* Light-mode: .cita-checkout-modern scope dark backgrounds */
:root[data-theme="light"] .cita-checkout-modern .checkout-ticket-option:hover:not(.checkout-ticket-option--disabled) {
  background: rgba(241, 245, 249, 0.9);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-ticket-option--featured {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(241, 245, 249, 0.8) 100%);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-input {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-input:hover:not(:focus):not(:disabled) {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.5);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-input:focus {
  background: #ffffff;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-input-sm,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-input-sm {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.4);
  color: #0f172a;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-summary {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(148, 163, 184, 0.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-summary-box {
  background: rgba(241, 245, 249, 0.6);
  border-color: rgba(148, 163, 184, 0.25);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-ticket-card,
:root[data-theme="light"] .cita-checkout-modern .checkout-user-ticket-card {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-user-ticket-card:hover {
  background: #f1f5f9;
}

:root[data-theme="light"] .cita-checkout-modern .checkout-group {
  background: rgba(241, 245, 249, 0.8);
  border-color: rgba(148, 163, 184, 0.3);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-plus-one-card {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.3);
}

/* Light-mode: capacity text */
:root[data-theme="light"] .cita-checkout-modern .checkout-capacity-text strong {
  color: #0e7490;
}

/* Light-mode: consent links (cyan too light on white) */
:root[data-theme="light"] .cita-checkout-modern .checkout-consent-label a,
:root[data-theme="light"] .modern-tickets-wrapper .checkout-consent-label a {
  color: #0e7490;
}

/* ============================================================
   TEXT SELECTION - Cyan Highlight
   ============================================================ */
[data-template="modern"] ::selection {
  background: rgba(6, 182, 212, 0.3);
  color: #f8fafc;
}

:root[data-theme="light"] [data-template="modern"] ::selection {
  background: rgba(6, 182, 212, 0.25);
  color: #0f172a;
}

/* ============================================================
   PLACEHOLDER - Modern Slate
   ============================================================ */
.cita-checkout-modern .checkout-input::placeholder {
  color: rgba(148, 163, 184, 0.6);
}

/* ============================================================
   SKELETON SHIMMER - Dark Mode
   ============================================================ */
.cita-checkout-modern .checkout-skeleton,
.modern-tickets-wrapper .checkout-skeleton {
  background: linear-gradient(
    90deg,
    rgba(30, 41, 59, 0.6) 25%,
    rgba(51, 65, 85, 0.6) 50%,
    rgba(30, 41, 59, 0.6) 75%
  );
  background-size: 200% 100%;
  animation: checkout-shimmer 1.5s infinite;
  border-radius: var(--checkout-radius-md);
}

/* ============================================================
   ERROR BANNER - Red-Tinted Glass
   ============================================================ */
.cita-checkout-modern .checkout-feedback--error,
.modern-tickets-wrapper .checkout-feedback--error {
  background: rgba(239, 68, 68, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left-color: #ef4444;
}

/* ============================================================
   SOLD-OUT OVERLAY - Dark Glass + Blur
   ============================================================ */
.cita-checkout-modern .checkout-ticket-soldout {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--checkout-card-radius);
}

:root[data-theme="light"] .cita-checkout-modern .checkout-ticket-soldout {
  background: rgba(241, 245, 249, 0.85);
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-contrast: high) {
  .modern-tickets-wrapper .checkout-section {
    border-width: 2px;
  }
  .modern-tickets-wrapper .checkout-input {
    border-width: 2px;
  }
  .modern-tickets-wrapper button {
    border-width: 2px;
  }
  .modern-tickets-wrapper .checkout-section-number {
    box-shadow: none;
  }
  .modern-tickets-wrapper .checkout-section-header {
    border-bottom-width: 2px;
  }
  .modern-tickets-wrapper .checkout-section-header::after {
    height: 2px;
  }
  .modern-tickets-wrapper .checkout-section-header svg {
    filter: none;
  }
  .cita-checkout-modern .checkout-consent-checkbox-visual,
  .cita-checkout-modern .checkout-checkbox-wrapper {
    border-width: 2px;
  }
}

/* ============================================================
   MOBILE RESPONSIVE — Tablet (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Container padding reduction */
  .cita-checkout-modern .checkout-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hero card compact */
  .cita-checkout-modern .checkout-hero-card {
    padding: 1rem;
  }

  /* Ticket section compact */
  .cita-checkout-modern .checkout-ticket-section {
    padding: 1rem;
  }

  /* Ticket option cards */
  .cita-checkout-modern .checkout-ticket-option {
    padding: 0.875rem;
  }

  /* Form panel compact */
  .cita-checkout-modern .checkout-form-panel {
    padding: 1rem;
  }

  /* Summary compact */
  .cita-checkout-modern .checkout-summary {
    padding: 1rem;
  }

  /* Grid collapse for ticket cards */
  .modern-tickets-wrapper .grid.sm\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  /* Modal compact */
  .cita-checkout-modern .checkout-modal-content {
    margin: 1rem;
    max-width: calc(100vw - 2rem);
  }
}

/* ============================================================
   MOBILE RESPONSIVE — Compact (max-width: 639px)
   ============================================================ */
@media (max-width: 639px) {
  .cita-checkout-modern .checkout-ticket-option {
    border-radius: var(--checkout-radius-md);
  }

  .cita-checkout-modern .checkout-form-panel {
    border-radius: var(--checkout-radius-md);
  }

  .cita-checkout-modern .checkout-ticket-option-name {
    font-size: 1rem;
  }

  .cita-checkout-modern .checkout-ticket-option-price {
    font-size: 1.25rem;
  }

  /* Timer compact on mobile */
  .cita-checkout-modern .checkout-timer,
  .modern-tickets-wrapper .checkout-timer {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  /* Capacity text truncation */
  .cita-checkout-modern .checkout-capacity-text {
    font-size: 0.75rem;
  }

  /* iOS Safari input zoom prevention */
  input, select, textarea { font-size: 16px; }

  /* Mobile: Remove backdrop-filter for performance, use solid fallbacks */
  .cita-checkout-modern .checkout-ticket-option {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(30, 41, 59, 0.95);
  }

  .cita-checkout-modern .checkout-form-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(30, 41, 59, 0.95);
  }

  .cita-checkout-modern .checkout-event-hero {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(30, 41, 59, 0.95);
  }

  .cita-checkout-modern .checkout-user-tickets {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(30, 41, 59, 0.95);
  }

  .cita-checkout-modern .checkout-ticket-card,
  .cita-checkout-modern .checkout-user-ticket-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.95);
  }

  .cita-checkout-modern .checkout-summary {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.95);
  }

  .cita-checkout-modern .checkout-person-card,
  .cita-checkout-modern details.checkout-person-details > summary {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.95);
  }

  .cita-checkout-modern .checkout-input {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.9);
  }

  .modern-tickets-wrapper .checkout-section {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.95);
  }

  .modern-tickets-wrapper .checkout-consent-box {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cita-checkout-modern .checkout-ticket-soldout {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cita-checkout-modern .checkout-feedback--error,
  .modern-tickets-wrapper .checkout-feedback--error {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .modern-tickets-wrapper [data-qty-input] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.9);
  }

  .cita-checkout-modern .checkout-promo-input {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.9);
  }

  /* Access code — solid on mobile */
  .cita-checkout-modern .access-code-section,
  .cita-checkout-modern .access-code-input-group {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cita-checkout-modern .access-code-section {
    --access-code-input-bg: rgba(15, 23, 42, 0.9);
  }

  :root[data-theme="light"] .cita-checkout-modern .access-code-section {
    --access-code-input-bg: #ffffff;
  }

  /* Sticky bar — solid on mobile */
  body:has([data-template="modern"]) .checkout-summary-sticky {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.98);
  }

  :root[data-theme="light"] body:has([data-template="modern"]) .checkout-summary-sticky {
    background: rgba(255, 255, 255, 0.98);
  }

  /* Light mode mobile: white solid backgrounds */
  :root[data-theme="light"] .cita-checkout-modern .checkout-ticket-option,
  :root[data-theme="light"] .cita-checkout-modern .checkout-form-panel,
  :root[data-theme="light"] .cita-checkout-modern .checkout-event-hero,
  :root[data-theme="light"] .cita-checkout-modern .checkout-user-tickets {
    background: rgba(255, 255, 255, 0.98);
  }

  :root[data-theme="light"] .cita-checkout-modern .checkout-ticket-card,
  :root[data-theme="light"] .cita-checkout-modern .checkout-user-ticket-card,
  :root[data-theme="light"] .cita-checkout-modern .checkout-summary,
  :root[data-theme="light"] .cita-checkout-modern .checkout-person-card {
    background: #f8fafc;
  }

  :root[data-theme="light"] .modern-tickets-wrapper .checkout-section {
    background: rgba(255, 255, 255, 0.98);
  }

  :root[data-theme="light"] .cita-checkout-modern .checkout-input {
    background: #ffffff;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cita-checkout-modern .checkout-skeleton,
  .modern-tickets-wrapper .checkout-skeleton {
    animation: none;
  }

  .cita-checkout-modern .checkout-ticket-option,
  .cita-checkout-modern .checkout-btn-primary,
  .cita-checkout-modern .select-ticket-btn,
  .cita-checkout-modern .checkout-consent-checkbox-visual,
  .cita-checkout-modern .checkout-checkbox-wrapper,
  .cita-checkout-modern .checkout-promo-input,
  .cita-checkout-modern .checkout-promo-btn,
  .modern-tickets-wrapper .checkout-input,
  .modern-tickets-wrapper .checkout-section,
  .modern-tickets-wrapper button,
  .modern-tickets-wrapper [data-plus-one-add],
  .modern-tickets-wrapper [data-promo-apply],
  .modern-tickets-wrapper [data-qty-decrease],
  .modern-tickets-wrapper [data-qty-increase] {
    transition: none !important;
  }

  .cita-checkout-modern .checkout-ticket-option:hover,
  .cita-checkout-modern .checkout-btn-primary:hover,
  .cita-checkout-modern .select-ticket-btn:hover,
  .cita-checkout-modern .checkout-promo-btn:hover,
  .modern-tickets-wrapper button[type="submit"]:hover,
  .modern-tickets-wrapper [data-qty-decrease]:hover,
  .modern-tickets-wrapper [data-qty-increase]:hover,
  .modern-tickets-wrapper [data-plus-one-add]:hover,
  .modern-tickets-wrapper [data-promo-apply]:hover {
    transform: none !important;
  }

  .cita-checkout-modern .checkout-capacity-fill {
    transition: none !important;
  }

  body:has([data-template="modern"]) .checkout-summary-sticky-btn {
    transition: none !important;
  }

  body:has([data-template="modern"]) .checkout-summary-sticky-btn:hover {
    transform: none !important;
  }
}

/* ============================================================
   PERSON CARD - Modern Glass Override
   ============================================================ */
.cita-checkout-modern .checkout-person-card {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(71, 85, 105, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cita-checkout-modern .checkout-person-card:hover {
  border-color: rgba(6, 182, 212, 0.25);
  background: rgba(15, 23, 42, 0.55);
}

.cita-checkout-modern details.checkout-person-details > summary {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(71, 85, 105, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cita-checkout-modern details.checkout-person-details > summary:hover {
  border-color: rgba(6, 182, 212, 0.25);
  background: rgba(15, 23, 42, 0.55);
}

.cita-checkout-modern .checkout-person-badge {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
}

/* ============================================================
   SECTION ICON HEADER - Modern Style
   ============================================================ */
.cita-checkout-modern .checkout-section-icon-header {
  border-bottom-color: rgba(71, 85, 105, 0.25);
}

.cita-checkout-modern .checkout-section-icon {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.cita-checkout-modern .checkout-section-icon svg {
  color: #22d3ee;
}

/* ============================================================
   INPUT FIELDS - Modern Glass Override
   ============================================================ */
.cita-checkout-modern .checkout-input {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cita-checkout-modern .checkout-input:hover:not(:focus):not(:disabled) {
  border-color: rgba(71, 85, 105, 0.6);
  background: rgba(15, 23, 42, 0.55);
}

.cita-checkout-modern .checkout-input:focus {
  background: rgba(15, 23, 42, 0.6);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25), 0 0 12px rgba(6, 182, 212, 0.08);
}

.cita-checkout-modern .checkout-input-sm,
.modern-tickets-wrapper .checkout-input-sm {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--checkout-radius-sm, 0.25rem);
  color: var(--checkout-text, #f8fafc);
}

.cita-checkout-modern .checkout-input-sm:focus,
.modern-tickets-wrapper .checkout-input-sm:focus {
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
  outline: none;
}

/* ============================================================
   CONSENT BOX - Modern Glass Override
   ============================================================ */
.cita-checkout-modern .checkout-consent-box {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(71, 85, 105, 0.3);
}

/* =================================================================
   DR3.5 (2026-05-02) — Login-Modal Light-Mode Override
   Modal ist Shared-Component (login-modal.css), aber nur Modern hat
   Light-Mode. Override im modern-spezifischen File haelt Skalierungs-
   Pattern: jedes Light-Mode-Template uebernimmt Pflege im eigenen File.
   ================================================================= */
:root[data-theme="light"] .login-modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
}
:root[data-theme="light"] .login-modal-content {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.08);
  color: #0f172a;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .login-modal-title {
  color: #0f172a;
}
:root[data-theme="light"] .login-modal-description {
  color: #475569;
}
:root[data-theme="light"] .login-modal-label {
  color: #334155;
}
:root[data-theme="light"] .login-modal-input {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}
:root[data-theme="light"] .login-modal-input:focus {
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}
:root[data-theme="light"] .login-modal-close {
  color: #475569;
}
:root[data-theme="light"] .login-modal-close:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.05);
}