/**
 * 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;
	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;
	overflow: visible !important;
	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, .3) !important;
}

.elementor-editor-active .lottie-container-pro-background::after {
	content: "Lottie Background";
	position: absolute;
	top: 5px;
	left: 5px;
	background: rgba(71, 206, 169, .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, .1) !important;
}

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