/* ═══════════════════════════════════════════════════════════════
   DARK MODE - FULLY AUTOMATIC
   اتوماتیک با تم سیستم عامل
   ═══════════════════════════════════════════════════════════════ */

html.dm-switching,
html.dm-switching *,
html.dm-switching *::before,
html.dm-switching *::after {
    transition:
        background-color 0.4s ease,
        color 0.35s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* ═══════════════════════════════════════════════════════════════
   DARK MODE با prefers-color-scheme
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {

    /* ═══════════════════════════════════════════
       VARIABLES - بازنویسی متغیرهای :root
       ═══════════════════════════════════════════ */
    :root {
        --primary: #2a5a8c;
        --primary-dark: #1a3d5c;
        --accent: #E67E22;
        --accent-hover: #D35400;
        --text-dark: #e8e8e8;
        --text-medium: #bbb;
        --text-light: #888;
        --bg-white: #111827;
        --bg-soft: #0d1526;
        --border: rgba(255, 255, 255, 0.08);
        --glass: rgba(30, 41, 59, 0.72);
        --shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

        /* ─── این‌ها مهم‌ترین‌ها هستن - متغیرهای هدر ─── */
        --fl-primary: #2a5a8c;
        --fl-primary-dark: #1a3d5c;
        --fl-accent: #E67E22;
        --fl-accent-hover: #D35400;
        --fl-text: #ccc;
        --fl-text-light: #999;
        --fl-glass-bg: rgba(15, 22, 38, 0.85);
        --fl-glass-border: rgba(255, 255, 255, 0.06);

        color-scheme: dark;
    }


    /* ═══════════════════════════════════════════
       BODY
       ═══════════════════════════════════════════ */
    html, body {
        background: #0b1120 !important;
        background-color: #0b1120 !important;
        color: #d5d5d5 !important;
    }

    body::before {
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important;
    }

    .blur-shape,
    .shape-1,
    .shape-2 {
        opacity: 0.05 !important;
    }


    /* ═══════════════════════════════════════════
       TYPOGRAPHY
       ═══════════════════════════════════════════ */
    h1, h2, h3, h4, h5, h6 {
        color: #efefef !important;
    }

    p, li, td, label {
        color: #a8a8a8 !important;
    }

    strong, b {
        color: #ddd !important;
    }


    /* ═══════════════════════════════════════════
       ██ CRITICAL FIX: هدر شناور fl-* ██
       ═══════════════════════════════════════════ */

    /* وقتی هدر مخفی میشه، فضاش رو هم خالی کن */
    .fl-header.h-hidden {
        display: none !important;
    }

    /* یا با visibility */
    .fl-header-group .fl-header.h-hidden {
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* ─────── INFO BAR ─────── */
    .fl-info {
        background: linear-gradient(135deg, rgba(8, 12, 24, .92), rgba(15, 22, 38, .88)) !important;
        background-color: rgba(8, 12, 24, .92) !important;
        border-color: rgba(255, 255, 255, .06) !important;
        box-shadow: 0 -2px 24px rgba(0, 0, 0, .4) !important;
    }

    .fl-header-group.stuck .fl-info {
        background: linear-gradient(135deg, rgba(8, 12, 24, .97), rgba(15, 22, 38, .95)) !important;
        background-color: rgba(8, 12, 24, .97) !important;
        border-bottom-color: rgba(255, 255, 255, .04) !important;
        box-shadow: 0 2px 24px rgba(0, 0, 0, .5) !important;
    }

    .fl-info-chip {
        color: rgba(255, 255, 255, .70) !important;
    }

    .fl-info-chip:hover {
        color: var(--fl-accent) !important;
    }

    .fl-info-sep {
        background: rgba(255, 255, 255, .08) !important;
    }

    .fl-info-social {
        color: rgba(255, 255, 255, .55) !important;
    }

    .fl-info-social:hover {
        color: var(--fl-accent) !important;
    }


    /* ─────── ██ MAIN BAR (.fl-bar) ██ ─────── */
    .fl-bar {
        background: rgba(15, 22, 38, .85) !important;
        background-color: rgba(15, 22, 38, .85) !important;
        backdrop-filter: blur(42px) saturate(1.8) !important;
        -webkit-backdrop-filter: blur(42px) saturate(1.8) !important;
        border-color: rgba(255, 255, 255, .06) !important;
        box-shadow:
            0 10px 50px rgba(0, 0, 0, .35),
            inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    }


    /* ─────── LOGO ─────── */
    .fl-logo-name {
        color: #f0f0f0 !important;
    }

    .fl-logo-desc {
        color: rgba(255, 255, 255, .5) !important;
    }


    /* ─────── NAV ─────── */
    .fl-nav {
        background: rgba(255, 255, 255, .04) !important;
    }

    .fl-nav-link,
    .fl-drop-link,
    .fl-drop-arrow-btn {
        color: #ccc !important;
    }

    .fl-nav-link:hover {
        color: #fff !important;
        background: rgba(255, 255, 255, .07) !important;
    }

    .fl-nav-link.active {
        color: #fff !important;
        background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-hover)) !important;
        box-shadow: 0 4px 14px rgba(230, 126, 34, .25) !important;
    }

    .fl-drop:hover .fl-drop-trigger {
        background: rgba(255, 255, 255, .07) !important;
    }

    .fl-drop-link:hover,
    .fl-drop-link.active {
        color: #fff !important;
    }

    .fl-drop-arrow-btn:hover {
        background: rgba(255, 255, 255, .07) !important;
    }


    /* ─────── SUBMENU ─────── */
    .fl-submenu {
        background: rgba(10, 15, 28, .92) !important;
        border-color: rgba(255, 255, 255, .07) !important;
        box-shadow:
            0 20px 60px rgba(0, 0, 0, .5),
            0 4px 16px rgba(0, 0, 0, .3),
            inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    }

    .fl-submenu-link {
        color: #bbb !important;
    }

    .fl-submenu-link:hover {
        background: linear-gradient(135deg, rgba(230, 126, 34, .15), rgba(230, 126, 34, .06)) !important;
        color: #fff !important;
    }


    /* ─────── ICON BUTTONS ─────── */
    .fl-icon-btn,
    .fl-burger,
    .fl-drawer-close {
        background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-hover)) !important;
        border-color: rgba(255, 255, 255, .12) !important;
    }


    /* ─────── SEARCH POPUP ─────── */
    .fl-search-pop {
        background: rgba(10, 15, 28, .85) !important;
        border-color: rgba(255, 255, 255, .07) !important;
        box-shadow: 0 24px 64px rgba(0, 0, 0, .5) !important;
    }

    .fl-search-field {
        background: rgba(255, 255, 255, .05) !important;
        border-color: rgba(255, 255, 255, .08) !important;
    }

    .fl-search-field:focus-within {
        border-color: rgba(230, 126, 34, .35) !important;
        background: rgba(255, 255, 255, .08) !important;
    }

    .fl-search-field svg {
        stroke: rgba(255, 255, 255, .5) !important;
    }

    .fl-search-field input {
        color: #fff !important;
    }

    .fl-search-field input::placeholder {
        color: rgba(255, 255, 255, .4) !important;
    }


    /* ─────── OVERLAY ─────── */
    .fl-overlay {
        background: rgba(0, 0, 0, .5) !important;
    }


    /* ═══════════════════════════════════════════
       ██ DRAWER (آف‌کانواس) ██
       ═══════════════════════════════════════════ */
    .fl-drawer {
        background: rgba(10, 15, 28, .92) !important;
        background-color: rgba(10, 15, 28, .92) !important;
        backdrop-filter: blur(52px) saturate(2.2) !important;
        -webkit-backdrop-filter: blur(52px) saturate(2.2) !important;
        border-color: rgba(255, 255, 255, .07) !important;
        box-shadow: 0 24px 80px rgba(0, 0, 0, .5) !important;
    }

    .fl-drawer::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .1) !important;
    }

    .fl-drawer-head {
        background: rgba(8, 12, 22, .95) !important;
        background-color: rgba(8, 12, 22, .95) !important;
        border-bottom-color: rgba(255, 255, 255, .06) !important;
    }


    /* ─── لینک‌های درآور ─── */
    .fl-drawer-link,
    .fl-drawer-acc-link {
        color: #ccc !important;
    }

    .fl-drawer-link:hover,
    .fl-drawer-acc-link:hover {
        background: rgba(255, 255, 255, .06) !important;
        color: #fff !important;
    }

    .fl-drawer-link.active {
        background: linear-gradient(135deg, var(--fl-accent), var(--fl-accent-hover)) !important;
        color: #fff !important;
        box-shadow: 0 4px 16px rgba(230, 126, 34, .25) !important;
    }

    .fl-drawer-acc-trigger:hover {
        background: rgba(255, 255, 255, .04) !important;
    }

    .fl-drawer-acc-toggle {
        color: rgba(255, 255, 255, .5) !important;
        border-right-color: rgba(255, 255, 255, .06) !important;
    }

    .fl-drawer-acc-toggle:hover {
        background: rgba(255, 255, 255, .07) !important;
        color: #fff !important;
    }

    .fl-drawer-subs {
        background: rgba(255, 255, 255, .03) !important;
        border-color: rgba(255, 255, 255, .05) !important;
    }

    .fl-drawer-sub {
        color: rgba(255, 255, 255, .55) !important;
    }

    .fl-drawer-sub:hover {
        background: rgba(255, 255, 255, .06) !important;
        color: #fff !important;
    }


    /* ─── فوتر درآور ─── */
    .fl-drawer-foot {
        border-top-color: rgba(255, 255, 255, .06) !important;
    }

    .fl-drawer-info-item {
        background: rgba(255, 255, 255, .04) !important;
        border-color: rgba(255, 255, 255, .06) !important;
        color: #ccc !important;
    }

    .fl-drawer-info-item:hover {
        background: rgba(255, 255, 255, .07) !important;
        color: #fff !important;
    }

    .fl-drawer-search {
        background: rgba(255, 255, 255, .04) !important;
        border-color: rgba(255, 255, 255, .06) !important;
    }

    .fl-drawer-search svg {
        stroke: rgba(255, 255, 255, .4) !important;
    }

    .fl-drawer-search input {
        color: #fff !important;
    }

    .fl-drawer-search input::placeholder {
        color: rgba(255, 255, 255, .35) !important;
    }


    /* ═══════════════════════════════════════════
       BREADCRUMB
       ═══════════════════════════════════════════ */
    .fl-breadcrumb-inner {
        background: rgba(15, 22, 38, .55) !important;
        border-color: rgba(255, 255, 255, .06) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .2) !important;
    }

    .fl-bc-item {
        color: rgba(255, 255, 255, .55) !important;
    }

    a.fl-bc-item:hover,
    .fl-bc-current {
        color: #fff !important;
    }


    /* ═══════════════════════════════════════════
       SPACER - شفاف نگه دار
       ═══════════════════════════════════════════ */
    .fl-spacer {
        background: transparent !important;
        background-color: transparent !important;
    }


    /* ═══════════════════════════════════════════
       GLASS CARDS
       ═══════════════════════════════════════════ */
    .glass-card,
    .hero-card,
    .hero-badge {
        background: rgba(30, 41, 59, 0.6) !important;
        border-color: rgba(255, 255, 255, 0.07) !important;
    }


    /* ═══════════════════════════════════════════
       BUTTONS
       ═══════════════════════════════════════════ */
    .btn-secondary {
        background: rgba(30, 41, 59, 0.65) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: #ddd !important;
    }


    /* ═══════════════════════════════════════════
       TABLE
       ═══════════════════════════════════════════ */
    thead th {
        background: linear-gradient(135deg, #0d1526, #1a2744) !important;
        color: #fff !important;
    }

    tbody td {
        background: rgba(30, 41, 59, 0.35) !important;
        border-color: rgba(255, 255, 255, 0.04) !important;
        color: #bbb !important;
    }

    tbody tr:nth-child(even) td {
        background: rgba(30, 41, 59, 0.5) !important;
    }


    /* ═══════════════════════════════════════════
       FAQ
       ═══════════════════════════════════════════ */
    details {
        background: rgba(30, 41, 59, 0.55) !important;
        border-color: rgba(255, 255, 255, 0.05) !important;
    }

    summary {
        color: #e0e0e0 !important;
    }


    /* ═══════════════════════════════════════════
       IMAGES
       ═══════════════════════════════════════════ */
    img:not([class*="logo"]) {
        filter: brightness(0.88) contrast(1.02);
    }


    /* ═══════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════ */
    .glass-footer {
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(6, 10, 18, 0.97) 10%,
            #030610 100%) !important;
    }

    .gf-contact-card {
        background: rgba(255, 255, 255, 0.025) !important;
        border-color: rgba(255, 255, 255, 0.04) !important;
    }


    /* ═══════════════════════════════════════════
       FLOATING CONTACT
       ═══════════════════════════════════════════ */
    .fc-toggle, #fcToggle {
        background: linear-gradient(135deg, #E67E22, #D35400) !important;
    }

    .fc-toggle.fc-open, #fcToggle.fc-open {
        background: linear-gradient(135deg, #1a2744, #0d1526) !important;
    }

    .fc-panel, #fcPanel {
        background: rgba(10, 15, 28, 0.96) !important;
        border-color: rgba(255, 255, 255, 0.07) !important;
    }

    .fc-stt, #fcStt {
        background: rgba(25, 35, 55, 0.8) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: #ccc !important;
    }


    /* ═══════════════════════════════════════════
       SEARCH PAGE & 404
       ═══════════════════════════════════════════ */
    .sr-page, .nf-page {
        background: #0b1120 !important;
    }

    .sr-card, .sr-product-card, .sr-blog-card,
    .nf-glass-card, .nf-suggest-card {
        background: rgba(30, 41, 59, 0.5) !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
    }

    .sr-title, .sr-card-title a, .sr-product-title a,
    .sr-blog-title a, .sr-section-head h2,
    .sr-empty-title, .nf-title, .nf-sc-title {
        color: #e8e8e8 !important;
    }

    .sr-card-excerpt, .sr-blog-excerpt,
    .sr-empty-desc, .nf-desc, .nf-sc-desc {
        color: #888 !important;
    }


    /* ═══════════════════════════════════════════
       FORMS
       ═══════════════════════════════════════════ */
    input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
    textarea, select {
        background: rgba(30, 41, 59, 0.45) !important;
        border-color: rgba(255, 255, 255, 0.07) !important;
        color: #ddd !important;
    }

    input::placeholder, textarea::placeholder {
        color: rgba(255, 255, 255, 0.25) !important;
    }


    /* ═══════════════════════════════════════════
       ELEMENTOR
       ═══════════════════════════════════════════ */
    .elementor-heading-title {
        color: #f0f0f0 !important;
    }

    .elementor-text-editor,
    .elementor-text-editor p,
    .elementor-text-editor * {
        color: #a5a5a5 !important;
    }

    .elementor-icon-box-title {
        color: #e8e8e8 !important;
    }

    .elementor-icon-box-description {
        color: #999 !important;
    }


    /* ═══════════════════════════════════════════
       SCROLLBAR
       ═══════════════════════════════════════════ */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #0b1120; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(230,126,34,.25); }

    ::selection {
        background: rgba(230, 126, 34, 0.3);
        color: #fff;
    }

    blockquote {
        border-color: rgba(230, 126, 34, 0.3) !important;
        background: rgba(30, 41, 59, 0.3) !important;
        color: #bbb !important;
    }

    hr {
        border-color: rgba(255, 255, 255, 0.06) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   حالت .dark-mode (برای JS - پشتیبان)
   ═══════════════════════════════════════════════════════════════ */

html.dark-mode {
    --fl-glass-bg: rgba(15, 22, 38, 0.85) !important;
    --fl-glass-border: rgba(255, 255, 255, 0.06) !important;
    --fl-text: #ccc !important;
    --fl-text-light: #999 !important;
}

html.dark-mode body {
    background: #0b1120 !important;
    color: #d5d5d5 !important;
}

html.dark-mode .fl-bar {
    background: rgba(15, 22, 38, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .fl-info {
    background: linear-gradient(135deg, rgba(8, 12, 24, .92), rgba(15, 22, 38, .88)) !important;
}

html.dark-mode .fl-drawer {
    background: rgba(10, 15, 28, .92) !important;
    border-color: rgba(255, 255, 255, .07) !important;
}

html.dark-mode .fl-drawer-head {
    background: rgba(8, 12, 22, .95) !important;
}

html.dark-mode .fl-header.h-hidden {
    display: none !important;
}

html.dark-mode .fl-spacer {
    background: transparent !important;
}

html.dark-mode .fl-logo-name {
    color: #f0f0f0 !important;
}

html.dark-mode .fl-nav-link,
html.dark-mode .fl-drop-link,
html.dark-mode .fl-drawer-link,
html.dark-mode .fl-drawer-acc-link {
    color: #ccc !important;
}