/**
 * "Contul meu" account drawer: slide over the page instead of pushing it.
 *
 * The drawer is Codazon's right sidebar (`.cdz-sidebar.md-sidenav-right`,
 * driven by ThemeLayoutPro's material-theme.js). On open the script puts
 * `cdz-panel-open-right` on <html>; on close it swaps that for
 * `cdz-panel-close-right` for 200ms, then hides the section. The theme reacts
 * by shifting the whole <body> sideways (`right: 320px`, or
 * `calc(100% - 70px)` on mobile) with the sidebar riding along. This file
 * keeps the body in place and slides the sidebar over it instead, matching
 * the Etele_MinicartDrawer side cart. No JS is needed: the classes the script
 * already toggles are enough.
 *
 * Layering matches the side cart: backdrop 10000, panel 10001. That clears
 * the mobile header and nav sections the theme lifts while this panel is open
 * (1001 / 1102), the sticky category menu (1990) and the Magento modal layer,
 * while staying under the promo modal override (10050).
 */

/*
 * The panel is always laid out off-canvas, so both open and close can be a
 * transform transition instead of the theme's display toggle. Hidden with
 * visibility, its fields cannot be focused or hit while closed.
 *
 * The base transition is the closing one. It has to finish within the
 * script's 200ms close timer, which hides the section's content.
 */
html body > .cdz-sidebar.md-sidenav-right {
    display: block;
    position: fixed;
    /* material-theme.js rewrites an inline `top` (the scroll offset) every
       100ms while open; the panel is fixed now, so it must stay at 0. */
    top: 0 !important;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 10001;
    width: 320px;
    max-width: 100vw;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    will-change: transform;
    transition: transform 200ms ease-in, visibility 0s linear 200ms;
}

html.cdz-panel-open-right body > .cdz-sidebar.md-sidenav-right {
    transform: translateX(0);
    visibility: visible;
    transition: transform 300ms ease-in-out, visibility 0s linear 0s;
}

@media (max-width: 767px) {
    /* The theme's mobile width, applied to the closed state too so the panel
       does not change width while it slides out. */
    html body > .cdz-sidebar.md-sidenav-right {
        width: calc(100% - 70px);
    }

    /*
     * The theme scroll-locks mobile with `height: 100%` on both <html> and
     * <body>. That shrinks the document to one screen, which clamps the
     * scroll offset to 0: the page behind the drawer jumped to the top and
     * stayed there after closing. `overflow: hidden` alone is the lock.
     * `:root` outranks the theme's `html[class*="cdz-panel-open-"]`.
     */
    :root.cdz-panel-open-right,
    :root.cdz-panel-open-right body {
        height: auto;
    }
}

/*
 * Keep the page where it is. `!important` is needed: the theme sets the body
 * offset at equal specificity in two stylesheets, and the script writes the
 * scrollbar compensation as an inline `padding-left`, which on this side
 * pushes the page the wrong way. The scroll lock (the theme's
 * `overflow: hidden`) stays; the padding moves to the right, where the
 * removed scrollbar was, so the page does not jump.
 */
html.cdz-panel-open-right body,
html.cdz-panel-close-right body {
    right: 0 !important;
    padding-left: 0 !important;
    padding-right: var(--scrollbar-width, 0px) !important;
}

html.cdz-panel-open-right .sticky-menu.active,
html.cdz-panel-close-right .sticky-menu.active {
    right: 0;
}

/* The backdrop, restyled to the side cart's dim and fade. It only joins the
   drawer's layer while this panel is open or closing. */
html.cdz-panel-open-right body > #cdz-sidebar-backface,
html.cdz-panel-close-right body > #cdz-sidebar-backface {
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.34);
}

html.cdz-panel-open-right body > #cdz-sidebar-backface {
    opacity: 1;
    visibility: visible;
    transition: opacity 150ms linear, visibility 0s linear 0s;
}

html.cdz-panel-close-right body > #cdz-sidebar-backface {
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms linear, visibility 0s linear 150ms;
}

/* The Zendesk launcher drops below the backdrop while the drawer is open,
   as it does for the side cart. Its iframes carry an inline z-index. */
html.cdz-panel-open-right .etele-zendesk-chat[data-zendesk-deferred="true"],
html.cdz-panel-open-right iframe#launcher,
html.cdz-panel-open-right iframe#webWidget {
    z-index: 9999 !important;
}