/* TOGGLE - FORCE DARK BACKGROUND */
.theme-toggle,
button.theme-toggle,
#themeToggle,
.nav-actions .theme-toggle,
.navbar .theme-toggle {
    background: rgba(15, 15, 25, 0.9) !important;
    background-color: rgba(15, 15, 25, 0.9) !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    border-radius: 10px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.theme-toggle:hover,
button.theme-toggle:hover,
#themeToggle:hover {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.6) !important;
}

.theme-toggle svg,
#themeToggle svg {
    position: absolute !important;
    transition: all 0.3s ease !important;
}

/* DARK MODE: show sun */
.theme-toggle .icon-sun,
#themeToggle .icon-sun {
    opacity: 0 !important;
    transform: scale(0) !important;
}

.theme-toggle .icon-moon,
#themeToggle .icon-moon {
    opacity: 1 !important;
    transform: scale(1) !important;
}

html[data-theme=dark] .theme-toggle .icon-sun,
html[data-theme=dark] #themeToggle .icon-sun,
[data-theme=dark] .theme-toggle .icon-sun {
    opacity: 1 !important;
    transform: scale(1) !important;
}

html[data-theme=dark] .theme-toggle .icon-moon,
html[data-theme=dark] #themeToggle .icon-moon,
[data-theme=dark] .theme-toggle .icon-moon {
    opacity: 0 !important;
    transform: scale(0) !important;
}