#ocPopupOverlay{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.75);
display:flex;
justify-content:center;
align-items:center;
z-index:999999;
opacity:0;
visibility:hidden;
transition:.35s;
padding:20px;
box-sizing:border-box;
}

#ocPopupOverlay.show{
opacity:1;
visibility:visible;
}

/* Added wrapper */
.ocPopupWrapper{
position:relative;
display:inline-block;
}

.ocPopupBox{

position:relative;

max-width:360px;

width:100%;

max-height:80vh;

border-radius:18px;

overflow:hidden;

background:#fff;

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

animation:popupScale .4s ease;

}

@keyframes popupScale{

from{

transform:scale(.85);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.ocPopupBox img{

display:block;

width:100%;

height:auto;

max-height:80vh;

}

.ocClose{

position:absolute;

top:-16px;

right:-16px;

width:46px;

height:46px;

border-radius:50%;

border:2px solid rgba(255,255,255,.25);

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

backdrop-filter:blur(12px);

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

color:#fff;

font-size:22px;

font-weight:600;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

transition:.3s ease;

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

z-index:9999;

padding:0;

line-height:1;

}

.ocClose:hover{

background:#fff;

color:#111;

transform:rotate(90deg) scale(1.08);

}

@media(max-width:768px){

.ocPopupBox{

max-width:94%;

border-radius:12px;

}

.ocClose{

width:38px;

height:38px;

font-size:18px;

top:-12px;

right:-12px;

}

}