/*
 * Offerist global modal architecture.
 *
 * Every cabinet modal is promoted into the persistent #offerist-modal-root,
 * outside the PJAX fragment. This guarantees viewport centering, a backdrop
 * above the sidebar/header, and deterministic stacking for nested dialogs.
 */
:root {
    --offerist-modal-layer: 2147483000;
    --offerist-modal-gutter: clamp(12px, 2.4vw, 32px);
}

#offerist-modal-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: var(--offerist-modal-layer);
    pointer-events: none;
    isolation: isolate;
    overflow: visible;
}

#offerist-modal-root:empty {
    display: none;
}

#offerist-modal-root > [data-offerist-modal-host] {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: var(--offerist-modal-gutter) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    transform-style: flat !important;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
}

#offerist-modal-root > [data-offerist-modal-host][data-offerist-modal-open="1"] {
    display: flex !important;
    pointer-events: auto;
    z-index: var(--offerist-modal-z, var(--offerist-modal-layer)) !important;
}

#offerist-modal-root > [data-offerist-modal-host][hidden],
#offerist-modal-root > [data-offerist-modal-host][aria-hidden="true"] {
    display: none !important;
    pointer-events: none !important;
}

/* A closed legacy .modal remains mounted but can never intercept the page. */
#offerist-modal-root > .modal:not(.active),
#offerist-modal-root > [data-offerist-modal-host]:not([data-offerist-modal-open="1"]) {
    pointer-events: none !important;
}

/* Backdrops always cover the complete browser viewport, not the PJAX fragment. */
#offerist-modal-root > [data-offerist-modal-host] > [class$="__backdrop"],
#offerist-modal-root > [data-offerist-modal-host] > [class*="__backdrop "],
#offerist-modal-root > [data-offerist-modal-host] .modal__background,
#offerist-modal-root > [data-offerist-modal-host] > [data-offerist-modal-backdrop] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 0 !important;
}

/* The dialog itself is centered inside the viewport and scrolls internally. */
#offerist-modal-root > [data-offerist-modal-host] > [role="dialog"],
#offerist-modal-root > [data-offerist-modal-host] > [class$="__dialog"],
#offerist-modal-root > [data-offerist-modal-host] > [class*="__dialog "] {
    position: relative !important;
    inset: auto !important;
    margin: auto !important;
    z-index: 1 !important;
    max-width: calc(100vw - (var(--offerist-modal-gutter) * 2)) !important;
    max-height: calc(100dvh - (var(--offerist-modal-gutter) * 2)) !important;
    box-sizing: border-box !important;
    overscroll-behavior: contain;
}

/* Legacy modal wrapper: keep its internal centering layer but remove page offsets. */
#offerist-modal-root > .modal > .modal__in {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: var(--offerist-modal-gutter) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
}

#offerist-modal-root > .modal .modal__box {
    margin: auto !important;
    max-height: calc(100dvh - (var(--offerist-modal-gutter) * 2)) !important;
}

/* Previous dialogs stay visible below the next dialog, but cannot receive input. */
#offerist-modal-root > [data-offerist-modal-host][data-offerist-modal-underlay="1"] {
    pointer-events: none !important;
}

html.offerist-modal-open,
body.offerist-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.offerist-modal-open {
    padding-right: var(--offerist-modal-scrollbar-compensation, 0px);
}

@media (max-width: 720px) {
    :root {
        --offerist-modal-gutter: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #offerist-modal-root *,
    #offerist-modal-root *::before,
    #offerist-modal-root *::after {
        scroll-behavior: auto !important;
    }
}