/**
 * Lazy Background Loading Styles
 */

/* Fallback background for lazy loading elements */
.lazy-bg {
    background-color: #F1F5F7;
    /* gray-light */
    transition: background-image 0.3s ease-in-out;
}

/* Optional: Add a subtle loading indicator */
.lazy-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ddd;
    border-top: 2px solid #006eb6;
    /* blue */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0.7;
}

/* Hide loading indicator once image is loaded */
.lazy-bg-loaded::before {
    display: none;
}

/* Loading animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Ensure proper positioning for elements that might be positioned absolutely */
.lazy-bg {
    position: relative;
}

/* Smooth transition when background image loads */
.lazy-bg-loaded {
    background-color: transparent;
}