/* ====================================================================
   BrandVerify — shared dark/light theme  (premium glossy dark)
   Light = default :root (scanner-page.css). This file adds dark + toggle.
   ==================================================================== */

html { color-scheme: light; }
html, body { transition: background-color .3s ease, color .3s ease; }

/* ============================================================
   DARK MODE  — deep, glossy, premium
   ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;
    --white:    #0a0e17;   /* page background (near-black, blue-tinted) */
    --gray-50:  #131a2a;   /* base surface */
    --gray-100: #243049;   /* borders / dividers */
    --gray-200: #2f3c57;
    --gray-300: #475569;
    --gray-400: #94a3b8;
    --gray-500: #cbd5e1;
    --gray-600: #cbd5e1;   /* muted text -> light */
    --gray-700: #dbe4f0;
    --gray-800: #eef2f8;
    --gray-900: #f8fafc;   /* headings -> near white */
    --primary-50:  rgba(59,130,246,.13);
    --primary-100: rgba(59,130,246,.20);
    --primary-200: rgba(59,130,246,.32);
}
html[data-theme="dark"] body { background: var(--white); color: var(--gray-700); }

/* ---- subtle ambient page glow ---- */
html[data-theme="dark"] body {
    background-image:
        radial-gradient(900px 500px at 15% -5%, rgba(59,130,246,.10), transparent 55%),
        radial-gradient(800px 500px at 100% 0%, rgba(99,102,241,.08), transparent 50%);
    background-attachment: fixed;
}

/* ---- GLOSSY ELEVATED SURFACES (cards, mockups, panels) ---- */
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .browser,
html[data-theme="dark"] .preview-container,
html[data-theme="dark"] .preview-widget,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .bvl-mobnav,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .input-section {
    background: linear-gradient(180deg, #18223a 0%, #10162400 100%), linear-gradient(180deg, #161f33 0%, #0e1422 100%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 48px -26px rgba(0,0,0,.75) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .pricing-card:hover {
    border-color: rgba(59,130,246,.45) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 60px -26px rgba(0,0,0,.85), 0 0 30px -6px rgba(59,130,246,.35) !important;
}
html[data-theme="dark"] .pricing-card.featured,
html[data-theme="dark"] .pricing-card.popular {
    border-color: rgba(59,130,246,.5) !important;
    box-shadow: 0 0 0 1px rgba(59,130,246,.4), 0 30px 70px -28px rgba(59,130,246,.45) !important;
}

/* ---- HERO ---- */
html[data-theme="dark"] .hero::after {
    background: radial-gradient(1000px 560px at 50% -12%, rgba(59,130,246,.22), transparent 60%),
                linear-gradient(180deg, #0c1322 0%, #0a0e17 100%) !important;
}
html[data-theme="dark"] .hero-badge {
    background: rgba(59,130,246,.12) !important;
    border-color: rgba(59,130,246,.35) !important;
    color: #93c5fd !important;
    box-shadow: 0 0 24px -8px rgba(59,130,246,.5);
}

/* ---- CTA: keep a distinct glossy dark panel (do NOT invert to light) ---- */
html[data-theme="dark"] .cta {
    background: radial-gradient(700px 360px at 50% 0%, rgba(59,130,246,.22), transparent 60%),
                linear-gradient(135deg, #11203f 0%, #0a0e17 100%) !important;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* ---- BROWSER / PREVIEW MOCKUP internals ---- */
html[data-theme="dark"] .browser-content { background: linear-gradient(180deg, #131a2a 0%, #0c1220 100%) !important; }
html[data-theme="dark"] .browser-url,
html[data-theme="dark"] .preview-browser-url,
html[data-theme="dark"] .preview-url-input,
html[data-theme="dark"] .preview-options-bar { background: #1a2236 !important; color: var(--gray-600) !important; border-color: rgba(255,255,255,.08) !important; }

/* ---- INPUTS / SELECTS / TABS / ADVANCED ---- */
html[data-theme="dark"] textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] .adv-input,
html[data-theme="dark"] .adv-select,
html[data-theme="dark"] .adv-radio-card,
html[data-theme="dark"] .adv-quick-tab,
html[data-theme="dark"] .preview-widget-select,
html[data-theme="dark"] .device-btn,
html[data-theme="dark"] .faq-q {
    background: #131a2a !important;
    color: var(--gray-700) !important;
    border-color: rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder { color: var(--gray-400) !important; }
html[data-theme="dark"] .scanner-tab { color: var(--gray-500); }
html[data-theme="dark"] .scanner-tab.active { color: var(--primary-400); }

/* Advanced Settings <summary> trigger (hardcoded background:white) */
html[data-theme="dark"] #advancedPanel summary { background: #131a2a !important; border-color: rgba(255,255,255,.12) !important; color: var(--gray-600) !important; }
html[data-theme="dark"] #advancedPanel summary:hover,
html[data-theme="dark"] #advancedPanel[open] summary { background: rgba(59,130,246,.14) !important; border-color: rgba(59,130,246,.5) !important; color: #93c5fd !important; }

/* ---- NAV / FOOTER ---- */
html[data-theme="dark"] .nav { background: rgba(10,14,23,.82) !important; border-bottom-color: rgba(255,255,255,.07) !important; }
html[data-theme="dark"] .footer { background: #070a12; border-top-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .footer-social a { background: #131a2a; color: var(--gray-500); }

/* ---- BUTTONS (secondary) ---- */
html[data-theme="dark"] .btn-secondary { background: #18223a !important; color: var(--gray-700) !important; border-color: rgba(255,255,255,.14) !important; }
html[data-theme="dark"] .btn-secondary:hover { border-color: rgba(59,130,246,.5) !important; }

/* ---- LEGAL-page specifics ---- */
html[data-theme="dark"] .bvl-hero { background: radial-gradient(900px 360px at 50% -10%, rgba(59,130,246,.16), transparent 60%), linear-gradient(180deg, #0c1322, #0a0e17); }
html[data-theme="dark"] .bvl-eyebrow { background: #131a2a; border-color: rgba(59,130,246,.3); color: #93c5fd; }
html[data-theme="dark"] .bvl-body li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .bvl-callout-info { background: rgba(59,130,246,.12); }
html[data-theme="dark"] .bvl-callout-warn { background: rgba(245,158,11,.12); }
html[data-theme="dark"] .bvl-side-num { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .bvl-side-nav a.active { background: rgba(59,130,246,.14); }
html[data-theme="dark"] .feature-icon, html[data-theme="dark"] .step-num { box-shadow: 0 0 24px -6px rgba(59,130,246,.5); }

/* keep white-on-blue buttons/CTA text as-is (brand contrast holds) */

/* ============================================================
   MOBILE HAMBURGER MENU (nav-links dropdown)
   ============================================================ */
@media (max-width: 1023px) {
    .nav.menu-open .nav-links {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--white);
        border-bottom: 1px solid var(--gray-100);
        padding: 1rem 1.5rem 1.25rem;
        gap: 0.25rem;
        box-shadow: 0 16px 30px -14px rgba(0,0,0,.25);
    }
    .nav.menu-open .nav-links a { display: block; width: 100%; padding: 0.7rem 0; font-size: 1rem; border-bottom: 1px solid var(--gray-50); }
    .nav.menu-open .nav-links li:last-child a { border-bottom: none; }
    .mobile-menu-btn.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .mobile-menu-btn.is-active span:nth-child(2) { opacity: 0; }
    .mobile-menu-btn.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ============================================================
   THEME-AWARE LOGO SWAP  (header + footer)  — !important beats inline display:block
   ============================================================ */
.logo .logo-dark, .footer-logo .logo-dark { display: none !important; }
html[data-theme="dark"] .logo .logo-light,
html[data-theme="dark"] .footer-logo .logo-light { display: none !important; }
html[data-theme="dark"] .logo .logo-dark,
html[data-theme="dark"] .footer-logo .logo-dark { display: block !important; }

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--gray-200); background: var(--white);
    color: var(--gray-700); cursor: pointer; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s; flex: none;
}
.theme-toggle:hover { border-color: var(--primary-400); color: var(--primary-600); }
.theme-toggle .fa-sun  { display: none; }
.theme-toggle .fa-moon { display: inline; }
html[data-theme="dark"] .theme-toggle { background: #131a2a; border-color: rgba(255,255,255,.14); color: #fbbf24; }
html[data-theme="dark"] .theme-toggle .fa-sun  { display: inline; }
html[data-theme="dark"] .theme-toggle .fa-moon { display: none; }