/* ملف CSS كامل لوضع الدارك مود */
:root {
    --dark-bg: #121212;
    --dark-text: #e0e0e0;
    --dark-header: #1e1e1e;
    --dark-card: #1e1e1e;
    --dark-border: #333333;
    --dark-accent: #bb86fc;
    --dark-top-bar: #1a1a1a;
    --dark-muted: #a0a0a0;
}

/* أساسيات وضع الدارك مود */
body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

    /* --- الهيدر والشريط العلوي --- */
    body.dark-mode .top-bar,
    body.dark-mode .header-top,
    body.dark-mode .header-main,
    body.dark-mode .header-bottom,
    body.dark-mode .sticky-header,
    body.dark-mode .main-header,
    body.dark-mode .site-header {
        background-color: var(--dark-header) !important;
        color: var(--dark-text) !important;
        border-bottom: 1px solid var(--dark-border) !important;
    }

    body.dark-mode .top-bar {
        background-color: var(--dark-top-bar) !important;
        color: var(--dark-muted) !important;
    }

    /* عناصر الهيدر الشائعة */
    body.dark-mode .logo a,
    body.dark-mode .site-title,
    body.dark-mode .header-title {
        color: #ffffff !important;
    }

    body.dark-mode .nav-links a,
    body.dark-mode .main-menu a,
    body.dark-mode .header-links a {
        color: var(--dark-text) !important;
    }

        body.dark-mode .nav-links a:hover,
        body.dark-mode .main-menu a:hover,
        body.dark-mode .header-links a:hover {
            background: #333 !important;
            color: #ffffff !important;
        }

    body.dark-mode .search-bar input,
    body.dark-mode .header-search input,
    body.dark-mode .search-form input {
        background-color: #2c2c2c !important;
        color: var(--dark-text) !important;
        border-color: #444 !important;
    }

        body.dark-mode .search-bar input::placeholder,
        body.dark-mode .header-search input::placeholder {
            color: #888 !important;
        }

    body.dark-mode .header-icon a,
    body.dark-mode .header-icons a,
    body.dark-mode .cart-icon,
    body.dark-mode .user-icon {
        color: var(--dark-text) !important;
    }

    /* --- المحتوى العام --- */
    body.dark-mode .card,
    body.dark-mode .product-card,
    body.dark-mode .box,
    body.dark-mode .panel {
        background-color: var(--dark-card) !important;
        border-color: var(--dark-border) !important;
        color: var(--dark-text) !important;
    }

    body.dark-mode .section-title,
    body.dark-mode .title,
    body.dark-mode .heading {
        color: #ffffff !important;
    }

        body.dark-mode .section-title::after,
        body.dark-mode .title::after,
        body.dark-mode .heading::after {
            background: var(--dark-accent) !important;
        }

    body.dark-mode .text-muted,
    body.dark-mode .product-description,
    body.dark-mode .product-price {
        color: var(--dark-muted) !important;
    }

    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5,
    body.dark-mode h6 {
        color: #ffffff !important;
    }

    /* --- الفوتر --- */
    body.dark-mode .footer,
    body.dark-mode .site-footer,
    body.dark-mode .main-footer {
        background-color: var(--dark-top-bar) !important;
        color: var(--dark-muted) !important;
    }

    body.dark-mode .footer-links a,
    body.dark-mode .footer-menu a {
        color: var(--dark-muted) !important;
    }

        body.dark-mode .footer-links a:hover,
        body.dark-mode .footer-menu a:hover {
            color: #ffffff !important;
        }

    /* --- النماذج --- */
    body.dark-mode .form-control,
    body.dark-mode input[type="text"],
    body.dark-mode input[type="email"],
    body.dark-mode input[type="password"],
    body.dark-mode textarea,
    body.dark-mode select {
        background-color: #2c2c2c !important;
        color: var(--dark-text) !important;
        border-color: #444 !important;
    }

        body.dark-mode .form-control:focus,
        body.dark-mode input:focus,
        body.dark-mode textarea:focus,
        body.dark-mode select:focus {
            border-color: var(--dark-accent) !important;
            box-shadow: 0 0 0 0.2rem rgba(187, 134, 252, 0.25) !important;
        }

/* --- أزرار التبديل بين الوضعين --- */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #333;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.dark-mode .dark-mode-toggle {
    background: #bb86fc;
    color: #121212;
}

.theme-toggle-spacer {
    margin-right: 15px; /* المسافة بين الزر والعناصر الأخرى */
}