.gallery-modal{
    --bar-h: 56px;   /* высота нижней панели */
    --safe-top: 48px;
}
.gallery-modal .btn-close,
.gallery-modal .gallery-toggle{ z-index: 6; }
.gallery-modal .nav-zone{
    top: var(--safe-top);
    bottom: var(--bar-h);
    z-index: 5;
}
.gallery-modal .modal-dialog{
    max-width: min(1200px, 95vw);
    margin: 2rem auto;
}

/* «Рамка» вокруг содержимого */
.gallery-modal .modal-content{
    background:#111;                 /* подложка за фото */
    border: 6px solid #f1f3f5;       /* светлая рамка как у prettyPhoto */
    border-radius: 10px;
    box-shadow: 0 14px 44px rgba(0,0,0,.55);
}

/* Тело: показываем фото, обрезаний нет, никаких «выпираний» */
.gallery-modal .modal-body{
    padding: 0;
    overflow: hidden;
    display:flex; align-items:center; justify-content:center;
    min-height: 0;
}
.gallery-modal .gallery-modal-img{
    max-width: calc(95vw - 48px);
    max-height: calc(90vh - 128px);  /* учёт высоты нижней панели */
    width:auto; height:auto;
    object-fit: contain;
    display:block;
    background:#000;
}

/* Нижняя панель как у старого: слева счётчик, по центру — миниатюры, справа — крестик */
.gallery-modal .gallery-bar{
    background:#f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: .5rem .75rem;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    color:#212529;
}

/* Счётчик слева (стили достаточно простые) */
.gallery-modal .gallery-counter{ color:#6c757d; }

/* Лента миниатюр по центру */
.gallery-modal .gallery-thumbs{
    max-width: 70vw;
    margin-inline: auto;
    display:flex; gap:.5rem; align-items:center;
    overflow-x:auto; scrollbar-width: thin;
}
.gallery-modal .gallery-thumbs .thumb{
    border:0; background:transparent; padding:0; line-height:0; flex:0 0 auto;
}
.gallery-modal .gallery-thumbs .thumb img{
    width:56px; height:40px; object-fit:cover; display:block;
    border-radius:4px; border:2px solid transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.gallery-modal .gallery-thumbs .thumb:hover img,
.gallery-modal .gallery-thumbs .thumb.active img{
    border-color:#0d6efd;
}

/* Кнопка закрытия справа снизу (иконка «x») */
.gallery-modal .gallery-close{
    margin-left:auto;
}

/* Верхний крестик — белый, как у старого */
.gallery-modal .btn-close{ filter: invert(1); }

/* Стрелки поверх рамки, аккуратные */
.gallery-modal .nav-zone{
    position:absolute; top:6px; bottom:64px;   /* не перекрывать нижнюю панель */
    width:72px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; outline:0; z-index:3;
    transition: background .2s ease;
}
.gallery-modal .nav-prev{ left: 8px; }
.gallery-modal .nav-next{ right: 8px; }
.gallery-modal .nav-zone i{
    font-size:1.35rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.gallery-modal .nav-zone:hover{ background: rgba(255,255,255,.06); }

/* Небольшая адаптация для узких экранов */
@media (max-width: 576px){
    .gallery-modal .modal-dialog{ margin: .75rem auto; }
    .gallery-modal .modal-content{ border-width: 4px; border-radius: 8px; }
    .gallery-modal .gallery-modal-img{
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 112px);
    }
    .gallery-modal .nav-zone{ width:56px; bottom:60px; }
    .gallery-modal .gallery-thumbs .thumb img{ width:48px; height:34px; }
}