/* Liquid glass — Elementor nav menu
   Frosted glass is the interoperable path (Safari / Firefox).
   SVG displacement stays Chromium-only: filter:url() + backdrop-filter
   drops the entire blur in WebKit and Gecko. */

.liquid-glass-filter {
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

.liquidGlass-wrapper {
	position: relative;
	overflow: visible;
	font-weight: 600;
	color: #000;
	box-shadow:
		0 6px 6px rgba(0, 0, 0, 0.2),
		0 0 20px rgba(0, 0, 0, 0.1);
	transition: padding 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2),
		border-radius 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
	background-color: transparent !important;
	background-image: none !important;
}

.liquidGlass-effect,
.liquidGlass-tint,
.liquidGlass-shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	overflow: hidden;
}

.liquidGlass-effect {
	z-index: 0;
	/* Firefox needs a non-zero alpha fill or the frost paints as fully clear. */
	background-color: rgba(255, 255, 255, 0.06);
	-webkit-backdrop-filter: blur(12px) saturate(1.5);
	backdrop-filter: blur(12px) saturate(1.5);
}
@supports (-moz-appearance: none) {
	.liquidGlass-effect {
		backdrop-filter: blur(20px) saturate(1.5);
	}
}
/*
 * Blink composes filter:url() onto the backdrop output.
 * Safari/iOS Chrome (WebKit) and Firefox drop backdrop-filter when the
 * same element also has an SVG reference filter.
 */
@supports (not (-moz-appearance: none)) and (not (-webkit-touch-callout: none)) {
	.liquidGlass-effect {
		background-color: transparent;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		filter: url("#glass-distortion");
	}
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.liquidGlass-wrapper {
		background-color: rgba(20, 20, 20, 0.72) !important;
	}

	.liquidGlass-effect {
		background-color: transparent;
	}
}

.liquidGlass-tint {
	z-index: 1;
	background: rgba(0, 0, 0, 0.15);
}

.liquidGlass-shine {
	z-index: 2;
	box-shadow:
		inset 0 1px 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.liquidGlass-menu {
	padding: 0.4rem;
	border-radius: 1.8rem;
}

.liquidGlass-menu > .e-con-inner,
.liquidGlass-menu .elementor-widget-nav-menu,
.liquidGlass-menu .elementor-nav-menu--main,
.liquidGlass-dropdown > .elementor-nav-menu {
	position: relative;
	z-index: 3;
	background: transparent !important;
}

.liquidGlass-menu .elementor-nav-menu--main,
.liquidGlass-menu .elementor-nav-menu--dropdown,
.liquidGlass-menu .elementor-nav-menu {
	background-color: transparent !important;
	background-image: none !important;
}

.liquidGlass-menu .elementor-nav-menu--main .elementor-nav-menu {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
}

.liquidGlass-menu .elementor-nav-menu .elementor-item {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff !important;
	padding: 0.4rem 0.6rem;
	border-radius: 0.8rem;
	background-color: transparent;
	box-shadow: none;
	transition: background-color 0.1s ease-in, box-shadow 0.1s ease-in,
		border-radius 0.1s ease-in, color 0.1s ease-in;
	-webkit-tap-highlight-color: transparent;
}

.liquidGlass-menu .elementor-nav-menu .elementor-item:focus,
.liquidGlass-menu .elementor-nav-menu .elementor-item.elementor-item-active,
.liquidGlass-menu .elementor-nav-menu .elementor-item.highlighted {
	background-color: rgb(255, 60, 68);
	box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1);
	color: #fff !important;
	border-radius: 50px;
}

@media (hover: hover) and (pointer: fine) {
	.liquidGlass-menu .elementor-nav-menu .elementor-item:hover {
		background-color: rgb(255, 60, 68);
		box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1);
		color: #fff !important;
		border-radius: 50px;
	}
}

.liquidGlass-dropdown {
	padding: 0.4rem;
	border-radius: 1.4rem;
	/* overflow:hidden on this ancestor kills backdrop-filter in Safari. */
	overflow: visible;
}

.liquidGlass-dropdown .elementor-nav-menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 1rem;
}

.liquidGlass-dropdown .elementor-nav-menu .elementor-item {
	width: 100%;
}

.liquidGlass-menu .elementor-menu-toggle {
	position: relative;
	z-index: 3;
	color: #fff;
	background: transparent;
	border-radius: 0.8rem;
	-webkit-tap-highlight-color: transparent;
}

.liquidGlass-menu .elementor-menu-toggle svg {
	fill: currentColor;
}

.elementor-nav-menu--main .elementor-nav-menu a,
.elementor-nav-menu--main .elementor-nav-menu a.highlighted,
.elementor-nav-menu--main .elementor-nav-menu a:focus,
.elementor-nav-menu--main .elementor-nav-menu a:hover {
	padding: 0.4rem 0.6rem !important;
}

@media (prefers-reduced-motion: reduce) {
	.liquidGlass-wrapper,
	.liquidGlass-menu .elementor-nav-menu .elementor-item {
		transition: none;
	}

	.liquidGlass-menu:hover {
		padding: 0.4rem;
	}
}
