/* Theme Toggle Styles */

/* Theme Toggle Button in Header */
.theme-toggle-dropdown {
    position: relative;
}

.theme-toggle-btn {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 8px 12px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.theme-toggle-btn:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--boxshadow-light-color);
}

.theme-toggle-btn:hover .cart-icon i,
.theme-toggle-btn:hover .cart-content span {
    color: var(--white) !important;
}

.theme-toggle-btn .cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--extra-light);
    transition: all 0.3s ease;
}

.theme-toggle-btn .cart-icon i {
    font-size: 18px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.theme-toggle-btn .cart-content {
    margin-left: 12px;
}

.theme-toggle-btn .cart-content span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

/* Mobile Theme Toggle */
.mobile-theme-toggle {
    display: flex !important;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    margin: 4px 0;
}

.mobile-theme-toggle:hover {
    background-color: var(--primary-color);
    color: var(--white) !important;
    text-decoration: none;
    transform: translateX(5px);
}

.mobile-theme-toggle:hover .mobile-theme-icon,
.mobile-theme-toggle:hover .mobile-theme-text {
    color: var(--white) !important;
}

.mobile-theme-toggle .mobile-theme-icon {
    font-size: 20px;
    color: var(--primary-color);
    margin-right: 12px;
    transition: all 0.3s ease;
}

.mobile-theme-toggle .mobile-theme-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

/* Theme Toggle Animation */
.theme-icon,
.mobile-theme-icon {
    transition: transform 0.3s ease;
}

/* Light Specific Styling for Better Contrast */
[data-theme="light"] .theme-toggle-btn .cart-content span,
:root .theme-toggle-btn .cart-content span {
    color: #171717 !important; /* Dark text for light background */
}

[data-theme="light"] .theme-toggle-btn .cart-icon i,
:root .theme-toggle-btn .cart-icon i {
    color: var(--primary-color) !important;
}

[data-theme="light"] .mobile-theme-toggle .mobile-theme-text,
:root .mobile-theme-toggle .mobile-theme-text {
    color: #171717 !important; /* Dark text for light background */
}

[data-theme="light"] .mobile-theme-toggle .mobile-theme-icon,
:root .mobile-theme-toggle .mobile-theme-icon {
    color: var(--primary-color) !important;
}

.theme-toggle-btn.rotating .theme-icon,
.mobile-theme-toggle.rotating .mobile-theme-icon {
    transform: rotate(180deg);
}

/* Dark Specific Adjustments */
[data-theme="dark"] .theme-toggle-btn {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-dark) !important;
}

[data-theme="dark"] .theme-toggle-btn .cart-icon {
    background-color: var(--extra-light) !important;
}

[data-theme="dark"] .theme-toggle-btn .cart-icon i {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .theme-toggle-btn .cart-content span {
    color: var(--text-dark) !important;
}

[data-theme="dark"] .mobile-theme-toggle {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-dark) !important;
}

[data-theme="dark"] .mobile-theme-toggle .mobile-theme-icon {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .mobile-theme-toggle .mobile-theme-text {
    color: var(--text-dark) !important;
}

/* Ensure theme toggle area background is properly set */
[data-theme="dark"] .theme-toggle-dropdown {
    background-color: transparent !important;
}

/* Fix any parent containers that might override */
[data-theme="dark"] .header-nav,
[data-theme="dark"] .mobile-menu {
    background-color: var(--background-color) !important;
}

/* Additional dark mode fixes for theme toggle area */
[data-theme="dark"] .main-header .header-nav,
[data-theme="dark"] .main-header .navbar-nav,
[data-theme="dark"] .main-header .nav-item {
    background-color: transparent !important;
}

/* Ensure theme toggle button container has proper background */
[data-theme="dark"] .theme-toggle-btn,
[data-theme="dark"] .theme-toggle-dropdown,
[data-theme="dark"] .nav-item .theme-toggle-btn {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Mobile theme toggle in navigation menu */
[data-theme="dark"] .mobile-nav .mobile-theme-toggle,
[data-theme="dark"] .mobile-menu .mobile-theme-toggle {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Force override any white backgrounds in dark mode */
[data-theme="dark"] * {
    --white: #1e1e1e !important;
}

/* Specific fix for any remaining white backgrounds */
[data-theme="dark"] .theme-toggle-btn:not(:hover),
[data-theme="dark"] .mobile-theme-toggle:not(:hover) {
    background-color: var(--card-bg) !important;
    color: var(--text-dark) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .theme-toggle-btn .cart-content {
        display: none;
    }
    
    .theme-toggle-btn {
        padding: 8px;
    }
    
    .theme-toggle-btn .cart-icon {
        width: 36px;
        height: 36px;
    }
    
    .theme-toggle-btn .cart-icon i {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .mobile-theme-toggle {
        padding: 10px 14px;
    }
    
    .mobile-theme-toggle .mobile-theme-icon {
        font-size: 18px;
        margin-right: 10px;
    }
    
    .mobile-theme-toggle .mobile-theme-text {
        font-size: 13px;
    }
}

/* Theme Transition for Smooth Switching */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Ensure smooth transitions for all theme-dependent elements */
body,
.header,
.hero-section,
.section-b-space,
.footer,
.card,
.btn,
.nav-link,
.dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}