/* ============================================================
   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;
    }
    /* Kleben und Deckeln passieren nur, wenn menudesign/sticky-cart.js
       gemessen hat, dass es passt (html[data-eb-cofit]). Ohne Attribut läuft
       die Karte normal mit der Seite — das ist auch der Zustand, wenn das
       Skript nie läuft, und damit der Zustand, in dem garantiert nichts
       abgeschnitten wird. Dieselbe Mechanik wie beim Warenkorb auf der
       Speisekarte, dort ausführlich kommentiert (menus.css). */
    html[data-eb-cofit="ok"] .eb-checkout__aside,
    html[data-eb-cofit="scroll"] .eb-checkout__aside {
        position: sticky;
        top: 20px;
    }

    /* Ist die Karte zu lang, scrollt NUR die Positionsliste intern — Summen,
       Rechtshinweis und Bestellbutton bleiben immer im Blick. Die Liste hat
       dabei eine Mindesthöhe: reicht der Platz dafür nicht, schaltet das
       Skript auf mitlaufend um, statt die Liste auf 0 px zu quetschen (so
       verschwand früher der Inhalt lautlos). */
    html[data-eb-cofit="scroll"] .eb-checkout__aside .eb-co-summary {
        display: flex;
        flex-direction: column;
        max-height: var(--eb-co-avail, calc(100dvh - 40px));
    }
    html[data-eb-cofit="scroll"] .eb-checkout__aside .eb-co-summary .eb-co-card__head { flex-shrink: 0; }
    html[data-eb-cofit="scroll"] .eb-checkout__aside .eb-co-summary .eb-co-card__body {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    html[data-eb-cofit="scroll"] .eb-checkout__aside .eb-co-summary .eb-co-card__body > * { flex-shrink: 0; }
    html[data-eb-cofit="scroll"] .eb-checkout__aside .eb-co-summary .eb-co-items {
        flex: 1 1 auto;
        min-height: 120px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: var(--eb-border-strong) transparent;
    }

    /* Kante als Hinweis, dass unter der Liste weitergeht — am Ende der Liste
       weg, sonst sähe die letzte Position abgeschnitten aus (data-eb-coend
       kommt aus menudesign/sticky-cart.js). */
    html[data-eb-cofit="scroll"] .eb-checkout__aside .eb-co-totals {
        position: relative;
    }
    html[data-eb-cofit="scroll"]:not([data-eb-coend="1"]) .eb-checkout__aside .eb-co-totals::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -20px;
        height: 20px;
        pointer-events: none;
        background: linear-gradient(to top, var(--eb-bg) 15%, rgba(255, 255, 255, 0));
    }
}

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