/* =========================================================
   Lumo Glass – Widget Styles
   ========================================================= */

.lumo-glass-wrap {
	position: relative;
	width: 100%;
	display: block;
}

/* Content layer sits on top of the WebGL canvas */
.lumo-glass-content {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* liquidGL renders its own <canvas> — keep it contained */
.lumo-glass-wrap canvas {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
}

/* =========================================================
   Container extension — glass applied to a native container
   ========================================================= */

.lumo-glass-container {
	position: relative;
	overflow: hidden;
}

/*
 * Failsafe: if liquidGL's reveal:fade sets opacity to 0 and then
 * crashes before completing the animation, force the element visible
 * after 4 s so content is never permanently hidden.
 */
.lumo-glass-container {
	animation: lumo-glass-failsafe 0.001s 4s both;
}

@keyframes lumo-glass-failsafe {
	to { opacity: 1; visibility: visible; }
}

/* liquidGL canvas sits behind the container's children */
.lumo-glass-container > canvas {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
}

/* Push all direct Elementor children above the canvas */
.lumo-glass-container > .elementor-widget-wrap,
.lumo-glass-container > .elementor-container,
.lumo-glass-container > *:not( canvas ) {
	position: relative;
	z-index: 1;
}

/* =========================================================
   Editor preview — CSS backdrop-filter fallback
   (WebGL initialisation is deferred on the frontend;
    the editor shows an approximation instead)
   ========================================================= */

.elementor-editor-active .lumo-glass-wrap,
.lumo-glass-editor-preview {
	backdrop-filter: blur( 12px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 160% );
	background: rgba( 255, 255, 255, 0.12 );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: 12px;
	min-height: 80px;
}

.lumo-glass-editor-preview .lumo-glass-content {
	min-height: 80px;
	display: flex;
	align-items: stretch;
	flex-direction: column;
}