.vjp-layer {
    position: fixed;
    inset: 0;
    z-index: 1090;
    pointer-events: none;
}

.vjp-layer--overlay {
    display: grid;
    place-items: center;
    padding: 20px;
    pointer-events: auto;
}

.vjp-layer--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    opacity: 0;
    transition: opacity 220ms ease;
}

.vjp-layer.is-visible::before {
    opacity: 1;
}

.vjp-panel {
    position: absolute;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
}

.vjp-panel--overlay {
    position: relative;
    max-width: min(920px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    transform: scale(0.97);
}

.vjp-panel--bottom {
    right: 20px;
    bottom: 20px;
    left: 20px;
    width: min(960px, calc(100vw - 40px));
    margin-inline: auto;
    transform: translateY(calc(100% + 24px));
}

.vjp-panel--corner {
    right: 20px;
    bottom: 20px;
    width: min(380px, calc(100vw - 40px));
    transform: translate(18px, 18px);
}

.vjp-layer.is-visible .vjp-panel {
    opacity: 1;
    transform: none;
}

.vjp-creative,
.vjp-creative picture,
.vjp-creative img {
    display: block;
    max-width: 100%;
}

.vjp-creative {
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

.vjp-creative img {
    width: auto;
    height: auto;
    max-height: calc(100vh - 40px);
    margin: 0 auto;
    object-fit: contain;
}

.vjp-panel--bottom .vjp-creative img {
    width: 100%;
    max-height: min(32vh, 300px);
}

.vjp-panel--corner .vjp-creative img {
    width: 100%;
    max-height: min(62vh, 520px);
}

.vjp-close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #20242a;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    font: 700 24px/30px Arial, sans-serif;
    cursor: pointer;
}

.vjp-close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

body.vjp-scroll-lock {
    overflow: hidden;
}

@media (max-width: 767px) {
    .vjp-layer--overlay {
        padding: 14px;
    }

    .vjp-panel--overlay,
    .vjp-panel--bottom,
    .vjp-panel--corner {
        max-width: calc(100vw - 28px);
    }

    .vjp-panel--overlay {
        max-height: calc(100vh - 28px);
    }

    .vjp-panel--bottom {
        right: 14px;
        bottom: 14px;
        left: 14px;
        width: auto;
    }

    .vjp-panel--corner {
        right: 14px;
        bottom: 14px;
        width: min(340px, calc(100vw - 28px));
    }

    .vjp-creative img {
        max-height: calc(100vh - 28px);
    }

    .vjp-close {
        top: -10px;
        right: -10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vjp-layer--overlay::before,
    .vjp-panel {
        transition-duration: 1ms;
    }
}