/* ============ MOBILE BOTTOM NAVIGATION ============ */
.mobile-bottom-nav {
	display: none;
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	width: max-content;
}

.mobile-bottom-nav__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	padding: 0.65rem 0.9rem;
	border-radius: 50px;
	border: 1px solid rgba(0, 0, 0, 0.07);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.13),
		0 2px 8px rgba(0, 0, 0, 0.06);
	position: relative; /* needed for indicator positioning */
}

/* Sliding pill indicator — bergerak smooth antar icon */
.mobile-bottom-nav__indicator {
	position: absolute;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);
	box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
	z-index: 0;
	overflow: hidden; /* clip snow particles */
}

/* Snow particles */
@keyframes snowFall {
	0%   { transform: translateY(-30px); }
	100% { transform: translateY(62px); }
}

.snow-particle {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	pointer-events: none;
	animation: snowFall linear infinite;
}

.snow-particle:nth-child(1) { left: 6px;  width: 3px; height: 3px; animation-duration: 2.0s; animation-delay: 0.0s; }
.snow-particle:nth-child(2) { left: 17px; width: 4px; height: 4px; animation-duration: 2.6s; animation-delay: 0.6s; }
.snow-particle:nth-child(3) { left: 29px; width: 3px; height: 3px; animation-duration: 1.9s; animation-delay: 1.1s; }
.snow-particle:nth-child(4) { left: 39px; width: 2px; height: 2px; animation-duration: 2.3s; animation-delay: 0.4s; }
.snow-particle:nth-child(5) { left: 23px; width: 4px; height: 4px; animation-duration: 2.8s; animation-delay: 0.9s; }

.mobile-bottom-nav__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: #94a3b8;
	font-size: 1.55rem;
	text-decoration: none;
	position: relative;
	z-index: 1; /* di atas indicator */
	transition: color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav__item:hover {
	color: #64748b;
}

/* Indicator yang handle background — item cukup tunjukkan warna putih */
.mobile-bottom-nav__item.active-link {
	background: transparent !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

.mobile-bottom-nav__item i {
	pointer-events: none;
}

.mobile-bottom-nav__item.active-link i {
	color: #ffffff !important;
	background: none !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* Show on mobile, hide desktop header */
@media screen and (max-width: 768px) {
	.mobile-bottom-nav {
		display: flex;
	}

	body {
		padding-bottom: 5.5rem;
	}
}