/**
 * ZZ Glass Overlay — frontend styles
 *
 * Each control writes a CSS variable onto the container. This single rule
 * composes them so multiple filters (blur + saturate) can coexist on the
 * one `backdrop-filter` property.
 *
 * Selector uses two classes (`.elementor-element.zz-glass--active`) to beat
 * Elementor's single-class per-element background rules without !important.
 */

.elementor-element.zz-glass--active {
	--zz-glass-blur: 10px;
	--zz-glass-saturate: 120%;
	--zz-glass-tint: rgba( 255, 255, 255, 0.08 );
	--zz-glass-radius: 16px;
	--zz-glass-border-width: 1px;
	--zz-glass-border-color: rgba( 255, 255, 255, 0.18 );

	-webkit-backdrop-filter: blur( var( --zz-glass-blur ) ) saturate( var( --zz-glass-saturate ) );
	backdrop-filter: blur( var( --zz-glass-blur ) ) saturate( var( --zz-glass-saturate ) );
	background-color: var( --zz-glass-tint );
	border: var( --zz-glass-border-width ) solid var( --zz-glass-border-color );
	border-radius: var( --zz-glass-radius );
}

/* Graceful fallback for browsers without backdrop-filter support. */
@supports not ( ( -webkit-backdrop-filter: blur( 1px ) ) or ( backdrop-filter: blur( 1px ) ) ) {
	.elementor-element.zz-glass--active {
		background-color: rgba( 20, 20, 20, 0.55 );
	}
}