/* ===== Traventia UI — Bottom Navigation (Sprint Mobile Premium) =====
   Barra fixa inferior, só mobile — o HTML (Templates/home/bottom-nav.php)
   fica sempre no DOM (mesmo padrão do toggle da navbar, que também só
   aparece via display no breakpoint certo); no desktop this rule below
   mantém display:none, então nunca aparece, mesmo presente no HTML. */

.tv-bottom-nav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--tv-z-sticky);
	background: rgba(20, 18, 15, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--tv-border);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 767px) {
	.tv-bottom-nav { display: flex; align-items: stretch; justify-content: space-around; }

	/* Compensa a barra fixa pra ela nunca cobrir conteúdo real por baixo. */
	body { padding-bottom: 64px; }
}

.tv-bottom-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex: 1 1 0;
	min-height: 56px;
	padding: 8px 4px;
	text-decoration: none;
	color: var(--tv-text-muted);
	transition: color var(--tv-transition-fast), transform var(--tv-transition-fast);
}

.tv-bottom-nav-item svg { width: 22px; height: 22px; flex-shrink: 0; }

.tv-bottom-nav-label { font-size: 11px; font-weight: var(--tv-font-medium); }

.tv-bottom-nav-item[aria-current="page"] { color: var(--tv-primary); }

.tv-bottom-nav-item:active { transform: scale(0.92); color: var(--tv-primary); }