/* Стилове за модалите с изображения */

/* Стилове за дневното меню */
#dailyMenuModal .modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Специални стилове за анимирани GIF изображения */
#dailyMenuModal .modal-body img[src$=".gif"],
.modal-body img[src$=".gif"] {
    /* Запазваме оригиналните размери за GIF */
    max-width: 100%;
    height: auto;
    /* Добавяме рамка за по-добра видимост */
    border: 1px solid #ddd;
}

/* Адаптивност за мобилни устройства */
@media (max-width: 767px) {
    #dailyMenuModal .modal-dialog {
        margin: 0.5rem;
    }
    
    #dailyMenuModal .col-md-4,
    #dailyMenuModal .col-md-8 {
        margin-bottom: 1rem;
    }
}

/* Стилове за модала с ястията */
#itemModal .modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Анимация за зареждане на изображения */
.modal-body img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.modal-body img.loaded {
    opacity: 1;
}

/* JavaScript за добавяне на класа loaded */
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Добавяме клас loaded когато изображението се зареди
    document.querySelectorAll('.modal-body img').forEach(function(img) {
        if (img.complete) {
            img.classList.add('loaded');
        } else {
            img.addEventListener('load', function() {
                this.classList.add('loaded');
            });
        }
    });
});
</script>