.zbs-enabled {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

.zbs-enabled > .zbs-backgrounds {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.zbs-enabled > .zbs-backgrounds .zbs-slide {
    position: absolute;
    inset: -1.5%;
    opacity: 0;
    background-size: cover;
    background-repeat: no-repeat;
    will-change: transform, opacity;
    transform: scale(1);
    transition-property: opacity;
    transition-timing-function: ease-in-out;
}

.zbs-enabled > .zbs-backgrounds .zbs-slide.is-active {
    opacity: 1;
}

.zbs-enabled > .zbs-backgrounds .zbs-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.zbs-enabled > *:not(.zbs-backgrounds) {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .zbs-enabled > .zbs-backgrounds .zbs-slide {
        transform: none !important;
        animation: none !important;
    }
}

/* Text managed from the slider admin panel. Typography still comes from Elementor. */
.zbs-enabled .zbs-managed-text {
    transition-property: opacity, transform;
    transition-timing-function: ease;
    opacity: 1;
    transform: translateY(0);
    white-space: pre-line;
}

.zbs-enabled .zbs-managed-text.zbs-text-hidden {
    opacity: 0;
    transform: translateY(8px);
}