/* Mobile Nav Bar Pro — frontend glass styles */

.mnbp-navbar{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	height: var(--mnbp-bar-height, 64px);
	padding-bottom: var(--mnbp-safe-area, 0px);
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: rgba(var(--mnbp-bg-rgb, 255,255,255), var(--mnbp-bg-opacity, 0.55));
	-webkit-backdrop-filter: blur(var(--mnbp-blur, 18px)) saturate(160%);
	backdrop-filter: blur(var(--mnbp-blur, 18px)) saturate(160%);
	border-top: 1px solid rgba(255,255,255, var(--mnbp-border-opacity, 0.25));
	border-radius: 0;
	box-shadow: var(--mnbp-shadow, 0 -4px 20px rgba(0,0,0,0.10));
	z-index: var(--mnbp-z, 9999);
	box-sizing: border-box;
}

.mnbp-navbar a.mnbp-item{
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-decoration: none;
	color: var(--mnbp-icon-color, #3a3a3a);
	min-width: 0;
	padding: 4px 2px;
	transition: color .2s ease, transform .15s ease;
}

.mnbp-navbar a.mnbp-item:hover,
.mnbp-navbar a.mnbp-item:focus-visible{
	color: var(--mnbp-active-color, #6c5ce7);
}

.mnbp-navbar a.mnbp-item.is-active{
	color: var(--mnbp-active-color, #6c5ce7);
}

.mnbp-navbar a.mnbp-item.is-active .mnbp-icon{
	transform: translateY(-2px) scale(1.05);
}

.mnbp-navbar .mnbp-icon{
	width: var(--mnbp-icon-size, 22px);
	height: var(--mnbp-icon-size, 22px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease;
}

.mnbp-navbar .mnbp-icon svg{
	width: 100%;
	height: 100%;
}

.mnbp-navbar .mnbp-label{
	font-size: var(--mnbp-text-size, 11px);
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Icons-only mode: bigger icons, no label, no color-tinting on the icon itself
   (colorful icons keep their own palette; only line icons tint on active) */
.mnbp-navbar.mnbp-icons-only .mnbp-icon{
	width: calc(var(--mnbp-icon-size, 22px) * 1.25);
	height: calc(var(--mnbp-icon-size, 22px) * 1.25);
}
.mnbp-navbar.mnbp-icons-only a.mnbp-item.is-active{
	transform: translateY(-1px);
}
.mnbp-navbar.mnbp-icons-only a.mnbp-item.is-active .mnbp-icon{
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

/* Colorful style: icon already has its own colors, so don't force currentColor tinting */
.mnbp-navbar.mnbp-style-colorful a.mnbp-item{
	color: var(--mnbp-icon-color, #3a3a3a);
}
.mnbp-navbar.mnbp-style-colorful a.mnbp-item.is-active .mnbp-icon{
	transform: translateY(-2px) scale(1.12);
}
.mnbp-navbar.mnbp-style-colorful a.mnbp-item:not(.is-active) .mnbp-icon{
	opacity: 0.78;
}

/* Active-state dot under colorful icons (since color itself can't "highlight") */
.mnbp-navbar.mnbp-style-colorful a.mnbp-item.is-active::after{
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--mnbp-active-color, #6c5ce7);
	margin-top: 2px;
}

/* Keep page content from being hidden behind the floating bar */
body.mnbp-has-navbar{
	padding-bottom: 90px;
}

@media (prefers-reduced-motion: reduce){
	.mnbp-navbar a.mnbp-item,
	.mnbp-navbar .mnbp-icon{
		transition: none;
	}
}