/* ==============================================
   移动端底部 手机端需要的导航样式
   ============================================== */

.mobile-nav {
	display: none; /* Default to hidden on desktop */
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: #fff;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	z-index: 10001;
	justify-content: space-around;
	align-items: center;
	padding-bottom: env(safe-area-inset-bottom); /* iOS safe area */
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #95a5a6;
    font-size: 10px;
    flex: 1;
    height: 100%;
}

.mobile-nav-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    transition: stroke 0.3s;
}

.mobile-nav-item span {
    transition: color 0.3s;
}

.mobile-nav-item.active,
.mobile-nav-item:active {
    color: #3498db;
}

.mobile-nav-item.active svg,
.mobile-nav-item:active svg {
    stroke: #3498db;
}

/* Add padding to body/main on mobile to prevent content from being hidden behind nav */
@media (max-width: 768px) {
    .mobile-nav {
        display: flex;
    }
    
    .site-footer {
        padding-bottom: 80px; /* Make space for mobile nav in footer */
    }
}