/**
 * Limenco Background Gradients - Anti-Shift CSS
 * This CSS helps prevent layout shifts while widgets load
 */

/* Basic container stabilization - minimal impact */
.panel-row-style,
.panel-grid-cell {
    position: relative;
}

/* Only stabilize containers that actually have background gradients applied */
.panel-row-style[class*="limenco-bg-applied-"],
.panel-grid-cell[class*="limenco-bg-applied-"] {
    /* Prevent background size changes during load */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Prevent background image jumping during load */
.panel-row-style[class*="limenco-bg-applied-"]:before,
.panel-grid-cell[class*="limenco-bg-applied-"]:before {
    /* Ensure gradient overlay is stable */
    transition: none !important;
    will-change: auto;
}

/* Prevent layout shifts for SiteOrigin headline widgets */
.so-widget-sow-headline {
    min-height: 1em;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.so-widget-sow-headline.loaded {
    opacity: 1;
}

/* Prevent layout shifts for Limenco buttons */
.so-widget-limenco-buttons {
    min-height: 2em;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.so-widget-limenco-buttons.loaded {
    opacity: 1;
}

/* General widget loading states - keep hidden until images are loaded */
.panel-grid-cell > .so-panel {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.panel-grid-cell > .so-panel.loaded {
    opacity: 1;
}

/* Ensure background gradients are applied immediately */
.limenco-bg-applied-limenco_bg_0,
.limenco-bg-applied-limenco_bg_1,
.limenco-bg-applied-limenco_bg_2,
.limenco-bg-applied-limenco_bg_3,
.limenco-bg-applied-limenco_bg_4,
.limenco-bg-applied-limenco_bg_5 {
    /* These classes will be dynamically generated in the head */
    /* This is just a placeholder to ensure CSS priority */
}

/* Prevent reflow during font loading */
.so-widget-sow-headline h1,
.so-widget-sow-headline h2,
.so-widget-sow-headline h3,
.so-widget-sow-headline h4,
.so-widget-sow-headline h5,
.so-widget-sow-headline h6 {
    font-display: swap;
    line-height: 1.2;
    margin: 0.5em 0;
}

/* Stabilize button dimensions */
.so-widget-limenco-buttons .limenco-button {
    display: inline-block;
    min-width: 100px;
    min-height: 40px;
    line-height: 1.4;
}

/* Critical CSS for immediate rendering */
@media (max-width: 768px) {
    /* Remove forced min-heights to preserve natural layout */
}

/* Preload optimization */
.panel-grid-cell > .so-panel:first-child {
    contain: layout;
}

/* Reduce layout thrashing */
.so-widget-sow-headline,
.so-widget-limenco-buttons {
    will-change: opacity;
}

/* Ensure backgrounds load first */
.limenco-image-bg-widget {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* Image loading states */
.limenco-bg-image-loading {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.limenco-bg-image-loaded {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Prevent any background transitions during load */
.panel-row-style,
.panel-grid-cell {
    background-attachment: scroll !important;
}

/* Removed z-index manipulation to prevent popup interference */