/* ============================================================
 * LazyLoad Styles
 * ============================================================ */

/* Основни стилове за lazyload изображения */
.lazyload {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    position: relative;
    /* background-color: #f8f9fa; */
    min-height: 100px;
    min-width: 100px;
}

.lazyload.loaded {
    opacity: 1;
}

/* Placeholder анимация */
.lazyload::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 0px, #f8f8f8 40px, #f0f0f0 80px);
    background-size: 200px 100%;
    animation: lazyload-shimmer 1.5s infinite;
    z-index: 1;
    display: block;
}

.lazyload.loaded::before {
    display: none;
}

/* Shimmer анимация */
@keyframes lazyload-shimmer {
    0% { 
        background-position: -200px 0; 
    }
    100% { 
        background-position: calc(200px + 100%) 0; 
    }
}

/* Специфични стилове за различни типове изображения */
.place__image.lazyload,
.offer__pic-image.lazyload,
.news-list__article-picture img.lazyload {
    min-height: 200px;
}

/* Галерия изображения */
.gallery-item img.lazyload {
    min-height: 240px;
}

/* Хотел изображения */
.offer-hotel__image.lazyload {
    min-height: 264px;
}

/* Carousel изображения */
.presentation-slider__bg img.lazyload {
    min-height: 640px;
}

/* Responsive placeholder размери */
@media (max-width: 768px) {
    .lazyload::before {
        background-size: 150px 100%;
    }
    
    .place__image.lazyload,
    .offer__pic-image.lazyload {
        min-height: 150px;
    }
    
    .gallery-item img.lazyload {
        min-height: 180px;
    }
}

/* Fallback за браузъри без поддръжка на CSS анимации */
@media (prefers-reduced-motion: reduce) {
    .lazyload::before {
        animation: none;
        background: #f0f0f0;
    }
    
    .lazyload {
        transition: opacity 0.2s ease-in-out;
    }
}

/* Стилове за грешки при зареждане */
.lazyload.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

/* Debug стилове - временни - ПРЕМАХНАТИ */

.lazyload.error::before {
    background: #f8d7da;
    animation: none;
}

/* Стилове за зареждане */
.lazyload.loading {
    background-color: #e2e3e5;
}

.lazyload.loading::before {
    background: #e2e3e5;
    animation: lazyload-shimmer 1s infinite;
}