/**
 * Lottie Container Pro - Frontend Styles
 * Supports JavaScript-rendered Lottie backgrounds
 */

/* Base styles for elements with Lottie backgrounds */
.has-lottie-background.lottie-bg-container {
    position: relative !important;
    /* Ensure container establishes stacking context */
    isolation: isolate !important;
}

/* Container for Lottie background - above background color, below content */
.lottie-container-pro-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    /* Allow overflow for positioning freedom like CSS backgrounds */
    overflow: visible !important;
    /* Remove borders and backgrounds that might interfere */
    border: none !important;
    background: none !important;
}

/* Lottie player within background container - force our positioning */
.lottie-container-pro-background lottie-player {
    display: block !important;
    pointer-events: none !important;
    position: absolute !important;
}

/* Override any conflicting styles that might interfere with positioning */
.elementor-element .lottie-container-pro-background lottie-player,
.elementor-container .lottie-container-pro-background lottie-player,
.elementor-section .lottie-container-pro-background lottie-player,
.elementor-column .lottie-container-pro-background lottie-player {
    display: block !important;
    pointer-events: none !important;
    position: absolute !important;
}

/* Force reset ALL positioning properties to let JavaScript control them */
.lottie-container-pro-background lottie-player {
    top: unset !important;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
    transform: unset !important;
    width: unset !important;
    height: unset !important;
    object-fit: unset !important;
    object-position: unset !important;
}

/* Specific override for bottom-right positioning */
.lottie-container-pro-background lottie-player[data-position="bottom-right"] {
    top: unset !important;
    left: unset !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Ensure content stays above Lottie background */
.has-lottie-background > *:not(.lottie-container-pro-background) {
    position: relative !important;
    z-index: 1 !important;
}

.has-lottie-background > .elementor-container,
.has-lottie-background > .elementor-column-wrap,
.has-lottie-background > .elementor-widget-wrap,
.has-lottie-background > .elementor-inner,
.has-lottie-background > .elementor-section-wrap {
    position: relative !important;
    z-index: 1 !important;
}

/* Force all child widgets to stay above Lottie */
.has-lottie-background .elementor-widget {
    position: relative !important;
    z-index: 1 !important;
}

/* Force all inner sections and columns to stay above Lottie */
.has-lottie-background .elementor-section,
.has-lottie-background .elementor-column {
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure background color stays behind Lottie */
.has-lottie-background::before {
    z-index: -1 !important;
}

/* Specific Elementor element overrides */
.elementor-element.has-lottie-background {
    position: relative !important;
}

.elementor-element.has-lottie-background > .elementor-widget-wrap,
.elementor-element.has-lottie-background > .elementor-container,
.elementor-element.has-lottie-background > .elementor-column-wrap {
    position: relative !important;
    z-index: 1 !important;
}

/* Container specific styles */
.elementor-container.has-lottie-background {
    position: relative !important;
}

/* Section specific styles */
.elementor-section.has-lottie-background {
    position: relative !important;
}

/* Column specific styles */
.elementor-column.has-lottie-background {
    position: relative !important;
}

/* Performance optimizations */
.lottie-container-pro-background lottie-player {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lottie-container-pro-background lottie-player[style*="auto"] {
        max-width: 90% !important;
        max-height: 90% !important;
    }
}

@media (max-width: 480px) {
    .lottie-container-pro-background lottie-player[style*="auto"] {
        max-width: 80% !important;
        max-height: 80% !important;
    }
}

/* Editor specific styles */
.elementor-editor-active .lottie-container-pro-background {
    border: 1px dashed rgba(71, 206, 169, 0.3) !important;
}

.elementor-editor-active .lottie-container-pro-background::after {
    content: "Lottie Background";
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(71, 206, 169, 0.9);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    z-index: 999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    pointer-events: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .elementor-editor-active .lottie-container-pro-background {
        border-color: #000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .lottie-container-pro-background lottie-player {
        animation: none !important;
    }
}

/* Debug styles for troubleshooting */
.lottie-debug .lottie-container-pro-background {
    border: 2px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

.lottie-debug .lottie-container-pro-background lottie-player {
    border: 1px solid blue !important;
}