.popup-overlay {
position: absolute;
right: var(--spacing-responsive);
bottom: 25px;
background: none;
display: flex;
align-items: end;
justify-content: end;
z-index: 500;
opacity: 1;
transition: opacity 0.5s ease;
} .popup-overlay.hidden {
opacity: 0;
pointer-events: none;
} .popup {
position: relative;
background: #fff;
width: 300px;
max-width: 300px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
#popup-image {
width: 100%;
height: 150px;
object-fit: cover;
}
#popup-text {
font-size: 12px;
} .close-btn {
position: absolute;
top: -5px;
right: -5px;
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
background-color: #eee;
color: #333;
font-size: 12px;
font-weight: bold;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.close-btn:hover {
background-color: #ccc;
transform: scale(1.1);
} @media (max-width: 1024px) {
.my-popup-overlay {
bottom: 25px;
}
.popup {
max-width: 200px;
}
.popup img {
height: 150px;
object-fit: cover;
}
}
@media (max-width: 767px) {
.my-popup-overlay {
display: none;
}
}