/* Custom GLightbox Styles */

/* Изменение фона overlay на белый с 50% прозрачности */
.goverlay {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Добавление blur эффекта к контейнеру */
.glightbox-container {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Для мобильных устройств тоже белый фон */
.glightbox-mobile .goverlay {
    background: rgba(255, 255, 255, 0.5) !important;
}

/* Для маленьких экранов */
@media screen and (max-height: 420px) {
    .goverlay {
        background: rgba(255, 255, 255, 0.5) !important;
    }
}

/* Для больших экранов */
@media (min-width: 769px) {
    .goverlay {
        background: rgba(255, 255, 255, 0.5) !important;
    }
}

/* Стилизация кнопок навигации для лучшей видимости на белом фоне */
.gclose .garrow,
.gnext .garrow,
.gprev .garrow {
    stroke: #333 !important;
}

/* Стилизация кнопок для clean темы */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Loader на белом фоне */
.gloader {
    border: 2px solid #333 !important;
    border-right-color: transparent !important;
}

/* Тень для изображений для лучшей видимости на белом фоне */
.glightbox-clean .gslide-media {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3) !important;
}