<style>
/* Default Off-Canvas (Hidden) */
.e-off-canvas {
    z-index: 100;
    display: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.2s, opacity 0.2s linear;
}

/* Show Off-Canvas */
.e-off-canvas-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
}

/* Hide Off-Canvas */
.e-off-canvas-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: 10 !important;
}

/* White Background Behind Off-Canvas (Using ::before on Body) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 1); /* Solid White */
    opacity: 0;
    visibility: hidden;
    z-index: 9998; /* Just behind Off-Canvas */
    transition: opacity 0.2s linear, visibility 0s linear 0.2s;
}

/* When an Off-Canvas is Open, Show the Background */
body.off-canvas-active::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s linear;
}
</style>

<script>
jQuery(function($) {
    // Function to force repaint/reflow
    function forceRepaint() {
        document.body.style.display = 'none';
        document.body.offsetHeight; // Force reflow
        document.body.style.display = 'block';
        window.dispatchEvent(new Event('resize'));
    }

    function closeAllOffCanvas(exceptID = null) {
        let anyOpen = false; // Track if another Off-Canvas remains open

        $(".e-off-canvas").each(function() {
            let canvasID = $(this).attr("id");

            if (!exceptID || canvasID !== exceptID) {
                $(this).removeClass("e-off-canvas-visible")
                       .addClass("e-off-canvas-hidden")
                       .attr("aria-hidden", "true")
                       .css({
                           "z-index": "10",
                           "visibility": "hidden",
                           "opacity": "0"
                       });

                // Full removal delay set to 0ms
                setTimeout(() => {
                    if ($(this).attr("aria-hidden") === "true") {
                        $(this).css("display", "none");
                    }
                }, 0);
            } else {
                anyOpen = true; // At least one Off-Canvas is still open
            }
        });

        // Remove white background delay set to 0ms
        setTimeout(() => {
            if (!$(".e-off-canvas-visible").length) {
                $("body").removeClass("off-canvas-active");
                forceRepaint(); // Force repaint when closing all
            }
        }, 0);
    }

    function openOffCanvas(targetID) {
        let targetCanvas = $(targetID);

        if (targetCanvas.length) {
            // Close all others EXCEPT the one we're opening
            closeAllOffCanvas(targetID);

            // Open immediately with delay set to 0ms
            setTimeout(() => {
                targetCanvas.removeClass("e-off-canvas-hidden")
                            .addClass("e-off-canvas-visible")
                            .attr("aria-hidden", "false")
                            .css({
                                "z-index": "9999",
                                "visibility": "visible",
                                "opacity": "1",
                                "display": "block"
                            });

                // Ensure the White Background Stays Visible
                $("body").addClass("off-canvas-active");
                
                // Force repaint after opening
                forceRepaint();

            }, 0);
        }
    }

    // Decode Base64
    function decodeBase64(str) {
        try {
            return atob(str);
        } catch (e) {
            return null;
        }
    }

    // Handle Elementor Off-Canvas OPEN clicks
    $(document).on('click', '[href*="elementor-action%3Aaction%3Doff_canvas%3Aopen"]', function(event) {
        event.preventDefault();
        let href = decodeURIComponent($(this).attr("href"));

        let base64Match = href.match(/settings=([^&]+)/);
        if (base64Match) {
            let decodedSettings = decodeBase64(base64Match[1]);

            try {
                let settingsObj = JSON.parse(decodedSettings);
                if (settingsObj.id) {
                    let offCanvasID = "#off-canvas-" + settingsObj.id;
                    openOffCanvas(offCanvasID);
                }
            } catch (e) {}
        }
    });

    // Handle Elementor Off-Canvas CLOSE clicks
    $(document).on('click', '[href*="elementor-action%3Aaction%3Doff_canvas%3Aclose"]', function(event) {
        event.preventDefault();
        closeAllOffCanvas();
    });

    // Ensure all Off-Canvas elements start hidden
    $(".e-off-canvas").each(function() {
        $(this).attr("aria-hidden", "true").css({
            "z-index": "10",
            "visibility": "hidden",
            "opacity": "0",
            "display": "none"
        });
    });

    // Handle same-page anchor link clicks
    $(document).on('click', 'a[href*="#"]', function(event) {
        let href = $(this).attr('href');
        if (href.indexOf('#') !== -1) {
            // Close all off-canvas widgets when an anchor link is clicked
            closeAllOffCanvas();
        }
    });

});
</script>