/* ============================================================
   YConfigurator — Stripe-Style Theme System
   ============================================================ */

:root,
[data-theme="modern-blue"] {
    --yc-primary: #635bff;
    --yc-primary-hover: #5046e5;
    --yc-primary-light: #ededff;
    --yc-primary-text: #3d35c2;
    --yc-accent: #635bff;

    --yc-nav-bg: rgba(255, 255, 255, 0.85);
    --yc-nav-text: #425466;
    --yc-nav-active: #635bff;
    --yc-nav-hover: #f6f9fc;
    --yc-nav-brand: #0a2540;
    --yc-nav-border: rgba(0, 0, 0, 0.06);
    --yc-nav-blur: 16px;

    --yc-mega-bg: rgba(255, 255, 255, 0.97);
    --yc-mega-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);

    --yc-hero-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 30%, #f093fb 60%, #f5576c 100%);
    --yc-hero-text: #ffffff;

    --yc-body-bg: #f6f9fc;
    --yc-surface: #ffffff;
    --yc-surface-hover: #f6f9fc;
    --yc-border: #e3e8ee;
    --yc-card-border: rgba(0, 0, 0, 0.05);
    --yc-text: #0a2540;
    --yc-text-muted: #425466;
    --yc-text-light: #8898aa;

    --yc-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --yc-card-hover-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    --yc-card-radius: 12px;

    --yc-success: #0cbc87;
    --yc-warning: #f5a623;
    --yc-danger: #e25950;

    --yc-price-bg: linear-gradient(135deg, #635bff 0%, #3d35c2 100%);
    --yc-price-text: #ffffff;

    --yc-step-active: #635bff;
    --yc-step-completed: #0cbc87;
    --yc-step-pending: #e3e8ee;

    --yc-option-selected-border: #635bff;
    --yc-option-selected-bg: #f7f6ff;

    --yc-input-bg: #ffffff;
    --yc-input-border: #e3e8ee;
    --yc-input-focus: #635bff;

    --yc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-theme="forest-green"] {
    --yc-primary: #0cbc87; --yc-primary-hover: #0aa077; --yc-primary-light: #e6f9f1;
    --yc-primary-text: #087a58; --yc-accent: #00d4aa;
    --yc-nav-bg: rgba(255,255,255,0.85); --yc-nav-text: #2d4a3e; --yc-nav-active: #0cbc87;
    --yc-nav-hover: #f0faf5; --yc-nav-brand: #0a2e1f; --yc-nav-border: rgba(0,60,30,0.06); --yc-nav-blur: 16px;
    --yc-mega-bg: rgba(255,255,255,0.97); --yc-mega-shadow: 0 12px 40px rgba(0,40,20,0.1);
    --yc-hero-gradient: linear-gradient(135deg, #0cbc87 0%, #0aa077 30%, #38ef7d 60%, #11998e 100%);
    --yc-hero-text: #ffffff;
    --yc-body-bg: #f4faf7; --yc-surface: #ffffff; --yc-surface-hover: #f0faf5;
    --yc-border: #d1e7dd; --yc-card-border: rgba(0,60,30,0.05);
    --yc-text: #0a2e1f; --yc-text-muted: #3d6b5a; --yc-text-light: #7aa394;
    --yc-card-shadow: 0 2px 4px rgba(0,40,20,0.04); --yc-card-hover-shadow: 0 12px 24px rgba(0,40,20,0.08);
    --yc-price-bg: linear-gradient(135deg, #0cbc87, #087a58);
    --yc-step-active: #0cbc87; --yc-step-completed: #087a58; --yc-step-pending: #d1e7dd;
    --yc-option-selected-border: #0cbc87; --yc-option-selected-bg: #f0faf5;
}

[data-theme="warm-terracotta"] {
    --yc-primary: #e25950; --yc-primary-hover: #c9413a; --yc-primary-light: #fef0ef;
    --yc-primary-text: #a03028; --yc-accent: #ff6b6b;
    --yc-nav-bg: rgba(255,253,250,0.9); --yc-nav-text: #5a3e38; --yc-nav-active: #e25950;
    --yc-nav-hover: #fef5f0; --yc-nav-brand: #2d1a16; --yc-nav-border: rgba(80,30,20,0.06); --yc-nav-blur: 16px;
    --yc-mega-bg: rgba(255,253,250,0.97); --yc-mega-shadow: 0 12px 40px rgba(60,20,10,0.1);
    --yc-hero-gradient: linear-gradient(135deg, #e25950 0%, #f5af19 30%, #f093fb 60%, #ee5a24 100%);
    --yc-hero-text: #ffffff;
    --yc-body-bg: #fefaf7; --yc-surface: #ffffff; --yc-surface-hover: #fef5f0;
    --yc-border: #f0ddd5; --yc-card-border: rgba(80,30,20,0.05);
    --yc-text: #2d1a16; --yc-text-muted: #7a5a50; --yc-text-light: #a88a80;
    --yc-card-shadow: 0 2px 4px rgba(60,20,10,0.04); --yc-card-hover-shadow: 0 12px 24px rgba(60,20,10,0.08);
    --yc-price-bg: linear-gradient(135deg, #e25950, #a03028);
    --yc-step-active: #e25950; --yc-step-completed: #0cbc87; --yc-step-pending: #f0ddd5;
    --yc-option-selected-border: #e25950; --yc-option-selected-bg: #fef5f0;
}

[data-theme="elegant-dark"] {
    --yc-primary: #a78bfa; --yc-primary-hover: #8b5cf6; --yc-primary-light: rgba(167,139,250,0.12);
    --yc-primary-text: #c4b5fd; --yc-accent: #8b5cf6;
    --yc-nav-bg: rgba(15,14,23,0.9); --yc-nav-text: #a09aaf; --yc-nav-active: #a78bfa;
    --yc-nav-hover: rgba(255,255,255,0.04); --yc-nav-brand: #e9e0ff; --yc-nav-border: rgba(255,255,255,0.06); --yc-nav-blur: 16px;
    --yc-mega-bg: rgba(26,24,37,0.97); --yc-mega-shadow: 0 12px 40px rgba(0,0,0,0.4);
    --yc-hero-gradient: linear-gradient(135deg, #1a1040 0%, #3d1d6e 30%, #7c3aed 60%, #1a1040 100%);
    --yc-hero-text: #e9e0ff;
    --yc-body-bg: #0f0e17; --yc-surface: #1a1825; --yc-surface-hover: #22203a;
    --yc-border: #2d2a3e; --yc-card-border: rgba(255,255,255,0.06);
    --yc-text: #e2e0ea; --yc-text-muted: #9893a8; --yc-text-light: #6b6580;
    --yc-card-shadow: 0 2px 4px rgba(0,0,0,0.2); --yc-card-hover-shadow: 0 12px 24px rgba(0,0,0,0.3);
    --yc-success: #34d399; --yc-warning: #fbbf24; --yc-danger: #f87171;
    --yc-price-bg: linear-gradient(135deg, #7c3aed, #4c1d95); --yc-price-text: #ffffff;
    --yc-step-active: #a78bfa; --yc-step-completed: #34d399; --yc-step-pending: #3b3755;
    --yc-option-selected-border: #a78bfa; --yc-option-selected-bg: #22203a;
    --yc-input-bg: #1e1b2e; --yc-input-border: #3b3755; --yc-input-focus: #a78bfa;
}

[data-theme="soft-rose"] {
    --yc-primary: #ec4899; --yc-primary-hover: #db2777; --yc-primary-light: #fdf2f8;
    --yc-primary-text: #be185d; --yc-accent: #f472b6;
    --yc-nav-bg: rgba(255,251,253,0.9); --yc-nav-text: #6b3a5a; --yc-nav-active: #ec4899;
    --yc-nav-hover: #fdf2f8; --yc-nav-brand: #3b0a2a; --yc-nav-border: rgba(100,20,60,0.06); --yc-nav-blur: 16px;
    --yc-mega-bg: rgba(255,251,253,0.97); --yc-mega-shadow: 0 12px 40px rgba(60,0,30,0.1);
    --yc-hero-gradient: linear-gradient(135deg, #ec4899 0%, #f472b6 30%, #a78bfa 60%, #ec4899 100%);
    --yc-hero-text: #ffffff;
    --yc-body-bg: #fef7fa; --yc-surface: #ffffff; --yc-surface-hover: #fdf2f8;
    --yc-border: #fce7f3; --yc-card-border: rgba(100,20,60,0.05);
    --yc-text: #3b0a2a; --yc-text-muted: #7a4060; --yc-text-light: #b06080;
    --yc-card-shadow: 0 2px 4px rgba(60,0,30,0.04); --yc-card-hover-shadow: 0 12px 24px rgba(60,0,30,0.08);
    --yc-price-bg: linear-gradient(135deg, #ec4899, #be185d);
    --yc-step-active: #ec4899; --yc-step-completed: #0cbc87; --yc-step-pending: #fce7f3;
    --yc-option-selected-border: #ec4899; --yc-option-selected-bg: #fdf2f8;
}

/* ============================================================
   Global Overrides
   ============================================================ */

html { scroll-behavior: smooth; }

html, body {
    font-family: var(--yc-font);
    background: var(--yc-body-bg);
    color: var(--yc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

a, .btn-link { color: var(--yc-primary); transition: color 0.2s; }
a:hover, .btn-link:hover { color: var(--yc-primary-hover); }

.btn-primary {
    background-color: var(--yc-primary) !important;
    border-color: var(--yc-primary) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--yc-primary-hover) !important;
    border-color: var(--yc-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-outline-secondary {
    border-color: var(--yc-border);
    color: var(--yc-text-muted);
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}
.btn-outline-secondary:hover {
    background-color: var(--yc-surface-hover);
    color: var(--yc-text);
    border-color: var(--yc-text-muted);
}

.badge.bg-primary { background-color: var(--yc-primary) !important; }

/* ============================================================
   Theme Switcher
   ============================================================ */

.theme-switcher {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.theme-swatch:hover {
    transform: scale(1.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.theme-swatch.active {
    border-color: var(--yc-text);
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--yc-body-bg), 0 0 0 4px var(--yc-text-light);
}

.theme-swatch[data-theme="modern-blue"] { background: linear-gradient(135deg, #635bff, #0a2540); }
.theme-swatch[data-theme="forest-green"] { background: linear-gradient(135deg, #0cbc87, #0a2e1f); }
.theme-swatch[data-theme="warm-terracotta"] { background: linear-gradient(135deg, #e25950, #2d1a16); }
.theme-swatch[data-theme="elegant-dark"] { background: linear-gradient(135deg, #a78bfa, #1e1b2e); }
.theme-swatch[data-theme="soft-rose"] { background: linear-gradient(135deg, #ec4899, #3b0a2a); }