/* Unified kiosk overlay treatment */
:root {
    --kiosk-overlay-blur: 12px;
    --kiosk-overlay-dim: rgba(7, 12, 20, .48);
    --kiosk-card-radius: 24px;
    --kiosk-card-shadow: 0 24px 80px rgba(0, 0, 0, .38);
}

/* Bootstrap popups: keep the dialog crisp and blur the live app behind it. */
.modal-backdrop.show {
    opacity: 1 !important;
    background: rgba(7, 12, 20, .48) !important;
    backdrop-filter: blur(var(--kiosk-overlay-blur)) saturate(.82);
    -webkit-backdrop-filter: blur(var(--kiosk-overlay-blur)) saturate(.82);
}
.modal.fade .modal-dialog {
    transform: translateY(12px) scale(.97);
    transition: transform .18s ease, opacity .18s ease;
}
.modal.show .modal-dialog { transform: translateY(0) scale(1); }
.modal-content {
    border-radius: var(--kiosk-card-radius) !important;
    box-shadow: var(--kiosk-card-shadow) !important;
    overflow: hidden;
}

/* Native full-screen overlays used throughout Event Mode and maintenance. */
.signout-success-overlay,
#binMoveAnimationOverlay,
#serverConnectionOverlay {
    backdrop-filter: blur(var(--kiosk-overlay-blur)) saturate(.82) !important;
    -webkit-backdrop-filter: blur(var(--kiosk-overlay-blur)) saturate(.82) !important;
}
.signout-success-overlay {
    background: rgba(8, 20, 12, .48) !important;
}
#serverConnectionOverlay {
    background: rgba(8, 10, 14, .52) !important;
}

/* Event lock is local to the scanner card, so blur the scanner underneath. */
.event-locked-overlay {
    background: rgba(18, 18, 18, .62) !important;
    backdrop-filter: blur(10px) saturate(.75);
    -webkit-backdrop-filter: blur(10px) saturate(.75);
}

/* Make warning/success surfaces feel like one system. */
.modal-header,
.modal-footer { border-color: rgba(0,0,0,.08) !important; }
.btn-lg { border-radius: 14px; }

/* Smooth visual entry for injected system cards. */
#serverConnectionOverlay.visible .server-offline-card,
#binMoveAnimationOverlay:not(.d-none) > div,
.signout-success-overlay:not(.d-none) .signout-success-card {
    animation: kioskOverlayCardIn .18s ease-out both;
}
@keyframes kioskOverlayCardIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog,
    #serverConnectionOverlay.visible .server-offline-card,
    #binMoveAnimationOverlay:not(.d-none) > div,
    .signout-success-overlay:not(.d-none) .signout-success-card {
        transition: none !important;
        animation: none !important;
    }
}