/* 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.72));
	-webkit-backdrop-filter: blur(var(--mnbp-blur, 20px)) saturate(180%);
	backdrop-filter: blur(var(--mnbp-blur, 20px)) saturate(180%);
	border-top: 1px solid rgba(255,255,255, var(--mnbp-border-opacity, 0.4));
	border-radius: 0;
	box-shadow: var(--mnbp-shadow, 0 -4px 20px rgba(0,0,0,0.10));
	z-index: var(--mnbp-z, 10500);
	box-sizing: border-box;
	overflow: hidden;
}

.mnbp-navbar a.mnbp-item{
	position: relative;
	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: 6px 2px;
	margin: 0 3px;
	border-radius: 15px;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	outline: none;
	transition: color .2s ease, background .2s ease, transform .12s ease;
}

.mnbp-navbar a.mnbp-item:active{
	transform: scale(0.9);
	background: rgba(0,0,0,0.06);
}
.mnbp-navbar a.mnbp-item.is-active:active{
	background: rgba(0,0,0,0.08);
}

.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);
	background: rgba(108,92,231,0.12);
	background: color-mix(in srgb, var(--mnbp-active-color, #6c5ce7) 12%, transparent);
}

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

.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 .2s cubic-bezier(.34,1.56,.64,1);
}

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

.mnbp-navbar .mnbp-icon img.mnbp-custom-icon-img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.mnbp-navbar .mnbp-label{
	font-size: var(--mnbp-text-size, 11px);
	font-weight: 600;
	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: none;
}
.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(-1px) scale(1.12);
}
.mnbp-navbar.mnbp-style-colorful a.mnbp-item:not(.is-active) .mnbp-icon{
	opacity: 0.78;
}

/* Active-state dot removed — the background highlight on .is-active
   already makes the active tab clear on its own, no dot needed too. */

/* Keep page content from being hidden behind the floating bar — handled
   precisely by the footer/Footer 2 themselves (see render_footer() and
   render_footer2() in class-ph-frontend.php), which know the actual
   configured bar height. A generic body-wide fallback here would add
   the same clearance a second time on top of that, on every single page
   regardless of whether a footer is even present. */

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