/* ===== 手機版底部導航欄 ===== */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.3s;
    position: relative;
}

.mobile-bottom-nav .nav-item:active {
    background: #f5f5f5;
}

.mobile-bottom-nav .nav-item.active {
    color: var(--primary-color);
}

.mobile-bottom-nav .nav-icon {
    font-size: 22px;
    margin-bottom: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
}

.mobile-bottom-nav .nav-label {
    font-size: 11px;
    font-weight: 500;
}

/* 購物車徽章 */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: #f44336;
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* 在手機版顯示底部導航 */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: grid;
        z-index: 1000;
    }

    /* 一般頁面需要 body 的 padding-bottom */
    body {
        padding-bottom: 60px;
    }
    
    /* 分類頁面 body 不需要額外 padding（因為使用 fixed 佈局）*/
    body.category-page-body {
        padding-bottom: 0 !important;
    }

    /* UserCenter 頁面 body 不需要額外 padding（因為使用 fixed 佈局）*/
    body.user-center-page-body {
        padding-bottom: 0 !important;
    }

    /* 購物車頁面 body 不需要額外 padding（因為使用 fixed 佈局）*/
    body.cart-page-body {
        padding-bottom: 0 !important;
    }

    /* 調整主要內容區域 */
    .main-content,
    .container,
    .order-page,
    .policy-page,
    .user-center-page {
/*        padding-bottom: 20px !important;*/
    }
}

/* 針對不同頁面的調整 */
@media (max-width: 768px) {
    /* 首頁 */
    .home-page {
        padding-bottom: 80px;
    }

    /* 產品頁面 */
    .product-page,
    .search-page,
    .category-page {
        padding-bottom: 80px;
    }

    /* 購物車頁面 */
    .shopping-cart-page {
        padding-bottom: 80px;
    }

    /* 訂單頁面 */
    .order-page {
        padding-bottom: 80px;
    }

    /* 個人中心 */
    .user-center-page {
        padding-bottom: 80px;
    }

    /* 公告頁面 */
    .policy-page {
        padding-bottom: 80px;
    }
}

/* 防止在桌面版顯示 */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}

/* 針對 iPhone X 及以上的安全區域 */
@supports (padding: max(0px)) {
    .mobile-bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}