/* Backdrop and dialog share positioning + z-index; DOM order keeps banner above overlay.
   Custom properties declared here (not on :root) so the plugin contributes no
   inherited globals — descendants of these elements still see the vars. */
#popup-reklamowy-overlay,
#popup-reklamowy-banner {
    --pr-anim: 0.3s ease;
    --pr-radius: 8px;
    --pr-close-size: 30px;
    position: fixed;
    z-index: var(--pr-z, 999999);
    transition: opacity var(--pr-anim);
}

#popup-reklamowy-overlay {
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

/* Banner shrink-wraps its content. Caps here are a safety net for raw HTML
   adserver snippets; img/iframe are also capped directly so the visible
   element and the DOM box match — no transparent letterboxing. */
#popup-reklamowy-banner {
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    max-width: var(--pr-max-w-d, 33vw);
    max-height: var(--pr-max-h-d, 33vh);
    border-radius: var(--pr-radius);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: opacity var(--pr-anim), transform var(--pr-anim);
}

.popup-reklamowy-hidden  { opacity: 0; pointer-events: none; }
.popup-reklamowy-visible { opacity: 1; pointer-events: auto; }

#popup-reklamowy-banner.popup-reklamowy-hidden {
    transform: scale(0.95);
}

#popup-reklamowy-close,
#popup-reklamowy-close svg {
    width: var(--pr-close-size);
    height: var(--pr-close-size);
}

#popup-reklamowy-close {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0.9;
    z-index: 10;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#popup-reklamowy-close:hover,
#popup-reklamowy-close:focus-visible {
    opacity: 1;
    transform: scale(1.1);
}

#popup-reklamowy-close svg {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Click-wrapper must shrink to its img, otherwise it would stretch full width
   and reintroduce empty space the banner would wrap. */
#popup-reklamowy-content > a {
    display: block;
    width: fit-content;
}

/* Cap the visual element directly with width/height: auto so the element box
   equals the rendered (aspect-preserved) image — banner then fits tightly. */
#popup-reklamowy-content img,
#popup-reklamowy-content iframe {
    display: block;
    max-width: var(--pr-max-w-d, 33vw);
    max-height: var(--pr-max-h-d, 33vh);
}

#popup-reklamowy-content iframe {
    border: 0;
}

@media (max-width: 768px) {
    #popup-reklamowy-banner,
    #popup-reklamowy-content img,
    #popup-reklamowy-content iframe {
        max-width: var(--pr-max-w-m, calc(100vw - 20px));
        max-height: var(--pr-max-h-m, 50vh);
    }
    #popup-reklamowy-overlay,
    #popup-reklamowy-banner {
        --pr-close-size: 25px;
    }
    #popup-reklamowy-close {
        top: 5px;
        right: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #popup-reklamowy-overlay,
    #popup-reklamowy-banner,
    #popup-reklamowy-close {
        transition: none;
    }
    #popup-reklamowy-banner.popup-reklamowy-hidden {
        transform: none;
    }
}