/* assets/css/season-switcher-widget.css */

body[data-dp-active-season="sommer"] header .header-sommer-winter-switcher {
    background-color: var(--e-global-color-326afb5) !important;
    transition: background-color 0.3s ease;
}

body[data-dp-active-season="winter"] header .header-sommer-winter-switcher {
    background-color: #88aa88 !important;
    transition: background-color 0.3s ease;
}


.season-switcher-widget-wrapper {
    display: flex;
    /* flex-direction: column; /* Nicht mehr unbedingt nötig, da Text im Button ist */
    align-items: center; /* Zentriert Button-Gruppe horizontal */
    justify-content: center;
}

.season-switcher-icon-image {
    height: auto;
    display: block;
    max-width: 100%;
}

.season-switcher-button .season-switcher-font-icon { /* Wrapper für Font-Icon */
    display: inline-flex; /* Stellt sicher, dass das Icon selbst zentriert werden kann, falls es eine eigene Größe hat */
    align-items: center;
    justify-content: center;
}

.season-switcher-button .season-switcher-font-icon svg,
.season-switcher-button .season-switcher-font-icon i {
    vertical-align: middle;
    display: inline-block;
}

.season-switcher {
    position: relative;
    display: inline-block;
}

.season-switcher-buttons {
    position: relative;
    display: inline-flex;
}

.season-switcher-button {
    background-color: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    flex-direction: column; /* Icon und Text untereinander */
    align-items: center;   /* Horizontale Zentrierung von Icon und Text */
    justify-content: center; /* Vertikale Zentrierung (falls Button feste Höhe hätte, hier eher für Konsistenz) */
    line-height: 1.2; /* Angepasst für besseren Textfluss */
    /* width und height werden durch Inhalt (Icon + Padding + Text) bestimmt */
}

/* Logik zum Anzeigen des Buttons der NICHT aktiven Saison */
body[data-dp-active-season="sommer"] .season-switcher-summer {
    display: none !important;
}
body[data-dp-active-season="sommer"] .season-switcher-winter {
    display: inline-flex !important;
}

body[data-dp-active-season="winter"] .season-switcher-winter {
    display: none !important;
}
body[data-dp-active-season="winter"] .season-switcher-summer {
    display: inline-flex !important;
}

/* Text INNERHALB des Buttons */
.season-switcher-button .season-switcher-text {
    /* width: 100%; /* Ist oft implizit durch flex-item Verhalten, kann aber für text-align helfen */
    margin-top: 5px; /* Standardabstand zum Icon, kann per Control geändert werden */
    /* Weitere Styles (Farbe, Typografie, text-align) kommen von Elementor Controls */
    display: none !important; /* Standardmäßig versteckt, Logik zeigt den richtigen */
    line-height: 1.3; /* Für bessere Lesbarkeit des Textes */
}

/* Logik zum Anzeigen des Textes der NICHT aktiven Saison (Text ist jetzt im Button) */
/* Wenn Sommer aktiv ist: Zeige Winter-Text im Winter-Button */
body[data-dp-active-season="sommer"] .season-switcher-winter .season-switcher-text-winter {
    display: block !important;
}

/* Wenn Winter aktiv ist: Zeige Sommer-Text im Sommer-Button */
body[data-dp-active-season="winter"] .season-switcher-summer .season-switcher-text-sommer {
    display: block !important;
}