/**
 * Lazy loading CSS styles
 * Provides visual feedback during image loading
 */

/* Style for images that are loading */
.lazy-loading {
    background-color: #f0f0f0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwIDUwQzQxLjAyODYgNTAgNTAgNDEuMDI4NiA1MCAzMEM1MCAxOC45NzE0IDQxLjAyODYgMTAgMzAgMTBDMTguOTcxNCAxMCAxMCAxOC45NzE0IDEwIDMwQzEwIDQxLjAyODYgMTguOTcxNCA1MCAzMCA1MFoiIHN0cm9rZT0iI2RkZCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtZGFzaGFycmF5PSIyLjIgMi4yIi8+Cjwvc3ZnPgo=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    min-height: 100px;
    min-width: 100px;
}

/* Fade in effect when images load */
.lazy-loading {
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}

.lazy-loading.loaded {
    opacity: 1;
}