/* === POPUP REKLAMOWY === */
.modal-ads-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}
.modal-ads-dialog {
position: relative;
max-width: 700px;
max-height: 90dvh;
width: 90%;
background: #111;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
/* button reset + własne style */
button.modal-ads-close {
position: absolute;
top: -15px;
right: -15px;
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
cursor: pointer;
z-index: 10;
color: #333;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
user-select: none;
transition: background 0.15s;
}
button.modal-ads-close:hover,
button.modal-ads-close:focus-visible {
background: #ececec;
outline: 2px solid #333;
outline-offset: 2px;
}
.modal-ads-body a {
display: block;
}
.modal-ads-body img {
width: 100%;
display: block;
opacity: 0;
transition: opacity 0.35s ease;
}
.modal-ads-body img.modal-ads-loaded {
opacity: 1;
}
/* Skeleton loader */
.modal-ads-skeleton {
width: 100%;
aspect-ratio: 16 / 9;
background: linear-gradient(90deg, #1e1e1e 25%, #2e2e2e 50%, #1e1e1e 75%);
background-size: 200% 100%;
animation: modal-ads-shimmer 1.4s infinite;
}
@keyframes modal-ads-shimmer {
0%   { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (max-width: 600px) {
.modal-ads-dialog {
width: 95%;
}
button.modal-ads-close {
top: -13px;
right: -10px;
width: 28px;
height: 28px;
font-size: 18px;
}
}