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

/* ═══ 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, mobil-first: Straße + Nr. in einer Reihe, PLZ + Ort darunter. */
.eb-dgf__grid {
    display: grid;
    grid-template-columns: 1fr 84px;
    gap: 0.5rem;
}

.eb-dgf__field--street { grid-column: 1; }
.eb-dgf__field--no     { grid-column: 2; }
.eb-dgf__field--zip    { grid-column: 1; }
.eb-dgf__field--city   { grid-column: 2; }

/* Ab kleinen Tablets bekommen PLZ und Ort ein sinnvolleres Verhältnis. */
@media (min-width: 400px) {
    .eb-dgf__grid { grid-template-columns: 1fr 96px; }
    .eb-dgf__field--zip  { grid-column: 1 / 2; }
    .eb-dgf__field--city { grid-column: 2 / 3; }
}

.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 {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--eb-dgf-muted);
    line-height: 1.45;
}

.eb-dgf__consent i { margin-right: 0.25rem; }

.eb-dgf__consent button {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--bs-primary, #299fd1);
    font-size: inherit;
    font-weight: 650;
    text-decoration: underline;
    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; }

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