/* ==========================================
   Sara XV Luxury Signature Edition V4
   Archivo 5: lightbox.css
   ========================================== */

.lightbox{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    background:rgba(8,4,5,.94);
    backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    transition:
        opacity .45s ease,
        visibility .45s ease;
    z-index:10000;
}

.lightbox.active{
    opacity:1;
    visibility:visible;
}

.lightbox-content{
    position:relative;
    max-width:1100px;
    max-height:88vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lightbox-image{
    max-width:100%;
    max-height:88vh;
    border-radius:24px;
    border:1px solid rgba(200,162,74,.28);
    box-shadow:
        0 30px 90px rgba(0,0,0,.45);
    transform:scale(.96);
    opacity:0;
    transition:
        transform .45s ease,
        opacity .45s ease;
}

.lightbox.active .lightbox-image{
    transform:scale(1);
    opacity:1;
}

.lightbox-close{
    position:absolute;
    top:-18px;
    right:-18px;
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#F8F3EC;
    font-size:1.4rem;
    cursor:pointer;
    backdrop-filter:blur(10px);
    border:1px solid rgba(200,162,74,.30);
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.lightbox-close:hover{
    transform:scale(1.08);
    background:rgba(123,15,30,.75);
    border-color:rgba(232,208,138,.65);
}

.lightbox-prev,
.lightbox-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:58px;
    height:58px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#F8F3EC;
    font-size:1.4rem;
    cursor:pointer;
    backdrop-filter:blur(10px);
    border:1px solid rgba(200,162,74,.30);
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.lightbox-prev{
    left:-84px;
}

.lightbox-next{
    right:-84px;
}

.lightbox-prev:hover,
.lightbox-next:hover{
    transform:translateY(-50%) scale(1.08);
    background:rgba(123,15,30,.75);
    border-color:rgba(232,208,138,.65);
}

.lightbox-caption{
    position:absolute;
    left:50%;
    bottom:-58px;
    transform:translateX(-50%);
    color:#F4E7DE;
    font-family:'Cormorant Garamond', serif;
    font-size:1.1rem;
    letter-spacing:.04rem;
    text-align:center;
}

.lightbox-counter{
    position:absolute;
    top:-52px;
    left:50%;
    transform:translateX(-50%);
    padding:8px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#E8D08A;
    font-family:'Cinzel', serif;
    font-size:.8rem;
    letter-spacing:.12rem;
    border:1px solid rgba(200,162,74,.25);
}

.lightbox-loader{
    position:absolute;
    width:72px;
    height:72px;
    border-radius:50%;
    border:2px solid rgba(200,162,74,.18);
    border-top-color:#C8A24A;
    animation:lightboxSpin .9s linear infinite;
}

@keyframes lightboxSpin{
    to{
        transform:rotate(360deg);
    }
}

.lightbox.active::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top left,
            rgba(123,15,30,.10),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(200,162,74,.08),
            transparent 40%
        );
    pointer-events:none;
}

.lightbox-content::before{
    content:"";
    position:absolute;
    inset:-16px;
    border:1px solid rgba(200,162,74,.18);
    border-radius:32px;
    pointer-events:none;
}

@media(max-width:900px){

    .lightbox{
        padding:20px;
    }

    .lightbox-prev,
    .lightbox-next{
        width:50px;
        height:50px;
        font-size:1.2rem;
    }

    .lightbox-prev{
        left:10px;
    }

    .lightbox-next{
        right:10px;
    }

    .lightbox-close{
        top:12px;
        right:12px;
        width:46px;
        height:46px;
    }

    .lightbox-caption{
        bottom:-44px;
        font-size:1rem;
    }

    .lightbox-counter{
        top:12px;
    }

    .lightbox-content::before{
        display:none;
    }

}