@import "./_base.css";

/**
 * Organic Checkout Theme
 * Earth Tones - Nature-Inspired Design
 */

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

/* Text Selection — Olive Highlight */
[data-template="organic"] ::selection {
  background: rgba(96, 108, 56, 0.25);
  color: #283618;
}

/* ============================================================
   STICKY SUMMARY BAR — Organic Override
   The bar is appended to document.body via JS (outside
   [data-template] scope). Must use body:has() with hardcoded
   values — CSS variables scoped to [data-template] won't reach.
   ============================================================ */

/* Container — Warm cream bg, sage border, earth shadow */
body:has([data-template="organic"]) .checkout-summary-sticky {
  background: #faf5d8;
  border-top: 2px solid rgba(167, 183, 149, 0.45);
  box-shadow: 0 -4px 16px rgba(40, 54, 24, 0.1);
  z-index: 101;
}

/* Total — Dark earth, Nunito */
body:has([data-template="organic"]) .checkout-summary-sticky-total {
  color: #283618;
  font-family: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Label — Sage, uppercase, small, Nunito */
body:has([data-template="organic"]) .checkout-summary-sticky-label {
  color: #5c6b3a;
  font-family: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
}

/* Button — Olive gradient, cream text, extra-round */
body:has([data-template="organic"]) .checkout-summary-sticky-btn {
  background: linear-gradient(135deg, #4a5a22, #7a8a48);
  color: #fefae0;
  border: none;
  border-radius: 1.5rem;
  font-family: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(74, 90, 34, 0.2);
  transition: all 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

body:has([data-template="organic"]) .checkout-summary-sticky-btn:hover {
  background: linear-gradient(135deg, #4a5429, #4a5a22);
  box-shadow: 0 6px 20px rgba(74, 90, 34, 0.3);
}

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

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

/* CSS Variables (scoped to checkout page) */
[data-template="organic"] {
  /* Colors - Earth Palette */
  --checkout-bg: #fefae0;
  --checkout-surface: #faedcd;
  --checkout-surface-elevated: #f5e6c3;
  --checkout-surface-hover: #efdcae;
  --checkout-border: #dda15e;
  --checkout-border-subtle: #e5d4b3;

  /* Dark Text */
  --checkout-text: #283618;
  --checkout-text-muted: #4d5729; /* Darkened olive for WCAG AA 4.5:1 on #fefae0 */
  --checkout-text-subtle: #5f6a3e;

  /* Olive Primary */
  --checkout-primary: #606c38;
  --checkout-primary-hover: #4a5429;
  --checkout-primary-muted: rgba(96, 108, 56, 0.2);

  --checkout-success: #2d6a4f;
  --checkout-warning: #8b5e28;
  --checkout-danger: #993322;
  --checkout-text-on-accent: #fefae0;
  --checkout-focus-ring: #606c38;
  --checkout-btn-text: #fefae0;
  --checkout-sticky-bg: #faedcd;
  --checkout-text-secondary: #5f6a3e;
  --checkout-warning-bg: rgba(139, 94, 40, 0.15);
  --checkout-danger-text: #993322;

  /* Amber/Warm Brown Accent */
  --checkout-amber: #8b6914;
  --checkout-amber-hover: #7a5c10;
  --checkout-amber-muted: rgba(139, 105, 20, 0.08);

  /* Sage Border Palette */
  --checkout-sage-border: rgba(167, 183, 149, 0.45);
  --checkout-sage-border-subtle: rgba(167, 183, 149, 0.25);

  /* Soft shadows */
  --checkout-shadow-sm: 0 2px 8px rgba(40, 54, 24, 0.08);
  --checkout-shadow-md: 0 4px 16px rgba(40, 54, 24, 0.1);
  --checkout-shadow-lg: 0 8px 32px rgba(40, 54, 24, 0.12);
  --checkout-shadow-glow: none;

  /* Organic Easing */
  --checkout-organic-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --checkout-organic-duration: 350ms;

  /* Extra-rounded corners - Organic (minimum 1rem) */
  --checkout-radius-sm: 1rem;
  --checkout-radius-md: 1.25rem;
  --checkout-radius-lg: 1.5rem;
  --checkout-radius-xl: 1.75rem;
  --checkout-radius-2xl: 2rem;

  --checkout-price-size: 1.5rem;

  /* Typography - Organic */
  --checkout-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --checkout-font-heading: 'Fraunces', Georgia, serif;
}

/* Typography */
.checkout-container {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.7;
}

.checkout-event-title,
.checkout-section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
}

/* Form Labels - Nunito Font */
.checkout-form-label {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   FONT-FAMILY COMPLETENESS
   Override citastyle.css: span, div, label, input { font-family: var(--font-sans) }
   Override _base.css: .checkout-container { font-family: 'Inter' }
   ============================================================ */

/* Nunito on ALL body elements */
[data-template="organic"] .checkout-container,
[data-template="organic"] .checkout-container span,
[data-template="organic"] .checkout-container p,
[data-template="organic"] .checkout-container div,
[data-template="organic"] .checkout-container label,
[data-template="organic"] .checkout-label,
[data-template="organic"] .checkout-input,
[data-template="organic"] .checkout-consent-label,
[data-template="organic"] .checkout-consent-label a,
[data-template="organic"] .checkout-helper-text,
[data-template="organic"] .checkout-summary-label,
[data-template="organic"] .checkout-summary-value,
[data-template="organic"] .checkout-summary-row,
[data-template="organic"] .checkout-price-line,
[data-template="organic"] .checkout-capacity-badge,
[data-template="organic"] .checkout-form-label,
[data-template="organic"] .checkout-form-input,
[data-template="organic"] .checkout-promo-input,
[data-template="organic"] .checkout-promo-title,
[data-template="organic"] .checkout-promo-btn,
[data-template="organic"] .checkout-trust-item,
[data-template="organic"] .checkout-datetime,
[data-template="organic"] .checkout-location,
[data-template="organic"] .checkout-organizer,
[data-template="organic"] .checkout-help-text,
[data-template="organic"] .checkout-mobile-cta-price,
[data-template="organic"] .checkout-mobile-cta-label,
[data-template="organic"] .checkout-back-btn,
[data-template="organic"] .checkout-footer-link,
[data-template="organic"] .checkout-quantity-value,
[data-template="organic"] .checkout-quantity-btn,
[data-template="organic"] .checkout-stepper-step,
[data-template="organic"] .checkout-payment-method-label,
[data-template="organic"] .checkout-security-badge,
[data-template="organic"] .checkout-badge,
[data-template="organic"] .checkout-group-btn,
[data-template="organic"] .checkout-btn-primary,
[data-template="organic"] .checkout-btn-secondary,
[data-template="organic"] .checkout-waitlist-btn,
[data-template="organic"] .checkout-nav-link,
[data-template="organic"] .checkout-collapsible-header,
[data-template="organic"] .checkout-empty-state,
[data-template="organic"] .checkout-info-box,
[data-template="organic"] .checkout-group-member,
[data-template="organic"] .checkout-plusone-label,
[data-template="organic"] .checkout-section-count,
[data-template="organic"] .checkout-ticket-option-description,
[data-template="organic"] .checkout-capacity,
[data-template="organic"] .checkout-feedback {
  font-family: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Fraunces ONLY on headings/names */
[data-template="organic"] .checkout-hero-title,
[data-template="organic"] .checkout-event-title,
[data-template="organic"] .checkout-section-title,
[data-template="organic"] .checkout-ticket-option-name,
[data-template="organic"] .checkout-form-title,
[data-template="organic"] .checkout-group-title,
[data-template="organic"] .checkout-group-person-title,
[data-template="organic"] .checkout-modal-title,
[data-template="organic"] .checkout-success-title,
[data-template="organic"] .announcement-popup-title {
  font-family: 'Fraunces', Georgia, serif !important;
}

/* ============================================================
   AMBER ACCENT COLOR — Icons & Interactive Elements
   #8b6914 (Amber/Golden Brown) for icons, interactive hover, info
   ============================================================ */
[data-template="organic"] .checkout-section-icon,
[data-template="organic"] .checkout-section-icon svg {
  color: var(--checkout-amber);
}

[data-template="organic"] .checkout-datetime-icon,
[data-template="organic"] .checkout-location-icon {
  color: var(--checkout-amber);
}

[data-template="organic"] .checkout-info-box svg,
[data-template="organic"] .checkout-info-box-icon {
  color: var(--checkout-amber);
}

[data-template="organic"] .checkout-trust-item svg {
  color: var(--checkout-amber);
}

[data-template="organic"] .checkout-action-btn svg {
  color: var(--checkout-amber);
}

/* Organic border radius */
.checkout-ticket-card {
  border-radius: var(--checkout-radius-xl);
  border: 2px solid var(--checkout-border-subtle);
}

.checkout-ticket-card:hover {
  border-color: var(--checkout-primary);
}

/* Primary Button — Olive Gradient, Extra-round */
[data-template="organic"] .checkout-btn-primary {
  background: linear-gradient(135deg, #4a5a22, #7a8a48);
  color: #fefae0;
  border-radius: 1.5rem;
  border: none;
  box-shadow: 0 6px 20px rgba(74, 90, 34, 0.2);
  font-weight: 600;
  font-family: 'Nunito', 'Inter', sans-serif;
}

[data-template="organic"] .checkout-btn-primary:hover {
  background: linear-gradient(135deg, #4a5429, #4a5a22);
  color: #fefae0;
  box-shadow: 0 8px 28px rgba(74, 90, 34, 0.3);
}

[data-template="organic"] .checkout-btn-primary:active {
  transform: scale(0.98);
}

[data-template="organic"] .checkout-btn-primary:disabled {
  background: rgba(96, 108, 56, 0.3);
  color: rgba(254, 250, 224, 0.5);
  box-shadow: none;
  opacity: 0.4;
}

/* Secondary Button — Sage border, Olive hover */
[data-template="organic"] .checkout-btn-secondary {
  border-radius: 1.5rem;
  border: 2px solid var(--checkout-sage-border);
  background: transparent;
  color: #5c6b3a;
  font-weight: 600;
  font-family: 'Nunito', 'Inter', sans-serif;
}

[data-template="organic"] .checkout-btn-secondary:hover {
  border-color: #606c38;
  color: #606c38;
  background: rgba(96, 108, 56, 0.06);
}

/* Terracotta accent */
.checkout-ticket-card.is-selected {
  border-color: var(--checkout-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkout-danger) 20%, transparent);
}

/* Sage green success badges */
.checkout-badge-success {
  background: color-mix(in srgb, var(--checkout-success) 30%, transparent);
  color: var(--checkout-success);
}

/* Wave pattern header (optional subtle decoration) */
.checkout-event-info {
  position: relative;
  background: linear-gradient(135deg, var(--checkout-primary), color-mix(in srgb, var(--checkout-primary) 80%, white));
  color: var(--checkout-bg);
  padding: 2rem;
  border-radius: var(--checkout-radius-xl);
  margin-bottom: 1.5rem;
}

.checkout-event-info .checkout-event-title,
.checkout-event-info .checkout-event-meta {
  color: var(--checkout-bg);
}

/* Organic input styling */
[data-template="organic"] input,
[data-template="organic"] select,
[data-template="organic"] textarea {
  border-radius: var(--checkout-radius-xl);
}

/* ============================================
   Ticket Option Cards - Soft Curves
   ============================================ */
.checkout-container .checkout-ticket-option {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border-subtle);
  border-radius: var(--checkout-radius-xl);
}

.checkout-container .checkout-ticket-option:hover {
  border-color: var(--checkout-primary);
  box-shadow: var(--checkout-shadow-md);
}

.checkout-container .checkout-ticket-option--selected {
  border-color: #c9705d;
  box-shadow: 0 0 0 3px rgba(201, 112, 93, 0.2);
  background: var(--checkout-surface-elevated);
}

.checkout-container .checkout-ticket-option--featured {
  border-color: var(--checkout-primary);
  background: var(--checkout-surface);
}

.checkout-container .checkout-ticket-option-name {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--checkout-text);
}

.checkout-container .checkout-ticket-option-price {
  border-radius: var(--checkout-radius-2xl);
  border: 2px solid var(--checkout-primary);
  color: var(--checkout-primary);
  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 - Earth Tones */
.checkout-container .checkout-badge {
  border-radius: var(--checkout-radius-xl);
}

.checkout-container .checkout-badge--featured {
  background: var(--checkout-primary);
  color: var(--checkout-bg);
  border-radius: var(--checkout-radius-xl);
}

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

.checkout-container .checkout-badge--warning {
  background: color-mix(in srgb, var(--checkout-warning) 20%, transparent);
  color: var(--checkout-warning);
  border-radius: var(--checkout-radius-xl);
}

/* ============================================
   Light-Theme Overrides for Dark-rgba Elements
   ============================================ */
.checkout-hero-card {
  background: #faf5d8;
  border: 2px solid var(--checkout-sage-border);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(40, 54, 24, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

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

.checkout-action-btn:hover {
  background: var(--checkout-surface);
}

.checkout-ticket-section {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

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

.checkout-user-ticket-card {
  background: var(--checkout-surface);
  border-color: var(--checkout-border);
}

/* ============================================
   Phase 11: Tickets Page Design Consistency
   FIX-TICKETS-001 to FIX-TICKETS-016
   ============================================ */

/* FIX-TICKETS-001: Banner Gradient - Earth Tones */
[data-template="organic"] .checkout-banner-gradient {
  background: linear-gradient(
    to bottom,
    rgba(40, 54, 24, 0.3) 0%,
    rgba(40, 54, 24, 0.6) 50%,
    rgba(254, 250, 224, 0.95) 100%
  ) !important;
}

[data-template="organic"] .checkout-page-header:not(:has(.checkout-banner-img)) .checkout-banner-bg {
  background: linear-gradient(135deg, var(--checkout-surface) 0%, var(--checkout-bg) 100%) !important;
}

/* FIX-TICKETS-002: Section Count Badge */
.checkout-container .checkout-section-count {
  background: var(--checkout-primary-muted);
  color: var(--checkout-primary);
  border: 2px solid color-mix(in srgb, var(--checkout-primary) 30%, transparent);
}

/* FIX-TICKETS-003: Ticket Section Container */
.checkout-container .checkout-ticket-section {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.checkout-container .checkout-ticket-section .checkout-ticket-option {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border-subtle);
}

.checkout-container .checkout-ticket-section .checkout-ticket-option:hover:not(.checkout-ticket-option--disabled) {
  background: var(--checkout-surface-elevated);
  border-color: var(--checkout-primary);
  box-shadow: var(--checkout-shadow-md);
}

/* FIX-TICKETS-004: User Tickets Toggle */
[data-template="organic"] .checkout-user-tickets-toggle {
  background: var(--checkout-surface-elevated) !important;
  border: 2px solid var(--checkout-border) !important;
  color: var(--checkout-text-muted) !important;
}

[data-template="organic"] .checkout-user-tickets-toggle:hover {
  background: var(--checkout-surface) !important;
  color: var(--checkout-text) !important;
  border-color: var(--checkout-primary) !important;
}

/* FIX-TICKETS-005: User Ticket Card */
[data-template="organic"] .checkout-user-ticket-card {
  background: var(--checkout-surface) !important;
  border: 2px solid var(--checkout-border) !important;
}

[data-template="organic"] .checkout-user-ticket-card:hover {
  box-shadow: var(--checkout-shadow-md);
}

/* FIX-TICKETS-006: Form Panel & Inputs */
.checkout-form-panel {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border);
  border-radius: var(--checkout-radius-xl);
}

.checkout-form-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--checkout-text);
}

.checkout-form-input,
.checkout-container input[type="text"],
.checkout-container input[type="email"],
.checkout-container input[type="tel"],
.checkout-container input[type="date"],
.checkout-container select,
.checkout-container textarea {
  background: var(--checkout-bg) !important;
  border: 2px solid var(--checkout-border) !important;
  color: var(--checkout-text) !important;
  font-size: 1rem !important;
  border-radius: var(--checkout-radius-lg) !important;
}

.checkout-form-input:focus,
.checkout-container input:focus,
.checkout-container select:focus,
.checkout-container textarea:focus {
  border-color: var(--checkout-primary) !important;
  box-shadow: 0 0 0 3px var(--checkout-primary-muted) !important;
  outline: none !important;
}

.checkout-form-input::placeholder,
.checkout-container input::placeholder {
  color: rgba(92, 107, 58, 0.7) !important;
}

.checkout-form-label {
  font-size: 0.6875rem;
  color: #5c6b3a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'Nunito', 'Inter', sans-serif;
}

/* FIX-TICKETS-007: Timer */
[data-template="organic"] .checkout-timer {
  background: color-mix(in srgb, var(--checkout-warning) 15%, transparent) !important;
  border: 2px solid color-mix(in srgb, var(--checkout-warning) 30%, transparent) !important;
  color: var(--checkout-warning) !important;
  border-radius: var(--checkout-radius-lg);
}

[data-template="organic"] .checkout-timer-icon {
  color: var(--checkout-warning) !important;
}

/* FIX-TICKETS-008: Promo Code Section — Sage-bordered */
.checkout-promo {
  background: var(--checkout-surface-elevated);
  border: 2px solid var(--checkout-sage-border);
  border-radius: var(--checkout-radius-xl);
  padding: 1rem;
}

.checkout-promo-title {
  color: var(--checkout-text);
}

[data-template="organic"] .checkout-promo-input {
  background: #fefae0 !important;
  border: 2px solid var(--checkout-sage-border) !important;
  color: var(--checkout-text) !important;
  border-radius: 1rem !important;
  font-family: 'Nunito', 'Inter', sans-serif !important;
}

.checkout-promo-btn {
  background: linear-gradient(135deg, #4a5a22, #7a8a48);
  color: #fefae0;
  border-radius: 1rem;
  font-family: 'Nunito', 'Inter', sans-serif;
  font-weight: 600;
  border: none;
}

.checkout-promo-btn:hover {
  background: linear-gradient(135deg, #4a5429, #4a5a22);
}

/* FIX-TICKETS-009: Price Summary */
.checkout-summary {
  background: var(--checkout-surface-elevated);
  border: 2px solid var(--checkout-border);
}

.checkout-summary-row {
  color: var(--checkout-text-muted);
}

.checkout-summary-row--total {
  border-top: 2px solid var(--checkout-border);
  color: var(--checkout-text);
  font-weight: 600;
}

.checkout-summary-label {
  color: var(--checkout-text-muted);
}

.checkout-summary-value {
  color: var(--checkout-text);
}

/* FIX-TICKETS-010: Consent Checkboxes */
.checkout-consent-label {
  color: var(--checkout-text);
  font-size: 0.9375rem;
}

.checkout-consent-label a {
  color: var(--checkout-primary);
}

.checkout-consent-label a:hover {
  color: var(--checkout-primary-hover);
  text-decoration: underline;
}

.organic-tickets-wrapper .checkout-consent-checkbox-visual {
  border-color: var(--checkout-sage-border);
  background: var(--checkout-bg);
  border-radius: 1rem;
  border-width: 2px;
}

.organic-tickets-wrapper .checkout-consent-checkbox input:checked + .checkout-consent-checkbox-visual {
  background: var(--checkout-primary);
  border-color: var(--checkout-primary);
  color: var(--checkout-text-on-accent, #fefae0);
}

/* Waitlist Checkbox Wrapper */
.organic-tickets-wrapper .checkout-checkbox-wrapper {
  background: var(--checkout-bg);
  border-color: #a0783c;
}

.organic-tickets-wrapper .checkout-checkbox-wrapper:hover {
  border-color: var(--checkout-primary);
}

.organic-tickets-wrapper .checkout-checkbox-wrapper:has(.checkout-checkbox:focus-visible) {
  outline: 2px solid var(--checkout-focus-ring);
  outline-offset: 2px;
}

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

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

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

/* FIX-TICKETS-011: Trust Signals */
.checkout-trust {
  color: var(--checkout-text-muted);
}

.checkout-trust-item {
  color: var(--checkout-text-muted);
}

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

/* FIX-TICKETS-012: Mobile CTA */
[data-template="organic"] .checkout-mobile-cta {
  background: var(--checkout-surface) !important;
  border-top: 2px solid var(--checkout-border) !important;
}

.checkout-mobile-cta-price {
  color: var(--checkout-text);
}

.checkout-mobile-cta-label {
  color: var(--checkout-text-muted);
}

/* FIX-TICKETS-013: Waitlist Button */
.checkout-waitlist-btn {
  background: color-mix(in srgb, var(--checkout-warning) 15%, transparent);
  color: var(--checkout-warning);
  border: 2px solid var(--checkout-warning);
  border-radius: var(--checkout-radius-2xl);
}

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

/* FIX-TICKETS-014: Modal Styling */
[data-template="organic"] .checkout-modal-content {
  background: var(--checkout-bg) !important;
  border: 2px solid var(--checkout-border);
  border-radius: var(--checkout-radius-xl);
}

.checkout-modal-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--checkout-text);
}

.checkout-modal-close {
  color: var(--checkout-text-muted);
}

.checkout-modal-close:hover {
  color: var(--checkout-text);
}

.checkout-modal-backdrop {
  background: rgba(40, 54, 24, 0.5);
}

/* FIX-TICKETS-015: Feedback Messages */
[data-template="organic"] .checkout-feedback {
  border-radius: var(--checkout-radius-lg);
}

[data-template="organic"] .checkout-feedback--success {
  background: color-mix(in srgb, var(--checkout-success) 15%, transparent) !important;
  border: 2px solid color-mix(in srgb, var(--checkout-success) 30%, transparent) !important;
  color: var(--checkout-success) !important;
}

[data-template="organic"] .checkout-feedback--error {
  background: color-mix(in srgb, var(--checkout-danger) 15%, transparent) !important;
  border: 2px solid color-mix(in srgb, var(--checkout-danger) 30%, transparent) !important;
  color: var(--checkout-danger) !important;
}

[data-template="organic"] .checkout-feedback--warning {
  background: color-mix(in srgb, var(--checkout-warning) 15%, transparent) !important;
  border: 2px solid color-mix(in srgb, var(--checkout-warning) 30%, transparent) !important;
  color: var(--checkout-warning) !important;
}

/* FIX-TICKETS-016: Typography Readability */
.checkout-container {
  font-size: 1rem;
  line-height: 1.7;
}

.checkout-section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  color: var(--checkout-text);
}

.checkout-help-text {
  font-size: 0.875rem;
  color: var(--checkout-text-muted);
}

.checkout-badge {
  font-size: 0.75rem;
  border-radius: var(--checkout-radius-xl);
}

/* Additional: Quantity Selector — Cream bg, Sage border */
[data-template="organic"] .checkout-quantity-btn {
  background: #fefae0 !important;
  border: 2px solid var(--checkout-sage-border) !important;
  color: var(--checkout-text) !important;
  font-family: 'Nunito', 'Inter', sans-serif !important;
  border-radius: 1rem !important;
}

[data-template="organic"] .checkout-quantity-btn:hover:not(:disabled) {
  background: rgba(96, 108, 56, 0.08) !important;
  border-color: #606c38 !important;
  color: #606c38 !important;
}

.checkout-quantity-value {
  color: var(--checkout-text);
  font-family: 'Nunito', 'Inter', sans-serif;
}

/* Additional: Stepper / Progress */
.checkout-stepper {
  background: var(--checkout-surface);
}

.checkout-stepper-step {
  color: var(--checkout-text-muted);
}

.checkout-stepper-step--active {
  color: var(--checkout-primary);
}

.checkout-stepper-step--completed {
  color: var(--checkout-success);
}

.checkout-stepper-line {
  background: var(--checkout-border);
}

.checkout-stepper-line--active {
  background: var(--checkout-primary);
}

/* Additional: Loading States — Sage-tinted shimmer on cream */
.checkout-skeleton {
  background: linear-gradient(
    90deg,
    #faedcd 25%,
    #f0e4b8 50%,
    #faedcd 75%
  );
}

/* Additional: Empty States */
.checkout-empty-state {
  color: var(--checkout-text-muted);
}

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

/* Additional: Dividers */
.checkout-divider {
  border-color: var(--checkout-border);
}

/* Additional: Info Boxes — Olive accent, warm bg */
.checkout-info-box {
  background: rgba(74, 90, 34, 0.06);
  border: 2px solid rgba(167, 183, 149, 0.2);
  border-left: 3px solid #606c38;
  border-radius: var(--checkout-radius-lg);
  color: var(--checkout-text-muted);
}

.checkout-info-box--warning {
  background: color-mix(in srgb, var(--checkout-warning) 10%, var(--checkout-surface));
  border-color: var(--checkout-warning);
}

/* Additional: Collapsible Sections */
.checkout-collapsible-header {
  color: var(--checkout-text);
}

.checkout-collapsible-header:hover {
  color: var(--checkout-primary);
}

.checkout-collapsible-icon {
  color: var(--checkout-text-muted);
}

/* Additional: Group Booking Styles */
.checkout-group-member {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border-subtle);
  border-radius: var(--checkout-radius-lg);
}

.checkout-group-member--lead {
  border-color: var(--checkout-primary);
}

.checkout-group-add-btn {
  background: var(--checkout-surface-elevated);
  border: 2px dashed var(--checkout-border);
  color: var(--checkout-text-muted);
}

.checkout-group-add-btn:hover {
  border-color: var(--checkout-primary);
  color: var(--checkout-primary);
}

/* Additional: Plus-One Section */
.checkout-plusone-card {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border-subtle);
  border-radius: var(--checkout-radius-lg);
}

.checkout-plusone-label {
  color: var(--checkout-text);
}

/* Additional: Footer Links */
.checkout-footer-link {
  color: var(--checkout-text-muted);
}

.checkout-footer-link:hover {
  color: var(--checkout-primary);
}

/* Additional: Back Button */
.checkout-back-btn {
  color: var(--checkout-text-muted);
}

.checkout-back-btn:hover {
  color: var(--checkout-primary);
}

/* Additional: Disabled States */
[data-template="organic"] .checkout-ticket-option--disabled {
  opacity: 0.6;
  background: var(--checkout-surface) !important;
}

.checkout-ticket-option--disabled .checkout-ticket-option-name {
  color: var(--checkout-text-muted);
}

/* Sold-Out Ticket — Cream Overlay, Olive Text */
[data-template="organic"] .checkout-ticket-option--sold-out {
  background: rgba(254, 250, 224, 0.7) !important;
  opacity: 0.7;
}

[data-template="organic"] .checkout-ticket-option--sold-out .checkout-ticket-option-name {
  color: #5c6b3a;
}

[data-template="organic"] .checkout-ticket-option--sold-out .checkout-capacity-badge--sold-out {
  background: rgba(153, 51, 34, 0.1);
  color: #993322;
  border: 2px solid rgba(153, 51, 34, 0.2);
}

/* Additional: Selection Radio/Checkbox */
.checkout-selection-indicator {
  border-color: var(--checkout-border);
  background: var(--checkout-bg);
}

.checkout-selection-indicator--selected {
  border-color: var(--checkout-primary);
  background: var(--checkout-primary);
}

/* Additional: Capacity Badges */
.checkout-capacity-badge {
  background: color-mix(in srgb, var(--checkout-warning) 15%, transparent);
  color: var(--checkout-warning);
}

.checkout-capacity-badge--sold-out {
  background: color-mix(in srgb, var(--checkout-danger) 15%, transparent);
  color: var(--checkout-danger);
}

/* Additional: Date/Time Display */
.checkout-datetime {
  color: var(--checkout-text);
}

.checkout-datetime-icon {
  color: var(--checkout-primary);
}

/* Additional: Location Info */
.checkout-location {
  color: var(--checkout-text-muted);
}

.checkout-location-icon {
  color: var(--checkout-primary);
}

/* Additional: Organizer Info */
.checkout-organizer {
  color: var(--checkout-text-muted);
}

.checkout-organizer-link {
  color: var(--checkout-primary);
}

/* Additional: Price Breakdown */
.checkout-price-breakdown {
  background: var(--checkout-surface);
  border-radius: var(--checkout-radius-lg);
}

.checkout-price-line {
  color: var(--checkout-text-muted);
}

.checkout-price-line--discount {
  color: var(--checkout-success);
}

.checkout-price-line--total {
  color: var(--checkout-text);
  font-weight: 600;
}

/* Additional: Payment Method Selection */
.checkout-payment-method {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border-subtle);
  border-radius: var(--checkout-radius-lg);
}

.checkout-payment-method:hover {
  border-color: var(--checkout-primary);
}

.checkout-payment-method--selected {
  border-color: var(--checkout-primary);
  background: var(--checkout-surface-elevated);
}

.checkout-payment-method-label {
  color: var(--checkout-text);
}

/* Additional: Security Badge */
.checkout-security-badge {
  color: var(--checkout-text-muted);
}

.checkout-security-badge svg {
  color: var(--checkout-success);
}

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

/* Inline form container – Olive divider */
.organic-tickets-wrapper .ticket-checkout-inline.expanded {
  --checkout-inline-divider: rgba(96, 108, 56, 0.2);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

/* Consent Box & Section Card */
.organic-tickets-wrapper .checkout-consent-box,
.organic-tickets-wrapper .checkout-section {
  background: color-mix(in srgb, var(--checkout-bg) 80%, var(--checkout-surface));
  border: 2px solid var(--checkout-border-subtle);
  border-radius: var(--checkout-radius-lg);
  box-shadow: none;
}

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

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

/* Checkbox border */
.organic-tickets-wrapper .border-slate-600 {
  border-color: var(--checkout-border-subtle) !important;
}

/* Shadow override */
.organic-tickets-wrapper .shadow-inner {
  box-shadow: none !important;
}

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

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

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

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

/* Input focus */
.organic-tickets-wrapper input:focus,
.organic-tickets-wrapper select:focus {
  border-color: var(--checkout-primary) !important;
  box-shadow: none !important;
}

/* Qty/Wallet buttons */
.organic-tickets-wrapper .bg-slate-800,
.organic-tickets-wrapper .bg-slate-800\/80 {
  background: var(--checkout-bg) !important;
  border-color: var(--checkout-border-subtle) !important;
  color: var(--checkout-text) !important;
}

.organic-tickets-wrapper .hover\:bg-slate-700:hover {
  background: rgba(96, 108, 56, 0.1) !important;
}

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

/* Submit Button – Olive Accent */
.organic-tickets-wrapper button[type="submit"] {
  background: var(--checkout-primary) !important;
  border-color: var(--checkout-primary) !important;
  color: var(--checkout-bg) !important;
  border-radius: var(--checkout-radius-2xl) !important;
}
.organic-tickets-wrapper button[type="submit"]:hover {
  background: var(--checkout-primary-hover) !important;
  border-color: var(--checkout-primary-hover) !important;
}

/* Plus-One Add Button */
.organic-tickets-wrapper [data-plus-one-add] {
  background: transparent !important;
  border-color: var(--checkout-primary) !important;
  color: var(--checkout-primary) !important;
  border-radius: var(--checkout-radius-lg) !important;
}
.organic-tickets-wrapper [data-plus-one-add]:hover {
  background: rgba(96, 108, 56, 0.1) !important;
}

/* Promo Apply Button */
.organic-tickets-wrapper [data-promo-apply] {
  background: transparent !important;
  border-color: var(--checkout-primary) !important;
  color: var(--checkout-primary) !important;
  border-radius: var(--checkout-radius-lg) !important;
}
.organic-tickets-wrapper [data-promo-apply]:hover {
  background: rgba(96, 108, 56, 0.1) !important;
}

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

/* ============================================================
   LIGHT-THEME OVERRIDES FOR BASE CLASSES & DARK TAILWIND
   ============================================================ */

/* Base Class Overrides */
.organic-tickets-wrapper .checkout-input {
  background: var(--checkout-bg) !important;
  border-color: var(--checkout-border) !important;
  color: var(--checkout-text) !important;
  border-radius: var(--checkout-radius-lg) !important;
}
.organic-tickets-wrapper .checkout-input::placeholder {
  color: rgba(92, 107, 58, 0.7) !important;
}
.organic-tickets-wrapper .checkout-input:focus {
  border-color: var(--checkout-primary) !important;
  box-shadow: 0 0 0 3px var(--checkout-primary-muted) !important;
}

[data-template="organic"] .checkout-input-sm,
.organic-tickets-wrapper .checkout-input-sm {
  background: var(--checkout-bg);
  border: 2px solid #a0783c;
  border-radius: var(--checkout-radius-sm);
  color: var(--checkout-text);
}

[data-template="organic"] .checkout-input-sm:focus,
.organic-tickets-wrapper .checkout-input-sm:focus {
  border-color: var(--checkout-primary);
  box-shadow: 0 0 0 3px rgba(96, 108, 56, 0.12);
  outline: none;
}

.organic-tickets-wrapper .checkout-label {
  color: #5c6b3a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
}
.organic-tickets-wrapper .checkout-section-number {
  background: var(--checkout-primary) !important;
  color: var(--checkout-bg) !important;
}
.organic-tickets-wrapper .checkout-section-header {
  color: var(--checkout-text) !important;
}

/* Checkbox unchecked background */
.organic-tickets-wrapper input[type="checkbox"].bg-slate-900 {
  background: var(--checkout-bg) !important;
}

/* Login Panel */
.organic-tickets-wrapper [data-login-inline] {
  background: color-mix(in srgb, var(--checkout-primary) 10%, var(--checkout-surface)) !important;
  border-color: color-mix(in srgb, var(--checkout-primary) 30%, transparent) !important;
}
.organic-tickets-wrapper [data-login-inline] .text-amber-100 {
  color: var(--checkout-text) !important;
}
.organic-tickets-wrapper [data-login-inline] .text-slate-300 {
  color: var(--checkout-text-muted) !important;
}
.organic-tickets-wrapper [data-login-inline] .text-slate-100 {
  color: var(--checkout-text) !important;
}
.organic-tickets-wrapper [data-login-inline] .bg-slate-800\/80 {
  background: var(--checkout-bg) !important;
  border-color: var(--checkout-border) !important;
  color: var(--checkout-text) !important;
}
.organic-tickets-wrapper [data-login-inline] .placeholder-slate-400::placeholder {
  color: var(--checkout-text-subtle) !important;
}

/* Info-Box dark border */
.organic-tickets-wrapper .border-slate-700 {
  border-color: var(--checkout-border-subtle) !important;
}

/* Helper text contrast */
.organic-tickets-wrapper .text-slate-400 {
  color: var(--checkout-text-muted) !important;
}

/* Feedback colors for light background */
.organic-tickets-wrapper .text-emerald-300 {
  color: var(--checkout-success) !important;
}
.organic-tickets-wrapper .text-emerald-200 {
  color: var(--checkout-success) !important;
}
.organic-tickets-wrapper .text-amber-300 {
  color: var(--checkout-warning) !important;
}
.organic-tickets-wrapper .text-rose-300 {
  color: var(--checkout-danger) !important;
}
.organic-tickets-wrapper .text-rose-400 {
  color: var(--checkout-danger) !important;
}
.organic-tickets-wrapper .text-cyan-400 {
  color: var(--checkout-primary) !important;
}
.organic-tickets-wrapper .text-white {
  color: var(--checkout-text) !important;
}
.organic-tickets-wrapper .text-slate-500 {
  color: var(--checkout-text-muted) !important;
}

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

/* Form Panel – Earth Tone Accent */
[data-template="organic"] .checkout-form-panel {
  position: relative;
}

[data-template="organic"] .checkout-form-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--checkout-primary), var(--checkout-warning), var(--checkout-primary), transparent);
  border-radius: var(--checkout-radius-xl) var(--checkout-radius-xl) 0 0;
}

/* Group Section – Full Styling (scoped) */
[data-template="organic"] .checkout-group {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border-subtle);
  border-radius: var(--checkout-radius-xl);
  padding: 1rem;
}

[data-template="organic"] .checkout-group-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--checkout-text);
  font-weight: 600;
}

[data-template="organic"] .checkout-group-btn {
  background: var(--checkout-surface-elevated);
  border: 2px solid var(--checkout-border);
  border-radius: var(--checkout-radius-lg);
  color: var(--checkout-text);
  transition: all 0.2s ease;
}

[data-template="organic"] .checkout-group-btn:hover:not(:disabled) {
  background: var(--checkout-primary-muted);
  border-color: var(--checkout-primary);
  color: var(--checkout-primary);
}

[data-template="organic"] .checkout-group-person {
  background: var(--checkout-bg);
  border: 2px solid var(--checkout-border-subtle);
  border-radius: var(--checkout-radius-lg);
}

[data-template="organic"] .checkout-group-person-title {
  color: var(--checkout-primary);
  font-family: 'Fraunces', Georgia, serif;
}

/* Capacity Bar – Earth Gradient (scoped) */
[data-template="organic"] .checkout-capacity-fill {
  background: linear-gradient(90deg, var(--checkout-primary), var(--checkout-warning));
  border-radius: var(--checkout-radius-xl);
}

[data-template="organic"] .checkout-capacity--critical .checkout-capacity-fill {
  background: linear-gradient(90deg, var(--checkout-danger), #e0886e);
}

[data-template="organic"] .checkout-capacity-text strong {
  color: var(--checkout-primary);
}

/* Success State – Warm Earth (scoped) */
[data-template="organic"] .checkout-success-box {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border);
  border-radius: var(--checkout-radius-xl);
}

[data-template="organic"] .checkout-success-icon {
  background: color-mix(in srgb, var(--checkout-success) 15%, transparent);
  color: var(--checkout-success);
  border-radius: var(--checkout-radius-xl);
}

[data-template="organic"] .checkout-success-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--checkout-text);
}

/* Announcement Popup – Earth Tones (scoped) */
[data-template="organic"] .announcement-popup-card {
  background: var(--checkout-surface);
  border: 2px solid var(--checkout-border);
  border-radius: var(--checkout-radius-xl);
  box-shadow: var(--checkout-shadow-md);
}

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

[data-template="organic"] .announcement-popup-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--checkout-text);
}

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

[data-template="organic"] .announcement-popup-article-title {
  color: var(--checkout-text);
}

[data-template="organic"] .announcement-popup-article-body {
  color: var(--checkout-text-muted);
}

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

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

/* Crew Avatars — Organic Blob Shape */
[data-template="organic"] .checkout-crew-avatar {
  border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
}

/* Crew Member — Sage left-border accent */
[data-template="organic"] .checkout-crew-member {
  background: rgba(255, 250, 240, 0.8);
  border: 2px solid rgba(139, 105, 20, 0.06);
  border-radius: 1rem;
  border-left: 2px solid rgba(167, 183, 149, 0.3);
}

[data-template="organic"] .checkout-crew-member:hover {
  border-color: rgba(139, 105, 20, 0.15);
}

[data-template="organic"] .checkout-crew-member-name {
  color: #283618;
  font-family: 'Nunito', 'Inter', sans-serif;
}

[data-template="organic"] .checkout-crew-member-tag {
  background: rgba(74, 90, 34, 0.1);
  color: #4a5a22;
  border-radius: 9999px;
}

/* Status Dots — Olive confirmed, Terracotta pending */
[data-template="organic"] .checkout-crew-status {
  color: #5c6b3a;
  font-family: 'Nunito', 'Inter', sans-serif;
}

[data-template="organic"] .checkout-crew-status span {
  font-family: 'Nunito', 'Inter', sans-serif;
}

[data-template="organic"] .checkout-crew-status--registriert .checkout-crew-status-dot,
[data-template="organic"] .checkout-crew-status--check-in .checkout-crew-status-dot,
[data-template="organic"] .checkout-crew-status--bestätigt .checkout-crew-status-dot,
[data-template="organic"] .checkout-status-dot--confirmed,
[data-template="organic"] .checkout-status-dot--success {
  background: #606c38;
}

[data-template="organic"] .checkout-crew-status--eingeladen .checkout-crew-status-dot,
[data-template="organic"] .checkout-crew-status--ausstehend .checkout-crew-status-dot,
[data-template="organic"] .checkout-crew-status--pending .checkout-crew-status-dot,
[data-template="organic"] .checkout-status-dot--pending {
  background: #b45309;
}

/* Organizer Company — Olive */
[data-template="organic"] .checkout-organizer-company {
  color: #606c38;
  font-family: 'Nunito', 'Inter', sans-serif;
}

/* Badge Variants – Earth Tones (scoped) */
[data-template="organic"] .checkout-badge--danger {
  background: rgba(201, 112, 93, 0.15);
  border: 2px solid rgba(201, 112, 93, 0.3);
  color: var(--checkout-danger);
  border-radius: var(--checkout-radius-xl);
}

[data-template="organic"] .checkout-badge--neutral {
  background: rgba(122, 138, 78, 0.12);
  border: 2px solid rgba(122, 138, 78, 0.25);
  color: var(--checkout-text-subtle);
  border-radius: var(--checkout-radius-xl);
}

[data-template="organic"] .checkout-badge--exclusive {
  background: rgba(221, 161, 94, 0.15);
  border: 2px solid rgba(221, 161, 94, 0.3);
  color: var(--checkout-warning);
  border-radius: var(--checkout-radius-xl);
}

/* Promo Feedback – Earth Theme (scoped) */
.organic-tickets-wrapper .checkout-promo-feedback--success {
  background: color-mix(in srgb, var(--checkout-success) 10%, var(--checkout-surface));
  border-left: 3px solid var(--checkout-success);
  color: var(--checkout-success);
  padding: 0.5rem 0.75rem;
  border-radius: 0 var(--checkout-radius-md) var(--checkout-radius-md) 0;
}

.organic-tickets-wrapper .checkout-promo-feedback--error {
  background: color-mix(in srgb, var(--checkout-danger) 10%, var(--checkout-surface));
  border-left: 3px solid var(--checkout-danger);
  color: var(--checkout-danger);
  padding: 0.5rem 0.75rem;
  border-radius: 0 var(--checkout-radius-md) var(--checkout-radius-md) 0;
}

/* (Merged into earlier Consent Box & Section Card rule) */

/* Section Number – Olive */
.organic-tickets-wrapper .checkout-section-number {
  background: var(--checkout-primary) !important;
  color: var(--checkout-bg) !important;
  border-radius: var(--checkout-radius-xl) !important;
}

/* Error Colors – Terracotta */
[data-template="organic"] input[aria-invalid="true"],
[data-template="organic"] select[aria-invalid="true"] {
  border-color: var(--checkout-danger) !important;
  box-shadow: 0 0 0 3px rgba(201, 112, 93, 0.15);
}

[data-template="organic"] .field-error,
[data-template="organic"] .checkout-field-error {
  color: var(--checkout-danger);
}

/* Timer Critical – Terracotta (scoped) */
[data-template="organic"] .checkout-timer--critical {
  background: color-mix(in srgb, var(--checkout-danger) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--checkout-danger) 30%, transparent) !important;
  color: var(--checkout-danger) !important;
}

/* ============================================================
   ORGANIC EASING — Gentle, flowing transitions (350ms)
   ============================================================ */
[data-template="organic"] .checkout-ticket-option,
[data-template="organic"] .checkout-ticket-card,
[data-template="organic"] .checkout-btn-primary,
[data-template="organic"] .checkout-btn-secondary,
[data-template="organic"] .checkout-quantity-btn,
[data-template="organic"] .checkout-action-btn,
[data-template="organic"] .checkout-promo-btn,
[data-template="organic"] .checkout-group-btn,
[data-template="organic"] .checkout-consent-checkbox-visual,
[data-template="organic"] .checkout-form-input,
[data-template="organic"] .checkout-input,
[data-template="organic"] .checkout-nav-link,
[data-template="organic"] .checkout-payment-method,
[data-template="organic"] .checkout-collapsible-header,
[data-template="organic"] .checkout-info-box,
[data-template="organic"] .checkout-hero-card,
[data-template="organic"] .checkout-summary,
[data-template="organic"] .checkout-waitlist-btn,
[data-template="organic"] .checkout-crew-member,
[data-template="organic"] .checkout-checkbox-wrapper {
  transition: all var(--checkout-organic-duration) var(--checkout-organic-ease);
}

/* ============================================
   Sticky Summary Bar — appended to body via JS,
   outside [data-template] scope. Must use body:has()
   with hardcoded values, not CSS vars.
   ============================================ */
body:has([data-template="organic"]) .checkout-summary-sticky {
  background: #faedcd;
  border-top: 1px solid #e5d4b3;
  box-shadow: 0 -2px 8px rgba(40, 54, 24, 0.08);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

body:has([data-template="organic"]) .checkout-summary-sticky-total {
  color: #283618;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

body:has([data-template="organic"]) .checkout-summary-sticky-label {
  color: #4d5729;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

body:has([data-template="organic"]) .checkout-summary-sticky-btn {
  background: #606c38;
  color: #fefae0;
  border-radius: 1.25rem;
  border: none;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

body:has([data-template="organic"]) .checkout-summary-sticky-btn:hover {
  background: #4a5429;
}

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

/* Reduced Motion — Disable ALL transitions */
@media (prefers-reduced-motion: reduce) {
  [data-template="organic"] .checkout-ticket-option,
  [data-template="organic"] .checkout-ticket-card,
  [data-template="organic"] .checkout-btn-primary,
  [data-template="organic"] .checkout-btn-secondary,
  [data-template="organic"] .checkout-quantity-btn,
  [data-template="organic"] .checkout-action-btn,
  [data-template="organic"] .checkout-promo-btn,
  [data-template="organic"] .checkout-group-btn,
  [data-template="organic"] .checkout-consent-checkbox-visual,
  [data-template="organic"] .checkout-form-input,
  [data-template="organic"] .checkout-input,
  [data-template="organic"] .checkout-nav-link,
  [data-template="organic"] .checkout-payment-method,
  [data-template="organic"] .checkout-collapsible-header,
  [data-template="organic"] .checkout-info-box,
  [data-template="organic"] .checkout-hero-card,
  [data-template="organic"] .checkout-summary,
  [data-template="organic"] .checkout-waitlist-btn,
  [data-template="organic"] .checkout-crew-member,
  [data-template="organic"] .checkout-checkbox-wrapper,
  [data-template="organic"] .checkout-skeleton {
    transition: none !important;
    animation: none !important;
  }

  /* Sticky bar button (body-level, outside [data-template] scope) */
  body:has([data-template="organic"]) .checkout-summary-sticky-btn {
    transition: none !important;
  }
}

/* ============================================================
   TIER PRICING TABLE — Earth Tones
   ============================================================ */
.organic-tickets-wrapper .tier-pricing-table {
  background: var(--checkout-surface) !important;
  border: 2px solid var(--checkout-border) !important;
  border-radius: 0.5rem !important;
}
.organic-tickets-wrapper .tier-pricing-title {
  color: var(--checkout-text-muted) !important;
}
.organic-tickets-wrapper .tier-row {
  color: var(--checkout-text-muted) !important;
  border-radius: 0.5rem !important;
}
.organic-tickets-wrapper .tier-row--active {
  background: var(--checkout-primary-muted) !important;
  border-color: var(--checkout-primary) !important;
  color: var(--checkout-text) !important;
}
.organic-tickets-wrapper .tier-row--active .tier-row-label {
  color: var(--checkout-text) !important;
}
.organic-tickets-wrapper .tier-row-indicator {
  background: var(--checkout-text-subtle) !important;
}
.organic-tickets-wrapper .tier-row--active .tier-row-indicator {
  background: var(--checkout-primary) !important;
  box-shadow: 0 0 6px var(--checkout-primary-muted) !important;
}
.organic-tickets-wrapper .tier-row--active .tier-row-price {
  color: var(--checkout-primary) !important;
}
.organic-tickets-wrapper .tier-row-qty {
  color: var(--checkout-text-subtle) !important;
}
.organic-tickets-wrapper .tier-savings-badge {
  border-radius: 0.5rem !important;
}
.organic-tickets-wrapper .tier-next-hint {
  border-top-color: var(--checkout-border) !important;
}

/* ── Legal Info — Warm Cream bg, Sage border ── */
.organic-tickets-wrapper .checkout-legal-info {
  background: rgba(254, 250, 224, 0.6) !important;
  border: 2px solid rgba(167, 183, 149, 0.3) !important;
  border-radius: 1rem !important;
  padding: 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile Responsive — Tablet (max-width: 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Container padding reduction */
  .checkout-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Event info compact */
  .checkout-event-info {
    padding: 1.25rem;
    margin-bottom: 1rem;
  }

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

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

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

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

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

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

  /* Promo section compact */
  .checkout-promo {
    padding: 0.75rem;
  }

  /* Group booking compact */
  [data-template="organic"] .checkout-group {
    padding: 0.75rem;
  }

  .checkout-group-member {
    padding: 0.75rem;
  }

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

  /* Price breakdown compact */
  .checkout-price-breakdown {
    padding: 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile Responsive — Compact Mobile (max-width: 639px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Tighter container */
  .checkout-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* iOS zoom prevention: 16px minimum on inputs/selects */
  .checkout-container input[type="text"],
  .checkout-container input[type="email"],
  .checkout-container input[type="tel"],
  .checkout-container input[type="password"],
  .checkout-container input[type="date"],
  .checkout-container select,
  .checkout-container textarea,
  .checkout-input,
  .checkout-form-input,
  .checkout-promo-input,
  .organic-tickets-wrapper .checkout-input {
    font-size: 16px;
  }

  /* Event info tighter */
  .checkout-event-info {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  /* Hero card tighter */
  .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;
  }

  /* Form label compact */
  .checkout-form-label {
    font-size: 0.875rem;
  }

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

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

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

  .checkout-waitlist-btn {
    width: 100%;
    justify-content: center;
  }

  /* Promo compact */
  .checkout-promo {
    padding: 0.625rem;
  }

  /* Inline form grid to single column */
  .organic-tickets-wrapper .grid.sm\:grid-cols-2 {
    grid-template-columns: 1fr;
  }

  /* Group booking compact */
  [data-template="organic"] .checkout-group {
    padding: 0.5rem;
  }

  .checkout-group-member {
    padding: 0.5rem;
  }

  /* Plus-one card compact */
  .checkout-plusone-card {
    padding: 0.75rem;
  }

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

  /* Tier pricing table compact */
  .organic-tickets-wrapper .tier-pricing-table {
    padding: 0.5rem;
  }

  /* Payment method compact */
  .checkout-payment-method {
    padding: 0.75rem;
  }

  /* Info box compact */
  .checkout-info-box {
    padding: 0.75rem;
  }
}

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

  .checkout-input,
  .checkout-select {
    border-width: 2px;
  }

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