/* Webbo Overlay for Elementor */
.webbo-overlay-host,
.webbo-overlay-enabled,
.webbo-bg-filter-enabled {
	position: relative;
	isolation: isolate;
}

.webbo-overlay-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-radius: inherit;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* Filters the native Elementor background without filtering content. */
.webbo-overlay-bg-filter-layer {
	z-index: 0;
	background: rgba(255, 255, 255, 0.001);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	will-change: backdrop-filter;
	transition:
		-webkit-backdrop-filter var(--webbo-overlay-transition, 300ms) ease,
		backdrop-filter var(--webbo-overlay-transition, 300ms) ease;
}

/*
 * Normal and Hover blur states are separate layers. Their opacity is
 * crossfaded because mask-image itself does not animate reliably.
 */
.webbo-overlay-blur-layer {
	z-index: 1;
}

.webbo-overlay-blur-layer::before,
.webbo-overlay-blur-layer::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.001);
	will-change: opacity;
	transition: opacity var(--webbo-overlay-transition, 300ms) ease;
}

.webbo-overlay-blur-layer::before {
	opacity: 1;
	-webkit-backdrop-filter: blur(var(--webbo-normal-blur-strength, 20px));
	backdrop-filter: blur(var(--webbo-normal-blur-strength, 20px));
	-webkit-mask-image: linear-gradient(
		var(--webbo-normal-blur-angle, 180deg),
		transparent 0%,
		transparent var(--webbo-normal-blur-start, 50%),
		#000 var(--webbo-normal-blur-full, 80%),
		#000 100%
	);
	mask-image: linear-gradient(
		var(--webbo-normal-blur-angle, 180deg),
		transparent 0%,
		transparent var(--webbo-normal-blur-start, 50%),
		#000 var(--webbo-normal-blur-full, 80%),
		#000 100%
	);
}

.webbo-overlay-blur-layer::after {
	opacity: 0;
	-webkit-backdrop-filter: blur(var(--webbo-hover-blur-strength, 20px));
	backdrop-filter: blur(var(--webbo-hover-blur-strength, 20px));
	-webkit-mask-image: linear-gradient(
		var(--webbo-hover-blur-angle, 180deg),
		transparent 0%,
		transparent var(--webbo-hover-blur-start, 50%),
		#000 var(--webbo-hover-blur-full, 80%),
		#000 100%
	);
	mask-image: linear-gradient(
		var(--webbo-hover-blur-angle, 180deg),
		transparent 0%,
		transparent var(--webbo-hover-blur-start, 50%),
		#000 var(--webbo-hover-blur-full, 80%),
		#000 100%
	);
}

.webbo-blur-hover-yes:hover > .webbo-overlay-blur-layer::before {
	opacity: 0;
}

.webbo-blur-hover-yes:hover > .webbo-overlay-blur-layer::after {
	opacity: 1;
}

/*
 * Normal and Hover gradients are separate layers. This creates a smooth,
 * dependable transition instead of trying to animate background-image.
 */
.webbo-overlay-gradient-layer {
	z-index: 2;
}

.webbo-overlay-gradient-layer::before,
.webbo-overlay-gradient-layer::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-radius: inherit;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	will-change: opacity;
	transition: opacity var(--webbo-overlay-transition, 300ms) ease;
}

.webbo-overlay-gradient-layer::before {
	opacity: var(--webbo-normal-opacity, 1);
	background-image: linear-gradient(
		var(--webbo-normal-angle, 180deg),
		var(--webbo-normal-color-1, rgba(0, 0, 0, 0.1)) var(--webbo-normal-location-1, 0%),
		var(--webbo-normal-color-2, rgba(0, 0, 0, 0.8)) var(--webbo-normal-location-2, 100%),
		var(--webbo-normal-color-3, rgba(0, 0, 0, 1)) var(--webbo-normal-location-3, 100%)
	);
}

.webbo-overlay-gradient-layer::after {
	opacity: 0;
	background-image: linear-gradient(
		var(--webbo-hover-angle, 180deg),
		var(--webbo-hover-color-1, rgba(0, 0, 0, 0.1)) var(--webbo-hover-location-1, 0%),
		var(--webbo-hover-color-2, rgba(0, 0, 0, 0.8)) var(--webbo-hover-location-2, 100%),
		var(--webbo-hover-color-3, rgba(0, 0, 0, 1)) var(--webbo-hover-location-3, 100%)
	);
}

.webbo-gradient-hover-yes:hover > .webbo-overlay-gradient-layer::before {
	opacity: 0;
}

.webbo-gradient-hover-yes:hover > .webbo-overlay-gradient-layer::after {
	opacity: var(--webbo-hover-opacity, 1);
}

/* Keep normal Elementor content above all Webbo layers. */
.webbo-overlay-host > .e-con-inner,
.webbo-overlay-host > .elementor-container,
.webbo-overlay-host > .elementor-widget-wrap,
.webbo-overlay-host > .elementor-element,
.webbo-overlay-enabled > .e-con-inner,
.webbo-overlay-enabled > .elementor-container,
.webbo-overlay-enabled > .elementor-widget-wrap,
.webbo-overlay-enabled > .elementor-element,
.webbo-bg-filter-enabled > .e-con-inner,
.webbo-bg-filter-enabled > .elementor-container,
.webbo-bg-filter-enabled > .elementor-widget-wrap,
.webbo-bg-filter-enabled > .elementor-element,
.webbo-native-blur-yes > .e-con-inner,
.webbo-native-blur-yes > .elementor-container,
.webbo-native-blur-yes > .elementor-widget-wrap,
.webbo-native-blur-yes > .elementor-element {
	position: relative;
	z-index: 3;
}

.elementor-editor-active .webbo-overlay-layer {
	pointer-events: none;
}

/* Keep Elementor's native overlay above Webbo's progressive blur layer. */
.webbo-native-blur-yes::before,
.webbo-native-blur-yes > .elementor-background-video-container::before,
.webbo-native-blur-yes > .e-con-inner > .elementor-background-video-container::before,
.webbo-native-blur-yes > .elementor-background-slideshow::before,
.webbo-native-blur-yes > .e-con-inner > .elementor-background-slideshow::before,
.webbo-native-blur-yes > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
.webbo-native-blur-yes > .elementor-background-overlay {
	z-index: 2;
}

/*
 * Native Elementor three-color Background Overlay enhancement.
 * Webbo mirrors Elementor's responsive gradient values into CSS variables and
 * reuses Elementor's own overlay surface. No JavaScript-created gradient layer.
 */
.webbo-native-overlay-three-color.webbo-native-overlay-linear {
	--webbo-native-overlay-rendered-gradient: linear-gradient(
		var(--webbo-native-overlay-angle, 270deg),
		var(--webbo-native-overlay-color-1, transparent) var(--webbo-native-overlay-location-1, 10%),
		var(--webbo-native-overlay-color-2, #f2295b) var(--webbo-native-overlay-location-2, 54%),
		var(--webbo-native-overlay-color-3, transparent) var(--webbo-native-overlay-location-3, 90%)
	);
}

.webbo-native-overlay-three-color.webbo-native-overlay-radial {
	--webbo-native-overlay-rendered-gradient: radial-gradient(
		at var(--webbo-native-overlay-position, center center),
		var(--webbo-native-overlay-color-1, transparent) var(--webbo-native-overlay-location-1, 10%),
		var(--webbo-native-overlay-color-2, #f2295b) var(--webbo-native-overlay-location-2, 54%),
		var(--webbo-native-overlay-color-3, transparent) var(--webbo-native-overlay-location-3, 90%)
	);
}

.webbo-native-overlay-three-color-hover.webbo-native-overlay-hover-linear {
	--webbo-native-overlay-hover-rendered-gradient: linear-gradient(
		var(--webbo-native-overlay-hover-angle, 270deg),
		var(--webbo-native-overlay-hover-color-1, transparent) var(--webbo-native-overlay-hover-location-1, 10%),
		var(--webbo-native-overlay-hover-color-2, #f2295b) var(--webbo-native-overlay-hover-location-2, 54%),
		var(--webbo-native-overlay-hover-color-3, transparent) var(--webbo-native-overlay-hover-location-3, 90%)
	);
}

.webbo-native-overlay-three-color-hover.webbo-native-overlay-hover-radial {
	--webbo-native-overlay-hover-rendered-gradient: radial-gradient(
		at var(--webbo-native-overlay-hover-position, center center),
		var(--webbo-native-overlay-hover-color-1, transparent) var(--webbo-native-overlay-hover-location-1, 10%),
		var(--webbo-native-overlay-hover-color-2, #f2295b) var(--webbo-native-overlay-hover-location-2, 54%),
		var(--webbo-native-overlay-hover-color-3, transparent) var(--webbo-native-overlay-hover-location-3, 90%)
	);
}

/* Normal state when no native Hover background is configured. */
.webbo-native-overlay-three-color:not(.webbo-native-overlay-has-hover)::before,
.webbo-native-overlay-three-color:not(.webbo-native-overlay-has-hover) > .elementor-background-video-container::before,
.webbo-native-overlay-three-color:not(.webbo-native-overlay-has-hover) > .e-con-inner > .elementor-background-video-container::before,
.webbo-native-overlay-three-color:not(.webbo-native-overlay-has-hover) > .elementor-background-slideshow::before,
.webbo-native-overlay-three-color:not(.webbo-native-overlay-has-hover) > .e-con-inner > .elementor-background-slideshow::before,
.webbo-native-overlay-three-color:not(.webbo-native-overlay-has-hover) > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
.webbo-native-overlay-three-color:not(.webbo-native-overlay-has-hover) > .elementor-background-overlay,
/* Normal state before a configured native Hover background takes over. */
.webbo-native-overlay-three-color.webbo-native-overlay-has-hover:not(:hover)::before,
.webbo-native-overlay-three-color.webbo-native-overlay-has-hover:not(:hover) > .elementor-background-video-container::before,
.webbo-native-overlay-three-color.webbo-native-overlay-has-hover:not(:hover) > .e-con-inner > .elementor-background-video-container::before,
.webbo-native-overlay-three-color.webbo-native-overlay-has-hover:not(:hover) > .elementor-background-slideshow::before,
.webbo-native-overlay-three-color.webbo-native-overlay-has-hover:not(:hover) > .e-con-inner > .elementor-background-slideshow::before,
.webbo-native-overlay-three-color.webbo-native-overlay-has-hover:not(:hover) > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
.webbo-native-overlay-three-color.webbo-native-overlay-has-hover:not(:hover) > .elementor-background-overlay {
	background-image: var(--webbo-native-overlay-rendered-gradient) !important;
}

/* Webbo third-colour Hover state. */
.webbo-native-overlay-three-color-hover:hover::before,
.webbo-native-overlay-three-color-hover:hover > .elementor-background-video-container::before,
.webbo-native-overlay-three-color-hover:hover > .e-con-inner > .elementor-background-video-container::before,
.webbo-native-overlay-three-color-hover > .elementor-background-slideshow:hover::before,
.webbo-native-overlay-three-color-hover > .e-con-inner > .elementor-background-slideshow:hover::before,
.webbo-native-overlay-three-color-hover:hover > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
.webbo-native-overlay-three-color-hover:hover > .elementor-background-overlay {
	background-image: var(--webbo-native-overlay-hover-rendered-gradient) !important;
}