/**
 * Fitness Coach Pro - Front Page & Landing Sections
 * Hero video, Business light mode section overrides (FAQ, How It Works, Final CTA, FOMO Topbar)
 */

/* ─────────────────────────────────────────────
     Hero & Frontpage Section Styles
     ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* 9:16 Instagram-style mobile fallback for video section */
    .hero-section {
        height: 100vh;
        aspect-ratio: 9/16;
    }
}

/* Hide all browser-native video player controls and overlays (Safari/Chrome/iOS) */
.hero-bg-video::-webkit-media-controls,
.hero-bg-video::-webkit-media-controls-panel,
.hero-bg-video::-webkit-media-controls-play-button,
.hero-bg-video::-webkit-media-controls-start-playback-button,
.hero-bg-video::-webkit-media-controls-volume-slider,
.hero-bg-video::-webkit-media-controls-mute-button,
.hero-bg-video::-webkit-media-controls-timeline,
.hero-bg-video::-webkit-media-controls-current-time-display,
.hero-bg-video::-webkit-media-controls-time-remaining-display,
.hero-bg-video::-webkit-media-controls-seek-back-button,
.hero-bg-video::-webkit-media-controls-seek-forward-button,
.hero-bg-video::-webkit-media-controls-fullscreen-button,
.hero-bg-video::-webkit-media-controls-rewind-button,
.hero-bg-video::-webkit-media-controls-return-to-realtime-button,
.hero-bg-video::-webkit-media-controls-toggle-closed-captions-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ─────────────────────────────────────────────
     Business Theme Overrides for Light Mode
     ───────────────────────────────────────────── */
body:not(.dark-theme) {
    --card-bg: var(--surface);
    --card-border: var(--border-faint);
    background-color: var(--bg);
    color: var(--text);
}

/* Flatten glass-cards to minimal solid cards in Light Mode */
body:not(.dark-theme) .glass-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--border-faint) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0,0.05), 0 10px 30px rgba(0, 0, 0,0.04) !important;
    border-radius: 12px !important;
}

body:not(.dark-theme) .glass-card::before {
    display: none !important;
}

/* Hero card in Business Light Mode */
body:not(.dark-theme) .hero-card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
}

/* Flat icons and dark expressive colors in Light Mode */
body:not(.dark-theme) .feat-icon-badge {
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    border-radius: 12px !important;
    color: var(--text) !important;
}
body:not(.dark-theme) .feat-icon-badge i {
    color: var(--text) !important;
}
body:not(.dark-theme) .feat-icon-badge::after {
    display: none !important;
}

/* Flat style checkmarks inside pricing and lists */
body:not(.dark-theme) .plan-features li i.check-green,
body:not(.dark-theme) .plan-features li i.check-yellow,
body:not(.dark-theme) .plan-features li i.check-red {
    color: var(--text) !important;
    font-size: 0.95rem;
}

/* Step numbers/badges in How It Works */
body:not(.dark-theme) .how-step-card .step-number {
    background: var(--surface-raised) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

/* FAQ Accordions */
body:not(.dark-theme) .faq-item {
    background: #ffffff !important;
    border: 1px solid var(--border-faint) !important;
    border-radius: 8px !important;
}
body:not(.dark-theme) .faq-question {
    color: var(--text) !important;
    font-weight: 700 !important;
}
body:not(.dark-theme) .faq-toggle-icon {
    color: var(--text) !important;
}

/* Final CTA Section in Light Mode */
body:not(.dark-theme) .final-cta-section {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04) !important;
}

/* FOMO Topbar background in Light Mode */
body:not(.dark-theme) .fcp-topbar {
    background: var(--text) !important;
    border-bottom: 1px solid var(--surface) !important;
}
body:not(.dark-theme) .topbar-btn {
    color: var(--text-subtle) !important;
}
body:not(.dark-theme) .topbar-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Headings in Light Mode */
body:not(.dark-theme) h1,
body:not(.dark-theme) h2,
body:not(.dark-theme) h3,
body:not(.dark-theme) h4 {
    color: var(--text) !important;
    letter-spacing: -0.5px !important;
}

/* Badge styles in Light Mode */
body:not(.dark-theme) .section-badge {
    background-color: var(--surface-raised) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text) !important;
}