/*==========================================================
GENESIS V2
POPUP CSS
==========================================================*/

.popup-overlay{

position:fixed;

inset:0;

display:flex;

align-items:center;

justify-content:center;

padding:2rem;

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

backdrop-filter:blur(14px);

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

opacity:0;

visibility:hidden;

transition:

opacity .4s ease,

visibility .4s ease;

z-index:9000;

}

.popup-overlay.active{

opacity:1;

visibility:visible;

}

/*==========================================================
POPUP
==========================================================*/

.popup{

position:relative;

width:min(92%,520px);

padding:3rem;

border-radius:32px;

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

border:1px solid rgba(255,255,255,.08);

text-align:center;

overflow:hidden;

transform:translateY(40px) scale(.9);

transition:.45s cubic-bezier(.22,.61,.36,1);

box-shadow:

0 40px 90px rgba(0,0,0,.45);

}

.popup-overlay.active .popup{

transform:translateY(0) scale(1);

}

/*==========================================================
BACKGROUND GLOW
==========================================================*/

.popup::before{

content:"";

position:absolute;

left:-180px;

top:-180px;

width:360px;

height:360px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(255,0,85,.18),

transparent);

filter:blur(90px);

pointer-events:none;

}

.popup::after{

content:"";

position:absolute;

right:-180px;

bottom:-180px;

width:360px;

height:360px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(139,0,255,.18),

transparent);

filter:blur(90px);

pointer-events:none;

}

/*==========================================================
ICON
==========================================================*/

.popup-icon{

position:relative;

width:90px;

height:90px;

margin:0 auto 2rem;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:

linear-gradient(

135deg,

rgba(255,0,85,.18),

rgba(139,0,255,.18));

animation:

popupPulse 2.5s ease-in-out infinite;

}

.popup-icon i{

font-size:3rem;

background:linear-gradient(

135deg,

#00ff88,

#00d26a);

background-clip:text;

-webkit-background-clip:text;

color:transparent;

}

/*==========================================================
TEXT
==========================================================*/

.popup h2{

font-size:2rem;

margin-bottom:1rem;

}

.popup p{

color:var(--text-light);

line-height:1.8;

margin-bottom:2rem;

}

.popup strong{

color:#fff;

}

/*==========================================================
BUTTON
==========================================================*/

.popup .btn-primary{

width:100%;

justify-content:center;

}

/*==========================================================
ANIMATIONS
==========================================================*/

@keyframes popupPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

/*==========================================================
MOBILE
==========================================================*/

@media(max-width:768px){

.popup{

padding:2.2rem;

}

.popup h2{

font-size:1.6rem;

}

.popup p{

font-size:.95rem;

}

.popup-icon{

width:72px;

height:72px;

}

.popup-icon i{

font-size:2.4rem;

}

}

@media(max-width:480px){

.popup{

padding:1.8rem;

border-radius:24px;

}

.popup h2{

font-size:1.4rem;

}

.popup p{

font-size:.9rem;

}

}