/* ==========================================
   DARK MODE STYLES
   ========================================== */

/* Prevent slider animation on page load */
body.loading .slider:before {
    transition: none;
}

/* Pre-position sliders based on theme to avoid flicker before JS runs */
:root[data-theme="dark"] .theme-toggle-switch .slider {
    --knob-translate: 58px;
}

:root[data-theme="dark"] .desktop-theme-toggle .slider {
    --knob-translate: 36px;
}

/* Dark Mode Variablen */
:root[data-theme="dark"] {
    --main-color: #8b6bb0;
    --main-color-hover: hsl(268, 35%, 60%);
    --main-color-active: hsl(268, 35%, 60%);
    --mark-color: hsl(268, 35%, 35%);
    --nav-color-hover: hsl(268, 41%, 85%);
    --nav-color-active: hsl(0, 0%, 95%);

    --font-color: #e4e4e4;
    --background-color: #151515;
    --card-background: #1e1e1e;
    --input-background: #2a2a2a;
    --shadow: 0 0 0.67em rgba(0, 0, 0, 0.8);
    
    background-color: var(--background-color);
}

/* Dark Mode Logo Farben (Header + Bewertungs-Icons) */
:root[data-theme="dark"] .logo .cls-2,
:root[data-theme="dark"] .logo svg .cls-2,
:root[data-theme="dark"] .bewertungs-system .icon .cls-2,
:root[data-theme="dark"] .bewertungs-system .icon svg .cls-2 {
    fill: #e4e4e4 !important;  /* Text - Weiß (Schriftfarbe) */
}

:root[data-theme="dark"] .logo .cls-3,
:root[data-theme="dark"] .logo svg .cls-3,
:root[data-theme="dark"] .bewertungs-system .icon .cls-3,
:root[data-theme="dark"] .bewertungs-system .icon svg .cls-3 {
    fill: #151515 !important;  /* Hintergrund - Grau (Background) */
    stroke: #151515 !important;
}

/* Auto Dark Mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --main-color: #8b6bb0;
        --main-color-hover: hsl(268, 35%, 60%);
        --main-color-active: hsl(268, 35%, 60%);
        --mark-color: hsl(268, 35%, 35%);
        --nav-color-hover: hsl(268, 41%, 85%);
        --nav-color-active: hsl(0, 0%, 95%);

        --font-color: #e4e4e4;
        --background-color: #151515;
        --card-background: #1e1e1e;
        --input-background: #2a2a2a;
        --shadow: 0 0 0.67em rgba(0, 0, 0, 0.8);
        
        background-color: var(--background-color);
    }

    /* Auto Dark Mode Logo Farben (Header + Bewertungs-Icons) */
    :root:not([data-theme="light"]) .logo .cls-2,
    :root:not([data-theme="light"]) .logo svg .cls-2,
    :root:not([data-theme="light"]) .bewertungs-system .icon .cls-2,
    :root:not([data-theme="light"]) .bewertungs-system .icon svg .cls-2 {
        fill: #e4e4e4 !important;  /* Text - Weiß (Schriftfarbe) */
    }

    :root:not([data-theme="light"]) .logo .cls-3,
    :root:not([data-theme="light"]) .logo svg .cls-3,
    :root:not([data-theme="light"]) .bewertungs-system .icon .cls-3,
    :root:not([data-theme="light"]) .bewertungs-system .icon svg .cls-3 {
        fill: #151515 !important;  /* Hintergrund - Grau (Background) */
        stroke: #151515 !important;
    }
}

/* ==========================================
   DARK MODE TOGGLE BUTTON
   ========================================== */

.theme-toggle {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    padding: 0.5rem;
    margin: 0;
    margin-left: 1rem;
    border-radius: 50%;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.theme-toggle svg {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle .sun-icon {
    opacity: 1;
}

.theme-toggle .moon-icon {
    opacity: 0;
    transform: rotate(-90deg);
    left: 4px;
    bottom: 4px;
}

/* Dark Mode aktiv - Icons tauschen */
:root[data-theme="dark"] .theme-toggle .sun-icon,
:root:not([data-theme="light"]) .theme-toggle .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

:root[data-theme="dark"] .theme-toggle .moon-icon,
:root:not([data-theme="light"]) .theme-toggle .moon-icon {
    opacity: 1;
    transform: rotate(0deg);
}

/* ==========================================
   MOBILE TOGGLE SWITCH (Slider)
   ========================================== */

.theme-toggle-switch-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-left: 0;
}

.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 52px;
}

.desktop-theme-toggle {
    display: flex;
    align-items: center;
}

.desktop-theme-toggle .theme-toggle-switch {
    width: 72px;
    height: 36px;
}

.desktop-theme-toggle .slider {
    border-radius: 36px;
}

.desktop-theme-toggle .slider::after {
    border-radius: 36px;
}

.desktop-theme-toggle .slider:before {
    height: 30px;
    width: 30px;
    left: 3px;
    bottom: 3px;
}

.theme-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #6A4394;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 52px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    touch-action: none;
    user-select: none;
}

.slider::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 52px;
    background: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(255,255,255,0.18));
    pointer-events: none;
}

.slider:before {
    position: absolute;
    content: "";
    height: 44px;
    width: 44px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: transform 0.22s ease;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
    cursor: grab;
    transform: translateX(var(--knob-translate, 0px));
}

.slider:active:before,
.slider.dragging:before {
    cursor: grabbing;
    transition: none !important;
}

.theme-toggle-switch input:checked + .slider {
    background-color: #8b6bb0;
}

.theme-toggle-switch input:checked + .slider:before {
    background-color: #f5f5f5;
}

/* Icons im Slider */
.slider-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.slider .sun-icon {
    left: 10px;
    opacity: 1;
    stroke: white;
    width: 18px;
    height: 18px;
}

.slider .moon-icon {
    right: 10px;
    opacity: 0.3;
    stroke: white;
    width: 18px;
    height: 18px;
}

.theme-toggle-switch input:checked + .slider .sun-icon {
    opacity: 0.3;
}

.theme-toggle-switch input:checked + .slider .moon-icon {
    opacity: 1;
}

/* Slider auch im Light Mode gut sichtbar */
:root[data-theme="light"] .slider,
:root:not([data-theme]) .slider {
    background-color: #6A4394;
}

/* Dark Mode - Icons anpassen */
:root[data-theme="dark"] .theme-toggle-switch input:not(:checked) + .slider .sun-icon {
    opacity: 0.3;
}

:root[data-theme="dark"] .theme-toggle-switch input:not(:checked) + .slider .moon-icon {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle-switch input:not(:checked) + .slider .sun-icon {
        opacity: 0.3;
    }
    
    :root:not([data-theme="light"]) .theme-toggle-switch input:not(:checked) + .slider .moon-icon {
        opacity: 1;
    }
}

/* ==========================================
   DARK MODE SPECIFIC FIXES
   ========================================== */

/* Gradueller Übergang während des Ziehens */
body.theme-transitioning {
    background-color: var(--transitioning-bg, var(--background-color)) !important;
    color: var(--transitioning-text, var(--font-color)) !important;
    transition: background-color 0.15s linear, color 0.15s linear;
}

body.theme-transitioning *:not(.pswp):not(.pswp *) {
    color: var(--transitioning-text, inherit) !important;
    transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear, fill 0.15s linear, stroke 0.15s linear;
}

/* Elemente die immer ihre feste Farbe behalten sollen */
body.theme-transitioning .cart-count {
    color: white !important;
}

/* Mobile-Menu nutzt die gleiche graduelle Transition */
body.theme-transitioning .mobile-menu {
    background-color: var(--transitioning-bg, var(--card-background)) !important;
    color: var(--transitioning-text, var(--font-color)) !important;
}

/* Header behält im Dark Mode die gleiche Farbe wie im Light Mode */
:root[data-theme="dark"] header {
    background-color: #6A4394;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) header {
        background-color: #6A4394;
    }
}

/* Zustand h2 bleibt immer weiß */
.zustand h2 {
    color: white !important;
}

/* Zustand und Buttons behalten ihre Hauptfarbe im Dark Mode */
:root[data-theme="dark"] .zustand,
:root[data-theme="dark"] button:not(.pswp__button),
:root[data-theme="dark"] .button-to-loading {
    background-color: #6A4394;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .zustand,
    :root:not([data-theme="light"]) button:not(.pswp__button),
    :root:not([data-theme="light"]) .button-to-loading {
        background-color: #6A4394;
    }
}

/* Fix für den Entfernen-Button im Warenkorb */
.remove-item {
    background-color: transparent !important;
}

/* Picture-Icon Helligkeit im Dark Mode beibehalten */
:root[data-theme="dark"] .picture-icon {
    background-color: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .picture-icon svg {
    fill: #6A4394;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .picture-icon {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    :root:not([data-theme="light"]) .picture-icon svg {
        fill: #6A4394;
    }
}

/* Footer im Dark Mode dunkler */
:root[data-theme="dark"] .footer {
    background-color: #0f0f0f;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .footer {
        background-color: #0f0f0f;
    }
}