/* ==========================================================
   GALLERY LIGHTBOX
========================================================== */

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.92);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}


/* ==========================================================
   CONTENT
========================================================== */

.lightbox-content{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    max-width:90vw;

    max-height:90vh;

}


/* ==========================================================
   IMAGE
========================================================== */

.lightbox-content img{

    display:block;

    max-width:90vw;

    max-height:82vh;

    border-radius:14px;

    object-fit:contain;

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

    transform:scale(.92);

    transition:transform .35s ease;

}

.lightbox.active img{

    transform:scale(1);

}


/* ==========================================================
   CLOSE BUTTON
========================================================== */

.lightbox-close{

    position:absolute;

    top:25px;

    right:30px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:34px;

    cursor:pointer;

    transition:.3s;

}

.lightbox-close:hover{

    background:#EA580C;

    transform:rotate(90deg);

}


/* ==========================================================
   NAVIGATION BUTTONS
========================================================== */

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:34px;

    cursor:pointer;

    transition:.3s;

}

.lightbox-prev{

    left:35px;

}

.lightbox-next{

    right:35px;

}

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

    background:#EA580C;

}


/* ==========================================================
   COUNTER
========================================================== */

.lightbox-counter{

    margin-top:22px;

    color:#fff;

    font-size:15px;

    font-weight:500;

    letter-spacing:.5px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .lightbox-content img{

        max-width:95vw;

        max-height:70vh;

    }

    .lightbox-prev,
    .lightbox-next{

        width:48px;

        height:48px;

        font-size:28px;

    }

    .lightbox-prev{

        left:10px;

    }

    .lightbox-next{

        right:10px;

    }

    .lightbox-close{

        width:46px;

        height:46px;

        top:15px;

        right:15px;

        font-size:30px;

    }

}