/* Explain: Styles for the image lightbox component. */
/* Лайтбокс для фото акций: клик по картинке увеличивает её, повторный клик закрывает */
#setsGrid article {
    cursor: zoom-in;
}

.sets-lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(14, 36, 29, 0.92);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms ease, visibility 240ms ease;
    cursor: zoom-out;
}

.sets-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.sets-lightbox-img {
    max-width: min(92vw, 900px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
    transform: scale(0.92);
    transition: transform 240ms ease;
}

.sets-lightbox.is-open .sets-lightbox-img {
    transform: scale(1);
}

.sets-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 239, 226, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-on-dark);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 240ms ease;
}

.sets-lightbox-close:hover,
.sets-lightbox-close:focus-visible {
    background: var(--gold-color);
    border-color: var(--gold-color);
    color: var(--green-deep);
}

body.lightbox-open {
    overflow: hidden;
}