/*
 * eatbase bedingte Optionsgruppen (custom.menuvariants).
 *
 * .eb-option-hidden wird serverseitig (item-options.blade.php) und von
 * option-conditions.js gesetzt; .eb-option-reveal ist die kurze
 * Einblende-Animation beim Umschalten der Variante.
 */

.eb-option-hidden {
    display: none !important;
}

/* Beschreibung eines Auswahlwerts: Klartext mit Zeilenumbrüchen
   (textContent statt HTML, deshalb pre-line). */
.eb-item-modal__desc--variant {
    white-space: pre-line;
}

@media (prefers-reduced-motion: no-preference) {
    .eb-option-reveal {
        animation: ebOptionReveal 0.28s ease both;
    }

    @keyframes ebOptionReveal {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Größen-/Varianten-Gruppe im Bestell-Popup (.eb-option-size).

   Die Gruppe steht immer ganz oben (item-options.blade.php sortiert sie
   dorthin) und soll sich vom Rest abheben: hier fällt die Entscheidung
   über Preis und Variante, das ist kein Extra. Dezent umgesetzt als
   eigener Block mit Rahmen und ruhigem Hintergrund, dazu größere
   Auswahlflächen und der Preis pro Größe direkt an der Auswahl.
   Tokens kommen aus menudesign/menus.css (:root), mit Fallbacks.
   ───────────────────────────────────────────────────────────────────── */

.eb-item-modal .menu-option.eb-option-size {
    border: 1px solid var(--eb-border-strong, #d4dce2);
    border-radius: var(--eb-radius-sm, 14px);
    background: var(--eb-bg-soft, #f5f7fa);
    padding: 12px 14px 6px;
    margin-bottom: 18px;
}

.eb-item-modal .eb-option-size .option-details h5 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eb-text-soft, #5a6b75);
    margin-bottom: 2px;
}

.eb-item-modal .eb-option-size .eb-option-size__hint {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--eb-text-muted, #8a96a0);
    margin: 0 0 10px;
}

/* Jede Größe ist eine eigene Fläche: bequem zu treffen, Preis rechts. */
.eb-item-modal .eb-option-size .option-group .form-check {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: var(--eb-tap, 44px);
    margin-bottom: 8px;
    padding: 4px 12px 4px 38px;
    background: var(--eb-bg, #fff);
    border: 1px solid var(--eb-border, #e6ebef);
    border-radius: var(--eb-radius-sm, 14px);
}

.eb-item-modal .eb-option-size .option-group .form-check:last-child {
    margin-bottom: 10px;
}

.eb-item-modal .eb-option-size .option-group .form-check-input {
    margin-left: -26px;
    flex: 0 0 auto;
}

.eb-item-modal .eb-option-size .option-group .form-check-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    padding: 10px 0;
    cursor: pointer;
}

.eb-item-modal .eb-option-size .option-group .form-check-label .float-end {
    font-weight: 700;
    color: var(--eb-text, #1f1f1f);
}

/* Gewählte Größe: ruhig markiert, kein Farbgewitter. */
.eb-item-modal .eb-option-size .option-group .form-check:has(.form-check-input:checked) {
    border-color: var(--eb-blue, #299fd1);
    box-shadow: 0 0 0 1px var(--eb-blue, #299fd1) inset;
}

/* select-Darstellung (falls eine Größen-Gruppe mal als Liste erscheint) */
.eb-item-modal .eb-option-size .option-group select {
    min-height: var(--eb-tap, 44px);
    margin-bottom: 10px;
}