.wpfb-root {
    position: relative;
    z-index: 999999;
    --wpfb-delay: 2s;
    --wpfb-desktop-width: 170px;
    --wpfb-mobile-width: 728px;
}

.wpfb-desktop {
    position: fixed;
    --wpfb-vertical-offset: 0px;
    width: min(var(--wpfb-desktop-width), 45vw);
    max-height: 540px;
    display: block;
    line-height: 0;
    z-index: 999999;
    opacity: 0;
    will-change: transform, opacity;
    animation-duration: .85s;
    animation-timing-function: cubic-bezier(.22, .75, .23, 1);
    animation-delay: var(--wpfb-delay);
    animation-fill-mode: forwards;
}

.wpfb-desktop img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 540px;
    object-fit: contain;
}

.wpfb-left {
    left: 0;
    transform: translate(-105%, var(--wpfb-shift-y, -50%));
    animation-name: wpfb-sweep-left;
}

.wpfb-right {
    right: 0;
    transform: translate(105%, var(--wpfb-shift-y, -50%));
    animation-name: wpfb-sweep-right;
}

.wpfb-mobile {
    display: none;
}


.wpfb-v-center {
    top: 50%;
    bottom: auto;
    --wpfb-shift-y: -50%;
}

.wpfb-v-top {
    top: var(--wpfb-vertical-offset);
    bottom: auto;
    --wpfb-shift-y: 0%;
}

.wpfb-v-bottom {
    top: auto;
    bottom: var(--wpfb-vertical-offset);
    --wpfb-shift-y: 0%;
}


@keyframes wpfb-sweep-left {
    0% {
        opacity: 0;
        transform: translate(-105%, var(--wpfb-shift-y, -50%));
        clip-path: inset(0 100% 0 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, var(--wpfb-shift-y, -50%));
        clip-path: inset(0 0 0 0);
    }
}

@keyframes wpfb-sweep-right {
    0% {
        opacity: 0;
        transform: translate(105%, var(--wpfb-shift-y, -50%));
        clip-path: inset(0 0 0 100%);
    }
    100% {
        opacity: 1;
        transform: translate(0, var(--wpfb-shift-y, -50%));
        clip-path: inset(0 0 0 0);
    }
}

@keyframes wpfb-sweep-mobile {
    0% {
        opacity: 0;
        transform: translate(-50%, 105%);
        clip-path: inset(100% 0 0 0);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
        clip-path: inset(0 0 0 0);
    }
}

@media (max-width: 782px) {
    .wpfb-desktop {
        display: none !important;
    }

    .wpfb-mobile {
        position: fixed;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 105%);
        display: block;
        width: min(100%, var(--wpfb-mobile-width));
        max-height: 140px;
        line-height: 0;
        z-index: 999999;
        text-align: center;
        opacity: 0;
        will-change: transform, opacity;
        animation: wpfb-sweep-mobile .8s cubic-bezier(.22, .75, .23, 1) var(--wpfb-delay) forwards;
    }

    .wpfb-mobile img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 140px;
        object-fit: contain;
        margin: 0 auto;
    }
}

@media (min-width: 783px) {
    .wpfb-mobile {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpfb-left,
    .wpfb-right,
    .wpfb-mobile {
        animation-duration: .01ms !important;
    }
}