/*
 * eatbase Liefer-Check
 * ---------------------------------------------------------------------------
 * Warenkorb-Karte (Mindestbestellwert / Gratis-Lieferung) + Adressformular.
 *
 * Farbschema bewusst zweistufig, damit der Gast sieht, dass er in einen
 * anderen Abschnitt gesprungen ist:
 *   Stufe 1  Mindestbestellwert  → Bernstein  (noch nicht bestellbar)
 *   Stufe 2  Gratis-Lieferung    → Grün       (bestellbar, jetzt Bonus)
 *
 * Alles scoped unter .eb-dg / .eb-dgf, keine Bootstrap-Klassen überschrieben.
 */

.eb-dg {
    --eb-dg-radius: 14px;
    --eb-dg-min: #d97706;
    --eb-dg-min-soft: #fffbeb;
    --eb-dg-min-line: #fde68a;
    --eb-dg-free: #15803d;
    --eb-dg-free-soft: #f0fdf4;
    --eb-dg-free-line: #bbf7d0;
    --eb-dg-ink: #1f2937;
    --eb-dg-muted: #6b7280;
    --eb-dg-line: #e5e7eb;

    margin: 1rem 0;
}

.eb-dg__card {
    border: 1px solid var(--eb-dg-line);
    border-radius: var(--eb-dg-radius);
    padding: 0.875rem 1rem;
    background: #fff;
}

.eb-dg__card--intro {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.eb-dg__card--blocked {
    border-color: var(--eb-dg-min-line);
    background: var(--eb-dg-min-soft);
}

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */

.eb-dg__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.eb-dg__icon {
    font-size: 1.125rem;
    line-height: 1;
    flex: 0 0 auto;
}

.eb-dg__title {
    font-weight: 650;
    font-size: 0.9375rem;
    color: var(--eb-dg-ink);
    line-height: 1.3;
}

/* ── Eckdaten ohne Adresse ─────────────────────────────────────────────── */

.eb-dg__facts {
    list-style: none;
    margin: 0 0 0.625rem;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.eb-dg__facts li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.eb-dg__fact-label {
    color: var(--eb-dg-muted);
}

.eb-dg__fact-value {
    font-weight: 650;
    color: var(--eb-dg-ink);
    text-align: right;
}

.eb-dg__hint {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    color: var(--eb-dg-muted);
    line-height: 1.45;
}

/* ── Hauptaktion ───────────────────────────────────────────────────────── */

.eb-dg__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 46px;
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: 10px;
    background: var(--bs-primary, #299fd1);
    color: #fff;
    font-weight: 650;
    font-size: 0.9375rem;
    line-height: 1.2;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.05s ease;
}

.eb-dg__cta:hover { filter: brightness(0.94); }
.eb-dg__cta:active { transform: translateY(1px); }

/* Formular offen? Dann ist der Einstiegs-Button darüber nur noch Doppelung.
   Die Eckdaten der Karte bleiben sichtbar, nur der Knopf verschwindet. */
body:has(.eb-dgf) .eb-dg__cta { display: none; }
body:has(.eb-dgf) .eb-dg__card--intro { margin-bottom: 0.5rem; }

/* ── Adresszeile ───────────────────────────────────────────────────────── */

.eb-dg__addr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--eb-dg-line);
    border-radius: 10px;
    background: #f9fafb;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}

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

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

.eb-dg__addr-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--eb-dg-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eb-dg__addr-edit {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--bs-primary, #299fd1);
    text-decoration: underline;
}

/* ── Fortschritt ───────────────────────────────────────────────────────── */

.eb-dg__step { margin-top: 0.125rem; }

.eb-dg__step-text {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin-bottom: 0.4375rem;
    color: var(--eb-dg-ink);
}

.eb-dg__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--eb-dg-line);
    overflow: hidden;
}

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

.eb-dg__step--min .eb-dg__step-text strong { color: var(--eb-dg-min); }
.eb-dg__step--min .eb-dg__bar { background: var(--eb-dg-min-line); }
.eb-dg__step--min .eb-dg__bar > span {
    background: linear-gradient(90deg, #f59e0b, var(--eb-dg-min));
}

.eb-dg__step--free .eb-dg__step-text strong { color: var(--eb-dg-free); }
.eb-dg__step--free .eb-dg__bar { background: var(--eb-dg-free-line); }
.eb-dg__step--free .eb-dg__bar > span {
    background: linear-gradient(90deg, #22c55e, var(--eb-dg-free));
}

.eb-dg__done {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.625rem;
    margin-bottom: 0.625rem;
    border-radius: 8px;
    background: var(--eb-dg-free-soft);
    color: var(--eb-dg-free);
    font-size: 0.8125rem;
    font-weight: 650;
}

.eb-dg__done:last-child { margin-bottom: 0; }

/* ── Abhol-Alternative ─────────────────────────────────────────────────── */

.eb-dg__actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.75rem;
}

.eb-dg__or {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--eb-dg-muted);
}

.eb-dg__alt {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    min-height: 42px;
    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.8125rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.eb-dg__alt:hover {
    background: var(--bs-primary, #299fd1);
    color: #fff;
}

/* Im festen Fuß des Warenkorbs, direkt über „Zur Kasse". */
.eb-dg__actions--foot {
    margin: 0 0 0.75rem;
}

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

/* 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--min .eb-dg-strip__bar > span { background: linear-gradient(90deg, #f59e0b, #d97706); }
.eb-dg-strip--free .eb-dg-strip__bar > span { background: linear-gradient(90deg, #22c55e, #15803d); }
.eb-dg-strip--min strong { color: #d97706; }
.eb-dg-strip--free strong { color: #15803d; }

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

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