/**
 * Design Variants CSS
 *
 * This file contains alternative design styles for the stage page.
 * Styles are scoped to body classes set by the design-theme-service.
 *
 * Usage:
 * - Test a variant: Add ?design=variant-a to the URL
 * - Production: Map program IDs to themes in design-theme-service.js
 *
 * Structure:
 * - Each variant has its own section
 * - Within each section, organize by component
 * - Use the body.design-[variant] prefix for all rules
 */

/* ==========================================================================
   VARIANT-A: First Alternative Design
   ========================================================================== */

/*
 * Example structure - uncomment and modify as you build out the design:
 *
 * body.design-variant-a {
 *   // Global overrides for this variant
 * }
 */

/* ---------------------------------------------------------------------------
   Variant-A: Global / Page Level
   --------------------------------------------------------------------------- */

/* Urban Design: Clean, solid dark background */
body.design-variant-a {
  background: #0F0F0F !important;
  background-attachment: fixed;

  /* =========================================================================
     CSS Custom Properties - These cascade into Shadow DOM components
     ========================================================================= */

  /* Page & Modal Backgrounds */
  --color-page-background: #0F0F0F;
  --color-page-gradient-top: rgba(255, 238, 92, 0.08);
  --color-page-gradient-bottom: rgba(15, 15, 15, 1);
  --color-bg: #0F0F0F;
  --color-modal-bg: #0F0F0F;

  /* Surfaces (cards, containers) */
  --color-surface-1: rgba(255, 255, 255, 0.04);
  --color-surface-2: rgba(255, 255, 255, 0.06);
  --color-surface-3: rgba(255, 255, 255, 0.08);

  /* Borders */
  --color-border-primary: rgba(255, 255, 255, 0.12);
  --color-border-interactive: rgba(255, 255, 255, 0.25);

  /* Text */
  --color-text-header: #ffffff;
  --color-text-body: rgba(255, 255, 255, 0.85);
  --color-text-muted: rgba(255, 255, 255, 0.5);

  /* Accents */
  --color-accent-primary: #FFEE5C;
  --color-accent-secondary: #43d675;

  /* Glassmorphism */
  --blur-intensity: 20px;
  --color-glass-background: rgba(255, 255, 255, 0.03);
  --color-glass-background-light: rgba(255, 255, 255, 0.05);

  /* Border Radius */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;

  /* Skeleton Loading Styles - Dark theme */
  --skeleton-base-color: rgba(255, 255, 255, 0.05);
  --skeleton-highlight-color: rgba(255, 255, 255, 0.1);
  --skeleton-border-radius: 8px;
}

/* Remove noise texture overlay */
body.design-variant-a::before {
  display: none !important;
}

/* Hide ambient glow effects */
body.design-variant-a .ambient-glow-container {
  display: none !important;
}

/* Adjust container for urban feel + flex for reordering */
body.design-variant-a .container {
  max-width: 1280px;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------------
   Variant-A: Stage Header
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-header-with-dropdown {
  // Header style overrides
}

body.design-variant-a .stage-header {
  // Example: More rounded corners
  border-radius: 20px;
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Stage Videos
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-videos {
  // Video component overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: CTA Buttons - Move below workouts
   --------------------------------------------------------------------------- */

/* Keep header at top */
body.design-variant-a stage-page-header-with-dropdown {
  order: 1;
}

/* Mobile tab menu */
body.design-variant-a mobile-tab-menu {
  order: 2;
}

/* Videos section */
body.design-variant-a .section.tab-content-section:has(stage-videos) {
  order: 3;
}

/* CTA Buttons - after videos, before workouts */
body.design-variant-a .cta-buttons-container {
  order: 4;
  margin-top: 32px;
  margin-bottom: 30px;
}

@media (max-width: 767.98px) {
  body.design-variant-a .cta-buttons-container {
    margin-top: 12px;
    margin-bottom: 60px;
  }
}

/* Workouts section */
body.design-variant-a .section.tab-content-section:has(stage-page-workouts-section) {
  order: 5;
}

/* Study section */
body.design-variant-a .section.tab-content-section:has(stage-page-study-section) {
  order: 6;
}

/* Progress tab */
body.design-variant-a .tab-content-section[data-tab-content="progress"] {
  order: 7;
}

/* Overview tab */
body.design-variant-a .tab-content-section[data-tab-content="overview"] {
  order: 8;
}

/* Sidebar */
body.design-variant-a vision-sidebar {
  order: 9;
}

/* ---------------------------------------------------------------------------
   Variant-A: Workouts Section
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-workouts-section {
  // Workouts section overrides
}

body.design-variant-a .workout-card {
  // Example: Card style changes
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Study Section
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-study-section {
  // Study section overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Progress Summary
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-progress-summary {
  // Progress summary overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Program Overview
   --------------------------------------------------------------------------- */

/*
body.design-variant-a stage-page-program-overview {
  // Program overview overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Sidebar
   --------------------------------------------------------------------------- */

/*
body.design-variant-a vision-sidebar {
  // Sidebar overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Mobile Tab Menu
   --------------------------------------------------------------------------- */

/*
body.design-variant-a mobile-tab-menu {
  // Mobile tab menu overrides
}
*/

/* ---------------------------------------------------------------------------
   Variant-A: Urban Top Bar (replaces bottom menu)
   The sidebar-bottom-menu component renders as a top bar in urban mode
   --------------------------------------------------------------------------- */

/* Urban mode: Position the sidebar-bottom-menu as a top bar */
body.design-variant-a sidebar-bottom-menu[data-urban-mode] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 1000;
}

/* Add padding to body to account for fixed top bar - mobile only */
@media (max-width: 768px) {
  body.design-variant-a {
    padding-top: 60px !important;
  }

  /* Urban design: Remove bottom padding since bottom menu is now a top bar */
  body.design-variant-a .tab-content-section[data-tab-content="study"],
  body.design-variant-a .tab-content-section[data-tab-content="progress"],
  body.design-variant-a .tab-content-section[data-tab-content="overview"] {
    padding-bottom: 0 !important;
  }

  /* Urban mode: Set CSS custom property for modal top offset - mobile only */
  body.design-variant-a homepage-modal,
  body.design-variant-a urban-programs-modal,
  body.design-variant-a blog-articles-overview-modal,
  body.design-variant-a membership-analytics-modal {
    --modal-top-offset: 60px;
  }

  /* Disable scroll when sidebar is open on mobile */
  body.design-variant-a.no-scroll,
  body.design-variant-a.sidebar-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Hide the close button on mobile - hamburger handles closing */
  body.design-variant-a.sidebar-open close-btn {
    display: none !important;
  }
}


/* ---------------------------------------------------------------------------
   Variant-A: Workout Overlay & Workout Page
   Urban design doesn't need bottom padding since menu is at top
   --------------------------------------------------------------------------- */

body.design-variant-a .workout-overlay,
body.design-variant-a {
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   Variant-A: Blog Article Modal (Shadow DOM Component)
   CSS Custom Properties cascade into Shadow DOM automatically.
   For host-level styling, use the custom element selector.
   --------------------------------------------------------------------------- */

/* Urban Design: Blog Article Modal - host styling */
body.design-variant-a blog-article-modal {
  /* Host-level custom properties for the modal */
  --modal-overlay-bg: rgba(0, 0, 0, 0.9);
  --modal-container-bg: #0F0F0F;
}


/* ---------------------------------------------------------------------------
   Variant-A: Checkout Modal - Urban/Industrial Design
   Square corners, dark background, volt yellow accent, white CTA button
   --------------------------------------------------------------------------- */

/* Urban Design: Checkout Modal Container */
body.design-variant-a .checkout-modal {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
  padding: 32px !important;
  padding-top: 32px !important;
}

/* Modal Title - Urban Style */
body.design-variant-a .checkout-modal .modal-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  margin: 0 0 24px !important;
}

/* Features List - Urban Style */
body.design-variant-a .checkout-modal .modal-features-list li {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

body.design-variant-a .checkout-modal .checkmark-icon {
  color: #DFFF00 !important;
}

/* Price Section - Urban Style */
body.design-variant-a .checkout-modal .price-amount {
  font-family: 'Anton', sans-serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: #DFFF00 !important;
  letter-spacing: 0.02em !important;
}

/* Price Top Row (original price with discount) - keep in Inter */
body.design-variant-a .checkout-modal .price-top-row,
body.design-variant-a .checkout-modal .price-original {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body.design-variant-a .checkout-modal .price-period {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #9ca3af !important;
}

/* Features/Price Container Border */
body.design-variant-a .checkout-modal .checkout-features-price-container {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 24px 0 !important;
  margin-bottom: 24px !important;
}

/* Connected Fields (Form Inputs) - Urban Style */
body.design-variant-a .checkout-modal .connected-group,
body.design-variant-a .checkout-modal .connected-fields {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body.design-variant-a .checkout-modal .connected-group:focus-within,
body.design-variant-a .checkout-modal .connected-fields:focus-within {
  border-color: #DFFF00 !important;
  box-shadow: none !important;
}

/* Form Field Inputs */
body.design-variant-a .checkout-modal .mm-formField input,
body.design-variant-a .checkout-modal .mm-formField select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
}

body.design-variant-a .checkout-modal .mm-formField input::placeholder {
  color: #6b7280 !important;
}

/* Coupon Field */
body.design-variant-a .checkout-modal #mm_field_coupon_code {
  border-radius: 0 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body.design-variant-a .checkout-modal #mm_field_coupon_code:focus {
  border-color: #DFFF00 !important;
  box-shadow: none !important;
}

body.design-variant-a .checkout-modal .coupon-field .apply-btn {
  border-radius: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* Primary CTA Button - White Background, Black Text */
body.design-variant-a .checkout-modal .primary-action-button,
body.design-variant-a .checkout-modal .cta-button {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 16px 24px !important;
}

body.design-variant-a .checkout-modal .primary-action-button:hover,
body.design-variant-a .checkout-modal .cta-button:hover {
  background-color: #e5e5e5 !important;
  transform: none !important;
}

body.design-variant-a .checkout-modal .primary-action-button:active,
body.design-variant-a .checkout-modal .cta-button:active {
  background-color: #d4d4d4 !important;
}

body.design-variant-a .checkout-modal .primary-action-button:disabled,
body.design-variant-a .checkout-modal .cta-button:disabled {
  background-color: rgba(255, 255, 255, 0.3) !important;
  color: rgba(0, 0, 0, 0.5) !important;
}

/* CTA Button SVG Icon */
body.design-variant-a .checkout-modal .cta-button svg,
body.design-variant-a .checkout-modal .primary-action-button svg {
  fill: #000000 !important;
}

/* Secondary Action Link */
body.design-variant-a .checkout-modal .secondary-action-link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #6b7280 !important;
}

body.design-variant-a .checkout-modal .secondary-action-link:hover {
  color: #DFFF00 !important;
}

/* Separator */
body.design-variant-a .checkout-modal .separator {
  color: #6b7280 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

body.design-variant-a .checkout-modal .separator::before,
body.design-variant-a .checkout-modal .separator::after {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* PayPal Button - Urban Style */
body.design-variant-a .checkout-modal .paypal-btn {
  border-radius: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Order Summary - Urban Style */
body.design-variant-a .checkout-modal .order-summary {
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.design-variant-a .checkout-modal .item-image {
  border-radius: 0 !important;
}

/* Payment Description */
body.design-variant-a .checkout-modal .payment-description {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  color: #9ca3af !important;
}

/* Error Message */
body.design-variant-a .checkout-modal .error-message {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  border-radius: 0 !important;
}

/* Close Button Position Adjustment */
body.design-variant-a #visionModal close-btn {
  --close-btn-bg: rgba(255, 255, 255, 0.05);
  --close-btn-bg-hover: rgba(255, 255, 255, 0.1);
  --close-btn-border: rgba(255, 255, 255, 0.1);
}

/* Urban Design: Checkout Account Form - CSS Custom Properties for Shadow DOM */
body.design-variant-a checkout-account-form {
  --checkout-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --checkout-accent-color: #DFFF00;
  --checkout-accent-hover-color: #DFFF00;
  --checkout-button-bg: #ffffff;
  --checkout-button-color: #000000;
  --checkout-button-hover-bg: #e5e5e5;
  --checkout-button-hover-transform: none;
  --checkout-button-hover-shadow: none;
  --checkout-button-padding: 16px 24px;
  --checkout-button-font-size: 11px;
  --checkout-button-letter-spacing: 0.1em;
  --checkout-button-transform: uppercase;
  --checkout-border-radius: 0;
  --checkout-border-color: rgba(255, 255, 255, 0.15);
  --checkout-focus-color: #DFFF00;
  --checkout-focus-shadow: none;
  --checkout-placeholder-color: #6b7280;
  --checkout-title-letter-spacing: 0.02em;
  --checkout-title-transform: uppercase;
  /* Disabled button - matching urban style */
  --checkout-button-disabled-bg: rgba(255, 255, 255, 0.3);
  --checkout-button-disabled-color: rgba(0, 0, 0, 0.5);
  --checkout-button-disabled-opacity: 1;
  /* Mobile overrides for urban */
  --checkout-button-padding-mobile: 14px 20px;
  --checkout-button-font-size-mobile: 10px;
  --checkout-title-font-size-mobile: 16px;
  --checkout-title-font-size-xs: 14px;
}

/* Mobile Adjustments for Urban Checkout */
@media (max-width: 767.98px) {
  body.design-variant-a .checkout-modal {
    padding: 24px !important;
    padding-top: 24px !important;
  }

  body.design-variant-a .checkout-modal .modal-title {
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  body.design-variant-a .checkout-modal .price-amount {
    font-size: 36px !important;
  }

  body.design-variant-a .checkout-modal .primary-action-button,
  body.design-variant-a .checkout-modal .cta-button {
    padding: 14px 20px !important;
    font-size: 10px !important;
  }
}


/* ---------------------------------------------------------------------------
   Variant-A: Holiday/Christmas Checkout Modal
   Adds snow effect, snowflake checkmarks, and red holiday button
   Activated by body.design-variant-a.holiday-checkout-mode
   --------------------------------------------------------------------------- */

/* Holiday Checkout Modal - Add snow effect */
body.design-variant-a.holiday-checkout-mode .checkout-modal {
  position: relative !important;
  overflow: hidden !important;
}

/* Snow Effect for Checkout Modal */
body.design-variant-a.holiday-checkout-mode .checkout-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(2px 2px at 20px 30px, white, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, white, transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 160px 120px, white, transparent),
    radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 250px 90px, white, transparent),
    radial-gradient(2px 2px at 300px 60px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 350px 110px, white, transparent),
    radial-gradient(2px 2px at 400px 30px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 450px 80px, white, transparent),
    radial-gradient(2px 2px at 500px 140px, rgba(255,255,255,0.7), transparent);
  background-size: 550px 200px;
  animation: holiday-snow-fall 8s linear infinite;
  opacity: 0.5;
}

@keyframes holiday-snow-fall {
  0% { background-position: 0 -200px; }
  100% { background-position: 0 400px; }
}

/* Ensure content is above snow */
body.design-variant-a.holiday-checkout-mode .checkout-modal > * {
  position: relative;
  z-index: 2;
}

/* Replace checkmarks with snowflakes using CSS */
body.design-variant-a.holiday-checkout-mode .checkout-modal .checkmark-icon {
  visibility: hidden;
  position: relative;
}

body.design-variant-a.holiday-checkout-mode .checkout-modal .checkmark-icon::before {
  content: '❄';
  visibility: visible;
  position: absolute;
  left: 0;
}

/* Holiday CTA Button - Red background with snow effect */
body.design-variant-a.holiday-checkout-mode .checkout-modal .primary-action-button,
body.design-variant-a.holiday-checkout-mode .checkout-modal .cta-button {
  background-color: #8B0000 !important;
  color: #ffffff !important;
  border: 1px solid #D42426 !important;
  box-shadow: 0 0 20px rgba(212, 36, 38, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

body.design-variant-a.holiday-checkout-mode .checkout-modal .primary-action-button:hover,
body.design-variant-a.holiday-checkout-mode .checkout-modal .cta-button:hover {
  background-color: #9B0000 !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 30px rgba(212, 36, 38, 0.4) !important;
}

body.design-variant-a.holiday-checkout-mode .checkout-modal .primary-action-button:active,
body.design-variant-a.holiday-checkout-mode .checkout-modal .cta-button:active {
  background-color: #7B0000 !important;
}

body.design-variant-a.holiday-checkout-mode .checkout-modal .primary-action-button:disabled,
body.design-variant-a.holiday-checkout-mode .checkout-modal .cta-button:disabled {
  background-color: rgba(139, 0, 0, 0.5) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(212, 36, 38, 0.5) !important;
  box-shadow: none !important;
}

/* CTA Button SVG Icon - White for holiday */
body.design-variant-a.holiday-checkout-mode .checkout-modal .cta-button svg,
body.design-variant-a.holiday-checkout-mode .checkout-modal .primary-action-button svg {
  fill: #ffffff !important;
}

/* Holiday Checkout Account Form - Shadow DOM custom properties for red button */
body.design-variant-a.holiday-checkout-mode checkout-account-form {
  --checkout-button-bg: #8B0000;
  --checkout-button-color: #ffffff;
  --checkout-button-hover-bg: #9B0000;
  --checkout-button-disabled-bg: rgba(139, 0, 0, 0.5);
  --checkout-button-disabled-color: rgba(255, 255, 255, 0.6);
}

/* Holiday Discounted Price - Gold with glow */
body.design-variant-a.holiday-checkout-mode .checkout-modal .price-amount .price-discounted,
body.design-variant-a.holiday-checkout-mode .checkout-modal .price-discounted,
body.design-variant-a.holiday-checkout-mode .checkout-modal #checkout-program-price .price-discounted {
  color: #FFD700 !important;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4) !important;
}

/* Override the volt yellow for discounted price specifically */
body.design-variant-a.holiday-checkout-mode .checkout-modal .price-amount.has-discount {
  color: inherit !important;
}


/* ==========================================================================
   DESIGN-CLEAN: Light/White Theme (Alo Moves Inspired)
   White backgrounds, black text, no border-radius, system-ui fonts
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Clean: Global / Page Level
   --------------------------------------------------------------------------- */

/* Clean Design: White background, dark text */
html:has(body.design-clean) {
  background-color: #FFFFFF !important;
}

body.design-clean {
  background: #FFFFFF !important;
  background-attachment: fixed;

  /* =========================================================================
     CSS Custom Properties - These cascade into Shadow DOM components
     ========================================================================= */

  /* Page & Modal Backgrounds */
  --color-page-background: #FFFFFF;
  --color-page-gradient-top: rgba(0, 0, 0, 0.02);
  --color-page-gradient-bottom: rgba(255, 255, 255, 1);
  --color-bg: #FFFFFF;
  --color-modal-bg: #FFFFFF;

  /* Surfaces (cards, containers) */
  --color-surface-1: #F8F8F8;
  --color-surface-2: #F0F0F0;
  --color-surface-3: #E8E8E8;

  /* Borders */
  --color-border-primary: rgba(0, 0, 0, 0.1);
  --color-border-interactive: rgba(0, 0, 0, 0.2);

  /* Text */
  --color-text-header: #1A1A1A;
  --color-text-body: #333333;
  --color-text-muted: #666666;

  /* Accents - Black for clean theme */
  --color-accent-primary: #1A1A1A;
  --color-accent-secondary: #333333;

  /* Glassmorphism - Disabled for clean theme */
  --blur-intensity: 0px;
  --color-glass-background: rgba(0, 0, 0, 0.02);
  --color-glass-background-light: rgba(0, 0, 0, 0.04);

  /* Border Radius - Zero for sharp corners */
  --border-radius-sm: 0;
  --border-radius-md: 0;
  --border-radius-lg: 0;

  /* Skeleton Loading Styles - Light theme */
  --skeleton-base-color: rgba(0, 0, 0, 0.05);
  --skeleton-highlight-color: rgba(0, 0, 0, 0.12);
  --skeleton-border-radius: 0;
}

/* Remove noise texture overlay */
body.design-clean::before {
  display: none !important;
}

/* Hide ambient glow effects */
body.design-clean .ambient-glow-container {
  display: none !important;
}

/* Adjust container for clean feel + flex for reordering */
body.design-clean .container {
  max-width: 1280px;
  display: flex;
  flex-direction: column;
}

/* Tab Switcher - hidden by default, shown for clean design trial stages */
.trial-tab-switcher {
  display: none;
}

/* Show trial-tab-switcher on desktop for clean design trial stages */
@media (min-width: 768px) {
  body.design-clean.trial-stage .trial-tab-switcher {
    display: flex !important;
    justify-content: center;
    gap: 0;
    margin-top: 0;
    padding: 0 16px;
    padding-bottom: 24px;
    order: 4; /* After videos (3), before workouts (5) */
  }

  body.design-clean .trial-tab-btn {
    background: none;
    border: none;
    padding: 12px 24px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999999;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
  }

  body.design-clean .trial-tab-btn:hover {
    color: #666666;
  }

  body.design-clean .trial-tab-btn.active {
    color: #1A1A1A;
  }

  body.design-clean .trial-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #1A1A1A;
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }

  body.design-clean .trial-tab-btn.active::after {
    transform: scaleX(1);
  }

  /* Desktop trial stage: Hide study section by default (tab switcher controls it) */
  body.design-clean.trial-stage .section.tab-content-section[data-tab-content="study"] {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Clean: Element Ordering (same as urban)
   --------------------------------------------------------------------------- */
/* Keep header at top - desktop and mobile (non-trial) */
body.design-clean stage-page-header-with-dropdown {
  order: 1;
}

/* Mobile tab menu */
body.design-clean mobile-tab-menu {
  order: 2;
}

/* Videos section */
body.design-clean .section.tab-content-section:has(stage-videos) {
  order: 3;
}

/* CTA Buttons - after videos, before workouts */
body.design-clean .cta-buttons-container {
  order: 4;
  margin-top: 0;
  margin-bottom: 0;
}

/* When CTA container is empty, collapse it completely */
body.design-clean .cta-buttons-container:empty {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  display: none !important;
}

@media (max-width: 767.98px) {
  body.design-clean .cta-buttons-container {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Workouts section */
body.design-clean .section.tab-content-section:has(stage-page-workouts-section) {
  order: 5;
}

/* Study section */
body.design-clean .section.tab-content-section:has(stage-page-study-section) {
  order: 6;
}

/* Progress tab */
body.design-clean .tab-content-section[data-tab-content="progress"] {
  order: 7;
}

/* Overview tab */
body.design-clean .tab-content-section[data-tab-content="overview"] {
  order: 8;
}

/* Sidebar */
body.design-clean vision-sidebar {
  order: 9;
}

/* ---------------------------------------------------------------------------
   Clean: Trial Stage Layout Adjustments
   Mobile: Header moves below video, CTA hidden
   Desktop: Header stays at top, CTA hidden
   --------------------------------------------------------------------------- */

/* Hide CTA on BOTH mobile and desktop for trial stages */
body.design-clean.trial-stage .cta-buttons-container {
  display: none !important;
}

/* Hide progress bar in header for trial stages */
body.design-clean.trial-stage stage-page-header-with-dropdown {
  --hide-progress-bar: 1;
}

/* MOBILE ONLY: Clean design mobile layout */
@media (max-width: 767.98px) {
  /* Hide mobile tab menu in clean design */
  body.design-clean mobile-tab-menu {
    display: none !important;
  }

  /* Tab Switcher - ONLY show on mobile clean design TRIAL stages */
  body.design-clean .trial-tab-switcher {
    display: none !important;
  }

  body.design-clean.trial-stage .trial-tab-switcher {
    order: 4 !important;
    display: flex !important;
    justify-content: center;
    gap: 0;
    margin-top: 0;
    padding: 0 16px;
    padding-bottom: 24px;
  }

  body.design-clean .trial-tab-btn {
    background: none;
    border: none;
    padding: 12px 24px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999999;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
  }

  body.design-clean .trial-tab-btn:hover {
    color: #666666;
  }

  body.design-clean .trial-tab-btn.active {
    color: #1A1A1A;
  }

  body.design-clean .trial-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #1A1A1A;
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }

  body.design-clean .trial-tab-btn.active::after {
    transform: scaleX(1);
  }

  /* Trial stage specific: Tab Switching - Show workouts by default, hide study */
  /* (Non-trial stages use sidebar tabs for navigation) */
  body.design-clean.trial-stage .section.tab-content-section:has(stage-page-workouts-section) {
    display: block !important;
  }

  body.design-clean.trial-stage .section.tab-content-section[data-tab-content="study"] {
    display: none !important;
  }

  /* Trial stage specific: Header moves below video */
  body.design-clean.trial-stage stage-page-header-with-dropdown {
    order: 4 !important; /* After videos (3) */
  }

  /* Trial stage specific: Videos section at order 3 */
  body.design-clean.trial-stage .section.tab-content-section:has(stage-videos) {
    order: 3 !important;
  }

  /* Trial stage specific: Workouts section */
  body.design-clean.trial-stage .section.tab-content-section:has(stage-page-workouts-section) {
    order: 5 !important;
  }
}

/* ---------------------------------------------------------------------------
   Clean: Top Bar (same positioning as urban)
   --------------------------------------------------------------------------- */

/* Clean mode: Position the sidebar-bottom-menu as a top bar */
body.design-clean sidebar-bottom-menu[data-urban-mode] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 1000;
}

/* Add padding to body to account for fixed top bar - mobile only */
@media (max-width: 768px) {
  body.design-clean {
    padding-top: 53px !important;
  }

  /* Clean design: Remove bottom padding since bottom menu is now a top bar */
  body.design-clean .tab-content-section[data-tab-content="study"],
  body.design-clean .tab-content-section[data-tab-content="progress"],
  body.design-clean .tab-content-section[data-tab-content="overview"] {
    padding-bottom: 0 !important;
  }

  /* Allow week selector horizontal scrolling with negative margins */
  body.design-clean .section.tab-content-section:has(stage-page-workouts-section) {
    overflow: visible;
  }

  /* Clean mode: Set CSS custom property for modal top offset - mobile only */
  body.design-clean homepage-modal,
  body.design-clean urban-programs-modal,
  body.design-clean blog-articles-overview-modal,
  body.design-clean membership-analytics-modal {
    --modal-top-offset: 60px;
  }

  /* Disable scroll when sidebar is open on mobile */
  body.design-clean.no-scroll,
  body.design-clean.sidebar-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Hide the close button on mobile - hamburger handles closing */
  body.design-clean.sidebar-open close-btn {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Clean: Workout Overlay & Workout Page
   --------------------------------------------------------------------------- */

body.design-clean .workout-overlay,
body.design-clean {
  padding-bottom: 0 !important;
}

/* Desktop: Ensure no top padding for clean theme */
@media (min-width: 769px) {
  body.design-clean {
    padding-top: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   Clean: Blog Article Modal (Shadow DOM Component)
   --------------------------------------------------------------------------- */

body.design-clean blog-article-modal {
  --modal-overlay-bg: rgba(0, 0, 0, 0.4);
  --modal-container-bg: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   Clean: Checkout Modal - Light/White Design
   White background, black text, sharp corners
   --------------------------------------------------------------------------- */

/* Clean Design: Checkout Modal Container */
/* Support both body.design-clean (design-theme-service) and body.clean-theme (quiz page) */
body.design-clean .checkout-modal,
body.clean-theme .checkout-modal {
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  padding: 32px !important;
  color: #1A1A1A !important;
}

/* Modal Title - Clean Style (high specificity to override new_modal_css.css) */
body.design-clean .checkout-modal .modal-title,
body.design-clean #visionModal .checkout-modal .modal-title,
body.design-clean #checkout-container .modal-title,
body.design-clean #checkout-program-title,
body.design-clean .checkout-modal #checkout-program-title,
body.clean-theme .checkout-modal .modal-title,
body.clean-theme #visionModal .checkout-modal .modal-title,
body.clean-theme #checkout-container .modal-title,
body.clean-theme #checkout-program-title,
body.clean-theme .checkout-modal #checkout-program-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  background: none !important;
  -webkit-text-fill-color: #1A1A1A !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  margin: 0 0 20px !important;
}

body.design-clean .checkout-modal .modal-header h2,
body.clean-theme .checkout-modal .modal-header h2 {
  background: none !important;
  -webkit-text-fill-color: #1A1A1A !important;
  color: #1A1A1A !important;
}

/* Features List - Clean Style */
body.design-clean .checkout-modal .modal-features-list,
body.clean-theme .checkout-modal .modal-features-list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

body.design-clean .checkout-modal .modal-features-list li,
body.clean-theme .checkout-modal .modal-features-list li {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #1A1A1A !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.design-clean .checkout-modal .checkmark-icon,
body.clean-theme .checkout-modal .checkmark-icon {
  color: #1A1A1A !important;
  font-size: 16px !important;
}

/* Price Section - Clean Style */
body.design-clean .checkout-modal .price-amount,
body.clean-theme .checkout-modal .price-amount {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}

body.design-clean .checkout-modal .price-period,
body.clean-theme .checkout-modal .price-period {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #666666 !important;
  text-transform: lowercase !important;
}

/* Features/Price Container Border */
body.design-clean .checkout-modal .checkout-features-price-container,
body.clean-theme .checkout-modal .checkout-features-price-container {
  border-top: 1px solid #E5E5E5 !important;
  border-bottom: 1px solid #E5E5E5 !important;
  padding: 24px 0 !important;
  margin-bottom: 24px !important;
}

/* Connected Fields (Form Inputs) - Clean Style */
body.design-clean .checkout-modal .connected-group,
body.design-clean .checkout-modal .connected-fields,
body.clean-theme .checkout-modal .connected-group,
body.clean-theme .checkout-modal .connected-fields {
  border: 1px solid #CCCCCC !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
}

body.design-clean .checkout-modal .connected-group:focus-within,
body.design-clean .checkout-modal .connected-fields:focus-within,
body.clean-theme .checkout-modal .connected-group:focus-within,
body.clean-theme .checkout-modal .connected-fields:focus-within {
  border-color: #1A1A1A !important;
  box-shadow: none !important;
}

/* Form Field Inputs */
body.design-clean .checkout-modal .mm-formField input,
body.design-clean .checkout-modal .mm-formField select,
body.clean-theme .checkout-modal .mm-formField input,
body.clean-theme .checkout-modal .mm-formField select {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  color: #1A1A1A !important;
}

body.design-clean .checkout-modal .mm-formField input::placeholder,
body.clean-theme .checkout-modal .mm-formField input::placeholder {
  color: #999999 !important;
}

/* Primary CTA Button - Black Background, White Text */
body.design-clean .checkout-modal .primary-action-button,
body.design-clean .checkout-modal .cta-button,
body.clean-theme .checkout-modal .primary-action-button,
body.clean-theme .checkout-modal .cta-button {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 16px 24px !important;
}

body.design-clean .checkout-modal .primary-action-button:hover,
body.design-clean .checkout-modal .cta-button:hover,
body.clean-theme .checkout-modal .primary-action-button:hover,
body.clean-theme .checkout-modal .cta-button:hover {
  background-color: #333333 !important;
  transform: none !important;
}

body.design-clean .checkout-modal .primary-action-button:disabled,
body.design-clean .checkout-modal .cta-button:disabled,
body.clean-theme .checkout-modal .primary-action-button:disabled,
body.clean-theme .checkout-modal .cta-button:disabled {
  background-color: #CCCCCC !important;
  color: #666666 !important;
}

/* CTA Button SVG Icon */
body.design-clean .checkout-modal .cta-button svg,
body.design-clean .checkout-modal .primary-action-button svg,
body.clean-theme .checkout-modal .cta-button svg,
body.clean-theme .checkout-modal .primary-action-button svg {
  fill: #FFFFFF !important;
}

/* Close Button */
body.design-clean #visionModal close-btn,
body.design-clean .checkout-modal close-btn,
body.clean-theme #visionModal close-btn,
body.clean-theme .checkout-modal close-btn {
  --close-btn-bg: rgba(0, 0, 0, 0.05);
  --close-btn-bg-hover: rgba(0, 0, 0, 0.1);
  --close-btn-border: rgba(0, 0, 0, 0.1);
  --close-btn-icon-color: #1A1A1A;
}

/* Clean Design: Checkout Account Form - CSS Custom Properties for Shadow DOM */
body.design-clean checkout-account-form,
body.clean-theme checkout-account-form {
  /* Typography */
  --checkout-font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --checkout-title-color: #1A1A1A;
  --checkout-title-letter-spacing: normal;
  --checkout-title-transform: none;
  --checkout-title-font-size-mobile: 18px;
  --checkout-title-font-size-xs: 16px;

  /* Accent Colors */
  --checkout-accent-color: #1A1A1A;
  --checkout-accent-hover-color: #333333;

  /* Input Fields */
  --checkout-input-bg: #F8F8F8;
  --checkout-input-color: #1A1A1A;
  --checkout-placeholder-color: #999999;
  --checkout-border-color: #E5E5E5;
  --checkout-border-radius: 0;
  --checkout-field-border-color: #E5E5E5;
  --checkout-autofill-bg: #F0F0F0;

  /* Validation States */
  --checkout-valid-color: #1A1A1A;
  --checkout-valid-border-color: #E5E5E5;
  --checkout-invalid-color: #dc3545;

  /* Focus States */
  --checkout-focus-color: #1A1A1A;
  --checkout-focus-shadow: 0 0 0 2px rgba(26, 26, 26, 0.2);

  /* Buttons */
  --checkout-button-bg: #1A1A1A;
  --checkout-button-color: #FFFFFF;
  --checkout-button-hover-bg: #333333;
  --checkout-button-hover-transform: none;
  --checkout-button-hover-shadow: none;
  --checkout-button-padding: 16px 24px;
  --checkout-button-font-size: 13px;
  --checkout-button-letter-spacing: 0.08em;
  --checkout-button-transform: uppercase;
  --checkout-button-disabled-bg: #CCCCCC;
  --checkout-button-disabled-color: #666666;
  --checkout-button-disabled-opacity: 1;
  --checkout-button-padding-mobile: 14px 20px;
  --checkout-button-font-size-mobile: 12px;
}

/* Form Section Title - Clean Design */
body.design-clean .checkout-modal .account-section-title,
body.design-clean checkout-account-form .account-section-title,
body.clean-theme .checkout-modal .account-section-title,
body.clean-theme checkout-account-form .account-section-title {
  color: #1A1A1A !important;
  font-weight: 500 !important;
}

/* Existing Member Link - Clean Design */
body.design-clean .checkout-modal .existing-member-link,
body.design-clean checkout-account-form .existing-member-link,
body.clean-theme .checkout-modal .existing-member-link,
body.clean-theme checkout-account-form .existing-member-link {
  color: #666666 !important;
}

body.design-clean .checkout-modal .existing-member-link a,
body.design-clean checkout-account-form .existing-member-link a,
body.clean-theme .checkout-modal .existing-member-link a,
body.clean-theme checkout-account-form .existing-member-link a {
  color: #1A1A1A !important;
  text-decoration: underline !important;
}

/* Form Fields Container - Clean Design */
body.design-clean .checkout-modal .connected-group,
body.design-clean .checkout-modal .account-info-grid,
body.clean-theme .checkout-modal .connected-group,
body.clean-theme .checkout-modal .account-info-grid {
  background: #F8F8F8 !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 0 !important;
}

body.design-clean .checkout-modal .connected-group:focus-within,
body.clean-theme .checkout-modal .connected-group:focus-within {
  border-color: #1A1A1A !important;
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1) !important;
}

/* Form Fields Row Border */
body.design-clean .checkout-modal .connected-fields-row,
body.clean-theme .checkout-modal .connected-fields-row {
  border-color: #E5E5E5 !important;
}

body.design-clean .checkout-modal .account-info-grid .connected-fields-row:first-child,
body.clean-theme .checkout-modal .account-info-grid .connected-fields-row:first-child {
  border-bottom: 1px solid #E5E5E5 !important;
}

body.design-clean .checkout-modal .connected-fields-row .form-field:not(:first-child),
body.clean-theme .checkout-modal .connected-fields-row .form-field:not(:first-child) {
  border-left: 1px solid #E5E5E5 !important;
}

/* Form Input Fields - Clean Design */
body.design-clean .checkout-modal .form-field,
body.design-clean .checkout-modal input,
body.clean-theme .checkout-modal .form-field,
body.clean-theme .checkout-modal input {
  background: transparent !important;
  border: none !important;
  color: #1A1A1A !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
}

body.design-clean .checkout-modal .form-field::placeholder,
body.design-clean .checkout-modal input::placeholder,
body.clean-theme .checkout-modal .form-field::placeholder,
body.clean-theme .checkout-modal input::placeholder {
  color: #999999 !important;
}

/* Disclaimer Text */
body.design-clean .checkout-modal .disclaimer,
body.clean-theme .checkout-modal .disclaimer {
  color: #666666 !important;
}

/* Mode Toggle (Sign in / Sign up switch) */
body.design-clean .checkout-modal .mode-toggle,
body.clean-theme .checkout-modal .mode-toggle {
  color: #666666 !important;
}

body.design-clean .checkout-modal .mode-toggle a,
body.clean-theme .checkout-modal .mode-toggle a {
  color: #1A1A1A !important;
}

/* Discount Price Styling */
body.design-clean .checkout-modal .price-amount.has-discount,
body.clean-theme .checkout-modal .price-amount.has-discount {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

body.design-clean .checkout-modal .price-top-row,
body.clean-theme .checkout-modal .price-top-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
}

body.design-clean .checkout-modal .price-original,
body.clean-theme .checkout-modal .price-original {
  color: #999999 !important;
  text-decoration: line-through !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

body.design-clean .checkout-modal .price-discount-badge,
body.clean-theme .checkout-modal .price-discount-badge {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body.design-clean .checkout-modal .price-discounted,
body.clean-theme .checkout-modal .price-discounted {
  color: #1A1A1A !important;
  font-size: 42px !important;
  font-weight: 700 !important;
}

/* Secure Checkout Text */
body.design-clean .checkout-modal .secure-checkout-text,
body.clean-theme .checkout-modal .secure-checkout-text {
  color: #999999 !important;
  font-size: 12px !important;
}

/* Payment Description */
body.design-clean .checkout-modal .payment-description,
body.clean-theme .checkout-modal .payment-description {
  color: #666666 !important;
  font-size: 14px !important;
}

/* Error Message */
body.design-clean .checkout-modal .error-message,
body.clean-theme .checkout-modal .error-message {
  color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.1) !important;
  border-radius: 0 !important;
}

/* Modal Environment - Clean theme background (desktop) */
body.design-clean #visionModal.modal-environment,
body.clean-theme #visionModal.modal-environment {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Mobile Adjustments for Clean Checkout */
@media (max-width: 768px) {
  /* Override the dark glass modal environment */
  body.design-clean #visionModal.modal-environment,
  body.clean-theme #visionModal.modal-environment {
    padding: 0 !important;
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* High specificity selectors to match new_modal_css.css */
  body.design-clean #visionModal body .checkout-modal,
  body.design-clean #visionModal .checkout-modal,
  body.design-clean body #visionModal .checkout-modal,
  body.design-clean body .checkout-modal,
  body.design-clean .checkout-modal,
  body.clean-theme #visionModal body .checkout-modal,
  body.clean-theme #visionModal .checkout-modal,
  body.clean-theme body #visionModal .checkout-modal,
  body.clean-theme body .checkout-modal,
  body.clean-theme .checkout-modal {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 40px 24px 24px 24px !important;
    min-height: 100vh !important;
    color: #1A1A1A !important;
  }

  body.design-clean .checkout-modal .modal-title,
  body.design-clean #visionModal .checkout-modal .modal-title,
  body.design-clean #checkout-program-title,
  body.clean-theme .checkout-modal .modal-title,
  body.clean-theme #visionModal .checkout-modal .modal-title,
  body.clean-theme #checkout-program-title {
    font-size: 24px !important;
    color: #1A1A1A !important;
  }

  body.design-clean .checkout-modal .price-amount,
  body.clean-theme .checkout-modal .price-amount {
    font-size: 36px !important;
  }

  /* Modal environment alignment for mobile */
  body.design-clean .modal-environment,
  body.clean-theme .modal-environment {
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Extra small screens (iPhone SE, etc.) - Clean theme */
@media (max-width: 375px) {
  body.design-clean #visionModal body .checkout-modal,
  body.design-clean #visionModal .checkout-modal,
  body.design-clean body #visionModal .checkout-modal,
  body.design-clean body .checkout-modal,
  body.design-clean .checkout-modal,
  body.clean-theme #visionModal body .checkout-modal,
  body.clean-theme #visionModal .checkout-modal,
  body.clean-theme body #visionModal .checkout-modal,
  body.clean-theme body .checkout-modal,
  body.clean-theme .checkout-modal {
    padding: 20px 16px !important;
    padding-top: 50px !important;
    padding-bottom: 32px !important;
    background: #FFFFFF !important;
  }

  body.design-clean .checkout-modal .modal-title,
  body.design-clean #checkout-program-title,
  body.clean-theme .checkout-modal .modal-title,
  body.clean-theme #checkout-program-title {
    font-size: 20px !important;
    color: #1A1A1A !important;
  }
}

/* ==========================================================================
   VARIANT-B: Second Alternative Design (Template)
   ========================================================================== */

/*
 * Copy the variant-a structure and replace 'variant-a' with 'variant-b'
 * to create another design variant.
 */


/* ==========================================================================
   UTILITY: Design Variant Indicator (Development Only)
   Uncomment below to show which design variant is active during development
   ========================================================================== */

/*
body[class*="design-variant-"]::after {
  content: attr(class);
  position: fixed;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #43d675;
  padding: 4px 8px;
  font-size: 10px;
  font-family: monospace;
  border-radius: 4px;
  z-index: 99999;
  pointer-events: none;
  opacity: 0.7;
}
*/