/* ====================================================================
   info_modal.css · schlankere, zentrierte Dialoge
   ==================================================================== */

/* ── Dialog: nie breiter als 640 px, sonst 90 % des Viewports ──────── */
#bookingModal .modal-dialog,
#infoModal    .modal-dialog {
    width:       clamp(320px, 90vw, 640px) !important; /* min‑, flex‑, max‑Breite */
    margin:      3vh auto                  !important; /* oben/unten 3 % + zentriert */
    max-height:  94vh                      !important; /* Kopf-/Fußzeile sichtbar */
}

/* ── Inhalt: Frostglas + interner Rand ─────────────────────────────── */
#bookingModal .modal-content,
#infoModal    .modal-content {
    background-color: rgba(var(--surf-light-rgb, 255,255,255), 0.20) !important;
    backdrop-filter:         blur(12px) saturate(150%)               !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%)               !important;
    border:        1px solid rgba(255,255,255,0.35)                  !important;
    border-radius: var(--base-radius)                                !important;
    box-shadow:    none                                              !important;
    padding:       0 1.25rem                                         !important; /* seitliches Innen‑Padding */
}

/* ── Dark‑Mode ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] #bookingModal .modal-content,
[data-bs-theme="dark"] #infoModal    .modal-content {
    background-color: rgba(var(--surf-dark-rgb, 18,18,18), 0.30)     !important;
    border:        1px solid rgba(0,0,0,0.50)                        !important;
}

/* ── Header / Body / Footer ───────────────────────────────────────── */
#bookingModal .modal-header,
#infoModal    .modal-header,
#bookingModal .modal-body,
#infoModal    .modal-body,
#bookingModal .modal-footer,
#infoModal    .modal-footer {
    background-color: transparent                                   !important;
    border-color:     rgba(255,255,255,0.25)                         !important;
    padding:          0.75rem 0                                      !important; /* Seiten‑Padding steckt jetzt im .modal-content */
    color:            var(--base-clr-text)                           !important;
}

/* ── Titel ────────────────────────────────────────────────────────── */
#bookingModal .modal-title,
#infoModal    .modal-title {
    font-size:   1.25rem                                            !important;
    font-weight: 600                                                !important;
    color:       var(--base-clr-primary)                            !important;
}

/* ── Zusätzlicher Titel (Gastname) ───────────────────────────────── */
#infoGuestHeader {
    font-size:   1rem                                               !important;
    font-weight: 500                                                !important;
    margin-top:  0.25rem                                            !important;
    color:       var(--base-clr-text)                               !important;
}

/* ── Stärkerer Backdrop ───────────────────────────────────────────── */
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter:  blur(5px);
    -webkit-backdrop-filter: blur(5px);
}