/*
 * 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;
}

/* Zusatz eines Auswahlwerts (z. B. „Ø 32 cm" an einer Größe), seit
   04.11.2026 direkt an der Zeile statt im Popup-Kopf. Nicht gewählt
   genau eine Zeile (abgeschnitten), gewählt der ganze Text. So sieht der
   Gast alle Unterschiede, ohne dass lange Texte die Auswahl aufblähen.
   Klartext mit Zeilenumbrüchen, deshalb pre-line. */
.eb-item-modal .eb-opt__add {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    white-space: pre-line;
    color: var(--eb-text-muted, #8a96a0);
}

.eb-item-modal .form-check:has(.form-check-input:checked) .eb-opt__add,
.eb-item-modal .eb-opt__add--select {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
    color: var(--eb-text-soft, #5a6b75);
}

.eb-item-modal .eb-opt__add--select {
    margin-top: 6px;
}

.eb-item-modal .eb-opt__add[hidden] {
    display: none;
}

/* Die Optionszeile ist ein Flex-Band (menus.css: Name, Preis rechts).
   Der Zusatz bekommt darunter eine eigene volle Zeile; der Größen-Hinweis
   aus custom.marketing („Nur 1,50 € mehr", order 3) bleibt darunter. */
/* Fünf Klassen wie die Zeilenregel in menus.css, sonst gewinnt deren gap. */
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check-label:has(.eb-opt__add) {
    flex-wrap: wrap;
    row-gap: 3px;
}

.eb-item-modal .option-group .form-check-label .eb-opt__add {
    order: 2;
    flex: 0 0 100%;
    min-width: 0;
}

/* Radio auf Höhe des Namens statt mittig über Name + Zusatz, sonst
   wandert er beim Aufklappen nach unten. Zeilenmitte = Label-Padding
   (10px) + halbe Zeilenhöhe (15px × 1,3 / 2). */
.eb-item-modal .eb-item-modal__options .menu-option .option-group .form-check:has(.eb-opt__add) .form-check-input {
    top: 19.75px;
}

@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;
}