/* =========================================================
   GOLFVERSAND.DE – VARIATIONEN
========================================================= */


/* ---------------------------------------------------------
   Variation Wrapper
--------------------------------------------------------- */

.variation-wrapper {
    margin-bottom: 14px;
    padding: 14px 14px 10px;

    border: 1px solid var(--color-deep-blue) !important;
    border-radius: 6px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* ---------------------------------------------------------
   Aktive Auswahl
--------------------------------------------------------- */

.variation-wrapper:has(input[type="radio"]:checked),
.variation-wrapper:has(select option:checked:not([value=""])) {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px rgba(108, 171, 221, 0.18);
}


/* ---------------------------------------------------------
   Radio Buttons
--------------------------------------------------------- */

.variation-wrapper input[type="radio"] {
    accent-color: var(--color-primary);
}


/* ---------------------------------------------------------
   Deaktivierte Radio-Varianten ausblenden
--------------------------------------------------------- */

.variation-wrapper .custom-radio:has(
    input[type="radio"]:disabled
) {
    display: none !important;
}


/* ---------------------------------------------------------
   Labels
--------------------------------------------------------- */

.variation-wrapper label,
.variation-wrapper .custom-control-label,
.variation-wrapper .form-check-label {
    color: var(--color-deep-blue) !important;
    font-weight: 400;
}


/* ---------------------------------------------------------
   Dropdown
--------------------------------------------------------- */

.variation-wrapper select,
.variation-wrapper select.form-control {
    padding-right: 16px !important;
    background-position: right 16px center !important;
}

.variation-wrapper:has(select option:checked:not([value=""])) select {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px rgba(108, 171, 221, 0.20) !important;
}


/* ---------------------------------------------------------
   Titel / Slider Text
--------------------------------------------------------- */

.variation-wrapper .js-btn-slider-wrapper {
    position: relative;

    color: var(--color-deep-blue);
    font-weight: 700;

    transition: color 0.2s ease;
}


/* ---------------------------------------------------------
   Fokus
--------------------------------------------------------- */

.variation-wrapper input[type="radio"]:focus,
.variation-wrapper select:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(108, 171, 221, 0.25) !important;
}