.lightbox{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(12,12,12,.97);
    backdrop-filter:blur(4px);

    opacity:0;
    visibility:hidden;

    transition:opacity .25s ease, visibility .25s ease;

    z-index:99999;
}

.lightbox.open{

    opacity:1;
    visibility:visible;
}


/* ---------- Image ---------- */

.lightbox-image{

    max-width:92vw;
    max-height:92vh;

    object-fit:contain;

    border-radius:10px;

    box-shadow:0 20px 70px rgba(0,0,0,.45);

    transform:scale(.96);

transition:
    opacity .25s ease,
    transform .25s ease;
}

.lightbox-image.fade{

    opacity:0;

    transform:scale(.985);

}

.lightbox.open .lightbox-image{

    transform:scale(1);

}


/* ---------- Buttons ---------- */

.lightbox button{

    position:absolute;

    display:flex;
    align-items:center;
    justify-content:center;

    width:58px;
    height:58px;

    padding:0;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#fff;

    cursor:pointer;

    backdrop-filter:blur(10px);

    transition:
        background .25s,
        transform .25s,
        opacity .25s;

    user-select:none;
}

.lightbox button svg{

    width:28px;
    height:28px;

    pointer-events:none;
}

.lightbox button:hover{

    background:rgba(255,255,255,.18);

}


/* ---------- Close ---------- */

.lightbox-close{

    top:28px;
    right:28px;
}

.lightbox-close:hover{

    transform:scale(1.08) rotate(90deg);

}


/* ---------- Prev / Next ---------- */

.lightbox-prev,
.lightbox-next{

    top:50%;

    transform:translateY(-50%);
}

.lightbox-prev{

    left:30px;
}

.lightbox-next{

    right:30px;
}

.lightbox-prev:hover,
.lightbox-next:hover{

    transform:translateY(-50%) scale(1.08);

}


/* ---------- Counter ---------- */

.lightbox-counter{

    position:absolute;

    left:50%;
    bottom:26px;

    transform:translateX(-50%);

    color:#fff;

    font-size:15px;

    letter-spacing:.08em;
}


/* ---------- Thumbnail strip ---------- */

.lightbox-strip{

    position:absolute;

    left:50%;
    bottom:70px;

    transform:translateX(-50%);

    display:flex;
    gap:10px;

    max-width:80vw;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    padding:8px 4px;

    scrollbar-width:none;

}

.lightbox-strip::-webkit-scrollbar{

    display:none;

}

.lightbox-thumb{

    width:72px;
    height:72px;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

    opacity:.45;

    transition:.25s;

    border:2px solid transparent;

}

.lightbox-thumb:hover{

    opacity:.8;

}

.lightbox-thumb.active{

    opacity:1;

    border-color:#fff;

}


/* ---------- Responsive ---------- */

@media (max-width:768px){

    .lightbox-prev,
    .lightbox-next{

        width:48px;
        height:48px;
    }

    .lightbox button svg{

        width:24px;
        height:24px;
    }

    .lightbox-image{

        max-width:96vw;
        max-height:82vh;
    }

}

/* ---------- UI ---------- */

.lightbox-ui{

    transition:
        opacity .3s ease,
        transform .3s ease;

}

.lightbox.hide-ui .lightbox-ui{

    opacity:.15;

    pointer-events:auto;

}

.lightbox.hide-ui .lightbox-strip{

    opacity:0;

    transform:translateX(-50%) translateY(20px);

    pointer-events:none;

}

.lightbox.hide-ui .lightbox-prev,
.lightbox.hide-ui .lightbox-next,
.lightbox.hide-ui .lightbox-close{

    opacity:.35;

}

.lightbox-strip{

    transition:
        opacity .3s ease,
        transform .3s ease;

}