/**
 * Amasty Cookie Consent – native <dialog> (Hyvä 1.5+) positioning & stacking
 * MySpexx/default theme override — no vendor files modified
 *
 * Hyvä 1.5 replaced the overlay/container divs with a native <dialog>.
 * The old overlay CSS and Tailwind `relative` on the dialog left it in
 * document flow (bottom of the page) and `isolation`/`opacity` on <dialog>
 * painted ::backdrop above the content, so close/accept clicks never landed.
 *
 * Surfaces:
 *  1. Main consent popup   (dialog.ambar-cookie-main-dialog)
 *  2. Settings popup       (.am-cookie-bar-settings / [x-ref="am-cookie-bar-settings"])
 *  3. Info popup           ([x-ref$="am-cookie-group-info"])
 */

/* ============================================================
   1. MAIN CONSENT POPUP (native <dialog> + ::backdrop)
   ============================================================ */

dialog.ambar-cookie-main-dialog {
    /* Override leftover Tailwind `relative` and UA in-flow placement */
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    width: min(90%, 48rem) !important;
    height: fit-content !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    background-color: #ffffff !important;
    pointer-events: auto !important;
    /* Do not set isolation, opacity, transform, or filter on <dialog>:
       they create a stacking context that puts ::backdrop on top of
       the dialog content and swallows all clicks. */
}

dialog.ambar-cookie-main-dialog::backdrop {
    background: rgba(16, 32, 55, 0.35);
    pointer-events: auto;
}

@media (max-width: 640px) {
    dialog.ambar-cookie-main-dialog {
        padding: 1.25rem !important;
        width: 95% !important;
    }
}

/* ============================================================
   2. SETTINGS POPUP (still the legacy overlay-div markup)
   Overlay:  .am-cookie-bar-settings (on the fixed inset-0 wrapper)
   Dialog:   [x-ref="am-cookie-bar-settings"]
   ============================================================ */

.am-cookie-bar-settings {
    z-index: 10000 !important;
    background: rgba(16, 32, 55, 0.35) !important;
}

[x-ref="am-cookie-bar-settings"] {
    background-color: #ffffff !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
}

@media (max-width: 640px) {
    [x-ref="am-cookie-bar-settings"] {
        padding: 1.25rem !important;
    }
}

/* ============================================================
   3. COOKIE INFORMATION POPUP ("More Information")
   Prefix in popup mode: "popup-" → x-ref="popup-am-cookie-group-info"
   ============================================================ */

[x-data^="initCookieGroupInfo"] > div[class*="fixed inset-0"] {
    z-index: 10000 !important;
    background: rgba(16, 32, 55, 0.35) !important;
}

[x-ref$="am-cookie-group-info"] {
    background-color: #ffffff !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
}

[x-ref$="am-cookie-group-info"] .overflow-x-scroll {
    overflow-x: auto !important;
}

@media (max-width: 640px) {
    [x-ref$="am-cookie-group-info"] {
        padding: 1rem !important;
    }
}