/*! Intelligenter Variantenwechsel (BmaxxVariantSwitch) | (c) Bädermaxx GmbH */
/* Styles des Plugins. Der Kopf der Detailseite bindet die Datei per <link> ein (?v= ist eine
   Prüfsumme des Inhalts), eine AJAX-Antwort lädt sie nach, wenn sie fehlt. Kein Theme-Kompilieren
   nötig. Farben wie beim bisherigen Plugin: passend #35982d, andere Kombination #9a9a9a. */

/* Auswahllisten im Konfigurator wie beim bisherigen Plugin (Shopware-Standard): Verlauf von Weiß
   nach Hellgrau, etwas kräftigerer Rahmen, Schrift #333, damit sie als Auswahl erkennbar sind.
   Höhe, Schriftgröße, Pfeil und Ecken bleiben wie im Theme, gesperrte Listen (Auswahl-Konfigurator)
   ebenso. !important, weil Themes die Auswahlbox mit sehr spezifischen Regeln gestalten. */
.product--configurator .select-field select:not(:disabled),
.product--configurator .bmaxx-vs-field select:not(:disabled) {
    background-color: #fbfbfc !important;
    background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%) !important;
    border-color: #dadae5 !important;
    color: #333 !important;
    transition: border-color .15s ease-in-out;
}
.product--configurator .select-field:hover select:not(:disabled),
.product--configurator .bmaxx-vs-field:hover select:not(:disabled) {
    border-color: #b9b9c8 !important;
}
.product--configurator .select-field select:not(:disabled):focus,
.product--configurator .is--bmaxx-vs-open select:not(:disabled) {
    border-color: #9c9cae !important;
}

/* Aufklappliste: die Auswahlbox des Themes bleibt sichtbar, nur das Aufklappen ist eigen */
.bmaxx-vs-field {
    display: block;
    position: relative;
}
.bmaxx-vs-hit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
select:disabled ~ .bmaxx-vs-hit,
.bmaxx-vs-hit.is--disabled {
    cursor: default;
}
.bmaxx-vs-list {
    position: absolute;
    z-index: 1035;
    box-sizing: border-box;
    max-width: calc(100vw - 16px);
    max-height: 320px;
    margin: 0;
    padding: 5px 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .18);
    font-size: 14px;
    line-height: 1.42857;
    text-align: left;
}
.bmaxx-vs-list.is--up {
    box-shadow: 0 -6px 12px rgba(0, 0, 0, .18);
}
.bmaxx-vs-list li {
    margin: 0;
    padding: 4px 20px;
    color: #333;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.bmaxx-vs-list li.is--available {
    color: #35982d;
}
.bmaxx-vs-list li.is--switch,
.bmaxx-vs-list li.is--soldout {
    color: #9a9a9a;
}
.bmaxx-vs-list li.is--unavailable,
.bmaxx-vs-list li[aria-disabled="true"] {
    color: #c8c8c8;
    cursor: not-allowed;
}
.bmaxx-vs-list li:hover,
.bmaxx-vs-list li.is--active,
.bmaxx-vs-list li.is--selected {
    background: #f2f2f2;
}
.bmaxx-vs-list li.is--selected {
    font-weight: 700;
}
.bmaxx-vs-list li[aria-disabled="true"]:hover {
    background: transparent;
}
@media (pointer: coarse) {
    .bmaxx-vs-list {
        font-size: 16px;
    }
    .bmaxx-vs-list li {
        padding: 10px 16px;
    }
}

/* dieselben Farben in der nativen Liste (nur Browser, die das unterstützen) */
.product--configurator option.bmaxx-vs--available {
    color: #35982d;
}
.product--configurator option.bmaxx-vs--switch,
.product--configurator option.bmaxx-vs--soldout {
    color: #9a9a9a;
}
.product--configurator option.bmaxx-vs--unavailable {
    color: #c8c8c8;
}

/* Hinweis beim Überfahren einer grauen Option */
.bmaxx-vs--tip {
    position: fixed;
    z-index: 1036;
    display: none;
    box-sizing: border-box;
    max-width: 260px;
    padding: 5px 8px;
    background: #faeceb;
    border: 1px solid #e74c3c;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    color: #8a1f11;
    font-size: 14px;
    line-height: 1.4;
    pointer-events: none;
}
.bmaxx-vs--tip:before,
.bmaxx-vs--tip:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid transparent;
}
.bmaxx-vs--tip.is--left:before,
.bmaxx-vs--tip.is--left:after {
    top: 50%;
    left: 100%;
    margin-top: -7px;
}
.bmaxx-vs--tip.is--left:before {
    border-left-color: #e74c3c;
}
.bmaxx-vs--tip.is--left:after {
    margin-left: -1px;
    border-left-color: #faeceb;
}
.bmaxx-vs--tip.is--right:before,
.bmaxx-vs--tip.is--right:after {
    top: 50%;
    right: 100%;
    margin-top: -7px;
}
.bmaxx-vs--tip.is--right:before {
    border-right-color: #e74c3c;
}
.bmaxx-vs--tip.is--right:after {
    margin-right: -1px;
    border-right-color: #faeceb;
}
.bmaxx-vs--tip.is--above:before,
.bmaxx-vs--tip.is--above:after {
    top: 100%;
    left: 14px;
}
.bmaxx-vs--tip.is--above:before {
    border-top-color: #e74c3c;
}
.bmaxx-vs--tip.is--above:after {
    margin-top: -1px;
    border-top-color: #faeceb;
}

/* „Bitte Auswahl bestätigen“ in Rot wie beim bisherigen Plugin. !important und erhöhte
   Spezifität (Klasse mehrfach), weil Themes die Schriftfarbe der Auswahlbox sehr spezifisch setzen.
   Die Klasse gibt es nur, solange die Gruppe offen ist. */
select.is--bmaxx-vs-pending.is--bmaxx-vs-pending.is--bmaxx-vs-pending,
.product--configurator select.is--bmaxx-vs-pending.is--bmaxx-vs-pending.is--bmaxx-vs-pending {
    color: #e60000 !important;
    -webkit-text-fill-color: #e60000 !important;
}
select.is--bmaxx-vs-pending option {
    color: initial;
    -webkit-text-fill-color: currentColor;
}
select.is--bmaxx-vs-pending option[value=""] {
    color: #e60000;
}
.bmaxx-vs--pending-label {
    display: inline-block;
    margin-left: .5em;
    color: #e60000 !important;
    font-weight: 400;
}
.buybox--button.is--bmaxx-vs-locked {
    opacity: .5;
    cursor: not-allowed;
}

/* Bild-Konfigurator: Optionen aus anderen Kombinationen blasser */
.product--configurator label.bmaxx-vs--switch,
.product--configurator label.bmaxx-vs--soldout,
.product--configurator .variant--option.bmaxx-vs--switch .option--label {
    opacity: .5;
    transition: opacity .15s ease-in-out;
}
.product--configurator label.bmaxx-vs--switch:hover,
.product--configurator label.bmaxx-vs--soldout:hover,
.product--configurator .variant--option.bmaxx-vs--switch .option--label:hover {
    opacity: 1;
}

.product--configurator .bmaxx-vs--single {
    margin: 0 0 1.25rem;
    line-height: 1.5rem;
}
.bmaxx-vs--notice {
    margin: 0 0 1.25rem;
}
.bmaxx-vs--notice .alert {
    margin: 0;
}
.bmaxx-vs--sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.bmaxx-vs--debug {
    margin: 0 0 1.25rem;
    padding: .75rem;
    border: 1px dashed #b0b0b0;
    background: #fafafa;
    font: 12px/1.4 Menlo, Consolas, monospace;
    color: #333;
    overflow-x: auto;
}
.bmaxx-vs--debug summary {
    cursor: pointer;
    font-weight: 700;
}
.bmaxx-vs--debug table {
    width: 100%;
    margin: .5rem 0;
    border-collapse: collapse;
}
.bmaxx-vs--debug th,
.bmaxx-vs--debug td {
    padding: 2px 6px;
    border-bottom: 1px solid #e5e5e5;
    text-align: left;
    vertical-align: top;
}
.bmaxx-vs--debug .bmaxx-vs--debug-title {
    margin: .75rem 0 0;
    font-weight: 700;
}
.bmaxx-vs--debug .bmaxx-vs--debug-state {
    display: inline-block;
    margin: 0 .5rem .25rem 0;
}
.bmaxx-vs--debug .is--switch { color: #b36b00; }
.bmaxx-vs--debug .is--unavailable { color: #b00020; }
.bmaxx-vs--debug .is--current td { background: #e8f4e8; }
.bmaxx-vs--debug .is--unreachable td { color: #999; }