/* ===== BANKINGPAL DARK MODE ===== */
/* Shared dark mode styles for all pages */

/* --- Semantic variables (Light defaults) --- */
:root {
    --bg-page: #f0f4fa;
    --bg-page-plain: #fff;
    --bg-nav: transparent;
    --bg-nav-scrolled: rgba(255, 255, 255, 0.92);
    --bg-nav-static: rgba(255, 255, 255, 0.95);
    --bg-mobile-menu: rgba(255, 255, 255, 0.98);
    --bg-card: #fff;
    --bg-card-alt: var(--gray-50);
    --bg-overlay-card: #fff;
    --bg-hero: linear-gradient(135deg, #dbeafe 0%, #d1fae5 50%, #dbeafe 100%);
    --bg-hero-fade: linear-gradient(to top, #edf2fa, transparent);
    --bg-hero-grid-h: linear-gradient(rgba(29, 78, 216, 0.06) 1px, transparent 1px);
    --bg-hero-grid-v: linear-gradient(90deg, rgba(22, 163, 74, 0.05) 1px, transparent 1px);
    --bg-hero-blob1: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, rgba(37, 99, 235, 0.08) 50%, transparent 70%);
    --bg-hero-blob2: radial-gradient(circle, rgba(52, 211, 153, 0.12) 0%, rgba(37, 99, 235, 0.07) 50%, transparent 70%);
    --bg-features: linear-gradient(180deg, #e8f0fb 0%, #edf8f0 100%);
    --bg-screenshots: linear-gradient(180deg, #edf4fc 0%, #e8f5ed 100%);
    --bg-pocket-screenshots: linear-gradient(180deg, #e8f0fb 0%, #edf8f0 100%);
    --bg-video: linear-gradient(180deg, #e5eff9 0%, #e8f4ec 100%);
    --bg-how-it-works: linear-gradient(180deg, #e8f4ec 0%, #e5effb 100%);
    --bg-cta: linear-gradient(180deg, #eaf1fb 0%, #e5f0fe 100%);
    --bg-disclaimer: linear-gradient(180deg, #e9f0f8 0%, #edf6f0 100%);
    --bg-why: linear-gradient(180deg, #edf4fc 0%, #ebf6ee 100%);
    --bg-comparison: linear-gradient(180deg, #e5eff9 0%, #e8f5ed 100%);
    --bg-screenshot-placeholder: linear-gradient(135deg, #fafafa 0%, #f0f0f0 50%, #e8e8e8 100%);
    --bg-faq-page: linear-gradient(180deg, #edf4fc 0%, #e8f5ed 100%);
    --bg-faq-question: #fff;
    --bg-warning-box: #fffbeb;
    --border-warning-box: #fde68a;
    --color-warning-icon: #b45309;
    --color-warning-text: #92400e;
    --bg-badge-new: #dcfce7;
    --color-badge-new: #16a34a;
    --bg-badge-improved: #dbeafe;
    --color-badge-improved: #2563eb;
    --bg-badge-experimental: #fef3c7;
    --color-badge-experimental: #d97706;
    --shadow-hero-icon: 0 24px 70px rgba(29, 78, 216, 0.3), 0 12px 35px rgba(22, 163, 74, 0.15), 0 0 0 1px rgba(29, 78, 216, 0.1);
}

/* --- Dark theme variable overrides --- */
[data-theme="dark"] {
    /* Gray palette (inverted for text/bg) */
    --gray-50: #1e293b;
    --gray-100: #283548;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #94a3b8;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #e2e8f0;
    --gray-900: #f1f5f9;

    /* Primary palette (brightened) */
    --primary-50: #172554;
    --primary-100: #1e3a5f;
    --primary-200: #1e40af;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #60a5fa;
    --primary-700: #93bbfd;
    --primary-800: #1e3a8a;
    --primary-900: #0c1a3d;

    /* Accent palette (brightened) */
    --accent-50: #052e16;
    --accent-100: #064e3b;
    --accent-200: #065f46;
    --accent-400: #4ade80;
    --accent-500: #4ade80;
    --accent-600: #34d399;
    --accent-700: #6ee7b7;

    /* Shadows (darker) */
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.2);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3);

    /* Semantic overrides */
    --bg-page: #0b1120;
    --bg-page-plain: #0f172a;
    --bg-nav-scrolled: rgba(15, 23, 42, 0.92);
    --bg-nav-static: rgba(15, 23, 42, 0.95);
    --bg-mobile-menu: rgba(15, 23, 42, 0.98);
    --bg-card: #1e293b;
    --bg-card-alt: #1e293b;
    --bg-overlay-card: #1e293b;
    --bg-hero: linear-gradient(135deg, #0c1a3d 0%, #052e16 50%, #0c1a3d 100%);
    --bg-hero-fade: linear-gradient(to top, #0b1120, transparent);
    --bg-hero-grid-h: linear-gradient(rgba(96, 165, 250, 0.04) 1px, transparent 1px);
    --bg-hero-grid-v: linear-gradient(90deg, rgba(52, 211, 153, 0.03) 1px, transparent 1px);
    --bg-hero-blob1: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, rgba(37, 99, 235, 0.05) 50%, transparent 70%);
    --bg-hero-blob2: radial-gradient(circle, rgba(52, 211, 153, 0.06) 0%, rgba(37, 99, 235, 0.04) 50%, transparent 70%);
    --bg-features: linear-gradient(180deg, #0c1a3d 0%, #052e16 100%);
    --bg-screenshots: linear-gradient(180deg, #0e1b3e 0%, #061f15 100%);
    --bg-pocket-screenshots: linear-gradient(180deg, #0c1a3d 0%, #052e16 100%);
    --bg-video: linear-gradient(180deg, #0d1c3a 0%, #071e14 100%);
    --bg-how-it-works: linear-gradient(180deg, #071e14 0%, #0d1c3a 100%);
    --bg-cta: linear-gradient(180deg, #0c1a3d 0%, #0d1c3a 100%);
    --bg-disclaimer: linear-gradient(180deg, #0c1a3d 0%, #071e14 100%);
    --bg-why: linear-gradient(180deg, #0e1b3e 0%, #071e14 100%);
    --bg-comparison: linear-gradient(180deg, #0d1c3a 0%, #061f15 100%);
    --bg-screenshot-placeholder: linear-gradient(135deg, #1e293b 0%, #283548 50%, #334155 100%);
    --bg-faq-page: linear-gradient(180deg, #0e1b3e 0%, #061f15 100%);
    --bg-faq-question: #1e293b;
    --bg-warning-box: #422006;
    --border-warning-box: #854d0e;
    --color-warning-icon: #fbbf24;
    --color-warning-text: #fde68a;
    --bg-badge-new: #064e3b;
    --color-badge-new: #4ade80;
    --bg-badge-improved: #172554;
    --color-badge-improved: #60a5fa;
    --bg-badge-experimental: #451a03;
    --color-badge-experimental: #fbbf24;
    --shadow-hero-icon: 0 24px 70px rgba(96, 165, 250, 0.2), 0 12px 35px rgba(52, 211, 153, 0.1), 0 0 0 1px rgba(96, 165, 250, 0.15);
}

/* --- Smooth transitions --- */
body,
nav,
nav.scrolled,
.feature-card,
.why-card,
.faq-question,
.disclaimer-section,
.version-card,
.comparison-wrapper,
.download-overlay-card,
.btn-secondary,
.download-link,
footer {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --- Toggle button --- */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    color: var(--gray-500);
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0;
}

.theme-toggle:hover {
    background: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-300);
}

/* Show moon in light, sun in dark */
.theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

/* --- Footer: pin to dark (gray inversion would make it light) --- */
[data-theme="dark"] footer {
    background: #0f172a;
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] footer a {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] footer a:hover {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .footer-brand span {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .footer-copy {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* --- Security section: already dark, pin it --- */
[data-theme="dark"] .security {
    background: linear-gradient(135deg, #0c1a3d 0%, #0a1628 40%, #0b2218 100%);
    color: #fff;
}

[data-theme="dark"] .security .section-header h2 {
    color: #fff;
}

[data-theme="dark"] .security .section-header p {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .security .section-label {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

[data-theme="dark"] .security-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .security-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .security-item h3 {
    color: #fff;
}

[data-theme="dark"] .security-item p {
    color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .security-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
}

[data-theme="dark"] .security-icon svg {
    color: #60a5fa;
}

[data-theme="dark"] .security-item:nth-child(even) .security-icon {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.2), rgba(22, 163, 74, 0.1));
}

[data-theme="dark"] .security-item:nth-child(even) .security-icon svg {
    color: #4ade80;
}

/* --- iOS section: already dark, pin it --- */
[data-theme="dark"] .ios-section {
    background: linear-gradient(135deg, #0c1a3d 0%, #0a1628 40%, #0b2218 100%);
    color: #fff;
}

[data-theme="dark"] .ios-section .section-header h2 {
    color: #fff;
}

[data-theme="dark"] .ios-section .section-header p {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .ios-section .section-label {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* --- CTA box: already uses gradient dark bg, pin it --- */
[data-theme="dark"] .cta-box {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 30%, #16a34a 100%);
}

[data-theme="dark"] .cta-box h2 {
    color: #fff;
}

[data-theme="dark"] .cta-box p {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .cta-requirements span {
    color: rgba(255, 255, 255, 0.6);
}

/* --- Comparison table --- */
[data-theme="dark"] .comparison-wrapper {
    background: var(--bg-card);
}

/* --- Changelog badge overrides --- */
[data-theme="dark"] .change-icon.new {
    background: var(--bg-badge-new);
    color: var(--color-badge-new);
}

[data-theme="dark"] .change-icon.improved {
    background: var(--bg-badge-improved);
    color: var(--color-badge-improved);
}

[data-theme="dark"] .change-icon.experimental {
    background: var(--bg-badge-experimental);
    color: var(--color-badge-experimental);
}

[data-theme="dark"] .legend-dot.new {
    background: var(--bg-badge-new);
    border-color: var(--color-badge-new);
}

[data-theme="dark"] .legend-dot.improved {
    background: var(--bg-badge-improved);
    border-color: var(--color-badge-improved);
}

[data-theme="dark"] .legend-dot.experimental {
    background: var(--bg-badge-experimental);
    border-color: var(--color-badge-experimental);
}

/* --- Version card latest --- */
[data-theme="dark"] .version-card.latest {
    border-color: #064e3b;
    background: linear-gradient(135deg, #052e16 0%, #1e293b 60%);
}

/* --- FAQ question hover --- */
[data-theme="dark"] .faq-question:hover {
    background: #283548;
}

[data-theme="dark"] .faq-item.active .faq-question {
    background: #052e16;
}

/* --- FAQ warning box --- */
[data-theme="dark"] .warning-box {
    background: var(--bg-warning-box);
    border-color: var(--border-warning-box);
}

[data-theme="dark"] .warning-box svg {
    color: var(--color-warning-icon);
}

[data-theme="dark"] .warning-box p,
[data-theme="dark"] .warning-box strong {
    color: var(--color-warning-text);
}

/* --- FAQ step box --- */
[data-theme="dark"] .step-box {
    background: var(--bg-card);
}

/* --- Download overlay --- */
[data-theme="dark"] .download-overlay-card {
    background: var(--bg-overlay-card);
}

[data-theme="dark"] .download-overlay-close {
    background: #334155;
}

[data-theme="dark"] .download-overlay-close:hover {
    background: #475569;
}

/* --- Partial (comparison table orange) --- */
[data-theme="dark"] .partial {
    color: #fbbf24;
}

/* --- Changelog switch buttons (inline style overrides) --- */
[data-theme="dark"] .changelog-switch-active {
    background: var(--accent-100) !important;
    color: var(--accent-600) !important;
}

[data-theme="dark"] .changelog-switch-inactive {
    background: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-600) !important;
}

/* --- Feature badges (NEU / Experimentell) --- */
[data-theme="dark"] .feature-badge-new {
    background: var(--accent-100);
    color: var(--accent-600);
}

[data-theme="dark"] .feature-badge-experimental {
    background: #422006;
    color: #fbbf24;
}