/* Figma 2178:5196 / 2178:5198: the same 1880 × 300 creative at both sizes. */
.tu-bottom-ad {
    --bottom-ad-inset: 48px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: calc(var(--bottom-ad-inset) + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 40px);
    max-width: 1880px;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translate(-50%, calc(100% + var(--bottom-ad-inset) + env(safe-area-inset-bottom, 0px)));
    transition: transform 400ms ease-out, opacity 300ms ease-out;
    pointer-events: none;
}

.tu-bottom-ad[hidden] {
    display: none !important;
}

.tu-bottom-ad.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.tu-bottom-ad__creative {
    display: block;
    width: 100%;
    aspect-ratio: 1880 / 300;
    overflow: hidden;
    background: #121218;
    pointer-events: auto;
}

.tu-bottom-ad__creative img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.tu-bottom-ad__close {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffd00d;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.tu-bottom-ad__close svg {
    width: 20px;
    height: 20px;
}

.tu-bottom-ad__close:hover {
    background: rgb(10 14 26 / 55%);
}

.tu-bottom-ad__creative:focus-visible,
.tu-bottom-ad__close:focus-visible {
    outline: 2px solid #ffd00d;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .tu-bottom-ad {
        --bottom-ad-inset: 40px;
        width: calc(100% - 32px);
    }

    .tu-bottom-ad__close {
        top: -6px;
        right: -6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tu-bottom-ad {
        transition: none;
    }
}