:root {
    --ontb-footer-ad-offset: 16px;
    --ontb-footer-ad-radius: 8px;
    --ontb-footer-ad-shadow: 0 12px 30px rgba(15, 23, 42, .22);
}

.ontb-footer-image-ad {
    position: fixed;
    z-index: 99998;
    right: 50%;
    bottom: calc(var(--ontb-footer-ad-offset) + env(safe-area-inset-bottom));
    width: min(960px, calc(100vw - 32px));
    max-height: min(180px, 28vh);
    overflow: visible;
    opacity: 0;
    transform: translate(50%, 12px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.ontb-footer-image-ad.is-visible {
    opacity: 1;
    transform: translate(50%, 0);
    pointer-events: auto;
}

.ontb-footer-image-ad__content {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: var(--ontb-footer-ad-radius);
    box-shadow: var(--ontb-footer-ad-shadow);
}

.ontb-footer-image-ad__content img {
    display: block;
    width: 100%;
    max-height: min(180px, 28vh);
    object-fit: contain;
}

.ontb-footer-image-ad__close {
    position: absolute;
    top: -14px;
    right: -14px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #111827;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
    font: 400 25px/1 Arial, sans-serif;
    cursor: pointer;
}

.ontb-footer-image-ad__close:hover,
.ontb-footer-image-ad__close:focus-visible {
    background: #000;
}

.ontb-footer-image-ad__close:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

@media (max-width: 782px) {
    :root {
        --ontb-footer-ad-offset: 72px;
    }

    .ontb-footer-image-ad {
        width: calc(100vw - 24px);
        max-height: min(160px, 25vh);
    }

    .ontb-footer-image-ad__content img {
        max-height: min(160px, 25vh);
    }

    .ontb-footer-image-ad__close {
        top: -12px;
        right: -8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ontb-footer-image-ad {
        transition: none;
    }
}