.popup-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;

    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.popup-overlay.active{
    opacity: 1;
    visibility: visible;
}

.popup-box{
    position: relative;

    width: 95vw;
    height: 95vh;

    background: #fff;

    border-radius: 12px;

    overflow: hidden;

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

.popup-box img{
     width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    background:#000;
}

.popup-button{

    position: absolute;

    left: 50%;
    bottom: 35px;

    transform: translateX(-50%);

    padding: 18px 45px;

    background: #d8232a;

    color: white;

    text-decoration: none;

    font-size: 22px;

    font-weight: bold;

    border-radius: 8px;

    transition: .3s;
}

.popup-button:hover{
    background:#b91c22;
}

.popup-close{

    position:absolute;

    top:20px;
    right:20px;

    width:55px;
    height:55px;

    border:none;
    border-radius:50%;

    background:#ffffff;

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

    cursor:pointer;

    font-size:34px;
    font-weight:bold;
    line-height:1;

    color:#333;

    box-shadow:0 5px 20px rgba(0,0,0,.35);

    padding:0;

    z-index:999;
}



@media(max-width:768px){

    .popup-box{

        width:100vw;
        height:100vh;

        border-radius:0;

    }

    .popup-button{

        width:85%;

        font-size:18px;

        bottom:20px;

    }

    .popup-close{

        width:45px;
        height:45px;
        font-size:28px;

    }

}