#wpip-overlay,
.wpip-sc-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7) !important;
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
animation: wpipFadeIn 0.3s ease;
}
#wpip-modal,
.wpip-sc-modal {
position: relative;
max-width: 90%;
max-height: 90vh;
overflow: hidden;
animation: wpipZoomIn 0.3s ease;
}
#wpip-modal img,
.wpip-sc-modal img {
display: block;
width: 100%;
height: auto;
max-height: 85vh;
object-fit: contain;
} #wpip-modal a,
.wpip-sc-modal a {
display: block;
cursor: pointer;
text-decoration: none;
line-height: 0;
}
#wpip-modal a img,
.wpip-sc-modal a img {
cursor: pointer;
}
#wpip-close,
.wpip-sc-close {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 10;
transition: background 0.2s;
}
#wpip-close:hover,
.wpip-sc-close:hover {
background: rgba(0, 0, 0, 0.9);
}
.wpip-shortcode-trigger {
display: inline-block;
cursor: pointer;
}
@keyframes wpipFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes wpipZoomIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@media (max-width: 600px) {
#wpip-modal,
.wpip-sc-modal {
max-width: 95%;
}
}