@import "./_base.css";

/**
 * Classic Checkout Theme
 * Luxurious Navy & Gold - Elegant Business Design
 * Distinct from Modern with rich decorative elements
 */

/* Dark Theme Body Override (scoped via :has) */
body:has([data-template="classic"]),
body:has([data-template="classic"]) .main-section,
body:has([data-template="classic"]) .page-container {
  background: #0a1628 !important;
}

/* CSS Variables (scoped to checkout page) */
[data-template="classic"] {
  /* Colors - Deeper Navy than Modern */
  --checkout-bg: #0a1628;
  --checkout-surface: #0f1a2e;
  --checkout-surface-elevated: #15233a;
  --checkout-surface-hover: #1c2d4a;
  --checkout-border: rgba(201, 169, 98, 0.3);
  --checkout-border-subtle: rgba(201, 169, 98, 0.12);

  --checkout-text: #f8fafc;
  --checkout-text-muted: #cbd5e1;
  --checkout-text-subtle: #94a3b8;

  /* Rich Gold Accent — unified with template gold #c9a962 */
  --checkout-primary: #c9a962;
  --checkout-primary-hover: #e2d5a8;
  --checkout-primary-text: #e2d5a8;
  --checkout-primary-muted: rgba(201, 169, 98, 0.15);

  --checkout-success: #22c55e;
  --checkout-warning: #c9a962;
  --checkout-text-on-accent: #0a1628;
  --checkout-danger: #ef4444;
  --checkout-danger-text: #fca5a5;
  --checkout-text-secondary: #cbd5e1;
  --checkout-focus-ring: #c9a962;
  --checkout-btn-text: #0a1628;
  --checkout-sticky-bg: rgba(10, 22, 40, 0.95);
  --checkout-warning-bg: rgba(201, 169, 98, 0.15);

  /* Elegant shadows — aligned with Landing Page */
  --checkout-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --checkout-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --checkout-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --checkout-shadow-glow: 0 10px 30px rgba(201, 169, 98, 0.35), 0 0 20px rgba(201, 169, 98, 0.15);

  /* Sharp geometric corners — Classic identity */
  --checkout-radius-sm: 0.125rem;
  --checkout-radius-md: 0.125rem;
  --checkout-radius-lg: 0.25rem;
  --checkout-radius-xl: 0.25rem;
  --checkout-radius-2xl: 0.25rem;

  /* Typography - Elegant */
  --checkout-font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  --checkout-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.checkout-container {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Playfair Display — ONLY for titles/names, never for labels/buttons/values */
.checkout-event-title,
.checkout-ticket-card-name,
.checkout-hero-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
}

/* Section titles: Lato uppercase — luxury label pattern, NOT serif */
.checkout-section-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #c9a962;
}

/* ==========================================================
   FONT-FAMILY COMPLETENESS — Override citastyle.css globals
   citastyle.css sets font-family on span/div/p globally.
   Every checkout element must explicitly declare Lato.
   ========================================================== */
.checkout-container,
.checkout-container p,
.checkout-container span,
.checkout-container div,
.checkout-container label,
.checkout-container input,
.checkout-container select,
.checkout-container textarea,
.checkout-container button,
.checkout-container a,
.checkout-container li,
.checkout-container td,
.checkout-container th,
.checkout-container small,
.checkout-container strong,
.checkout-container em,
.checkout-container legend,
.checkout-container fieldset,
.checkout-container details,
.checkout-container summary {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Explicit color for <p> — override citastyle.css p { color: var(--cita-text-primary) } */
.checkout-container p {
  color: var(--checkout-text-muted);
}

/* Component-level Lato overrides */
.checkout-ticket-card-price,
.checkout-ticket-card-desc,
.checkout-ticket-option-description,
.checkout-ticket-option-price,
.checkout-badge-success,
.checkout-badge-warning,
.checkout-badge--info,
.checkout-badge--featured,
.checkout-badge--danger,
.checkout-badge--neutral,
.checkout-badge--exclusive,
.checkout-section-count,
.checkout-consent-label,
.checkout-trust,
.checkout-trust-item,
.checkout-feedback,
.checkout-form-input,
.checkout-nav-link,
.checkout-divider-text,
.checkout-empty-state,
.checkout-timer,
.checkout-promo-btn,
.checkout-capacity-bar,
.checkout-user-ticket-card,
.checkout-mobile-cta,
.checkout-breadcrumb-link,
.checkout-hero-meta-item,
.checkout-capacity,
.checkout-label {
  font-family: 'Lato', sans-serif;
}

/* ============================================================
   HERO SECTION - Gold Decorative Line
   ============================================================ */

.checkout-event-hero {
  position: relative;
  background: linear-gradient(135deg, #132035 0%, #1c2d4a 100%);
  border: 1px solid var(--checkout-border);
}

/* Top gold decorative line */
.checkout-event-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #c9a962 20%, #e2d5a8 50%, #c9a962 80%, transparent 100%);
}

/* Gold gradient title — lightened for WCAG AA contrast on navy */
.checkout-event-title {
  background: linear-gradient(135deg, #e2d5a8 0%, #e2d5a8 50%, #e2d5a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero icon with gold accent */
.checkout-event-hero-icon {
  background: rgba(201, 169, 98, 0.12);
  border: 1px solid rgba(201, 169, 98, 0.3);
  color: var(--checkout-primary-text, #e2d5a8);
}

/* ============================================================
   TICKET CARDS - Gold Borders & Elegance
   ============================================================ */

.checkout-ticket-card {
  background: linear-gradient(180deg, var(--checkout-surface) 0%, var(--checkout-bg) 100%);
  border: 1px solid var(--checkout-border);
  border-top: 2px solid rgba(201, 169, 98, 0.4);
  border-radius: var(--checkout-radius-lg);
  box-shadow: var(--checkout-shadow-md);
  transition: all 0.25s ease-in-out;
}

.checkout-ticket-card:hover {
  border-color: rgba(201, 169, 98, 0.5);
  box-shadow: var(--checkout-shadow-lg), 0 0 25px rgba(201, 169, 98, 0.1);
}

/* Selected card - gold accent */
.checkout-ticket-card.is-selected {
  border-color: #c9a962;
  box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.2), var(--checkout-shadow-lg);
}

/* Card name styling */
.checkout-ticket-card-name {
  color: var(--checkout-text);
  font-weight: 600;
}

/* Price with subtle gold — lightened for WCAG AA */
.checkout-ticket-card-price {
  color: var(--checkout-primary-text, #e2d5a8);
  font-weight: 700;
}

/* ============================================================
   SUMMARY SECTION
   ============================================================ */

.checkout-summary {
  background: linear-gradient(180deg, var(--checkout-surface-elevated) 0%, var(--checkout-surface) 100%);
  border: 1px solid var(--checkout-border);
  border-top: 2px solid rgba(201, 169, 98, 0.4);
  border-radius: var(--checkout-radius-lg);
  position: relative;
}

/* Decorative corner accents */
.checkout-summary::before,
.checkout-summary::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: rgba(201, 169, 98, 0.4);
  border-style: solid;
  border-width: 0;
}

.checkout-summary::before {
  top: -1px;
  left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-radius: var(--checkout-radius-lg) 0 0 0;
}

.checkout-summary::after {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-radius: 0 0 var(--checkout-radius-lg) 0;
}

/* ============================================================
   BUTTONS - Classic Gold Style
   ============================================================ */

.checkout-btn {
  border-radius: var(--checkout-radius-md);
  font-family: var(--checkout-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-template="classic"] .checkout-btn-primary {
  background: linear-gradient(135deg, #c9a962 0%, #e2d5a8 100%);
  border: none;
  color: #0a1628;
  box-shadow: 0 4px 12px rgba(201, 169, 98, 0.25);
  transition: all 0.25s ease-in-out;
}

[data-template="classic"] .checkout-btn-primary:hover {
  background: linear-gradient(135deg, #e2d5a8 0%, #c9a962 100%);
  box-shadow: 0 6px 20px rgba(201, 169, 98, 0.35);
}

.checkout-btn-primary:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(201, 169, 98, 0.2);
  transition: transform 100ms ease-in-out;
}

.checkout-btn-primary:disabled,
.checkout-btn-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
  transform: none;
  box-shadow: none;
}

.checkout-btn-secondary {
  background: transparent;
  border: 1px solid var(--checkout-border);
  color: var(--checkout-text-muted);
  transition: all 0.25s ease-in-out;
}

.checkout-btn-secondary:hover {
  border-color: rgba(201, 169, 98, 0.5);
  color: var(--checkout-text);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

.checkout-input,
.checkout-select {
  background: rgba(10, 22, 40, 0.7);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-md);
  color: var(--checkout-text);
  font-family: 'Lato', sans-serif;
  transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.checkout-input:focus,
.checkout-select:focus {
  border-color: #c9a962;
  box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15);
  outline: none;
}

/* Placeholder gold tint */
.checkout-input::placeholder,
.checkout-select::placeholder {
  color: rgba(201, 169, 98, 0.4);
  font-family: 'Lato', sans-serif;
}

/* Focus-visible outline */
.checkout-input:focus-visible,
.checkout-select:focus-visible {
  outline: 2px solid #c9a962;
  outline-offset: 2px;
}

.classic-tickets-wrapper .checkout-input-sm {
  background: var(--checkout-surface);
  border: 1px solid rgba(201, 169, 98, 0.3);
  border-radius: var(--checkout-radius-sm);
  color: var(--checkout-text);
}

.classic-tickets-wrapper .checkout-input-sm:focus {
  border-color: var(--checkout-primary);
  box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15);
  outline: none;
}

/* ============================================================
   DIVIDERS & DECORATIVE ELEMENTS
   ============================================================ */

.checkout-divider {
  border-color: var(--checkout-border);
}

/* Section titles with gold underline */
.checkout-section-title {
  position: relative;
  display: inline-block;
}

.checkout-section-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #c9a962, transparent);
}

/* ============================================================
   QUANTITY CONTROLS
   ============================================================ */

.checkout-quantity-btn {
  background: color-mix(in srgb, var(--checkout-primary) 10%, transparent);
  border: 1px solid var(--checkout-border);
  color: var(--checkout-text);
  border-radius: var(--checkout-radius-sm);
}

.checkout-quantity-btn:hover {
  background: rgba(201, 169, 98, 0.2);
  border-color: rgba(201, 169, 98, 0.5);
}

/* ============================================================
   BADGES & TAGS
   ============================================================ */

.checkout-badge-success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.checkout-badge-warning {
  background: rgba(201, 169, 98, 0.15);
  border: 1px solid rgba(201, 169, 98, 0.3);
  color: var(--checkout-primary-text, #e2d5a8);
}

/* Sold out badge */
.checkout-ticket-card.is-sold-out {
  opacity: 0.6;
}

.checkout-ticket-card.is-sold-out .checkout-badge-sold-out {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* ============================================================
   LOADING & SKELETON STATES
   ============================================================ */

.checkout-skeleton {
  background: linear-gradient(90deg, #132035 0%, rgba(201, 169, 98, 0.08) 50%, #132035 100%);
  background-size: 200% 100%;
  animation: classic-shimmer 1.5s ease-in-out infinite;
}

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

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
  .checkout-summary::before,
  .checkout-summary::after {
    width: 20px;
    height: 20px;
  }

  .checkout-event-hero::before {
    height: 2px;
  }

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

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .checkout-ticket-card,
  .checkout-btn-primary,
  .checkout-btn-secondary,
  .checkout-input,
  .checkout-select,
  .checkout-quantity-btn,
  .checkout-action-btn,
  .checkout-nav-link,
  .checkout-promo-btn,
  .checkout-waitlist-btn,
  .checkout-group-btn,
  .checkout-user-tickets-toggle,
  .checkout-password-toggle,
  .access-code-trigger,
  .access-code-submit,
  .toggle-consent-btn,
  .toggle-guest-form,
  [data-promo-apply],
  [data-plus-one-add] {
    transition: none;
  }

  .checkout-ticket-card:hover,
  .checkout-btn-primary:hover,
  .checkout-btn-primary:active,
  .checkout-btn-secondary:active,
  .checkout-quantity-btn:active,
  .checkout-action-btn:active {
    transform: none;
  }

  .checkout-skeleton {
    animation: none;
  }
}

/* ============================================
   Ticket Option Cards - Elegant Gold
   ============================================ */
.checkout-container .checkout-ticket-option,
[data-template="classic"] .checkout-ticket-section .checkout-ticket-option {
  background: linear-gradient(180deg, var(--checkout-surface) 0%, var(--checkout-bg) 100%);
  border: 1px solid var(--checkout-border);
  border-top: 2px solid rgba(201, 169, 98, 0.4);
  border-radius: var(--checkout-radius-lg);
}

.checkout-container .checkout-ticket-option:hover {
  border-color: rgba(201, 169, 98, 0.5);
  box-shadow: var(--checkout-shadow-lg), 0 0 25px rgba(201, 169, 98, 0.1);
}

.checkout-container .checkout-ticket-option--selected {
  border-color: var(--checkout-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkout-primary) 20%, transparent), var(--checkout-shadow-lg);
  background: linear-gradient(180deg, var(--checkout-surface-elevated) 0%, var(--checkout-surface) 100%);
}

.checkout-container .checkout-ticket-option--featured {
  border-color: color-mix(in srgb, var(--checkout-primary) 60%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--checkout-primary) 20%, transparent);
  background: linear-gradient(180deg, var(--checkout-surface) 0%, var(--checkout-bg) 100%);
}

.checkout-container .checkout-ticket-option-name {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--checkout-text);
}

.checkout-container .checkout-ticket-option-price {
  border: 2px solid var(--checkout-primary);
  color: var(--checkout-primary);
  border-radius: var(--checkout-radius-md);
  background: transparent;
}

.checkout-container .checkout-ticket-option-price--free {
  border-color: var(--checkout-primary);
  color: var(--checkout-primary);
}

.checkout-container .checkout-ticket-option-description {
  color: var(--checkout-text-muted);
}

/* Badges - Gold Themed */
.checkout-container .checkout-badge--featured {
  background: linear-gradient(135deg, var(--checkout-primary) 0%, var(--checkout-primary-hover) 100%);
  color: var(--checkout-bg);
}

.checkout-container .checkout-badge--success {
  background: color-mix(in srgb, var(--checkout-primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--checkout-primary) 30%, transparent);
  color: var(--checkout-primary);
}

.checkout-container .checkout-badge--warning {
  background: color-mix(in srgb, var(--checkout-warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--checkout-warning) 30%, transparent);
  color: var(--checkout-warning);
}

/* ============================================
   Phase 7: Tickets Page Complete Overrides
   Navy & Gold Classic Design System
   ============================================ */

/* P0 CRITICAL: Banner Gradient - Navy Version */
.checkout-banner-gradient {
  background: linear-gradient(
    to bottom,
    rgba(10, 22, 40, 0.4) 0%,
    rgba(10, 22, 40, 0.7) 50%,
    rgba(10, 22, 40, 0.95) 100%
  );
}

/* ============================================
   P1 HIGH: Core Components
   ============================================ */

/* P1-1: Hero Card - Navy Glassmorphism + Gold Top-Border */
.checkout-hero-card {
  background: color-mix(in srgb, var(--checkout-surface) 70%, transparent);
  border-color: var(--checkout-border);
  border-top: 2px solid rgba(201, 169, 98, 0.4);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* P1-2: Action Buttons - Gold Accent */
.checkout-action-btn {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
}

.checkout-action-btn:hover {
  background: var(--checkout-surface-elevated);
  border-color: var(--checkout-primary);
  color: var(--checkout-primary);
}

.checkout-action-btn--primary {
  background: color-mix(in srgb, var(--checkout-primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--checkout-primary) 40%, transparent);
  color: var(--checkout-primary);
}

.checkout-action-btn--primary:hover {
  background: color-mix(in srgb, var(--checkout-primary) 25%, transparent);
  color: var(--checkout-primary-hover);
}

/* P1-3: Ticket Section - Navy */
.checkout-ticket-section {
  background: color-mix(in srgb, var(--checkout-surface) 50%, transparent);
  border-color: var(--checkout-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* P1-4: Nav Link - Navy */
.checkout-nav-link {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
}

.checkout-nav-link:hover {
  background: var(--checkout-surface-elevated);
  border-color: var(--checkout-primary);
  color: var(--checkout-primary);
}

/* P1-5: Section Count */
.checkout-section-count {
  background: var(--checkout-surface-elevated);
  color: var(--checkout-text-muted);
}

/* P1-6: User Tickets Toggle */
.checkout-user-tickets-toggle {
  background: var(--checkout-surface-elevated);
  border-color: var(--checkout-border);
}

.checkout-user-tickets-toggle:hover {
  background: var(--checkout-surface);
  color: var(--checkout-text);
  border-color: var(--checkout-primary);
}

/* P1-7: User Ticket Card */
.checkout-user-ticket-card {
  background: linear-gradient(to bottom right,
    color-mix(in srgb, var(--checkout-bg) 80%, transparent),
    var(--checkout-surface),
    color-mix(in srgb, var(--checkout-bg) 90%, transparent)
  );
  border-color: var(--checkout-border);
}

.checkout-user-ticket-card:hover {
  box-shadow: 0 4px 20px rgba(201, 169, 98, 0.1);
}

/* P1-8: Info Badge - Gold instead of Purple */
.checkout-badge--info {
  background: color-mix(in srgb, var(--checkout-primary) 15%, transparent);
  color: var(--checkout-primary);
  border: 1px solid color-mix(in srgb, var(--checkout-primary) 40%, transparent);
}

/* P1-9: Form Panel */
.checkout-form-panel {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* P1-10: Modal Content */
.checkout-modal-content {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
}

.checkout-modal-backdrop {
  background: rgba(0, 0, 0, 0.8);
}

/* P1-11: Modal Header/Footer */
.checkout-modal-header {
  border-bottom-color: var(--checkout-border);
}

.checkout-modal-footer {
  border-top-color: var(--checkout-border);
  background: var(--checkout-bg);
}

/* P1-12: Promo Button - Gold */
.checkout-promo-btn {
  background: linear-gradient(135deg, var(--checkout-primary) 0%, var(--checkout-primary-hover) 100%);
  color: var(--checkout-bg);
}

.checkout-promo-btn:hover {
  background: linear-gradient(135deg, var(--checkout-primary-hover) 0%, var(--checkout-primary) 100%);
}

/* ============================================
   P2 MEDIUM: Secondary Components
   ============================================ */

/* P2-1: Consents */
.checkout-consents {
  background: transparent;
}

/* P2-2: Timer */
.checkout-timer {
  background: color-mix(in srgb, var(--checkout-danger) 15%, var(--checkout-bg));
  border-color: color-mix(in srgb, var(--checkout-danger) 40%, transparent);
}

/* P2-3: Mobile CTA */
.checkout-mobile-cta {
  background: var(--checkout-surface);
  border-top-color: var(--checkout-border);
}

.checkout-mobile-cta-inner {
  background: transparent;
}

/* ============================================
   STICKY SUMMARY BAR — Classic Gold Override
   The sticky bar is appended to document.body via JS,
   so it's OUTSIDE [data-template="classic"] scope.
   Must use body:has() with hardcoded values, not CSS vars.
   ============================================ */
body:has([data-template="classic"]) .checkout-summary-sticky {
  background: rgba(10, 22, 40, 0.95);
  border-top: 1px solid rgba(201, 169, 98, 0.2);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  z-index: 101;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

body:has([data-template="classic"]) .checkout-summary-sticky-total {
  color: #e2d5a8;
  font-family: 'Lato', sans-serif;
}

body:has([data-template="classic"]) .checkout-summary-sticky-label {
  color: #c9a962;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
}

body:has([data-template="classic"]) .checkout-summary-sticky-btn {
  background: linear-gradient(135deg, #c9a962, #e2d5a8);
  color: #0a1628;
  border: none;
  border-radius: 0.125rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.25s ease-in-out;
}

body:has([data-template="classic"]) .checkout-summary-sticky-btn:hover {
  background: linear-gradient(135deg, #e2d5a8, #c9a962);
  box-shadow: 0 4px 12px rgba(201, 169, 98, 0.3);
}

body:has([data-template="classic"]) .checkout-summary-sticky-btn:active {
  transform: scale(0.98);
}

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

/* P2-4: Divider Text */
.checkout-divider-text {
  background: var(--checkout-surface);
  color: var(--checkout-text-subtle);
}

/* P2-5: User Tickets Section */
.checkout-user-tickets {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
}

/* P2-6: Empty State */
.checkout-empty-state {
  color: var(--checkout-text-muted);
}

.checkout-empty-state h3 {
  color: var(--checkout-text);
}

/* P2-7: Capacity Bar */
.checkout-capacity-bar {
  background: var(--checkout-border-subtle);
}

/* P2-8: Soldout State */
.checkout-ticket-soldout {
  background: color-mix(in srgb, var(--checkout-danger) 15%, var(--checkout-bg));
  border-color: color-mix(in srgb, var(--checkout-danger) 40%, transparent);
}

/* P2-9: Group Section */
.checkout-group {
  background: var(--checkout-bg);
  border-color: var(--checkout-border);
}

.checkout-group-btn {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
  color: var(--checkout-text);
}

.checkout-group-btn:hover:not(:disabled) {
  background: var(--checkout-primary);
  border-color: var(--checkout-primary);
  color: var(--checkout-bg);
}

/* P2-10: Form Inputs */
.checkout-form-input {
  background: var(--checkout-bg);
  border-color: var(--checkout-border);
  color: var(--checkout-text);
}

.checkout-form-input:focus {
  border-color: var(--checkout-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkout-primary) 20%, transparent);
}

.checkout-form-input::placeholder {
  color: rgba(201, 169, 98, 0.4);
  font-family: 'Lato', sans-serif;
}

/* P2-11: Consent Checkbox */
.classic-tickets-wrapper .checkout-consent-checkbox-visual {
  background: var(--checkout-bg);
  border-color: rgba(201, 169, 98, 0.80);
  border-radius: 0.125rem;
}

.classic-tickets-wrapper .checkout-consent-checkbox input:checked + .checkout-consent-checkbox-visual {
  background: var(--checkout-primary);
  border-color: var(--checkout-primary);
  color: #0a1628;
}

/* Waitlist Checkbox Wrapper */
.classic-tickets-wrapper .checkout-checkbox-wrapper {
  background: var(--checkout-bg);
  border-color: rgba(201, 169, 98, 0.80);
}

.classic-tickets-wrapper .checkout-checkbox-wrapper:has(.checkout-checkbox:checked) {
  background: var(--checkout-primary);
  border-color: var(--checkout-primary);
}

/* Person Card & Group Section */
.classic-tickets-wrapper .checkout-person-card {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
}

.classic-tickets-wrapper details.checkout-person-details > summary {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
}

/* Waitlist Submit Button — dark text on gold */
.classic-tickets-wrapper .checkout-btn-waitlist-submit {
  color: var(--checkout-bg);
}

/* P2-12: Trust Signals */
.checkout-trust {
  color: var(--checkout-text-muted);
  border-top-color: var(--checkout-border);
}

.checkout-trust-item svg {
  color: var(--checkout-primary);
}

/* P2-13: Feedback Messages */
.checkout-feedback {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
}

.checkout-feedback--success {
  background: color-mix(in srgb, var(--checkout-success) 15%, var(--checkout-bg));
  border-color: color-mix(in srgb, var(--checkout-success) 40%, transparent);
}

.checkout-feedback--error {
  background: color-mix(in srgb, var(--checkout-danger) 15%, var(--checkout-bg));
  border-color: color-mix(in srgb, var(--checkout-danger) 40%, transparent);
}

.checkout-feedback--info {
  background: color-mix(in srgb, var(--checkout-primary) 15%, var(--checkout-bg));
  color: var(--checkout-primary);
  border-color: color-mix(in srgb, var(--checkout-primary) 40%, transparent);
}

/* P2-14: Success Box */
.checkout-success-box {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
}

.checkout-success-icon {
  background: color-mix(in srgb, var(--checkout-success) 15%, transparent);
  color: var(--checkout-success);
}

/* P2-15: Password Toggle */
.checkout-password-toggle {
  color: var(--checkout-text-muted);
}

.checkout-password-toggle:hover {
  color: var(--checkout-primary);
}

/* P2-16: Announcement Popup */
[data-template="classic"] .announcement-popup-card {
  background: var(--checkout-surface);
  border: 1px solid var(--checkout-warning);
  box-shadow: none;
}

[data-template="classic"] .announcement-popup-header {
  border-bottom-color: var(--checkout-border-subtle);
}

[data-template="classic"] .announcement-popup-accent {
  color: var(--checkout-warning);
}

[data-template="classic"] .announcement-popup-article {
  background: var(--checkout-surface-elevated);
  border-color: var(--checkout-border-subtle);
}

[data-template="classic"] .announcement-popup-footer {
  border-top-color: var(--checkout-border-subtle);
}

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

/* Inline form container – Gold divider */
.classic-tickets-wrapper .ticket-checkout-inline.expanded {
  --checkout-inline-divider: rgba(201, 169, 98, 0.2);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

/* Consent Box & Section Card */
.classic-tickets-wrapper .checkout-consent-box,
.classic-tickets-wrapper .checkout-section {
  background: rgba(10, 22, 40, 0.9);
  border: 1px solid var(--checkout-border);
  border-top: 2px solid rgba(201, 169, 98, 0.4);
  border-radius: var(--checkout-radius-lg);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Opacity-variant backgrounds */
.classic-tickets-wrapper .bg-slate-900\/90,
.classic-tickets-wrapper .bg-slate-900\/70,
.classic-tickets-wrapper .bg-slate-800\/50 {
  background: rgba(10, 22, 40, 0.9);
}

/* Label text */
.classic-tickets-wrapper .text-slate-200 {
  color: var(--checkout-text);
}

/* Checkbox border */
.classic-tickets-wrapper .border-slate-600 {
  border-color: var(--checkout-border);
}

/* Checkbox checked states */
.classic-tickets-wrapper input[type="checkbox"]:checked {
  background: var(--checkout-primary);
  border-color: var(--checkout-primary);
}

/* Focus ring */
.classic-tickets-wrapper .focus\:ring-cyan-400:focus,
.classic-tickets-wrapper .focus\:ring-emerald-400:focus,
.classic-tickets-wrapper .focus\:ring-amber-400:focus {
  --tw-ring-color: var(--checkout-primary);
}

/* Links */
.classic-tickets-wrapper a.text-cyan-400 {
  color: var(--checkout-primary);
}

.classic-tickets-wrapper a.hover\:text-cyan-200:hover {
  color: var(--checkout-primary-hover);
}

/* Icon accent colors */
.classic-tickets-wrapper .text-cyan-300 {
  color: var(--checkout-primary);
}

/* Qty/Wallet button overrides */
.classic-tickets-wrapper .bg-slate-800 {
  background: rgba(10, 22, 40, 0.9);
  border-color: var(--checkout-border);
}

.classic-tickets-wrapper .hover\:bg-slate-700:hover {
  background: rgba(201, 169, 98, 0.1);
}

/* Submit Button – Gold Accent */
.classic-tickets-wrapper button[type="submit"].border-emerald-700 {
  background: linear-gradient(135deg, var(--checkout-primary), var(--checkout-primary-hover));
  border-color: var(--checkout-primary);
  color: var(--checkout-bg);
  font-weight: 700;
}

.classic-tickets-wrapper button[type="submit"].border-emerald-700:hover {
  background: linear-gradient(135deg, var(--checkout-primary-hover), var(--checkout-primary));
  border-color: var(--checkout-primary);
}

/* Plus-One Add Button */
.classic-tickets-wrapper [data-plus-one-add] {
  background: transparent;
  border-color: var(--checkout-primary);
  color: var(--checkout-primary);
}
.classic-tickets-wrapper [data-plus-one-add]:hover {
  background: rgba(201, 169, 98, 0.1);
}

/* Promo Apply Button */
.classic-tickets-wrapper [data-promo-apply] {
  background: transparent;
  border-color: var(--checkout-primary);
  color: var(--checkout-primary);
}
.classic-tickets-wrapper [data-promo-apply]:hover {
  background: rgba(201, 169, 98, 0.1);
}

/* Price Summary Total – Gold Accent */
.classic-tickets-wrapper [data-checkout-summary] .text-sm.font-semibold {
  color: var(--checkout-primary);
}

/* Description Toggle – Gold Accent */
.classic-tickets-wrapper .checkout-desc__toggle {
  color: var(--classic-accent-gold, #c9a962);
}

/* Toggle Buttons */
.classic-tickets-wrapper .toggle-consent-btn,
.classic-tickets-wrapper .toggle-guest-form {
  border-color: rgba(201, 169, 98, 0.4);
  color: var(--checkout-primary);
}

.classic-tickets-wrapper .toggle-consent-btn:hover,
.classic-tickets-wrapper .toggle-guest-form:hover {
  background-color: rgba(201, 169, 98, 0.1);
  color: var(--checkout-primary-hover);
}

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

/* Section Number Badge – Gold */
.classic-tickets-wrapper .checkout-section-number {
  background: var(--checkout-primary);
  color: var(--checkout-bg);
}

/* Login Panel – Template-aware */
.classic-tickets-wrapper [data-login-inline] {
  background: rgba(201, 169, 98, 0.1);
  border-color: rgba(201, 169, 98, 0.3);
}
.classic-tickets-wrapper [data-login-inline] .text-amber-100 {
  color: var(--checkout-text);
}

/* ============================================================
   PHASE 3: MISSING COMPONENTS & EDGE CASES
   ============================================================ */

/* Form Panel – Gold Accent Line */
.classic-tickets-wrapper .checkout-form-panel,
.checkout-form-panel {
  position: relative;
}

.classic-tickets-wrapper .checkout-form-panel::before,
[data-template="classic"] .checkout-form-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #c9a962 20%, #e2d5a8 50%, #c9a962 80%, transparent 100%);
  border-radius: var(--checkout-radius-lg) var(--checkout-radius-lg) 0 0;
}

/* Badge Variants – Gold Theme (scoped) */
[data-template="classic"] .checkout-badge--danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

[data-template="classic"] .checkout-badge--neutral {
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #94a3b8;
}

[data-template="classic"] .checkout-badge--exclusive {
  background: rgba(201, 169, 98, 0.15);
  border: 1px solid rgba(201, 169, 98, 0.3);
  color: var(--checkout-primary-text, #e2d5a8);
}

/* Waitlist Button – Gold Warm (scoped) */
[data-template="classic"] .checkout-waitlist-btn {
  background: color-mix(in srgb, var(--checkout-warning, #c9a962) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--checkout-warning, #c9a962) 40%, transparent);
  color: var(--checkout-primary-text, #e2d5a8);
  border-radius: var(--checkout-radius-md);
  font-family: var(--checkout-font-body);
  font-weight: 600;
  transition: all 0.25s ease-in-out;
}

[data-template="classic"] .checkout-waitlist-btn:hover {
  background: color-mix(in srgb, var(--checkout-warning, #c9a962) 20%, transparent);
  border-color: color-mix(in srgb, var(--checkout-warning, #c9a962) 60%, transparent);
}

/* Promo Feedback – Success/Error (scoped) */
.classic-tickets-wrapper .checkout-promo-feedback--success {
  background: rgba(34, 197, 94, 0.12);
  border-left: 3px solid #22c55e;
  color: #22c55e;
  padding: 0.5rem 0.75rem;
  border-radius: 0 var(--checkout-radius-sm) var(--checkout-radius-sm) 0;
}

.classic-tickets-wrapper .checkout-promo-feedback--error {
  background: rgba(239, 68, 68, 0.12);
  border-left: 3px solid #ef4444;
  color: #ef4444;
  padding: 0.5rem 0.75rem;
  border-radius: 0 var(--checkout-radius-sm) var(--checkout-radius-sm) 0;
}

/* Disabled Ticket State (scoped) */
[data-template="classic"] .checkout-ticket-option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-template="classic"] .checkout-ticket-option--disabled .checkout-ticket-option-name {
  color: var(--checkout-text-muted);
}

[data-template="classic"] .checkout-ticket-option--disabled .checkout-ticket-option-price {
  color: var(--checkout-text-subtle);
  border-color: var(--checkout-border-subtle);
}

/* Section Headers – Lato uppercase in Checkout Form */
.classic-tickets-wrapper .checkout-section-header,
.classic-tickets-wrapper .checkout-section-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #c9a962;
}

/* Consent Links – Gold — lightened for WCAG AA */
.classic-tickets-wrapper .checkout-consent-label a {
  color: var(--checkout-primary-text, #e2d5a8);
  text-decoration: underline;
  text-decoration-color: rgba(201, 169, 98, 0.4);
  text-underline-offset: 2px;
}

.classic-tickets-wrapper .checkout-consent-label a:hover {
  color: #e2d5a8;
  text-decoration-color: rgba(201, 169, 98, 0.6);
}

/* Toggle Buttons – Enhanced */
.classic-tickets-wrapper .toggle-consent-btn,
.classic-tickets-wrapper .toggle-guest-form {
  font-family: var(--checkout-font-body);
}

/* Corner Accent Brackets on Consent Box & Section Card */
.classic-tickets-wrapper .checkout-consent-box,
.classic-tickets-wrapper .checkout-section {
  position: relative;
}

.classic-tickets-wrapper .checkout-consent-box::before,
.classic-tickets-wrapper .checkout-consent-box::after,
.classic-tickets-wrapper .checkout-section::before,
.classic-tickets-wrapper .checkout-section::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(201, 169, 98, 0.35);
  border-style: solid;
  border-width: 0;
}

.classic-tickets-wrapper .checkout-consent-box::before,
.classic-tickets-wrapper .checkout-section::before {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
  border-radius: var(--checkout-radius-lg) 0 0 0;
}

.classic-tickets-wrapper .checkout-consent-box::after,
.classic-tickets-wrapper .checkout-section::after {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-radius: 0 0 var(--checkout-radius-lg) 0;
}

/* ============================================================
   TIER PRICING TABLE — Classic Gold
   ============================================================ */
.classic-tickets-wrapper .tier-pricing-table {
  background: var(--checkout-surface);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-sm, 0.375rem);
}
.classic-tickets-wrapper .tier-pricing-title {
  color: var(--checkout-text-muted);
}
.classic-tickets-wrapper .tier-row {
  color: var(--checkout-text-muted);
  border-radius: var(--checkout-radius-sm, 0.375rem);
}
.classic-tickets-wrapper .tier-row--active {
  background: var(--checkout-primary-muted);
  border-color: var(--checkout-primary);
  color: var(--checkout-text);
}
.classic-tickets-wrapper .tier-row--active .tier-row-label {
  color: var(--checkout-text);
}
.classic-tickets-wrapper .tier-row-indicator {
  background: var(--checkout-text-subtle);
}
.classic-tickets-wrapper .tier-row--active .tier-row-indicator {
  background: var(--checkout-primary);
  box-shadow: 0 0 6px var(--checkout-primary-muted);
}
.classic-tickets-wrapper .tier-row--active .tier-row-price {
  color: var(--checkout-primary);
}
.classic-tickets-wrapper .tier-row-qty {
  color: var(--checkout-text-subtle);
}
.classic-tickets-wrapper .tier-savings-badge {
  border-radius: var(--checkout-radius-sm, 0.375rem);
}
.classic-tickets-wrapper .tier-next-hint {
  border-top-color: var(--checkout-border);
}

/* ============================================================
   ACCESS CODE — Classic Gold Styling
   ============================================================ */

[data-template="classic"] .access-code-section {
  background: var(--checkout-surface);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-lg);
  padding: 0;
}

[data-template="classic"] .access-code-trigger {
  border: none;
  border-radius: var(--checkout-radius-lg);
  color: var(--checkout-primary);
}

[data-template="classic"] .access-code-trigger:hover {
  background: var(--checkout-primary-muted);
  color: var(--checkout-primary-hover);
}

[data-template="classic"] .access-code-panel {
  padding: 0 0.75rem 0.75rem;
  margin-top: 0;
}

[data-template="classic"] .access-code-input {
  background: var(--checkout-bg);
  border: 1px solid var(--checkout-border);
  border-radius: var(--checkout-radius-md);
  color: var(--checkout-text);
}

[data-template="classic"] .access-code-input:focus {
  border-color: var(--checkout-primary);
  box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15);
}

[data-template="classic"] .access-code-submit {
  background: linear-gradient(135deg, var(--checkout-primary), var(--checkout-primary-hover));
  border: 1px solid var(--checkout-primary);
  border-radius: var(--checkout-radius-md);
  color: var(--checkout-bg);
}

[data-template="classic"] .access-code-submit:hover {
  background: linear-gradient(135deg, var(--checkout-primary-hover), var(--checkout-primary));
  box-shadow: 0 4px 12px rgba(201, 169, 98, 0.25);
}

[data-template="classic"] .access-code-clear {
  border-color: var(--checkout-border);
  border-radius: var(--checkout-radius-md);
  color: var(--checkout-text-muted);
}

/* ==========================================================
   GOLD TEXT SELECTION
   ========================================================== */
[data-template="classic"] ::selection {
  background: rgba(201, 169, 98, 0.3);
  color: #f8fafc;
}

/* ==========================================================
   QUANTITY CONTROLS — Lato Font
   ========================================================== */
.checkout-quantity-btn {
  font-family: 'Lato', sans-serif;
  transition: all 0.25s ease-in-out;
}

/* ==========================================================
   PROMO CODE — Gold Border + Focus
   ========================================================== */
.classic-tickets-wrapper [data-promo-input] {
  font-family: 'Lato', sans-serif;
  border-color: var(--checkout-border);
  background: rgba(10, 22, 40, 0.7);
}

.classic-tickets-wrapper [data-promo-input]:focus {
  border-color: var(--checkout-primary);
  box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15);
}

/* ==========================================================
   LEGAL SECTION — Navy Glass + Gold Borders
   ========================================================== */
.classic-tickets-wrapper .checkout-legal-section {
  background: rgba(19, 32, 53, 0.7);
  border: 1px solid var(--checkout-border);
  border-top: 2px solid rgba(201, 169, 98, 0.4);
  border-radius: var(--checkout-radius-lg);
  font-family: 'Lato', sans-serif;
}

/* ==========================================================
   SOLD-OUT OVERLAY — Navy + Gold Text
   ========================================================== */
.checkout-ticket-card.is-sold-out::after {
  background: rgba(10, 22, 40, 0.7);
  color: var(--checkout-primary-text);
  font-family: 'Lato', sans-serif;
}

/* ==========================================================
   ERROR BANNER — Gold Top Accent
   ========================================================== */
[data-template="classic"] .checkout-error-banner {
  background: color-mix(in srgb, var(--checkout-danger) 12%, var(--checkout-bg));
  border: 1px solid color-mix(in srgb, var(--checkout-danger) 40%, transparent);
  border-top: 2px solid rgba(201, 169, 98, 0.4);
  font-family: 'Lato', sans-serif;
}

/* ==========================================================
   CREW AVATARS — Sharp, Not Round
   ========================================================== */
.classic-tickets-wrapper .checkout-crew-avatar,
.classic-tickets-wrapper .crew-member-avatar {
  border-radius: 0.25rem;
}

/* ==========================================================
   FOCUS-VISIBLE — Gold Outline on Interactive Elements
   ========================================================== */
.checkout-btn-primary:focus-visible,
.checkout-btn-secondary:focus-visible,
.checkout-quantity-btn:focus-visible,
.checkout-action-btn:focus-visible,
.checkout-nav-link:focus-visible,
.checkout-promo-btn:focus-visible,
.checkout-waitlist-btn:focus-visible,
.checkout-group-btn:focus-visible,
.checkout-user-tickets-toggle:focus-visible,
.checkout-password-toggle:focus-visible,
.access-code-trigger:focus-visible,
.access-code-submit:focus-visible,
.toggle-consent-btn:focus-visible,
.toggle-guest-form:focus-visible,
.checkout-consent-checkbox:focus-visible .checkout-consent-checkbox-visual,
.checkout-consent-checkbox input:focus-visible + .checkout-consent-checkbox-visual {
  outline: 2px solid #c9a962;
  outline-offset: 2px;
}

/* ==========================================================
   INTERACTIVE STATES — :active + :disabled + transitions
   Ensures every interactive element has complete feedback
   ========================================================== */

/* Unified transitions */
.checkout-btn-secondary,
.checkout-quantity-btn,
.checkout-action-btn,
.checkout-nav-link,
.checkout-promo-btn,
.checkout-waitlist-btn,
.checkout-group-btn,
.checkout-user-tickets-toggle,
.checkout-password-toggle,
.access-code-trigger,
.access-code-submit,
.toggle-consent-btn,
.toggle-guest-form,
[data-promo-apply],
[data-plus-one-add] {
  transition: all 0.25s ease-in-out;
}

/* :active press feedback */
.checkout-btn-secondary:active:not(:disabled),
.checkout-quantity-btn:active:not(:disabled),
.checkout-action-btn:active:not(:disabled),
.checkout-nav-link:active,
.checkout-promo-btn:active:not(:disabled),
.checkout-waitlist-btn:active:not(:disabled),
.checkout-group-btn:active:not(:disabled),
.checkout-user-tickets-toggle:active,
.checkout-password-toggle:active,
.access-code-trigger:active,
.access-code-submit:active:not(:disabled),
.toggle-consent-btn:active,
.toggle-guest-form:active,
[data-promo-apply]:active:not(:disabled),
[data-plus-one-add]:active:not(:disabled) {
  transform: scale(0.98);
  transition: transform 100ms ease-in-out;
}

/* :disabled for secondary interactive elements */
.checkout-btn-secondary:disabled,
.checkout-quantity-btn:disabled,
.checkout-promo-btn:disabled,
.checkout-waitlist-btn:disabled,
.checkout-group-btn:disabled,
.access-code-submit:disabled,
[data-promo-apply]:disabled,
[data-plus-one-add]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* :hover for form inputs */
.checkout-input:hover:not(:focus),
.checkout-select:hover:not(:focus),
.checkout-form-input:hover:not(:focus) {
  border-color: rgba(201, 169, 98, 0.5);
}

/* ============================================================
   RESPONSIVE — Compact Mobile (max-width: 639px)
   ============================================================ */
@media (max-width: 639px) {
  /* Container padding reduction */
  .checkout-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Hero card compact */
  .checkout-hero-card {
    padding: 0.75rem;
  }

  /* Ticket option compact */
  .checkout-ticket-option {
    padding: 0.75rem;
  }

  .checkout-ticket-option-name {
    font-size: 0.9375rem;
  }

  /* Form panel compact */
  .checkout-form-panel {
    padding: 0.75rem;
  }

  /* Summary compact */
  .checkout-summary {
    padding: 0.75rem;
  }

  .checkout-summary::before,
  .checkout-summary::after {
    width: 15px;
    height: 15px;
  }

  /* Buttons full-width */
  .checkout-btn-primary {
    width: 100%;
    justify-content: center;
  }

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

  /* Section title smaller */
  .checkout-section-title {
    font-size: 0.8125rem;
  }

  /* Modal nearly full-screen */
  .checkout-modal-content {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }

  /* iOS Safari input zoom prevention (scoped) */
  .classic-tickets-wrapper input[type="text"],
  .classic-tickets-wrapper input[type="email"],
  .classic-tickets-wrapper input[type="tel"],
  .classic-tickets-wrapper select,
  .classic-tickets-wrapper textarea,
  .checkout-input {
    font-size: 16px;
  }
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-contrast: high) {
  .checkout-hero-card,
  .checkout-ticket-option,
  .checkout-ticket-card,
  .checkout-form-panel,
  .checkout-summary,
  .checkout-section,
  .checkout-consent-box {
    border-width: 2px;
    border-color: rgba(201, 169, 98, 0.6);
  }

  .checkout-input,
  .checkout-select,
  .checkout-form-input {
    border-width: 2px;
    border-color: rgba(201, 169, 98, 0.5);
  }

  .checkout-btn-primary {
    border: 2px solid #c9a962;
  }

  .checkout-btn-secondary {
    border-width: 2px;
  }
}