/**
 * WP Bakery Lottie – Frontend Styles v2.0.0
 *
 * This file only handles structural necessities that cannot be done via
 * WPBakery's own layout controls.  There is intentionally no decorative
 * styling here — colours, fonts, spacing are all your theme's concern.
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.wpb-lottie-box {
    position: relative; /* required for full-box link overlay */
}

/* ── Typography helpers ───────────────────────────────────────────────────── */
.wpb-lottie-header,
.wpb-lottie-subheader {
    display: block;
}

/* ── SVG / player container ───────────────────────────────────────────────── */
.wpb-lottie-svg {
    display: flex;           /* allows alignment (flex-start / center / flex-end) */
    align-items: flex-start;
}

.wpb-lottie-animation {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;             /* overridden per-instance by inline style */
}

/* ── Full-box link overlay ────────────────────────────────────────────────── */
.wpb-lottie-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    text-decoration: none;
}

/* ── Fallback image ───────────────────────────────────────────────────────── */
/*
 * The fallback <img> lives inside the custom element.
 * It is hidden by default; the JS controller shows it on an error event.
 * We also honour the CSS-only case: if the browser cannot run the player
 * custom element at all, the image will be visible via the cascade.
 */
.wpb-lottie-fallback {
    display: none;
    width: 100%;
    height: auto;
}

/* When the player hasn't upgraded (no JS / very old browser): show image */
:not(:defined) > .wpb-lottie-fallback {
    display: block;
}

/* ── Reduced-motion: hide animated player, show fallback when set to static ── */
@media ( prefers-reduced-motion: reduce ) {
    .wpb-lottie-box[data-reduced-motion="static"] lottie-player,
    .wpb-lottie-box[data-reduced-motion="static"] dotlottie-player {
        opacity: 0;
    }

    .wpb-lottie-box[data-reduced-motion="static"] .wpb-lottie-fallback {
        display: block;
    }
}

/* ── Lazy placeholder pulse ───────────────────────────────────────────────── */
.wpb-lottie-lazy .wpb-lottie-animation:not([src]) {
    background-color: rgba( 0, 0, 0, 0.04 );
    animation: wpb-lottie-pulse 1.5s ease-in-out infinite;
    min-height: 80px;
}

@keyframes wpb-lottie-pulse {
    0%, 100% { background-color: rgba( 0, 0, 0, 0.04 ); }
    50%       { background-color: rgba( 0, 0, 0, 0.09 ); }
}

/* ── Keyboard focus ring ──────────────────────────────────────────────────── */
lottie-player:focus,
dotlottie-player:focus {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

lottie-player:focus:not(:focus-visible),
dotlottie-player:focus:not(:focus-visible) {
    outline: none;
}