/* ============================================================
   eatbase /reservation redesign — additive, layered on vendor.
   Alles unter .eb-resv gescoped → Deaktivieren der Extension
   stellt den Vendor-Look wieder her. Passt zum /menus-Design.
   ============================================================ */

.eb-resv, .eb-resv-page {
    --eb-blue:        #299fd1;
    --eb-blue-dark:   #217ea6;
    --eb-blue-light:  #58cdff;
    --eb-ink:         #1f1f1f;
    --eb-ink-soft:    #194a5f;
    --eb-text-soft:   #5a6b75;
    --eb-text-muted:  #8a96a0;
    --eb-bg:          #ffffff;
    --eb-bg-soft:     #f5f7fa;
    --eb-border:      #e6ebef;
    --eb-border-strong:#d4dce2;
    --eb-radius:      24px;
    --eb-radius-sm:   14px;
    --eb-radius-xs:   11px;
    --eb-shadow:      0 1px 2px rgba(15, 30, 45, 0.04);
    --eb-shadow-lg:   0 10px 34px rgba(33, 126, 166, 0.13), 0 1px 2px rgba(15,30,45,0.05);
    --eb-tap:         48px;
    /* Überschriften-Schrift exakt wie .eb-local-name in menudesign/menus.css.
       Fließtext bekommt bewusst KEINE eigene Schrift: er erbt die Theme-Schrift,
       genau wie auf der Speisekarten-Seite. */
    --eb-display:     'Roboto', 'Inter', system-ui, -apple-system, sans-serif;
}

.eb-resv {
    max-width: 640px;
    margin: 26px auto 0;
    color: var(--eb-ink);
}

/* ---------- Seiten-Header (Restaurant-Titel) ---------- */
.eb-resv-head { max-width: 640px; margin: 0 auto; padding-top: 24px; }
.eb-resv-head__card {
    position: relative;
    overflow: hidden;
    background: var(--eb-bg);
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius);
    box-shadow: var(--eb-shadow-lg);
    padding: 24px 26px;
}
.eb-resv-head__card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--eb-blue), var(--eb-blue-light));
}
.eb-resv-head__eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eb-blue-dark);
}
.eb-resv-head .panel-local { margin: 0; }
/* Typografie im Inhalt der Kachel bewusst NICHT überschreiben: Restaurantname,
   Öffnungsstatus, „Mehr Infos" und Adresse sollen exakt so aussehen wie auf der
   Speisekarten-Seite. Die dafür zuständigen Regeln (.eb-local-name,
   .eb-local-times__row, .panel-local a[data-bs-target="#localInfoModal"]) stehen
   ungescoped in menudesign/menus.css und gelten damit auch hier. */
@media (max-width: 480px) {
    .eb-resv-head { padding-top: 16px; }
    .eb-resv-head__card { padding: 18px 18px; border-radius: var(--eb-radius-sm); }
}

/* ---------- Hinweis-Box (Login) ---------- */
.eb-resv__notice {
    background: var(--eb-bg-soft);
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--eb-text-soft);
}
.eb-resv__notice a { color: var(--eb-blue-dark); font-weight: 600; }

/* ---------- Step-Indicator ---------- */
.eb-resv__steps {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0 0 18px;
}
.eb-resv__step {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 0;
    min-width: 0;
    color: var(--eb-text-muted);
    font-size: 13px;
    font-weight: 600;
}
.eb-resv__step:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--eb-border);
    margin-left: 3px;
}
.eb-resv__step-dot {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--eb-bg);
    border: 2px solid var(--eb-border-strong);
    color: var(--eb-text-muted);
    font-size: 13px;
    line-height: 1;
}
.eb-resv__step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-resv__step.is-active { color: var(--eb-ink-soft); }
.eb-resv__step.is-active .eb-resv__step-dot {
    background: var(--eb-blue);
    border-color: var(--eb-blue);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(41, 159, 209, 0.16);
}
.eb-resv__step.is-done { color: var(--eb-blue-dark); }
.eb-resv__step.is-done .eb-resv__step-dot {
    background: var(--eb-blue-dark);
    border-color: var(--eb-blue-dark);
    color: #fff;
}
.eb-resv__step.is-done:not(:last-child)::after,
.eb-resv__step.is-active:not(:last-child)::after { background: var(--eb-blue-light); }

@media (max-width: 480px) {
    .eb-resv__step-label { display: none; }
    .eb-resv__step { flex: 0 0 auto; }
    .eb-resv__step:not(:last-child)::after { min-width: 22px; }
    .eb-resv__steps { justify-content: center; }
}

/* ---------- Karte ---------- */
.eb-resv__card {
    background: var(--eb-bg);
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius);
    box-shadow: var(--eb-shadow-lg);
    padding: 22px;
}
@media (max-width: 480px) { .eb-resv__card { padding: 16px; border-radius: var(--eb-radius-sm); } }

/* Überschriften nach dem Rezept des Restaurantnamens in der Master-Kachel:
   Roboto 500, leicht negativer Buchstabenabstand, dieselbe Textfarbe — nur eine
   Stufe kleiner. 700/800 wären hier ohnehin künstlich fett gerendert, weil die
   selbst gehostete Roboto nur 400–500 mitbringt. */
.eb-resv__title {
    font-family: var(--eb-display);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 4px;
    color: var(--eb-ink);
}
.eb-resv__lead { color: var(--eb-text-soft); font-size: 15px; margin: 0 0 18px; }

/* ---------- Kalender (flatpickr inline) ---------- */
.eb-resv__calendar { margin-bottom: 18px; }
.eb-resv .flatpickr-calendar.inline {
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    padding: 8px 6px 10px;
}
.eb-resv .flatpickr-calendar.inline::before,
.eb-resv .flatpickr-calendar.inline::after { display: none; }
.eb-resv .flatpickr-rContainer,
.eb-resv .flatpickr-days,
.eb-resv .dayContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}
.eb-resv .flatpickr-month,
.eb-resv .flatpickr-current-month,
.eb-resv .flatpickr-monthDropdown-months { color: var(--eb-ink); font-weight: 700; }
.eb-resv .flatpickr-weekday { color: var(--eb-text-muted); font-weight: 600; }
.eb-resv .flatpickr-prev-month svg,
.eb-resv .flatpickr-next-month svg { fill: var(--eb-blue-dark); }
.eb-resv .flatpickr-prev-month:hover svg,
.eb-resv .flatpickr-next-month:hover svg { fill: var(--eb-blue); }

/* Kopfzeile: „Juni 2026" als Label + Monats-Pfeile.
   Jahr-Auswahl entfernt (Reservierung nur wenige Wochen im Voraus möglich),
   Monat als statischer Text (monthSelectorType: static). */
.eb-resv .flatpickr-current-month .cur-month { font-weight: 700; margin-right: 2px; }
/* Jahr nur anzeigen, nicht editierbar: Spinner-Pfeile weg, Eingabe gesperrt. */
.eb-resv .flatpickr-current-month .numInputWrapper .arrowUp,
.eb-resv .flatpickr-current-month .numInputWrapper .arrowDown { display: none; }
.eb-resv .flatpickr-current-month .numInputWrapper:hover { background: transparent; }
.eb-resv .flatpickr-current-month .numInput.cur-year {
    pointer-events: none;
    background: transparent;
    font-weight: 700;
    -moz-appearance: textfield;
    appearance: textfield;
    caret-color: transparent;
}
/* Monats-Pfeil am Rand des buchbaren Fensters: ausgrauen statt ausblenden. */
.eb-resv .flatpickr-prev-month.flatpickr-disabled,
.eb-resv .flatpickr-next-month.flatpickr-disabled {
    display: block;
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
.eb-resv .flatpickr-day {
    max-width: none;
    height: 42px;
    line-height: 42px;
    border-radius: var(--eb-radius-xs);
    color: var(--eb-ink);
    border: 1px solid transparent;
}
.eb-resv .flatpickr-day:hover { background: var(--eb-bg-soft); }
.eb-resv .flatpickr-day.today { border-color: var(--eb-blue-light); color: var(--eb-blue-dark); font-weight: 700; }
.eb-resv .flatpickr-day.selected,
.eb-resv .flatpickr-day.selected:hover {
    background: var(--eb-blue);
    border-color: var(--eb-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(41, 159, 209, 0.32);
}
.eb-resv .flatpickr-day.flatpickr-disabled,
.eb-resv .flatpickr-day.prevMonthDay,
.eb-resv .flatpickr-day.nextMonthDay { color: var(--eb-text-muted); opacity: 0.55; }

/* ---------- Picker-Felder (Gäste / Zeit) ---------- */
.eb-resv__picker-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 480px) { .eb-resv__picker-row { grid-template-columns: 1fr; } }
.eb-resv__field { margin-bottom: 12px; }

/* ---------- Form-Controls (floating labels) ---------- */
.eb-resv .form-control,
.eb-resv .form-select {
    border: 1.5px solid var(--eb-border-strong);
    border-radius: var(--eb-radius-sm);
    min-height: 58px;
    color: var(--eb-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.eb-resv textarea.form-control { min-height: 96px; }
.eb-resv .form-control:focus,
.eb-resv .form-select:focus {
    border-color: var(--eb-blue);
    box-shadow: 0 0 0 4px rgba(41, 159, 209, 0.15);
}
.eb-resv .form-floating > label { color: var(--eb-text-muted); padding-left: 16px; }
.eb-resv .form-control, .eb-resv .form-select { padding-left: 16px; padding-right: 16px; }
.eb-resv .form-control.is-invalid,
.eb-resv .form-select.is-invalid { border-color: #dc3545; }
.eb-resv .text-danger { font-size: 13px; margin-top: 4px; display: block; }

/* ---------- Telefon-Widget: EINE Box, Höhe wie die anderen Felder ---------- */
.eb-resv .form-control:has([data-control="country-code-picker"]) {
    min-height: 58px;
    padding: 8px 16px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.eb-resv .form-control:has([data-control="country-code-picker"]) > label {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    color: var(--eb-text-muted);
}
/* inneres Eingabefeld randlos/transparent (keine 2. Box) — aber NUR Rahmen/Höhe/
   vertikale Polsterung zurücksetzen. Die LINKE Polsterung setzt intl-tel-input
   per Inline-Style (Platz für Flagge + Vorwahl); ein padding:0 würde sie killen,
   dann beginnt die Nummer ganz links und überlappt das „+49". */
.eb-resv [data-control="country-code-picker"] {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.eb-resv .form-control:has([data-control="country-code-picker"]) .iti { width: 100%; display: block; }

/* ---------- Zusammenfassung (Schritt 3) ---------- */
.eb-resv__summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 16px 0 20px;
}
.eb-resv__summary-item {
    background: var(--eb-bg-soft);
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.eb-resv__summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--eb-text-muted);
    font-weight: 700;
}
.eb-resv__summary-value { font-size: 16px; font-weight: 600; color: var(--eb-ink); }

/* ---------- Gästedaten-Grid ---------- */
.eb-resv__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 480px) { .eb-resv__grid { grid-template-columns: 1fr; } }
.eb-resv__col { min-width: 0; }

/* ---------- Zeit-Slots (Schritt 2, 24h) ---------- */
.eb-resv__slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
    margin: 6px 0 4px;
}
.eb-resv__slot {
    appearance: none;
    border: 1.5px solid var(--eb-border-strong);
    background: var(--eb-bg);
    color: var(--eb-ink);
    border-radius: var(--eb-radius-sm);
    min-height: var(--eb-tap);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: rgba(41,159,209,0.18);
}
.eb-resv__slot:hover {
    border-color: var(--eb-blue);
    box-shadow: 0 6px 18px rgba(33,126,166,0.14);
    transform: translateY(-1px);
}
.eb-resv__slot:active { transform: scale(0.97); }
.eb-resv__slot.is-selected {
    background: var(--eb-blue);
    border-color: var(--eb-blue);
    color: #fff;
    box-shadow: 0 6px 18px rgba(41,159,209,0.34);
}
.eb-resv__slot.is-disabled {
    color: var(--eb-text-muted);
    background: var(--eb-bg-soft);
    border-color: var(--eb-border);
    text-decoration: line-through;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.eb-resv__empty { color: var(--eb-text-muted); padding: 20px 4px; text-align: center; grid-column: 1 / -1; }

/* ---------- Primär-Button ---------- */
.eb-resv__btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--eb-radius-sm);
    background: linear-gradient(135deg, var(--eb-blue) 0%, var(--eb-blue-dark) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    min-height: 54px;
    padding: 0 24px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(33, 126, 166, 0.28);
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.eb-resv__btn:hover { color: #fff; text-decoration: none; }
.eb-resv__btn:hover { filter: brightness(1.03); box-shadow: 0 10px 28px rgba(33,126,166,0.34); }
.eb-resv__btn:active { transform: translateY(1px) scale(0.995); }
.eb-resv__btn--block { width: 100%; margin-top: 6px; }

/* ---------- Zurück-Link ---------- */
.eb-resv__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px 4px 0;
    color: var(--eb-text-soft);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    /* funktioniert sowohl als <a> als auch als <button> (Zurück-Schritt) */
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.eb-resv__back:hover { color: var(--eb-blue-dark); }

/* ======================================================
   Erfolgs-/Bestätigungsseite (reservation-preview)
   ====================================================== */
.eb-resv--result { margin-top: 4px; }

/* ----- Anzahlungs-Banner ----- */
.eb-resv__banner {
    text-align: center;
    border-radius: var(--eb-radius);
    padding: 26px 24px;
    margin-bottom: 16px;
    box-shadow: var(--eb-shadow-lg);
    position: relative;
    overflow: hidden;
}
.eb-resv__banner--pay {
    background: linear-gradient(180deg, #f1f9fe 0%, #ffffff 60%);
    border: 1.5px solid var(--eb-blue-light);
}
.eb-resv__banner--ok {
    background: linear-gradient(180deg, #eefaf0 0%, #ffffff 60%);
    border: 1.5px solid #9bd7a6;
}
.eb-resv__banner-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
}
.eb-resv__banner--pay .eb-resv__banner-icon { background: rgba(41,159,209,0.12); }
.eb-resv__banner--ok .eb-resv__banner-icon { background: rgba(46,125,50,0.12); color: #2e7d32; }
.eb-resv__banner-title {
    font-family: var(--eb-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 6px;
}
.eb-resv__banner--pay .eb-resv__banner-title { color: var(--eb-blue-dark); }
.eb-resv__banner--ok .eb-resv__banner-title { color: #2e7d32; }
.eb-resv__banner-text { color: var(--eb-text-soft); font-size: 15px; max-width: 460px; margin: 0 auto 16px; }
.eb-resv__banner-hint { color: var(--eb-text-muted); font-size: 13px; margin: 10px 0 0; }
.eb-resv__paywarn {
    background: #fff7ed;
    border: 1px solid #f3c98b;
    color: #9a5b00;
    border-radius: var(--eb-radius-sm);
    padding: 11px 14px;
    font-size: 14px;
    max-width: 460px;
    margin: 0 auto 14px;
}
.eb-resv__terms {
    color: var(--eb-text-muted);
    font-size: 12px;
    line-height: 1.5;
    max-width: 520px;
    margin: 16px auto 0;
    padding-top: 14px;
    border-top: 1px solid var(--eb-border);
}

/* ----- Voucher-Code ----- */
.eb-resv__voucher {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 12px 22px;
    background: #fff;
    border: 1px dashed var(--eb-blue-light);
    border-radius: var(--eb-radius-sm);
}
.eb-resv__voucher-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-text-muted); }
.eb-resv__voucher-code { font-family: var(--eb-display); font-size: 26px; font-weight: 500; letter-spacing: 5px; color: var(--eb-ink-soft); font-variant-numeric: tabular-nums; }

/* ----- Ergebnis-Kopf (Nr. + Status) ----- */
.eb-resv__result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.eb-resv__result-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-text-muted); }
.eb-resv__result-head .eb-resv__title { margin: 2px 0 0; }
.eb-resv__status {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    background: rgba(255,255,255,0.6);
    white-space: nowrap;
}

/* ----- Detailblöcke ----- */
.eb-resv__details {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}
.eb-resv__detail {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    background: var(--eb-bg-soft);
    border: 1px solid var(--eb-border);
    border-radius: var(--eb-radius-sm);
}
.eb-resv__detail-value { font-size: 16px; font-weight: 600; color: var(--eb-ink); }
.eb-resv__detail-value--normal { font-weight: 500; }
.eb-resv__detail-sub { font-size: 14px; color: var(--eb-text-soft); }

/* ----- Stornieren ----- */
.eb-resv__cancel-row { text-align: center; margin-top: 16px; }
.eb-resv__cancel {
    appearance: none;
    background: transparent;
    border: 1.5px solid var(--eb-border-strong);
    color: #c0392b;
    border-radius: var(--eb-radius-sm);
    font-weight: 600;
    font-size: 15px;
    min-height: 46px;
    padding: 0 22px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.eb-resv__cancel:hover { border-color: #c0392b; background: #fdf3f2; }
.eb-resv__cancel.is-loading { opacity: 0.6; pointer-events: none; }

/* ---------- Alert-Modal Feinschliff ---------- */
.eb-resv ~ #booking-alert-modal .modal-content,
#booking-alert-modal .modal-content { border: none; border-radius: var(--eb-radius-sm, 14px); }