/* ====== Overlay escuro e modal transparente ====== */
.js-lightbox .modal-content,
.js-lightbox .modal-body {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
.modal-backdrop {
    background-color: #000;
}
.modal-backdrop.show {
    opacity: .9;
}

/* ====== Thumbs centralizadas menores ====== */
.thumbs-scroller {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    overflow-x: auto;
    padding: .25rem 0 .5rem;
}
.lightbox-thumb {
    height: 50px;
    width: 50px;
    object-fit: cover;
    border-radius: .5rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.lightbox-thumb:hover {
    transform: translateY(-1px);
}
.lightbox-thumb.active {
    border-color: #0d6efd;
}

/* ====== Cabeçalho ====== */
.modal-title {
    color: #fff; /* título branco */
}
.btn-close {
    filter: invert(1) brightness(200%); /* ícone branco */
}