/* Theme Switcher Animation */
.theme-transition * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme-specific styles */
[data-theme="dark"] {
    /* Header */
    .luxury-header {
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    }
    
    /* Cards */
    .game-card,
    .provider-card,
    .togel-card,
    .slot-games-sidebar,
    .hot-game-featured {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    }
    
    /* Inputs */
    .input-group {
        background: rgba(255,255,255,0.05);
        border-color: #333;
    }
    
    /* Shadows */
    .nav-link.active,
    .btn-gold:hover {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    }
    
    /* Borders */
    .game-card,
    .provider-card,
    .togel-card {
        border: 1px solid #333;
    }
}

[data-theme="light"] {
    /* Header */
    .luxury-header {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        border-bottom: 2px solid var(--accent-gold);
    }
    
    /* Cards */
    .game-card,
    .provider-card,
    .togel-card,
    .slot-games-sidebar,
    .hot-game-featured {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    /* Inputs */
    .input-group {
        background: #f8f9fa;
        border-color: #dee2e6;
    }
    
    /* Text Colors */
    .contact-link,
    .theme-toggle,
    .lang-toggle,
    .nav-link,
    .footer-links a,
    .contact-item span {
        color: #6c757d;
    }
    
    .nav-link.active {
        background: rgba(212, 175, 55, 0.1);
    }
    
    /* Shadows */
    .game-card:hover,
    .provider-card:hover,
    .togel-card:hover {
        box-shadow: 0 8px 16px rgba(212, 175, 55, 0.2);
    }
}

/* Theme Toggle Button Animation */
.theme-toggle i {
    transition: transform 0.5s ease;
}

[data-theme="dark"] .theme-toggle i {
    transform: rotate(360deg);
}

[data-theme="light"] .theme-toggle i::before {
    content: "\f185"; /* sun icon */
}