/**
 * 9XO Core — mobile navigation module.
 *
 * Polishes Motta's bottom navigation bar into an app-style tab bar and
 * keeps the contextual sticky top bar compact.
 */

/* --------------------------------------------------------------------------
 * Bottom navigation bar
 * ------------------------------------------------------------------------ */

.motta-mobile-navigation-bar {
	padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -2px 12px rgba(29, 33, 40, 0.08);
	border-top: 1px solid #ecf0f4;
	align-items: stretch;
	justify-content: space-around;
}

.motta-mobile-navigation-bar__icon {
	flex: 1 1 0;
	justify-content: center;
	gap: 3px;
	color: #7c818b;
	padding: 2px 0;
	line-height: 1;
	transition: color 0.2s;
}

.motta-mobile-navigation-bar__icon .motta-svg-icon {
	font-size: 22px;
}

.motta-mobile-navigation-bar__icon em {
	font-size: 0.6875rem;
	font-weight: 500;
}

.motta-mobile-navigation-bar__icon.nxo-active {
	color: var(--mt-color__primary, #3449ca);
}

/* Room for the bar (Motta only pads .site below 768px in some layouts). */
@media (max-width: 767px) {
	.motta-navigation-bar-show .site {
		padding-bottom: 70px;
	}
}

/* --------------------------------------------------------------------------
 * Contextual sticky top bar (custom mobile sticky)
 * ------------------------------------------------------------------------ */

@media (max-width: 1199px) {
	.site-header__mobile .header-mobile-sticky .site-header__container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.site-header__mobile .header-mobile-sticky .header-items {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: 0;
	}

	.site-header__mobile .header-mobile-sticky .header-logo img,
	.site-header__mobile .header-mobile-sticky .header-logo svg {
		max-height: 34px;
		width: auto;
	}

	/* Compact icon buttons in the sticky bar. */
	.site-header__mobile .header-mobile-sticky .motta-button--icon {
		--mt-size__header-item: 40px;
	}
}