/**
 * 手机端底部悬浮导航样式
 * 在需要使用的页面引入：<link rel="stylesheet" href="/assets/css/mobile-nav.css">
 */

/* 手机端底部导航容器 */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 9999;
        padding: 8px 0;
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }
    
    /* 避免内容被悬浮导航遮挡 */
    footer {
        padding-bottom: 100px !important;
    }
    
    .mobile-bottom-nav .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #666;
        text-decoration: none;
        font-size: 12px;
        padding: 5px;
    }
    
    .mobile-bottom-nav .nav-item i {
        font-size: 20px;
        margin-bottom: 3px;
    }
    
    .mobile-bottom-nav .nav-item-primary {
        background: #F47A29;
        color: #fff;
        border-radius: 25px;
        margin: 0 15px;
        flex: 2;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        padding: 12px 25px;
        white-space: nowrap;
    }
    
    .mobile-bottom-nav .nav-item-primary i {
        font-size: 22px;
        margin-right: 8px;
        margin-bottom: 0;
    }
    
    .mobile-bottom-nav .nav-item-wechat svg {
        margin-bottom: 3px;
    }
}