.ck-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}

.ck-popup.active{
display:flex;
}

/* OVERLAY */

.ck-popup-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
backdrop-filter:blur(6px);
animation:fadeIn .3s ease;
}

/* MODAL */

.ck-popup-content{

position:relative;

background:#ffffff;

border-radius:18px;

max-width:560px;
width:95%;

padding:30px;

box-shadow:
0 40px 100px rgba(0,0,0,.35);

animation:popupIn .35s ease;

}

/* CLOSE BUTTON */

.ck-popup-close{

position:absolute;
top:10px;
right:12px;

font-size:28px;

background:none;
border:none;

cursor:pointer;

color:#444;

}

/* ANIMATIONS */

@keyframes popupIn{
from{
opacity:0;
transform:translateY(20px) scale(.95);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}

/* MOBILE */

@media(max-width:600px){

.ck-popup-content{

width:100%;
height:100%;

border-radius:0;

overflow:auto;

}

}