/*
 * WizShop — CSR skeleton overlay styles.
 *
 * Enqueued (via script-loader.php → wiz_get_style_configs()) when the
 * `csr_skeleton_enabled` tenant setting is on. Paired with
 * skeletons/index.js, which shows/hides the #wiz-skeleton-overlay element.
 */

#wiz-skeleton-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--wiz-skeleton-overlay-bg, #ffffff);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    /* Opaque immediately — no fade-in/out (opacity dips flash white). */
    opacity: 1;
    padding-top: calc(
        env(safe-area-inset-top, 0px)
        + var(--wiz-skeleton-overlay-offset-top, 72px)
        + var(--wiz-skeleton-overlay-padding, 24px)
    );
    padding-right: var(--wiz-skeleton-overlay-padding, 24px);
    padding-bottom: var(--wiz-skeleton-overlay-padding, 24px);
    padding-left: var(--wiz-skeleton-overlay-padding, 24px);
    box-sizing: border-box;
}
/* While the overlay is up, freeze the underlying page — prevents any
 * scroll chaining, keyboard scroll, or touch-drag from showing the
 * real content behind the skeleton. */
html.wiz-skeleton-scroll-lock,
body.wiz-skeleton-scroll-lock {
    overflow: hidden !important;
    touch-action: none;
}

/* Scoped overlay inside Elementor containers */
[data-elementor-type="wp-page"],
[data-elementor-type="single-product"],
[data-elementor-type="product"],
[data-elementor-type="single"] {
    position: relative !important;
}
[data-elementor-type="wp-page"] > #wiz-skeleton-overlay,
[data-elementor-type="single-product"] > #wiz-skeleton-overlay,
[data-elementor-type="product"] > #wiz-skeleton-overlay,
[data-elementor-type="single"] > #wiz-skeleton-overlay {
    /* Overlay mounts on body as fixed — keep rule inert if ever nested. */
    position: fixed;
    padding: 0 !important;
}