/* Overlay */

#mask{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.75);
    z-index:99998;
    display:none;
}


/* Popup container */

#dialog{
    position:fixed !important;

    top:50% !important;
    left:50% !important;

    transform:translate(-50%,-50%) !important;

    margin:0 !important;
    padding:0 !important;

    display:none;

    z-index:99999;

    background:#fff;

    border-radius:12px;

    box-shadow:0 0 30px rgba(0,0,0,.4);

    overflow:visible !important;
}


/* Image wrapper */

#dialog-content{
    display:flex;
    justify-content:center;
    align-items:center;

    padding:0;
    margin:0;
}


/* Popup image */

#dialog-content img{

    width:95vw;          /* increased width */

    max-width:950px;     /* desktop limit */

    max-height:90vh;

    height:auto;

    object-fit:contain;

    border-radius:12px;

    display:block;
}


/* Close button */

#popup-close{

    position:absolute;

    top:-15px;
    right:-15px;

    width:38px;
    height:38px;

    border-radius:50%;

    background:#ff5a5a;

    color:#fff;

    font-size:22px;
    font-weight:bold;

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

    cursor:pointer;

    box-shadow:0 3px 10px rgba(0,0,0,.4);

    z-index:100000;
}


#popup-close:hover{
    transform:scale(1.1);
}


/* Mobile */

@media(max-width:768px){

#dialog-content img{

    width:92vw;

    max-height:85vh;

}

#popup-close{

    width:32px;
    height:32px;

    font-size:18px;

}

}