…`),
* so without these positioning rules the shim's display:block leaves
* the modal as an inline static block 2500px down the page.
*
* Scoped tightly to `.modal*` and `.close` so it shouldn't bleed into
* Elementor widgets. ID-scoped Customizer rules for `#claimModal` and
* `#search-modal` keep winning over these (higher specificity).
*
* Loaded only on the front-end (enqueued from franchise-custom-plugin.php's
* custom_enqueue_script alongside the JS shim).
*/
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
}
.modal.fade {
opacity: 0;
transition: opacity 0.15s linear;
}
.modal.show,
.modal.in {
opacity: 1;
}
.modal-open {
overflow: hidden;
}
.modal-dialog {
position: relative;
width: auto;
margin: 28px auto;
max-width: 600px;
pointer-events: none;
}
.modal-dialog::before {
/* Subtle dimmed backdrop, baked into the dialog wrapper so we don't have
to inject a separate .modal-backdrop element. */
content: '';
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0, 0, 0, 0.45);
z-index: -1;
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 10px;
outline: 0;
pointer-events: auto;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #e9ecef;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.modal-header .modal-title {
margin: 0;
line-height: 1.4;
font-size: 18px;
}
.modal-header .close {
margin: -8px -8px -8px auto;
padding: 0 8px;
background: transparent;
border: 0;
font-size: 26px;
line-height: 1;
color: #000;
opacity: 0.55;
cursor: pointer;
}
.modal-header .close:hover { opacity: 0.85; }
.modal-body {
position: relative;
flex: 1 1 auto;
padding: 20px;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
padding: 12px 16px;
gap: 8px;
border-top: 1px solid #e9ecef;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* Request modal is a wider, form-heavy modal — give it more room. */
#requestModal .modal-dialog { max-width: 760px; }
#requestModal .modal-body { padding: 20px 24px 12px; }
#requestModal .modal-body .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
#requestModal .modal-body .row > [class^="col-"] { padding: 0 8px; }
/* Body scroll lock while a modal is open — toggled by the shim's
.modal-open class on (Bootstrap 4 convention). */
@media (min-width: 576px) {
.modal-dialog { margin: 40px auto; }
}
@media (max-width: 575.98px) {
.modal-dialog { margin: 12px; max-width: none; }
.modal-header,
.modal-body { padding: 14px 16px; }
}