/**
 * Copyright © 2026 Living Legacy LLC d/b/a Legacy Health and Fitness. All Rights Reserved.
 * Proprietary and confidential. Unauthorized use, copying, or distribution
 * is prohibited. See LICENSE file in project root.
 */

/* ============================================================
   PREMIUM RE-THEME — onboarding.html (feat/premium-redesign)
   Loaded AFTER the page's inline <style> blocks so equal-specificity
   overrides win by cascade order. onboarding.html is self-contained
   (no styles.css), so this layer re-keys its hardcoded values to the
   premium spec (docs/design-tokens/README.md): near-black surfaces,
   white sentence-case headings (orange stays in the logo, icons, and
   ONE gradient primary per view), hairline borders, glow buttons.
   ============================================================ */

body {
    background-color: #08080b;
}

/* ─── Headings: kill the orange all-caps identity ─────────────────────── */
.page-title {
    color: #f4f4f6;
    text-transform: none;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.contact-form-container h3 {
    color: #f4f4f6;
    text-transform: none;
    letter-spacing: -0.01em;
}
/* Type-card titles: white (the icon carries the brand color).
   Id-scoped: the .otc-* rules live in a <style> block inside <body>
   (after this stylesheet), so class-level overrides here would lose. */
#onboardingTypeGrid .otc-title {
    color: #f4f4f6;
}

/* ─── Surfaces ────────────────────────────────────────────────────────── */
.contact-form-container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)), #131318;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
#onboardingTypeGrid .onboarding-type-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
}
#onboardingTypeGrid .onboarding-type-card.selected {
    border-color: #ff6b35;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.13), rgba(255, 107, 53, 0.04));
    box-shadow: 0 10px 30px -12px rgba(255, 107, 53, 0.45);
}

/* ─── Buttons: gradient + glow anatomy, sentence case ─────────────────── */
.btn {
    border-radius: 12px;
    text-transform: none;
    letter-spacing: 0.01em;
}
.btn-primary {
    background: linear-gradient(180deg, #ff8c5a, #f2521b);
    border-color: transparent;
    box-shadow: 0 10px 30px -8px rgba(255, 107, 53, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
    background: linear-gradient(180deg, #ff8c5a, #f2521b);
    transform: translateY(-1px);
    filter: brightness(1.04);
}
.btn-primary:disabled {
    background: #3a3a42;
    border-color: transparent;
    box-shadow: none;
    filter: none;
}
.continue-to-payment-section .btn-large {
    border-radius: 12px;
    text-transform: none;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, #ff8c5a, #f2521b);
    box-shadow: 0 10px 30px -8px rgba(255, 107, 53, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hero-buttons .btn {
    border-radius: 12px;
    text-transform: none;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, #ff8c5a, #f2521b);
    border-color: transparent;
}

/* ─── Progress steps ──────────────────────────────────────────────────── */
.step.active .step-circle {
    background: linear-gradient(180deg, #ff8c5a, #f2521b);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(255, 107, 53, 0.5);
}
