/* ro3a: изоляция кнопок GLightbox от легаси-CSS 2011 (оранжевый скин портит иконки)
   + привязка стрелок к краям фотографии (совет моделей 4/4: закон Фиттса — на
   широких экранах путь мыши к краю экрана 300-400px; для аудитории 50+ критично).
   Файл подключается ПОСЛЕ glightbox.min.css в шаблонах 3/4/8/9. */

/* сброс налезающих стилей сайта и базовый вид кнопок */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev {
    all: revert;
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background-image: none !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
    z-index: 2100;
}
.glightbox-container .gclose:hover,
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover {
    background-color: rgba(0, 0, 0, 0.82) !important;
}
.glightbox-container .gclose:focus-visible,
.glightbox-container .gnext:focus-visible,
.glightbox-container .gprev:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* белые иконки (SVG из GLightbox) поверх тёмного круга */
.glightbox-container .gclose svg,
.glightbox-container .gnext svg,
.glightbox-container .gprev svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    fill: #fff !important;
    stroke: #fff !important;
    pointer-events: none !important;
}

/* крестик — фиксированно справа сверху ОВЕРЛЕЯ (фото меняет размер, кнопка — нет) */
.glightbox-container .gclose {
    top: 16px !important;
    right: 16px !important;
}

/* стрелки — у краёв ФОТОГРАФИИ: ro3a-init.js переносит .gnext/.gprev внутрь
   .ginner-container текущего слайда, здесь задаём позицию относительно него */
.gslide .gslide-media {
    position: relative;
}
.gslide .gslide-media .gnext {
    right: 14px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
}
.gslide .gslide-media .gprev {
    left: 14px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
}

/* мобильные: стрелки компактнее и полупрозрачнее (основная навигация — свайп),
   крестик видимый всегда, с учётом вырезов экрана */
@media (max-width: 768px) {
    .glightbox-container .gnext,
    .glightbox-container .gprev {
        width: 40px !important;
        height: 40px !important;
        background-color: rgba(0, 0, 0, 0.35) !important;
    }
    .glightbox-container .gclose {
        top: calc(10px + env(safe-area-inset-top, 0px)) !important;
        right: calc(10px + env(safe-area-inset-right, 0px)) !important;
    }
    .gslide .gslide-media .gnext { right: 8px !important; }
    .gslide .gslide-media .gprev { left: 8px !important; }
}