/* Liquid Glass Nav Widget — Frontend Styles */

.lgn-wrap {
	display: flex;
	width: 100%;
}

.lgn-bar {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	border-radius: 40px;
	background: rgba(30, 30, 40, 0.55);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.10);
	max-width: 420px;
	width: 100%;
}

/* ── Items ─────────────────────────────────────────────────────────── */

.lgn-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 8px 14px;
	border-radius: 28px;
	cursor: pointer;
	text-decoration: none;
	flex: 1;
	min-width: 0;
	transition: background 0.2s ease, transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.lgn-item:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* Scale on :active only when NOT in a fixed bar (fixed + transform conflict) */
.lgn-wrap:not(.lgn-fixed) .lgn-item:active {
	transform: scale(0.95);
}

.lgn-item.lgn-active {
	background: rgba(255, 255, 255, 0.13);
}

/* ── Icon ───────────────────────────────────────────────────────────── */

.lgn-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}

.lgn-item i,
.lgn-item svg {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.2s ease;
	display: block;
}

.lgn-item svg path {
	fill: rgba(255, 255, 255, 0.55);
	transition: fill 0.2s ease;
}

.lgn-item.lgn-active i,
.lgn-item.lgn-active svg {
	color: #ffffff;
}

.lgn-item.lgn-active svg path {
	fill: #ffffff;
}

/* ── Label ──────────────────────────────────────────────────────────── */

.lgn-label {
	font-size: 10px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.5);
	transition: color 0.2s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 64px;
	text-align: center;
}

.lgn-item.lgn-active .lgn-label {
	color: rgba(255, 255, 255, 0.9);
}

/* ── Active dot ─────────────────────────────────────────────────────── */

.lgn-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	opacity: 0;
	transition: opacity 0.2s ease;
	margin-top: 1px;
}

.lgn-item.lgn-active .lgn-dot {
	opacity: 1;
}

/* ── Position variants ──────────────────────────────────────────────── */

.lgn-fixed {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	/* Override justify-content for fixed: always center */
	justify-content: center !important;
}

.lgn-sticky {
	position: sticky;
	bottom: 16px;
	z-index: 100;
}

/* ── Accessibility ──────────────────────────────────────────────────── */

.lgn-item:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.lgn-item,
	.lgn-item i,
	.lgn-item svg,
	.lgn-item svg path,
	.lgn-label,
	.lgn-dot {
		transition: none;
	}
}