/**
 * Animated modal backdrops + scroll lock helpers
 *
 * Layer scale (site):
 *   nav / chrome ………… 100–200 (mobile), 1030–1031 (desktop)
 *   panels (chat/notif) … 600–700
 *   contact / media ……… 10450–10460
 *   offers popup ……… 10500–10510
 *   app modals ……… 10520–10530
 *   auth wave ……… 10600–10610
 *   AppModal confirms … 10700–10710
 *   Bootstrap modals … 10590–10600
 */
body.modal-open-lock {
    overflow: hidden !important;
    touch-action: none;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}
body.modal-open-lock .app-shell { pointer-events: none; }
body.modal-open-lock .modal,
body.modal-open-lock .modal-backdrop,
body.modal-open-lock .app-modal-overlay,
body.modal-open-lock .app-modal,
body.modal-open-lock .auth-wave-modal,
body.modal-open-lock .auth-wave-overlay,
body.modal-open-lock .auth-wave-modal *,
body.modal-open-lock .auth-wave-overlay *,
body.auth-gate-open .auth-wave-modal,
body.auth-gate-open .auth-wave-overlay,
body.auth-gate-open .auth-wave-modal *,
body.auth-gate-open .auth-wave-overlay * {
    pointer-events: auto !important;
}
body.modal-open-lock .contact-modal,
body.modal-open-lock .contact-overlay,
body.modal-open-lock .offers-popup,
body.modal-open-lock .offers-popup-overlay,
body.modal-open-lock .offers-popup-panel,
body.modal-open-lock .notif-panel,
body.modal-open-lock .notif-overlay,
body.modal-open-lock .loading-screen,
body.modal-open-lock .chat-panel,
body.modal-open-lock .chat-overlay,
body.modal-open-lock .admin-chat-panel,
body.modal-open-lock .admin-chat-overlay,
body.modal-open-lock .admin-notif-panel,
body.modal-open-lock .admin-notif-overlay,
body.modal-open-lock .admin-drawer,
body.modal-open-lock .admin-drawer-overlay,
body.modal-open-lock .chat-calling-overlay,
body.modal-open-lock .schedule-panel,
body.modal-open-lock .schedule-overlay,
body.modal-open-lock #guestContactModal,
body.modal-open-lock #guestContactOverlay {
    pointer-events: auto;
}
body.offers-popup-open.modal-open-lock .app-shell {
    pointer-events: none;
}

/* Keep navbar / bottom nav UNDER every modal overlay — and hide chrome during auth gate */
body.modal-open-lock .site-navbar,
body.modal-open-lock .app-header,
body.modal-open-lock .bottom-nav,
body.modal-open-lock .top-bar,
body.modal-open-lock .site-status-banner,
body.auth-gate-open .site-navbar,
body.auth-gate-open .app-header,
body.auth-gate-open .bottom-nav,
body.auth-gate-open .top-bar,
body.auth-gate-open .site-status-banner,
body.offers-popup-open .site-navbar,
body.offers-popup-open .app-header,
body.offers-popup-open .bottom-nav,
body.offers-popup-open .top-bar {
    z-index: 1 !important;
    pointer-events: none !important;
}
body.auth-gate-open .site-navbar,
body.auth-gate-open .app-header,
body.auth-gate-open .bottom-nav,
body.auth-gate-open .top-bar,
body.auth-gate-open .site-status-banner {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Decorative fx — never steal position:fixed from overlays */
.modal-fx {
    overflow: hidden;
    isolation: isolate;
}
.app-modal-overlay.modal-fx,
.offers-popup-overlay.modal-fx,
.contact-overlay.modal-fx,
.notif-overlay.modal-fx,
.chat-overlay.modal-fx,
.auth-wave-overlay.modal-fx,
.schedule-overlay.modal-fx,
.media-preview-overlay.modal-fx,
.modal-overlay-blur.modal-fx {
    position: fixed !important;
    inset: 0;
}
.modal-fx::before,
.modal-fx::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.modal-fx::before {
    width: min(48vw, 280px);
    height: min(48vw, 280px);
    top: -12%;
    left: -8%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary, #374151) 55%, #fff) 0%, transparent 70%);
    animation: modalFxDriftA 14s ease-in-out infinite alternate;
}
.modal-fx::after {
    width: min(56vw, 340px);
    height: min(56vw, 340px);
    bottom: -18%;
    right: -12%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-dark, #1f2937) 45%, #7dd3fc) 0%, transparent 72%);
    animation: modalFxDriftB 18s ease-in-out infinite alternate;
}
.modal-fx-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.modal-fx-orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0.35;
    filter: blur(1px);
}
.modal-fx-orb-1 {
    width: 90px; height: 90px; top: 18%; right: 12%;
    background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%);
    animation: modalFxFloat 9s ease-in-out infinite;
}
.modal-fx-orb-2 {
    width: 56px; height: 56px; bottom: 22%; left: 16%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary, #374151) 40%, #fff), transparent 70%);
    animation: modalFxFloat 11s ease-in-out infinite reverse;
}
.modal-fx-orb-3 {
    width: 120px; height: 120px; top: 42%; left: 38%;
    background: radial-gradient(circle, rgba(125, 211, 252, 0.35), transparent 70%);
    animation: modalFxPulse 7s ease-in-out infinite;
}
.modal-fx-spark {
    position: absolute;
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 0 10px rgba(255,255,255,0.6);
    animation: modalFxSpark 6s linear infinite;
}
.modal-fx-spark:nth-child(4) { top: 12%; left: 28%; animation-delay: -1s; }
.modal-fx-spark:nth-child(5) { top: 64%; left: 72%; animation-delay: -2.5s; }
.modal-fx-spark:nth-child(6) { top: 38%; left: 8%; animation-delay: -4s; }

@keyframes modalFxDriftA {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(40px, 28px) scale(1.12); }
}
@keyframes modalFxDriftB {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-36px, -24px) scale(1.18); }
}
@keyframes modalFxFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-18px, 22px); }
}
@keyframes modalFxPulse {
    0%, 100% { transform: scale(0.85); opacity: 0.2; }
    50% { transform: scale(1.15); opacity: 0.4; }
}
@keyframes modalFxSpark {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    20% { opacity: 0.9; }
    100% { transform: translateY(-90px) scale(1); opacity: 0; }
}

body.modal-open .modal { z-index: 10600; pointer-events: none; }
body.modal-open .modal .modal-dialog { pointer-events: auto; }
body.modal-open .modal-backdrop { z-index: 10590; }

/* Bootstrap backdrop animation */
.modal-backdrop.show {
    background: rgba(15, 23, 42, 0.55);
}
.modal-backdrop.show::before,
.modal-backdrop.show::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.4;
}
.modal-backdrop.show::before {
    width: 240px; height: 240px; top: 10%; left: 8%;
    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);
    animation: modalFxDriftA 12s ease-in-out infinite alternate;
}
.modal-backdrop.show::after {
    width: 280px; height: 280px; bottom: 8%; right: 6%;
    background: radial-gradient(circle, rgba(125,211,252,0.22), transparent 70%);
    animation: modalFxDriftB 16s ease-in-out infinite alternate;
}