/* Erweiterungen für Terminvergabe, Zugangscode und dauerhafte Anmeldung */
.booking-settings-card {
    margin-bottom: 22px;
}

.booking-settings-card .form-grid {
    align-items: end;
}

.remember-login,
.booking-settings-card .checkbox-field {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line, rgba(120, 130, 120, .28));
    border-radius: 12px;
    background: var(--surface-soft, rgba(120, 130, 120, .08));
}

.remember-login input,
.booking-settings-card .checkbox-field input {
    flex: 0 0 auto;
}

.public-booking-link {
    padding: 14px;
    border: 1px solid var(--line, rgba(120, 130, 120, .28));
    border-radius: 14px;
    background: var(--surface-soft, rgba(120, 130, 120, .07));
}

.public-booking-link > span:first-child {
    display: block;
    margin-bottom: 8px;
    font-weight: 750;
}

.access-code-card {
    width: min(560px, 100%);
    margin-inline: auto;
}

.booking-global-flash,
.global-public-error {
    position: fixed !important;
    z-index: 100000 !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(660px, calc(100vw - 24px)) !important;
    max-height: min(50vh, 360px);
    overflow: auto;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42) !important;
    will-change: opacity, translate;
    animation:
        bookingFlashIn .2s ease-out,
        bookingFlashOut .32s ease-in 2.2s forwards;
}

.booking-global-flash.error,
.global-public-error.error {
    border: 1px solid rgba(255, 100, 100, .55);
    animation:
        bookingFlashIn .2s ease-out,
        bookingFlashOut .32s ease-in 4.7s forwards;
}

@keyframes bookingFlashIn {
    from { opacity: 0; translate: 0 -12px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes bookingFlashOut {
    from { opacity: 1; translate: 0 0; visibility: visible; }
    to { opacity: 0; translate: 0 -12px; visibility: hidden; }
}

@media (max-width: 720px) {
    .booking-settings-card .form-grid {
        grid-template-columns: 1fr;
    }

    .booking-global-flash,
    .global-public-error {
        top: max(10px, env(safe-area-inset-top)) !important;
        width: calc(100vw - 16px) !important;
    }
}