/** * Reliable Popups — Frontend styles. * * Mobile-first, fixed modal with overlay. Uses CSS custom properties * set inline per popup for size and color overrides. */ /* Overlay + container */ .rp-popup { position: fixed; inset: 0; z-index: 999999; display: none; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; } .rp-popup.is-visible { display: flex; } .rp-popup__overlay { position: absolute; inset: 0; background: var(--rp-overlay-color, rgba(0, 0, 0, 0.6)); cursor: pointer; } /* Dialog panel */ .rp-popup__dialog { position: relative; z-index: 1; width: var(--rp-mobile-width, 90%); max-width: 100%; height: var(--rp-mobile-height, auto); max-height: calc(100vh - 2rem); background: var(--rp-bg-color, #ffffff); border-radius: 6px; border-style: var(--rp-border-style, none); border-width: var(--rp-border-width, 0); border-color: var(--rp-border-color, transparent); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); overflow: auto; -webkit-overflow-scrolling: touch; outline: none; } @media (min-width: 768px) { .rp-popup__dialog { width: var(--rp-desktop-width, 600px); height: var(--rp-desktop-height, auto); } } /* Close button */ .rp-popup__close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--rp-close-color, #666666); font-size: 1.75rem; line-height: 1; cursor: pointer; transition: opacity 0.15s ease; } .rp-popup__close:hover, .rp-popup__close:focus { opacity: 0.75; outline: 2px solid currentColor; outline-offset: 2px; } /* Content area */ .rp-popup__content { padding: 2rem 1.5rem 1.5rem; color: inherit; } .rp-popup__content h1, .rp-popup__content h2, .rp-popup__content h3, .rp-popup__content h4, .rp-popup__content h5, .rp-popup__content h6 { color: var(--rp-headline-color, #1a1a1a); } .rp-popup__content img { max-width: 100%; height: auto; } .rp-popup__content form { margin-top: 0.5rem; } /* * SiteOrigin Forms inside Reliable Popups: * - Prevent full-height/flex stretch in modal scroll areas * - Collapse empty layout columns (common with multi-col rows) */ .rp-popup .rp-popup__content .so-form__wrapper, .rp-popup .rp-popup__content .so-form__wrapper > form.so-form, .rp-popup .rp-popup__content form.so-form > .so-form__layout { height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; flex-grow: 0 !important; } .rp-popup .rp-popup__content form.so-form > .so-form__actions { position: static !important; margin-top: 1rem !important; margin-bottom: 0 !important; min-height: 0 !important; flex: 0 0 auto !important; } .rp-popup .rp-popup__content form.so-form > .so-form__layout, .rp-popup .rp-popup__content form.so-form > .so-form__actions { justify-content: flex-start !important; align-content: flex-start !important; } /* Single-column row in popup; hide empty cols from 4-col builder layouts */ .rp-popup .rp-popup__content .so-form__row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0; } .rp-popup .rp-popup__content .so-form__col:not(:has(.so-form__field)) { display: none !important; min-height: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* Body scroll lock when popup is open */ body.rp-popup-open { overflow: hidden; } /* * jQuery UI (and similar) overlays are appended to and can inherit a low * stacking context from .rp-popup__dialog. Keep them above the popup layer. */ body.rp-popup-open #ui-datepicker-div, body.rp-popup-open .ui-datepicker, body.rp-popup-open .ui-autocomplete, body.rp-popup-open .ui-front { z-index: 1000001 !important; } /* Stacking: later popups sit above earlier ones */ .rp-popup.is-visible + .rp-popup.is-visible { z-index: 1000000; }