/*=========================================================
 VSBANK PREMIUM POPUP
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
    font-family:'Poppins',sans-serif;
    background:#f5f7fb;

}

/* Website */

.website-content{

    min-height:100vh;

}

/* Overlay */

#overlay{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

    display:none;

    z-index:9998;

}

/* Popup */

#popup{

    position:fixed;

    left:50%;

    top:50%;

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

    width:900px;

    max-width:95%;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    display:none;

    z-index:9999;

    box-shadow:

    0 20px 60px rgba(0,0,0,.45);

    animation:popupAnimation .45s ease;

}

/* Animated Gold Border */

#popup::before{

content:"";

position:absolute;

inset:0;

padding:3px;

border-radius:22px;

background:linear-gradient(
90deg,
#FFD700,
#fff6b3,
#d4af37,
#FFD700);

background-size:300%;

animation:borderAnimation 5s linear infinite;

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

/* Light Reflection */

#popup::after{

content:"";

position:absolute;

left:-120px;

top:-80px;

width:140px;

height:200%;

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

transform:rotate(25deg);

animation:shine 6s infinite;

pointer-events:none;

}

/* Banner */

.popup-body{

background:#fff;

}

.banner{

display:block;

width:100%;

}

/* Footer */

.popup-footer{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 25px;

background:#fafafa;

border-top:1px solid #ececec;

}

/* Remember */

.remember{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

color:#555;

cursor:pointer;

}

.remember input{

width:18px;

height:18px;

accent-color:#003d8f;

}

/* Button */

#continueBtn{

padding:14px 34px;

border:none;

border-radius:40px;

background:linear-gradient(
135deg,
#003d8f,
#005ac8);

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.30s;

box-shadow:0 10px 25px rgba(0,61,143,.30);

}

#continueBtn:hover{

transform:translateY(-3px);

background:linear-gradient(
135deg,
#d4af37,
#FFD700);

color:#111;

}

/* Close */

#closeBtn{

position:absolute;

right:15px;

top:15px;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#fff;

font-size:26px;

font-weight:bold;

cursor:pointer;

color:#b30000;

box-shadow:0 5px 15px rgba(0,0,0,.25);

transition:.30s;

z-index:99999;

}

#closeBtn:hover{

background:#b30000;

color:#fff;

transform:rotate(90deg);

}

/* Animations */

@keyframes popupAnimation{

from{

opacity:0;

transform:translate(-50%,-52%) scale(.90);

}

to{

opacity:1;

transform:translate(-50%,-50%) scale(1);

}

}

@keyframes borderAnimation{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

@keyframes shine{

0%{

left:-120px;

}

100%{

left:110%;

}

}

/* Responsive */

@media(max-width:768px){

#popup{

width:95%;

}

.popup-footer{

flex-direction:column;

gap:18px;

padding:20px;

}

#continueBtn{

width:100%;

}

.remember{

text-align:center;

justify-content:center;

}

}