/**
 * Nam Long Mobile Navigation Styles
 * Mobile-only bottom navigation bar
 */

/* CSS Variables for theming */
:root {
	--nls-mobile-nav-height: 60px;
	--nls-mobile-nav-bg: #ffffff;
	--nls-mobile-nav-border: #e2e8f0;
	--nls-mobile-nav-text: #64748b;
	--nls-mobile-nav-text-active: #e11d2e;
	--nls-mobile-nav-hover-bg: #f8fafc;
}

/* Main navigation container */
.nls-mobile-nav {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: var(--nls-mobile-nav-height) !important;
	background: var(--nls-mobile-nav-bg) !important;
	border-top: 1px solid var(--nls-mobile-nav-border) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-around !important;
	z-index: 999 !important;
	padding-bottom: env(safe-area-inset-bottom, 0) !important;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
	-webkit-box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Hide on desktop and tablet */
@media (min-width: 768px) {
	.nls-mobile-nav {
		display: none !important;
	}
}

/* Navigation item */
.nls-mobile-nav__item {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 8px 4px !important;
	color: var(--nls-mobile-nav-text) !important;
	font-size: 11px !important;
	text-decoration: none !important;
	gap: 4px !important;
	transition: color 0.2s ease, background-color 0.2s ease !important;
	border-radius: 8px !important;
	margin: 0 2px !important;
}

/* Touch feedback */
.nls-mobile-nav__item:hover {
	background-color: var(--nls-mobile-nav-hover-bg) !important;
}

.nls-mobile-nav__item:active {
	background-color: #f1f5f9 !important;
	transform: scale(0.98) !important;
}

/* Active state */
.nls-mobile-nav__item--active {
	color: var(--nls-mobile-nav-text-active) !important;
	font-weight: 600 !important;
}

/* Icon styling */
.nls-mobile-nav__icon {
	font-size: 24px !important;
	height: 24px !important;
	width: 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.2s ease !important;
}

.nls-mobile-nav__item--active .nls-mobile-nav__icon {
	transform: scale(1.1) !important;
}

/* Label styling */
.nls-mobile-nav__label {
	font-size: 11px !important;
	line-height: 1.2 !important;
	text-align: center !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
}

/* Add padding at bottom of body to prevent content from being hidden */
body.has-nls-mobile-nav {
	padding-bottom: var(--nls-mobile-nav-height) !important;
}

@media (min-width: 768px) {
	body.has-nls-mobile-nav {
		padding-bottom: 0 !important;
	}
}

/* Small devices (up to 360px) - adjust icon and label sizes */
@media (max-width: 360px) {
	.nls-mobile-nav__icon {
		font-size: 20px !important;
		height: 20px !important;
		width: 20px !important;
	}

	.nls-mobile-nav__label {
		font-size: 10px !important;
	}
}

/* Large mobile devices (480px - 767px) - slightly larger touch targets */
@media (min-width: 480px) and (max-width: 767px) {
	.nls-mobile-nav__item {
		padding: 10px 8px !important;
	}

	.nls-mobile-nav__icon {
		font-size: 26px !important;
		height: 26px !important;
		width: 26px !important;
	}

	.nls-mobile-nav__label {
		font-size: 12px !important;
	}
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
	.nls-mobile-nav__item,
	.nls-mobile-nav__icon {
		transition: none !important;
	}

	.nls-mobile-nav__item:active {
		transform: none !important;
	}
}

/* Print styles - hide navigation */
@media print {
	.nls-mobile-nav {
		display: none !important;
	}

	body.has-nls-mobile-nav {
		padding-bottom: 0 !important;
	}
}