/**
 * Amasty Cookie Consent – Popup opacity & stacking fix
 * MySpexx/default theme override — no vendor files modified
 *
 * Three popup surfaces are fixed here:
 *  1. Main consent popup   (#am-cookie-bar)
 *  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
   ============================================================ */

/* Overlay: semi-transparent navy behind the popup */
.ambar-cookie-main-overlay {
    background: rgba(16, 32, 55, 0.35) !important;
    z-index: 10000 !important;
}

/* Container: sits above overlay inside its stacking context */
#am-cookie-bar .ambar-cookie-main-overlay > div {
    z-index: 1 !important; /* relative to overlay stacking context */
}

/* Dialog: fully opaque white surface */
.ambar-cookie-main-dialog {
    background-color: #ffffff !important;
    opacity: 1 !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    /* Prevent the dialog itself from creating an opacity context */
    isolation: isolate;
}

/* Mobile: ensure readable padding and accessible buttons */
@media (max-width: 640px) {
    .ambar-cookie-main-dialog {
        padding: 1.25rem !important;
        width: 95% !important;
    }
}

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

/* Overlay: raise z-index above header and any fixed UI */
.am-cookie-bar-settings {
    z-index: 10000 !important;
    background: rgba(16, 32, 55, 0.35) !important;
}

/* Dialog: fully opaque white */
[x-ref="am-cookie-bar-settings"] {
    background-color: #ffffff !important;
    opacity: 1 !important;
    isolation: isolate;
    /* Internal scroll for long cookie tables without leaving viewport */
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
}

/* Mobile */
@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"
   Selector uses substring match to cover any prefix variant.
   Overlay: the fixed inset-0 parent div inside [x-data^="initCookieGroupInfo"]
   ============================================================ */

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

/* Dialog: opaque white, internal scroll */
[x-ref$="am-cookie-group-info"] {
    background-color: #ffffff !important;
    opacity: 1 !important;
    isolation: isolate;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
}

/* Cookie table: horizontal scroll on mobile without dialog overflow */
[x-ref$="am-cookie-group-info"] .overflow-x-scroll {
    overflow-x: auto !important;
}

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

/* ============================================================
   BODY SCROLL LOCK
   Lock body scroll while any Amasty cookie popup is visible.
   Alpine's x-cloak hides elements until init; once shown, the
   [data-dialog-ref-name] attribute is present and visible.
   ============================================================ */

/* Applied by the Hyva modal JS via overflow-hidden on body — reinforce it */
body:has(#am-cookie-bar [data-dialog-ref-name]:not([style*="display: none"])),
body:has(.am-cookie-bar-settings:not([style*="display: none"])),
body:has([x-data^="initCookieGroupInfo"] > div:not([style*="display: none"])) {
    overflow: hidden !important;
}