/* Dark Mode Styles */

/* Dark mode color variables */
html.dark {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #242424;
    --bg-hover: #2a2a2a;

    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-tertiary: #808080;

    --border-color: #333333;
    --border-light: #2a2a2a;

    /* Purple theme for dark mode */
    --primary-purple: #a855f7;
    --primary-purple-light: #c084fc;
    --primary-purple-dark: #7e22ce;

    /* Shadows for dark mode */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.6);
}

/* Base elements */
html.dark body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Navigation */
html.dark .navbar {
    background: rgba(15, 15, 15, 0.7);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(168, 85, 247, 0.05);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

html.dark .navbar.scrolled {
    background: rgba(15, 15, 15, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

html.dark .nav-link {
    color: var(--text-secondary);
}

html.dark .nav-link:hover {
    color: var(--primary-purple);
}

html.dark .brand-text {
    color: var(--text-primary);
}

html.dark .arabic-text {
    color: var(--text-secondary);
}

html.dark .search-input {
    background: rgba(36, 36, 36, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-color: rgba(168, 85, 247, 0.15);
    color: var(--text-primary);
}

html.dark .search-input::placeholder {
    color: var(--text-tertiary);
}

html.dark .search-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

html.dark .cart-btn {
    color: var(--text-secondary);
}

html.dark .cart-btn:hover {
    color: var(--primary-purple);
}

/* Hero Section */
html.dark .hero {
    background: var(--bg-primary);
}

/* Categories */
html.dark .categories {
    background: var(--bg-secondary);
}

html.dark .section-title {
    color: var(--text-primary);
}

html.dark .section-subtitle {
    color: var(--text-secondary);
}

html.dark .category-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

html.dark .category-card:hover {
    background: var(--bg-hover);
    border-color: var(--primary-purple);
}

html.dark .category-title {
    color: var(--text-primary);
}

html.dark .category-description {
    color: var(--text-secondary);
}

/* Product Cards */
html.dark .product-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

html.dark .product-card:hover {
    border-color: var(--primary-purple);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

html.dark .product-title {
    color: var(--text-primary);
}

html.dark .product-price {
    color: var(--primary-purple);
}

html.dark .original-price {
    color: var(--text-tertiary);
}

html.dark .product-badge {
    background: var(--primary-purple);
    color: var(--text-primary);
}

/* Features Section */
html.dark .features {
    background: var(--bg-primary);
}

html.dark .feature-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

html.dark .feature-card:hover {
    background: var(--bg-hover);
    border-color: var(--primary-purple);
}

html.dark .feature-title {
    color: var(--text-primary);
}

html.dark .feature-description {
    color: var(--text-secondary);
}

/* Newsletter */
html.dark .newsletter {
    background: linear-gradient(135deg, #1a0033, #2d0052);
}

html.dark .newsletter-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

html.dark .newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Footer */
html.dark .footer {
    background: #1e1e1e;
    border-top: 1px solid var(--border-color);
}

html.dark .footer-title {
    color: var(--text-primary);
}

html.dark .footer-description {
    color: var(--text-secondary);
}

html.dark .footer-link {
    color: var(--text-secondary);
}

html.dark .footer-link:hover {
    color: var(--primary-purple);
}

html.dark .social-link {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

html.dark .social-link:hover {
    background: var(--primary-purple);
    color: var(--text-primary);
}

/* Buttons */
html.dark .btn-primary {
    background: var(--primary-purple);
    color: var(--text-primary);
}

html.dark .btn-primary:hover {
    background: var(--primary-purple-dark);
}

html.dark .btn-secondary {
    background: transparent;
    border: 2px solid var(--primary-purple);
    color: var(--primary-purple);
}

html.dark .btn-secondary:hover {
    background: var(--primary-purple);
    color: var(--text-primary);
}

/* Carousel Controls */
html.dark .carousel-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

html.dark .carousel-btn:hover {
    background: var(--primary-purple);
    color: var(--text-primary);
}

/* CTA Section */
html.dark .cta-section {
    background: linear-gradient(135deg, #1a0033, #2d0052);
}

/* Testimonials */
html.dark .testimonials {
    background: var(--bg-secondary);
}

html.dark .testimonial-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

html.dark .testimonial-text {
    color: var(--text-primary);
}

html.dark .testimonial-author h4 {
    color: var(--text-primary);
}

html.dark .testimonial-author p {
    color: var(--text-secondary);
}

/* Loading Screen */
html.dark .loading-screen {
    background: linear-gradient(135deg, #0a0014, #1a0033);
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}