/* ================================================
   BLUR BACKDROP FIX — add to bottom of your CSS
   ================================================ */

/* ── Kill blur on Bootstrap's default backdrop ── */
.modal-backdrop {
    backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0) !important; /* fully transparent, we don't need it */
}

/* ── Our custom backdrop: sits BEHIND the modal ── */
#custom-blur-backdrop {
    display: none;                      /* hidden by default */
    position: fixed;
    inset: 0;                   /* just BELOW Bootstrap modal (1050) */
    background-color: rgba(10, 77, 104, 0.75);
    backdrop-filter: blur(8px);         /* blur only hits the page behind */
    -webkit-backdrop-filter: blur(8px); /* Safari */
    pointer-events: auto;               /* clickable to close modal */
}

/* ── Visible state (toggled by JS) ── */
#custom-blur-backdrop.show {
    display: block;
}

/* ── Make sure the modal itself is ABOVE our backdrop ── */
.registration-modal {
    z-index: 10 !important;
}