/* ============================================================
   eatbase Checkout-Redesign – additive Schicht über dem Vendor-
   Markup, gescoped unter .eb-checkout (Views: resources/views/
   vendor/igniter-orange/…/checkout/*). Gleiche Designsprache wie
   menus.css: --eb-* Variablen, 24px-Karten, Pill-Buttons. Die
   Variablen kommen aus menus.css (:root) und werden pro Restaurant
   von custom/mailbranding (StorefrontTheme) überschrieben – Farben
   hier deshalb NUR über var(--eb-*) bzw. color-mix daraus.
   ============================================================ */

/* ----- Seite ----- */
body:has(.eb-checkout) {
    background: var(--eb-bg-soft);
}

.eb-checkout {
    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 12px calc(56px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    .eb-checkout { padding: 28px 24px 72px; }
}

/* ----- Kopf ----- */
.eb-checkout__head { margin-bottom: 18px; }

.eb-checkout__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--eb-text-soft);
    text-decoration: none;
    transition: color 0.12s ease;
}

.eb-checkout__back:hover { color: var(--eb-blue-dark); }
.eb-checkout__back i { font-size: 12px; }

/* Restaurant-Logo + Titel nebeneinander */
.eb-checkout__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.eb-checkout__logo {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    padding: 5px;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    background: #fff;
    box-shadow: var(--eb-shadow);
    overflow: hidden;
}

.eb-checkout__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.eb-checkout__brand-text { min-width: 0; }

@media (min-width: 768px) {
    .eb-checkout__brand { gap: 16px; }
    .eb-checkout__logo { width: 72px; height: 72px; padding: 6px; }
}

/* Titel in der Display-Schrift des Local-Headers (Roboto, siehe menus.css) */
.eb-checkout__title {
    font-family: 'Roboto', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: 1.55rem;
    line-height: 1.2;
    color: var(--eb-text);
    margin: 0 0 2px;
}

@media (min-width: 768px) {
    .eb-checkout__title { font-size: 1.85rem; }
}

.eb-checkout__sub {
    font-size: 15px;
    color: var(--eb-text-soft);
    margin: 0;
}

.eb-checkout__auth {
    margin-top: 8px;
    font-size: 14px;
    color: var(--eb-text-soft);
}

.eb-checkout__auth a { color: var(--eb-blue-dark); font-weight: 600; }

/* ----- Grid: mobil 1 Spalte (Übersicht NACH dem Formular, Summe
   direkt über dem Button), ab lg Formular links + klebende
   Übersicht rechts ----- */
.eb-checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.eb-checkout__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    align-content: start;
}

.eb-checkout__aside { min-width: 0; }

@media (min-width: 992px) {
    .eb-checkout__grid {
        grid-template-columns: minmax(0, 1fr) 384px;
        gap: 20px;
        align-items: start;
    }
    .eb-checkout__aside {
        position: sticky;
        top: 20px;
    }

    /* Übersichtskarte nie höher als der Bildschirm: ist der Warenkorb zu
       lang, scrollt NUR die Positionsliste intern — Summen, Rechtshinweis
       und Bestellbutton bleiben immer im Blick. Bei kurzem Inhalt ändert
       sich nichts (Karte behält ihre natürliche Höhe). */
    .eb-checkout__aside .eb-co-summary {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
    }
    .eb-checkout__aside .eb-co-summary .eb-co-card__head { flex-shrink: 0; }
    .eb-checkout__aside .eb-co-summary .eb-co-card__body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .eb-checkout__aside .eb-co-summary .eb-co-card__body > * { flex-shrink: 0; }
    .eb-checkout__aside .eb-co-summary .eb-co-items {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-width: thin;
        scrollbar-color: var(--eb-border-strong) transparent;
    }
}

/* ----- Karte ----- */
.eb-co-card {
    background: var(--eb-bg);
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius);
    box-shadow: var(--eb-shadow);
    padding: 18px 16px;
}

@media (min-width: 768px) {
    .eb-co-card { padding: 22px; }
}

.eb-co-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.eb-co-card__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--eb-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--eb-blue-dark) 25%, transparent);
}

.eb-co-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--eb-text);
    margin: 0;
}

/* ----- Eingabefelder (Floating Labels, Selects, Textareas) ----- */
.eb-checkout .form-control,
.eb-checkout .form-select {
    border-radius: var(--eb-radius-sm);
    border-color: var(--eb-border-strong);
    color: var(--eb-text);
}

/* 16px verhindert den Auto-Zoom von iOS-Safari beim Fokussieren */
.eb-checkout input.form-control,
.eb-checkout select.form-select,
.eb-checkout textarea.form-control {
    font-size: 16px;
}

.eb-checkout .form-control:focus,
.eb-checkout .form-select:focus {
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-blue) 18%, transparent);
}

.eb-checkout .form-floating > label { color: var(--eb-text-muted); }

.eb-checkout .form-floating > textarea.form-control { height: 96px; }

/* Telefon-Widget: äußere Hülle trägt die .form-control-Optik, das
   innere Eingabefeld darf keinen zweiten Rahmen/Fokusring zeichnen */
.eb-checkout .form-control .form-control {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* ----- Radios & Checkboxen in Markenfarbe ----- */
.eb-checkout .form-check-input {
    width: 1.25em;
    height: 1.25em;
    border-color: var(--eb-border-strong);
    flex-shrink: 0;
}

.eb-checkout .form-check-input:checked {
    background-color: var(--eb-blue);
    border-color: var(--eb-blue);
}

.eb-checkout .form-check-input:focus {
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-blue) 18%, transparent);
}

/* ----- Karte 2: Bestellart / Zeit / Adresse (eigenes Inline-Markup in
   resources/views/vendor/igniter-orange/livewire/fulfillment-modal.blade.php,
   Segmented Controls statt TI-Radiolisten) ----- */
.eb-checkout #checkout-fulfillment .border { border-color: var(--eb-border) !important; }
.eb-checkout #checkout-fulfillment .rounded { border-radius: var(--eb-radius-sm) !important; }

.eb-checkout #checkout-fulfillment h6 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--eb-text-soft);
    margin: 20px 0 8px;
}

/* Nur die ALLERERSTE Überschrift der Karte („Bestellart", direktes Kind
   des Widget-Roots mit data-map-key) ohne Top-Abstand — die Adress-
   Überschrift ist ebenfalls :first-child ihres Wrappers und braucht ihn. */
.eb-checkout #checkout-fulfillment [data-map-key] > h6:first-child { margin-top: 0; }

.eb-checkout #checkout-fulfillment h6 i { color: var(--eb-blue); }

/* Segmented Control: Kacheln nebeneinander, Radio unsichtbar im Label.
   Gewählt-Zustand über :has(:checked) — reagiert sofort beim Tippen,
   auch wenn (wie bei isAsap) kein Server-Roundtrip folgt. */
.eb-seg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}

.eb-seg__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 13px 8px 11px;
    border: 1.5px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    background: #fff;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.eb-seg__opt:hover { border-color: var(--eb-border-strong); }

.eb-seg__opt:active { transform: scale(0.985); }

.eb-seg__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Icon-Chip: farbige App-Icon-Kachel statt grauem Piktogramm. Jede Option
   hat einen festen Akzentton (--tone*, unabhängig von der Markenfarbe);
   im gewählten Zustand füllt sich der Chip satt mit weißem Icon. */
.eb-seg__icon {
    --tone: var(--eb-text-muted);
    --tone-soft: var(--eb-bg-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 16px;
    background: var(--tone-soft);
    color: var(--tone);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.eb-seg__icon--blue   { --tone: #1e88d9; --tone-soft: #e3f1fb; }
.eb-seg__icon--orange { --tone: #f4700c; --tone-soft: #fdeede; }
.eb-seg__icon--amber  { --tone: #e79b09; --tone-soft: #fdf3d7; }
.eb-seg__icon--violet { --tone: #7c3aed; --tone-soft: #f1eafc; }

.eb-seg__opt:has(.eb-seg__input:checked) .eb-seg__icon {
    background: var(--tone);
    color: #fff;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--tone) 35%, transparent);
    transform: scale(1.05);
}

.eb-seg__label {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--eb-text-soft);
    overflow-wrap: anywhere;
    transition: color 0.15s ease;
}

.eb-seg__opt:has(.eb-seg__input:checked) {
    border-color: var(--eb-blue);
    background: color-mix(in srgb, var(--eb-blue) 6%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-blue) 12%, transparent);
}

.eb-seg__opt:has(.eb-seg__input:checked) .eb-seg__label { color: var(--eb-blue-dark); }

.eb-seg__opt:has(.eb-seg__input:focus-visible) {
    outline: 2px solid var(--eb-blue);
    outline-offset: 2px;
}

.eb-seg__opt:has(.eb-seg__input:disabled) {
    opacity: 0.55;
    pointer-events: none;
}

/* Bestätigte Lieferadresse: Zeile mit „ändern"-Pille */
.eb-addr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    background: #fff;
}

/* Bis zu zwei Zeilen: echte Adressen bleiben einzeilig, der
   „Bitte Adresse eingeben…"-Hinweis wird nicht abgeschnitten. */
.eb-addr__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--eb-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.eb-addr__change {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--eb-bg-soft);
    font-size: 13px;
    font-weight: 600;
    color: var(--eb-blue-dark);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.eb-addr__change:hover {
    background: var(--eb-blue);
    color: #fff;
}

/* Adresssuche: Eingabefeld + Standort-Button in einer Pille */
.eb-addr-search {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1.5px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eb-addr-search:focus-within {
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-blue) 18%, transparent);
}

.eb-addr-search__input.form-control {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.eb-addr-search__input.form-control:focus {
    border: none;
    box-shadow: none;
}

.eb-addr-search__locate {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: var(--eb-bg-soft);
    color: var(--eb-blue-dark);
    font-size: 15px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.eb-addr-search__locate:hover {
    background: var(--eb-blue);
    color: #fff;
}

/* „Bestätigen" ist ein Zwischenschritt, kein Haupt-CTA: soft statt voll */
.eb-checkout #checkout-fulfillment button.btn-primary {
    background: var(--eb-bg-soft);
    background: color-mix(in srgb, var(--eb-blue) 12%, #fff);
    color: var(--eb-blue-dark);
    border: none;
    border-radius: 999px;
    font-weight: 600;
    padding: 11px 18px;
    transition: background 0.15s ease, color 0.15s ease;
}

.eb-checkout #checkout-fulfillment button.btn-primary:hover {
    background: var(--eb-blue);
    color: #fff;
}

.eb-checkout #checkout-fulfillment .btn-outline-secondary {
    border-radius: 999px;
    font-weight: 600;
}

/* ----- Anmerkung (eingeklappt, optional) ----- */
.eb-co-note {
    margin-top: 16px;
    padding-top: 6px;
    border-top: 1px solid var(--eb-border);
}

.eb-co-note__toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--eb-text-soft);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.eb-co-note__toggle::-webkit-details-marker { display: none; }

.eb-co-note__toggle .fa-pen { color: var(--eb-blue); font-size: 12px; }

.eb-co-note__optional { font-weight: 400; color: var(--eb-text-muted); }

.eb-co-note__chev {
    margin-left: auto;
    font-size: 11px;
    color: var(--eb-text-muted);
    transition: transform 0.18s ease;
}

.eb-co-note[open] .eb-co-note__chev { transform: rotate(180deg); }

.eb-co-note__body { padding: 4px 0 6px; }

/* ----- Karte 3: Zahlungsarten als wählbare Karten ----- */
.eb-pay {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.eb-pay__option {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.eb-pay__option:hover { border-color: var(--eb-border-strong); }

.eb-pay__option--selected,
.eb-pay__option--selected:hover {
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-blue) 14%, transparent);
    background: color-mix(in srgb, var(--eb-blue) 4%, #fff);
}

.eb-pay__option--disabled { opacity: 0.55; pointer-events: none; }

.eb-pay__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eb-pay__input:focus-visible + .eb-pay__label {
    outline: 2px solid var(--eb-blue);
    outline-offset: 2px;
    border-radius: var(--eb-radius-sm);
}

.eb-pay__label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 13px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.eb-pay__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--eb-bg-soft);
    color: var(--eb-text-soft);
    font-size: 16px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.eb-pay__option--selected .eb-pay__icon {
    background: var(--eb-blue);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--eb-blue-dark) 28%, transparent);
}

.eb-pay__text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.eb-pay__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--eb-text);
    overflow-wrap: anywhere;
}

.eb-pay__desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--eb-text-soft);
    overflow-wrap: anywhere;
}

.eb-pay__desc--warn { color: #b06e00; }

.eb-pay__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 2px solid var(--eb-border-strong);
    border-radius: 50%;
    font-size: 10px;
    color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.eb-pay__option--selected .eb-pay__check {
    background: var(--eb-blue);
    border-color: var(--eb-blue);
    color: #fff;
}

.eb-pay__form { padding: 0 14px 14px; }

/* ----- Bestellübersicht ----- */
.eb-co-summary__head { justify-content: space-between; }

.eb-co-summary__edit {
    font-size: 13px;
    font-weight: 600;
    color: var(--eb-blue-dark);
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--eb-bg-soft);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.eb-co-summary__edit:hover {
    background: var(--eb-blue);
    color: #fff;
}

.eb-co-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.eb-co-items__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.eb-co-items__qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 7px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--eb-bg-soft);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--eb-text);
}

.eb-co-items__main { flex: 1 1 auto; min-width: 0; }

.eb-co-items__name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--eb-text);
    overflow-wrap: anywhere;
}

.eb-co-items__opts { margin-top: 2px; }
.eb-co-items__opts .small,
.eb-co-items__opts .eb-cart-opts { font-size: 12.5px; }

.eb-co-items__comment {
    margin-top: 4px;
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--eb-bg-soft);
    font-size: 12.5px;
    color: var(--eb-text-soft);
    overflow-wrap: anywhere;
}

.eb-co-items__price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--eb-text);
    white-space: nowrap;
}

/* Summenblock – der Gesamtbetrag ist bewusst die lauteste Zeile der
   Karte und steht unmittelbar über Rechtshinweis + Bestellbutton. */
.eb-co-totals {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--eb-border);
    display: grid;
    gap: 7px;
}

.eb-co-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.eb-co-totals__row dt {
    font-weight: 400;
    font-size: 14px;
    color: var(--eb-text-soft);
}

.eb-co-totals__row dd {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--eb-text);
    white-space: nowrap;
}

.eb-co-totals__row--total {
    margin-top: 5px;
    padding-top: 12px;
    border-top: 1px solid var(--eb-border);
}

.eb-co-totals__row--total dt {
    font-size: 16px;
    font-weight: 700;
    color: var(--eb-text);
}

.eb-co-totals__row--total dd {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Treueguthaben-Schalter (custom/loyalty bringt eigene Optik mit) */
.eb-checkout .eb-loyalty-redeem { margin-top: 14px; }

/* Rechtshinweis */
.eb-co-legal {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--eb-border);
}

.eb-co-legal .small { font-size: 12px; }
.eb-co-legal a { color: var(--eb-blue-dark); }

/* Bestellbutton – Haupt-CTA im Pill-Look der Speisekarte */
.eb-co-submit {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 15px 20px;
    min-height: 54px;
    border: none;
    border-radius: 999px;
    background: var(--eb-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--eb-blue-dark) 30%, transparent);
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.eb-co-submit:hover { background: var(--eb-blue-dark); color: #fff; }
.eb-co-submit:active { transform: translateY(1px); }

.eb-co-submit:focus-visible {
    outline: 2px solid var(--eb-blue-dark);
    outline-offset: 3px;
}

.eb-co-submit.disabled,
.eb-co-submit:disabled {
    opacity: 0.65;
    pointer-events: none;
}

/* ----- Fehlerbox ----- */
.eb-checkout .eb-co-alert {
    border-radius: var(--eb-radius-sm);
    margin: 0 0 14px;
}

/* ----- Sehr kleine Smartphones ----- */
@media (max-width: 380px) {
    .eb-checkout { padding-left: 10px; padding-right: 10px; }
    .eb-co-card { padding: 15px 13px; }
    .eb-checkout__title { font-size: 1.4rem; }
    .eb-pay__icon { width: 38px; height: 38px; }
}