/* 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);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	will-change: opacity;
	transition: opacity var(--webbo-overlay-transition, 300ms) ease;
}

.webbo-overlay-blur-layer::before {
	opacity: 1;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		transparent var(--webbo-normal-blur-start, 50%),
		#000 var(--webbo-normal-blur-full, 80%),
		#000 100%
	);
	mask-image: linear-gradient(
		to bottom,
		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-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		transparent var(--webbo-hover-blur-start, 50%),
		#000 var(--webbo-hover-blur-full, 80%),
		#000 100%
	);
	mask-image: linear-gradient(
		to bottom,
		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(
		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(
		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 {
	position: relative;
	z-index: 3;
}

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