.spb-popup{
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,0.75);
    justify-content:center;
    align-items:center;
    padding:20px;
    box-sizing:border-box;
}

/* Popup Box */
.spb-box{
    position:relative;
    width:auto;
    max-width:900px;
    max-height:90vh;
    overflow:hidden;
    border-radius:12px;
    animation:spbFadeIn .3s ease;
}

/* Image Wrapper */
.spb-image-wrap{
    line-height:0;
}

/* Popup Image */
.spb-popup-image{
    width:100%;
    height:auto;
    max-height:85vh;
    object-fit:contain;
    display:block;
    border-radius:12px;
}

/* Close Button */
.spb-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:10;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.5);
    color:#fff;
    border-radius:50%;
    cursor:pointer;
    font-size:26px;
    font-weight:600;
    transition:.3s;
}

.spb-close:hover{
    background:#000;
}

/* Content Area */
.spb-content{
    background:#fff;
    padding:25px;
    text-align:left;
}

/* Content only popup */
.spb-box:has(.spb-content):not(:has(img)){
    max-width:650px;
    background:#fff;
}

/* Mobile */
@media(max-width:768px){

    .spb-box{
        width:95%;
        max-width:95%;
        max-height:85vh;
    }

    .spb-popup-image{
        max-height:80vh;
    }

    .spb-content{
        padding:18px;
    }

    .spb-close{
        width:34px;
        height:34px;
        font-size:22px;
        top:8px;
        right:8px;
    }
}

/* Animation */
@keyframes spbFadeIn{

    from{
        opacity:0;
        transform:scale(.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}