.popup-wrapper {
padding: 20px;
} .popup-overlay {
position: fixed;
top: 0; 
left: 0;
width: 100%; 
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 9999;
opacity: 0;
visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.3s ease, visibility 0.3s ease;
} .popup-overlay.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.popup-overlay.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
} .popup-content {
position: relative;
background: #fff;
border-radius: 30px 0 30px 30px;
max-width: 100%;
height: 90vh;
overflow-y: auto;
margin: auto; } .popup-close {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
cursor: pointer;
border-radius: 0 0 0 15px;
padding: 10px;
transition: background-color 0.2s ease;
}
.popup-close svg {
fill: #fff;
font-size: 15px;
transition: fill 0.2s ease;
} .popup-minimized-icon {
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
display: none;
width: 100px;
z-index: 10000;
} .popup-content.minimized {
transform: scale(0);
opacity: 0;
} .template-default .popup-content { } .template-promo .popup-content {
background: #fff7e6;
}
.template-promo .popup-content .popup-body {
padding: 25px;
}
.template-promo .popup-content .popup-close {
background-color: #FBAF40;
box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.15);
}
.template-promo .popup-content .popup-close:hover {
background-color: #fff;
}
.template-promo .popup-content .popup-close:hover svg {
fill: #FBAF40;
}
.template-promo .popup-content .popup-body ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
}
.template-promo .popup-content .popup-body ul li {
border-bottom: 1px solid #FBAF40;
padding: 13px 0;
display: flex;
align-items: center;
gap: 10px;
transition: color 0.3s ease;
width: 100%;
}
.template-promo .popup-content .popup-body ul li:hover {
color: #FBAF40;
}
.template-promo .popup-content .popup-body ul li .fas {
color: #FBAF40;
font-size: 13px;
}
.template-promo .popup-title {
color: #FBAF40;
font-size: 36px;
margin: 0 0 10px;
}
.template-promo .popup-footer {
background: #FBAF40;
padding: 10px 60px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 60px;
}
.template-promo .popup-footer .popup-footer-links,
.template-promo .popup-footer .socials {
display: flex;
align-items: center;
gap: 30px;
color: #fff;
}
.template-promo .popup-footer .popup-footer-links a,
.template-promo .popup-footer .socials a {
color: inherit;
font-size: 16px;
}
.template-promo .popup-footer .socials .instagram-link:hover {
color: #BE3381;
}
.template-promo .popup-footer .socials .facebook-link:hover {
color: #1877F2;
}
@media screen and (min-width: 320px) {
.template-promo .popup-footer {
flex-direction: column;
}
.popup-content {
height: fit-content;
}
}
@media screen and (min-width: 375px) {
.template-promo .popup-footer {
flex-direction: column;
}
.popup-content {
height: fit-content;
}
}
@media screen and (min-width: 425px) {
.template-promo .popup-footer {
flex-direction: column;
}
.popup-content {
height: fit-content;
}
} @media screen and (min-width: 576px) {
.popup-content {
max-width: 95%;
height: fit-content;
border-radius: 20px 0 20px 20px;
}
.template-promo .popup-content .popup-body {
padding: 20px;
}
.template-promo .popup-footer {
padding: 15px;
gap: 15px;
flex-direction: column;
height: auto;
}
.popup-minimized-icon {
width: 80px;
bottom: 15px;
right: 15px;
}
} @media screen and (min-width: 768px) {
.popup-content {
max-width: 90%;
height: fit-content;
border-radius: 20px 0 20px 20px;
}
.template-promo .popup-content .popup-body {
padding: 30px 60px;
}
.template-promo .popup-footer {
padding: 10px 30px;
flex-direction: row;
justify-content: space-between;
height: 60px;
}
.popup-minimized-icon {
width: 100px;
bottom: 20px;
right: 20px;
}
} @media screen and (min-width: 992px) {
.popup-content {
max-width: 1200px;
height: fit-content;
border-radius: 30px 0 30px 30px;
}
.template-promo .popup-content .popup-body {
padding: 50px 120px;
}
.template-promo .popup-footer {
padding: 10px 60px;
height: 60px;
}
}