/*
 * g48 - cart drawer: one clean layer, nothing clickable behind (client deck 01-10-2026, P1).
 *
 * Linked from resources/views/layouts/cart_modal_scripts.blade.php, which also toggles the
 * `ob-drawer-open` class on <html> and <body> while any .cart-dropdown.cart-offcanvas is
 * .opened (whoever opened it: openCartModal(), the header toggle, or the theme's
 * Wolmart.initCartAction) and closes the drawer on Esc.
 *
 * LAYERING AND CLICK-BLOCKING ONLY. The drawer's markup, texts, options, weight box,
 * shipping options, totals and buttons are untouched.
 *
 * Measured cause of the "ghost button" (…INHO): it is the drawer's OWN "Limpar carrinho"
 * button. The row .cart-modal-actions is wider than the drawer (two nowrap buttons,
 * ~344px in a 300px content box), so that button runs ~44px past the content edge into the
 * drawer's 20px right padding. When the totals block (.bottom-cart-, position: sticky;
 * bottom: 0) is taller than the space left - always on checkout with the US weight box and
 * the shipping options - it sticks over the product list and that row, but its white
 * background is only as wide as the content box, so the button's tail stays visible AND
 * clickable in the padding strip. The rules below make the sticky totals block opaque over
 * the drawer's full width and put it on its own layer, so nothing underneath shows through.
 *
 * Stack while the drawer is open (top to bottom):
 *   .cart-dropdown.cart-offcanvas.opened  z 99999 at the root (custom.css; only
 *     .modalsMarketPlaceSearch, an explicit search modal, is higher)
 *     .dropdown-box (drawer)  99999  >  .cart-overlay  99990   (inside that context)
 *   page: open Bay dialog 10001, consent banner 10000, chat bubble / WhatsApp / toasts 9999,
 *         sticky header and mobile sticky footer 1051 ... all below the overlay.
 */

/* Selectors repeat custom.css's `.dropdown.cart-dropdown.cart-offcanvas.opened` so that, at equal
   specificity, this later file wins. */

/* 1 - the drawer: top layer, fully opaque, the only thing that scrolls */
.dropdown.cart-dropdown.cart-offcanvas.opened {
    z-index: 99999;
}

.dropdown.cart-dropdown.cart-offcanvas.opened .dropdown-box {
    z-index: 99999;
    background-color: #fff;
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh) {
    .dropdown.cart-dropdown.cart-offcanvas.opened .dropdown-box {
        height: 100dvh;
    }
}

/* the totals block that sticks to the bottom covers the drawer's full width, padding
   included, on its own layer: nothing from underneath peeks out at its sides */
.dropdown.cart-dropdown.cart-offcanvas.opened .bottom-cart- {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    left: auto;
    right: auto;
    z-index: 2;
    width: auto;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #fff;
}

/* 2 - the overlay: the whole viewport, takes every click and touch on the page */
.dropdown.cart-dropdown.cart-offcanvas.opened .cart-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 99990;
    pointer-events: auto;
    touch-action: none;
    opacity: 1;
    visibility: visible;
}

/* 3 - the page: no scrolling behind the drawer (restored on close) ... */
html.ob-drawer-open,
body.ob-drawer-open {
    overflow: hidden !important;
}

body.ob-drawer-open {
    padding-right: var(--ob-drawer-sbw, 0px);
}

/* ... and its floating buttons step aside while the drawer is open (markup untouched) */
body.ob-drawer-open .ondjangobay-chatbot-container,
body.ob-drawer-open .wa-float,
body.ob-drawer-open #scroll-top {
    visibility: hidden !important;
    pointer-events: none !important;
}