:root {
--popup-overlay-bg: rgba(0, 0, 0, 0.7);
--popup-z-index-overlay: 999999;
--popup-z-index-container: 1000000;
}
.wp-simple-popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--popup-overlay-bg);
z-index: var(--popup-z-index-overlay);
}
.wp-simple-popup-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
max-height: 90vh;
z-index: var(--popup-z-index-container);
text-align: center;
width: var(--popup-width-desktop, 90%);
} .wp-simple-popup-container img {
max-width: 100%;
height: auto;
display: inline-block;
margin: 0 auto;
}
.wp-simple-popup-container a {
display: inline-block;
margin: 0 auto;
} .wp-simple-popup-close-wrapper {
text-align: center;
margin-bottom: 10px;
line-height: 0;
} .wp-simple-popup-close {
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
padding: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
margin: 0 auto;
background-color: var(--popup-close-bg, #333333);
color: var(--popup-close-color, #ffffff);
}
.wp-simple-popup-close:hover {
opacity: 0.9;
} .wp-simple-popup-html-content {
background: #fff;
padding: 20px;
border-radius: 4px;
max-height: calc(90vh - 40px);
overflow-y: auto;
text-align: left;
position: relative;
}
.wp-simple-popup-html-content .wp-simple-popup-close {
position: absolute;
top: 10px;
right: 10px;
} @media (max-width: 768px) {
.wp-simple-popup-container {
width: var(--popup-width-mobile, 90%);
}
.wp-simple-popup-close {
width: 25px;
height: 25px;
font-size: 16px;
}
.wp-simple-popup-close-wrapper {
margin-bottom: 5px;
}
} @media (prefers-reduced-motion: reduce) {
.wp-simple-popup-overlay,
.wp-simple-popup-container {
animation: none !important;
transition: none !important;
}
.wp-simple-popup-overlay {
transition: opacity 0.1s ease !important;
}
}