/*
 * eatbase Liefer-Check im Warenkorb
 * ---------------------------------------------------------------------------
 * Warenkorb-Aufbau vom 05.11.2026: statt einer eigenen Liefer-Karte gibt es
 *   .eb-ot    Umschalter Liefern/Abholen im Kopf (Box und Handy-Blatt)
 *   .eb-ctx   eine Adresszeile, nur bei Lieferung
 *   .eb-goal  genau ein Ziel im festen Fuß (Mindestwert, Aktion, Gratis)
 *   .eb-dgf   das Adressformular (unverändert)
 *   .eb-dg-strip  die Handy-Leiste über dem Warenkorb-Knopf
 *
 * Farben der Ziele: Bernstein = noch nicht bestellbar (Mindestwert),
 * Grün = Bonus (Gratis-Lieferung), Aktionen in ihren eigenen Farben (--pc-*).
 * Markenfarbe über --eb-blue (Pro-Markenfarbe überschreibt sie im Kopf).
 */

:root {
    --eb-dg-brand: var(--eb-blue, var(--bs-primary, #299fd1));
    --eb-dg-min: #b45309;
    --eb-dg-min-bar: #d97706;
    --eb-dg-min-soft: #fff7e6;
    --eb-dg-min-line: #fde3a7;
    --eb-dg-free: #15803d;
    --eb-dg-free-soft: #effaf3;
    --eb-dg-out: #b42318;
    --eb-dg-out-soft: #fef2f0;
    --eb-dg-ink: #1f2937;
    --eb-dg-muted: #6b7280;
    --eb-dg-line: #e5e7eb;
    --eb-dg-chip: #eef2f5;
}

/* ── Umschalter Liefern/Abholen ────────────────────────────────────────── */

.eb-ot {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--eb-dg-chip);
}

.eb-ot__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--eb-dg-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.eb-ot__opt i { font-size: 12px; }

.eb-ot__opt:hover { color: var(--eb-dg-ink); }

.eb-ot__opt[aria-pressed="true"] {
    background: #fff;
    color: var(--eb-dg-brand);
    box-shadow: 0 1px 3px rgba(15, 30, 45, 0.14);
    cursor: default;
}

.eb-ot__opt:focus-visible {
    outline: 2px solid var(--eb-dg-brand);
    outline-offset: 1px;
}

/* Während des Wechsels: Umschalter steht schon auf der neuen Bestellart
   (deliverygate.js), nur die Beträge im Fuß sind kurz blass, bis die Box
   neu gezeichnet ist. Bei Abholung verschwindet die Adresszeile sofort. */
html[data-eb-ot-busy="1"] [data-eb-ot] { pointer-events: none; }
html[data-eb-ot-busy="1"] #eb-cart-foot,
html[data-eb-ot-busy="1"] .eb-dg-strip {
    opacity: 0.55;
    transition: opacity 0.15s ease 0.08s;
}
html[data-eb-ot-wechsel="collection"] .eb-ctx { display: none; }

/* ── Adresszeile (nur Lieferung) ───────────────────────────────────────── */

.eb-ctx {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 0;
    border-radius: 12px;
    background: #f3f6f8;
    color: var(--eb-dg-ink);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.eb-ctx:hover { background: #ebf0f3; }

.eb-ctx:focus-visible {
    outline: 2px solid var(--eb-dg-brand);
    outline-offset: 1px;
}

.eb-ctx__pin { flex: 0 0 auto; color: var(--eb-dg-muted); }

.eb-ctx__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.eb-ctx__main {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eb-ctx__muted { font-weight: 500; color: var(--eb-dg-muted); }

.eb-ctx__sub {
    font-size: 12px;
    color: var(--eb-dg-muted);
}

.eb-ctx__sub--out { color: var(--eb-dg-out); font-weight: 600; }

.eb-ctx__go {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--eb-dg-brand);
}

/* Noch keine Adresse: die Zeile ist die Aufforderung. */
.eb-ctx--need {
    background: color-mix(in srgb, var(--eb-dg-brand) 10%, #fff);
}
.eb-ctx--need:hover { background: color-mix(in srgb, var(--eb-dg-brand) 15%, #fff); }
.eb-ctx--need .eb-ctx__pin,
.eb-ctx--need .eb-ctx__main { color: var(--eb-dg-brand); }

.eb-ctx--out { background: var(--eb-dg-out-soft); }
.eb-ctx--out .eb-ctx__pin { color: var(--eb-dg-out); }

/* Formular offen? Dann ist es direkt unter der Zeile. */
.eb-ctx + div .eb-dgf { margin-top: -4px; }

/* ── Ziel im Fuß: genau eins ───────────────────────────────────────────── */

.eb-goal {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 10px;
    padding: 9px 12px;
    border-radius: 12px;
    background: #f3f6f8;
    font-size: 13px;
    line-height: 1.35;
    color: var(--eb-dg-ink);
}

.eb-goal__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.eb-goal__icon,
.eb-goal__emoji { flex: 0 0 auto; }

.eb-goal__emoji { font-size: 16px; line-height: 1; }

.eb-goal__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--eb-dg-line);
    border-radius: 999px;
    background: #fff;
    color: var(--eb-dg-brand);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.eb-goal__btn:hover { border-color: var(--eb-dg-brand); }

.eb-goal__btn:focus-visible {
    outline: 2px solid var(--eb-dg-brand);
    outline-offset: 1px;
}

.eb-goal__bar {
    height: 5px;
    border-radius: 999px;
    background: rgba(15, 30, 45, 0.1);
    overflow: hidden;
}

.eb-goal__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.eb-goal--mindest { background: var(--eb-dg-min-soft); }
.eb-goal--mindest strong { color: var(--eb-dg-min); }
.eb-goal--mindest .eb-goal__bar { background: var(--eb-dg-min-line); }
.eb-goal--mindest .eb-goal__bar > span { background: linear-gradient(90deg, #f59e0b, var(--eb-dg-min-bar)); }

.eb-goal--gratis,
.eb-goal--gratis_erreicht { background: var(--eb-dg-free-soft); }
.eb-goal--gratis strong { color: var(--eb-dg-free); }
.eb-goal--gratis .eb-goal__bar > span { background: linear-gradient(90deg, #22c55e, var(--eb-dg-free)); }
.eb-goal--gratis_erreicht { color: var(--eb-dg-free); font-weight: 600; }

.eb-goal--ausserhalb { background: var(--eb-dg-out-soft); color: var(--eb-dg-out); font-weight: 600; }

/* Aktionen in ihren eigenen Farben (ShowcaseService liefert --pc-*). */
.eb-goal--aktion,
.eb-goal--aktion_erreicht { background: var(--pc-soft, #f4effc); color: var(--pc-ink, #1f2937); }
.eb-goal--aktion .eb-goal__bar > span { background: linear-gradient(90deg, var(--pc-a, #8b5cf6), var(--pc-b, #6d28d9)); }
.eb-goal--aktion_erreicht .eb-goal__btn {
    border-color: transparent;
    background: var(--pc-a, #8b5cf6);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .eb-goal__bar > span,
    .eb-dg-strip__bar > span { transition: none; }
}

/* ═══ Adressformular ═══════════════════════════════════════════════════ */

.eb-dgf {
    --eb-dgf-line: #e5e7eb;
    --eb-dgf-ink: #1f2937;
    --eb-dgf-muted: #6b7280;

    margin: 0 0 1rem;
    padding: 0.875rem 1rem 1rem;
    border: 1px solid var(--eb-dgf-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.eb-dgf__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.eb-dgf__title {
    font-weight: 650;
    font-size: 0.9375rem;
    color: var(--eb-dgf-ink);
}

.eb-dgf__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--eb-dgf-muted);
    cursor: pointer;
}

.eb-dgf__close:hover { background: #f3f4f6; }

.eb-dgf__gps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.875rem;
    border: 1.5px solid var(--bs-primary, #299fd1);
    border-radius: 10px;
    background: #fff;
    color: var(--bs-primary, #299fd1);
    font-weight: 650;
    font-size: 0.875rem;
    cursor: pointer;
}

.eb-dgf__gps:hover { background: rgba(41, 159, 209, 0.07); }
.eb-dgf__gps.is-busy { opacity: 0.6; pointer-events: none; }

.eb-dgf__search {
    position: relative;
    margin-bottom: 0.625rem;
}

.eb-dgf__search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--eb-dgf-muted);
    font-size: 0.8125rem;
    pointer-events: none;
}

.eb-dgf__input {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--eb-dgf-line);
    border-radius: 10px;
    background: #fff;
    color: var(--eb-dgf-ink);
    /* 16px verhindert das Auto-Zoomen mobiler Browser beim Fokus. */
    font-size: 16px;
    line-height: 1.3;
}

.eb-dgf__input:focus {
    outline: 0;
    border-color: var(--bs-primary, #299fd1);
    box-shadow: 0 0 0 3px rgba(41, 159, 209, 0.15);
}

.eb-dgf__input--search { padding-left: 2.25rem; }

.eb-dgf__spinner {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid var(--eb-dgf-line);
    border-top-color: var(--bs-primary, #299fd1);
    border-radius: 50%;
    animation: eb-dgf-spin 0.7s linear infinite;
}

@keyframes eb-dgf-spin { to { transform: rotate(360deg); } }

.eb-dgf__suggestions {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.25rem;
    border: 1px solid var(--eb-dgf-line);
    border-radius: 10px;
    background: #fff;
    max-height: 240px;
    overflow-y: auto;
}

.eb-dgf__suggestions button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.eb-dgf__suggestions button:hover { background: #f3f4f6; }

.eb-dgf__sug-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--eb-dgf-ink);
    line-height: 1.35;
}

.eb-dgf__sug-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--eb-dgf-muted);
    line-height: 1.35;
}

.eb-dgf__confirm {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #b45309;
}

/* Vier Felder: Straße + Nr. in einer Reihe, PLZ + Ort darunter.
   Schmal sind die kurzen Felder (Nr., fünfstellige PLZ), den Rest bekommen
   Straße und Ort. Vorher teilten sich beide Reihen dieselben Spalten, die
   PLZ stand dadurch breit und der Ort gequetscht daneben. */
.eb-dgf__grid {
    display: grid;
    grid-template-columns: 5.5rem 1fr 4.5rem;
    grid-template-areas:
        "street street no"
        "zip    city   city";
    gap: 0.5rem;
}

.eb-dgf__field { min-width: 0; }
.eb-dgf__field--street { grid-area: street; }
.eb-dgf__field--no     { grid-area: no; }
.eb-dgf__field--zip    { grid-area: zip; }
.eb-dgf__field--city   { grid-area: city; }

.eb-dgf__field label {
    display: block;
    margin-bottom: 0.1875rem;
    font-size: 0.6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--eb-dgf-muted);
}

.eb-dgf__consent {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 10px;
    background: rgba(41, 159, 209, 0.08);
    font-size: 0.75rem;
    color: var(--eb-dgf-ink);
    line-height: 1.4;
}

.eb-dgf__consent > i { flex: 0 0 auto; color: var(--bs-primary, #299fd1); }

.eb-dgf__consent-text { flex: 1 1 auto; min-width: 0; }

.eb-dgf__consent-text a { color: var(--eb-dgf-muted); white-space: nowrap; }

.eb-dgf__consent-btn {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--bs-primary, #299fd1);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.eb-dgf__error {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.eb-dgf__submit {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 0.875rem;
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--bs-primary, #299fd1);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.eb-dgf__submit:hover { filter: brightness(0.94); }
.eb-dgf__submit:disabled { opacity: 0.65; cursor: default; }

.eb-dgf__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
}

.eb-dgf__actions .eb-dgf__submit { flex: 1 1 auto; margin-top: 0; }

.eb-dgf__cancel {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 0.875rem;
    border: 0;
    background: transparent;
    color: var(--eb-dgf-muted);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

/* ── Kompakt im Warenkorb (Marc, 05.11.2026: „zu fett") ──────────────────
   Nur im Warenkorb, die Kasse (.eb-dgf--inline) bleibt wie sie ist.
   Standort als kleiner Link im Kopf statt eigenem Knopf, Beschriftungen als
   Platzhalter (für Screenreader bleiben die Labels), niedrigere Felder,
   kein Schatten. Von ~380 auf ~250 px Höhe. */
.eb-dgf:not(.eb-dgf--inline) {
    margin: 0 0 12px;
    padding: 10px 12px 12px;
    border-radius: 12px;
    box-shadow: none;
}
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__head { margin-bottom: 8px; gap: 4px; }
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__title { font-size: 14px; margin-right: auto; }
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__close { width: 28px; height: 28px; }

.eb-dgf__gps--klein {
    display: inline-flex;
    width: auto;
    min-height: 28px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
}
.eb-dgf__gps--klein:hover { background: rgba(41, 159, 209, 0.08); }

.eb-dgf:not(.eb-dgf--inline) .eb-dgf__input {
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 15px;
}
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__input--search { padding-left: 2.1rem; }
/* Touch-Geräte: 16px, sonst zoomt iOS beim Antippen ins Feld. */
@media (pointer: coarse) {
    .eb-dgf:not(.eb-dgf--inline) .eb-dgf__input { font-size: 16px; }
}
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__input::placeholder { color: #9ca3af; }
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__search { margin-bottom: 8px; }
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__grid { gap: 8px; }
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__field label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__consent { margin-bottom: 8px; padding: 6px 8px; }
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__actions { margin-top: 10px; }
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__submit,
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__cancel {
    min-height: 40px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 14px;
}
.eb-dgf:not(.eb-dgf--inline) .eb-dgf__error { margin-top: 8px; }

/* Checkout: liegt schon in einer Karte, also ohne eigenen Rahmen. */
.eb-dgf--inline {
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    scroll-margin-top: 80px;
}

/* ── Mobile Leiste über dem Warenkorb-Button ───────────────────────────── */

/*
 * Schwebt als eigene Pille direkt über dem runden Warenkorb-Button
 * (.eb-mobile-cart: bottom 12px, Höhe ca. 52px). Gleiche Formensprache,
 * damit es wie ein Element wirkt und nicht wie ein aufgesetzter Balken.
 */
.eb-dg-strip {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    z-index: 1039;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(15, 30, 45, 0.10);
    font-size: 0.8125rem;
    line-height: 1.3;
    color: #1f2937;
}

/* Warenkorb-Offcanvas offen? Dann verdeckt die Pille nur, wie beim Button. */
body:has(.eb-cart-offcanvas.show) .eb-dg-strip { display: none !important; }

/* Platzhalter-Wurzel, wenn es gerade nichts anzuzeigen gibt. */
.eb-dg-strip--off { display: none !important; }

.eb-dg-strip__bar {
    flex: 0 0 64px;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.eb-dg-strip__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.eb-dg-strip--mindest .eb-dg-strip__bar > span { background: linear-gradient(90deg, #f59e0b, #d97706); }
.eb-dg-strip--gratis .eb-dg-strip__bar > span { background: linear-gradient(90deg, #22c55e, #15803d); }
.eb-dg-strip--aktion .eb-dg-strip__bar > span { background: linear-gradient(90deg, var(--pc-a, #8b5cf6), var(--pc-b, #6d28d9)); }
.eb-dg-strip--mindest strong { color: #b45309; }
.eb-dg-strip--gratis strong { color: #15803d; }
.eb-dg-strip--ausserhalb { color: var(--eb-dg-out); font-weight: 600; }

.eb-dg-strip__text {
    flex: 1 1 auto;
    min-width: 0;
}

.eb-dg-strip__emoji { flex: 0 0 auto; font-size: 16px; line-height: 1; }

/* Mit Knopf (Abholen / Dazulegen) wird die Leiste eine Spur höher und der
   Knopf sitzt rechts innen, wie ein Chip. */
.eb-dg-strip:has(.eb-dg-strip__btn) { padding-right: 0.375rem; }
.eb-dg-strip:has(.eb-dg-strip__btn) .eb-dg-strip__bar { flex-basis: 44px; }

.eb-dg-strip__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--eb-dg-brand);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.eb-dg-strip--aktion_erreicht .eb-dg-strip__btn { background: var(--pc-a, var(--eb-dg-brand)); }

.eb-dg-strip__btn:focus-visible {
    outline: 2px solid var(--eb-dg-ink);
    outline-offset: 2px;
}

@media (min-width: 992px) {
    .eb-dg-strip { display: none; }
}