/**
 * Mobile Fixed Backgrounds - Frontend CSS
 */

/* Container for the fixed background */
.mfb-fixed-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -1;
    display: none;
}

.mfb-fixed-bg.mfb-visible {
    display: block;
}

/* Hide original backgrounds on mobile when plugin is active */
.mfb-section-processed {
    background-image: none !important;
    background-attachment: scroll !important;
}

/* Ensure content stays above the fixed background */
.mfb-section-processed > .elementor-container,
.mfb-section-processed > .elementor-widget-wrap,
.mfb-section-processed > .e-con-inner,
.mfb-section-processed > * {
    position: relative;
    z-index: 1;
}

/* Disable lazy loading on processed sections */
.mfb-section-processed.lazyloaded,
.mfb-section-processed.lazyload,
.mfb-section-processed.lazyloading {
    background-image: none !important;
}

/* Debug mode - uncomment to see section boundaries */
/*
.mfb-section-processed {
    outline: 2px dashed red !important;
}
.mfb-section-processed::after {
    content: attr(data-mfb-group);
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 9999;
}
*/