/**
 * Creatif Work Essentials — widget glass composition styles (Normal + Hover).
 *
 * Controls write CSS variables onto the widget wrapper / surface; these rules
 * compose them so blur + saturate share one `backdrop-filter`, matching the
 * container Glass Overlay. Hover variables (*-h) fall back to their Normal
 * counterparts, which fall back to sensible defaults.
 *
 * "Show Glass = Always"  -> frosted at rest (.cwe-glass-when--always) and hover.
 * "Show Glass = On Hover" -> frosted only on hover (.cwe-glass-when--hover).
 *
 * Hover target per widget is the surface's own :hover, EXCEPT Project Cards,
 * whose panel is revealed on CARD hover — so its hover trigger is
 * `.zz-pc-card:hover .zz-pc-panel`. The stacked classes raise specificity high
 * enough to override each widget's own surface background (including Project
 * Cards' panel hover colour) without !important.
 */

/* Smooth transition into/out of the glass state, regardless of trigger. */
.elementor-element.cwe-glass--on .zz-mq-item,
.elementor-element.cwe-glass--on .zz-fp-card,
.elementor-element.cwe-glass--on .zz-cg-item,
.elementor-element.cwe-glass--on .zz-pc-panel,
.elementor-element.cwe-glass--on .zz-tl-content {
	transition: background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

/* ── Rest state: only when Show Glass = Always ─────────────────────────── */
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-mq-item,
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-fp-card,
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-cg-item,
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-pc-panel,
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-tl-content {
	-webkit-backdrop-filter: blur( var( --zz-glass-blur, 10px ) ) saturate( var( --zz-glass-saturate, 120% ) );
	backdrop-filter: blur( var( --zz-glass-blur, 10px ) ) saturate( var( --zz-glass-saturate, 120% ) );
	background-color: var( --zz-glass-tint, rgba( 255, 255, 255, 0.08 ) );
	border: var( --zz-glass-border-width, 1px ) solid var( --zz-glass-border-color, rgba( 255, 255, 255, 0.18 ) );
	border-radius: var( --zz-glass-radius, 16px );
}

/* ── Hover state: both triggers (hover tokens fall back to normal) ─────── */
/* Standard widgets: hover the surface itself. */
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-mq-item:hover,
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-fp-card:hover,
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-cg-item:hover,
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-tl-content:hover,
.elementor-element.cwe-glass--on.cwe-glass-when--hover .zz-mq-item:hover,
.elementor-element.cwe-glass--on.cwe-glass-when--hover .zz-fp-card:hover,
.elementor-element.cwe-glass--on.cwe-glass-when--hover .zz-cg-item:hover,
.elementor-element.cwe-glass--on.cwe-glass-when--hover .zz-tl-content:hover,
/* Project Cards: panel is revealed on CARD hover. */
.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-pc-card:hover .zz-pc-panel,
.elementor-element.cwe-glass--on.cwe-glass-when--hover .zz-pc-card:hover .zz-pc-panel {
	-webkit-backdrop-filter: blur( var( --zz-glass-blur-h, var( --zz-glass-blur, 10px ) ) ) saturate( var( --zz-glass-saturate-h, var( --zz-glass-saturate, 120% ) ) );
	backdrop-filter: blur( var( --zz-glass-blur-h, var( --zz-glass-blur, 10px ) ) ) saturate( var( --zz-glass-saturate-h, var( --zz-glass-saturate, 120% ) ) );
	background-color: var( --zz-glass-tint-h, var( --zz-glass-tint, rgba( 255, 255, 255, 0.08 ) ) );
	border: var( --zz-glass-border-width, 1px ) solid var( --zz-glass-border-color-h, var( --zz-glass-border-color, rgba( 255, 255, 255, 0.18 ) ) );
	border-radius: var( --zz-glass-radius, 16px );
}

/* Graceful fallback for browsers without backdrop-filter support. */
@supports not ( ( -webkit-backdrop-filter: blur( 1px ) ) or ( backdrop-filter: blur( 1px ) ) ) {
	.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-mq-item,
	.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-fp-card,
	.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-cg-item,
	.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-pc-panel,
	.elementor-element.cwe-glass--on.cwe-glass-when--always .zz-tl-content,
	.elementor-element.cwe-glass--on .zz-mq-item:hover,
	.elementor-element.cwe-glass--on .zz-fp-card:hover,
	.elementor-element.cwe-glass--on .zz-cg-item:hover,
	.elementor-element.cwe-glass--on .zz-pc-card:hover .zz-pc-panel,
	.elementor-element.cwe-glass--on .zz-tl-content:hover {
		background-color: rgba( 20, 20, 20, 0.55 );
	}
}