/**
 * ECShop Header 頂部導航樣式
 * header.css
 * 
 * 檔案說明：
 * 此檔案專門處理 ECShop 電商系統的頂部導航區域設計，包含網站
 * LOGO、主要導航選單、搜尋功能、會員功能按鈕、購物車等核心
 * 功能組件的樣式定義。採用黏性定位設計，提供穩定的導航體驗。
 * 
 * 主要功能：
 * - 黏性頂部導航列（Sticky Header）
 * - 響應式 LOGO 顯示
 * - 主要導航選單（桌面版）
 * - 搜尋框整合設計
 * - 功能按鈕區域（登入、註冊、會員中心等）
 * - 購物車按鈕與徽章顯示
 * - 手機版簡化設計
 * 
 * 設計特色：
 * - 簡潔現代的設計語言
 * - Flexbox 彈性佈局系統
 * - 一致的 Hover 互動效果
 * - 清晰的視覺層次
 * - 品牌色彩整合應用
 * 
 * 功能區域：
 * - LOGO區域：品牌識別展示
 * - 導航區域：主要頁面導航
 * - 搜尋區域：商品搜尋功能
 * - 功能區域：會員相關操作
 * - 購物車區域：購物車狀態顯示
 * 
 * 響應式設計：
 * - 桌面版：完整功能顯示，水平佈局
 * - 平板版：適度調整間距與尺寸
 * - 手機版：簡化顯示，隱藏導航選單
 * - 超小螢幕：極簡化設計
 * 
 * 互動體驗：
 * - 導航項目 Hover 效果
 * - 活躍狀態視覺回饋
 * - 按鈕點擊動畫效果
 * - 購物車徽章動態顯示
 * - 搜尋框焦點狀態
 * 
 * 技術特點：
 * - CSS Flexbox 現代佈局
 * - CSS 變數統一管理
 * - 漸進式增強設計
 * - 跨瀏覽器兼容處理
 * - 無障礙設計考量
 * 
 * 電商功能：
 * - 購物車即時數量顯示
 * - 會員狀態智慧切換
 * - 搜尋功能快捷鍵支援
 * - 多層級導航支援
 * - 品牌 LOGO 可點擊回首頁
 * 
 * 品牌整合：
 * - 統一的色彩規範
 * - 一致的字體應用
 * - 協調的間距設計
 * - 整體的視覺平衡
 * 
 * 效能優化：
 * - CSS Transform 硬體加速
 * - 圖片尺寸自適應
 * - 最小重繪區域
 * - 流暢的過渡動畫
 * 
 * 適用版本：PHP 7.3+ / ECShop 4.x / cls_template
 * 版本：1.0
 * 更新：2024
 */

/* ==========================================================================
   Header 頂部導航設計
   ========================================================================== */

.header.mu {
    position: -webkit-sticky; /* Safari兼容性 */
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 110px;
    background: #ffffff; /* IE fallback */
    background: var(--background);
    border-bottom: 2px solid #333;
    display: -webkit-box; /* IE10+ */
    display: -ms-flexbox; /* IE11 */
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* IE fallback */
    box-shadow: var(--shadow-sm);
    font-family: inherit;
}

/* LOGO設定 */
.logo-section {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.logo.clearfix,
.logo-section .logo {
    max-width: 400px;
}

.logo.clearfix img,
.logo-section .logo img {
    height: 90px;
    width: auto;
    max-width: 400px;
}

/* 搜尋框樣式 */
.header_search form {
    padding: 0 0 0 6px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.header_search .keyword {
    height: 45px;
    width: 90%;
    font-size: 16px;
    padding: 12px 15px;
    border-radius: 10px 0 0 10px;
    border: 2px solid #e5e7eb; /* IE fallback */
    border: 2px solid var(--border-color);
    border-right: none;
}

.header_search .submit {
    position: relative;
    height: 45px;
    width: 10%;
    background: #333;
    font-size: 16px;
    border-radius: 0 10px 10px 0;
    border: 2px solid #333;
    border-left: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.header_search .submit:hover {
    background: #555;
}

/* 導航區域 */
.nav-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.5rem;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0 1rem;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow: visible;
}

.nav-section a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #374151;
    transition: all 0.3s ease; /* IE fallback */
    transition: var(--transition);
    padding: 0.5rem 0.75rem;
    border-radius: 12px; /* IE fallback */
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    min-width: 80px;
    max-width: 120px;
    text-align: center;
    white-space: nowrap;
}

.nav-section a:hover,
.nav-section a.active {
    color: #3b82f6; /* IE fallback */
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.15);
    border-bottom: 4px solid #3b82f6; /* IE fallback */
    border-bottom: 4px solid var(--primary-color);
}

.nav-section a i {
    font-size: 16px;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.nav-section a span {
    font-size: 14px;
    margin-top: 3px;
    font-weight: 600;
    line-height: 1.2;
    display: block;
}

/* 功能按鈕區域 */
.functions-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.functions-section a {
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 15px;
    transition: all 0.3s ease; /* IE fallback */
    transition: var(--transition);
    white-space: nowrap;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
}

.functions-section a:hover {
    color: #2563eb; /* IE fallback */
    color: var(--primary-hover);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    background: rgba(59, 130, 246, 0.1);
}

.functions-section a i {
    font-size: 14px;
}

/* 購物車樣式 */
.mobie_cart {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 0;
    position: relative;
}

.mobie_cart .cart {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.mobie_cart .cart_info {
    display: block;
}

.mobie_cart .check-cart {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 15px;
    position: relative;
    transition: all 0.3s ease; /* IE fallback */
    transition: var(--transition);
    border-radius: 6px;
}

.mobie_cart .check-cart:hover {
    color: #2563eb; /* IE fallback */
    color: var(--primary-hover);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    background: rgba(59, 130, 246, 0.1);
}

.mobie_cart .check-cart i {
    font-size: 16px;
    position: relative;
    z-index: 1;
}

.cart-badge,
.mobie_cart .cart-badge {
    position: absolute;
    top: -8px;
    right: 8px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 10;
}

/* 手機版 Header 調整 */
@media (max-width: 768px) {
    .header.mu {
        height: 70px;
        padding: 0.5rem 1rem;
    }
    
    .logo-section .logo img {
        height: 50px;
        max-width: 200px;
    }
    
    .nav-section {
        display: none;
    }
    
    .functions-section {
        gap: 0.25rem;
    }
    
    .functions-section a {
        font-size: 12px;
        padding: 4px 8px;
        border: 1px solid #e5e7eb; /* IE fallback */
        border: 1px solid var(--border-color);
        border-radius: 6px; /* IE fallback */
        border-radius: var(--radius-sm);
        background: #f9fafb;
    }
    
    .functions-section a:hover {
        background: #f3f4f6;
        border-color: #3b82f6; /* IE fallback */
        border-color: var(--primary-color);
    }
    
    .functions-section a i {
        font-size: 12px;
        margin-right: 2px;
    }
    
    /* 隱藏會員名稱 */
    .functions-section .user-name-link {
        display: none;
    }
    
    .mobie_cart .check-cart {
        font-size: 12px;
        padding: 4px 8px;
        border: 1px solid #e5e7eb; /* IE fallback */
        border: 1px solid var(--border-color);
        border-radius: 6px; /* IE fallback */
        border-radius: var(--radius-sm);
        background: #f9fafb;
    }
    
    .mobie_cart .check-cart:hover {
        background: #f3f4f6;
        border-color: #3b82f6; /* IE fallback */
        border-color: var(--primary-color);
    }
    
    .mobie_cart .cart-badge {
        top: -3px;
        right: -3px;
        font-size: 9px;
        min-width: 14px;
        height: 14px;
        padding: 1px 4px;
    }
}

/* 超小屏調整 */
@media (max-width: 480px) {
    .header.mu {
        padding: 0.5rem 0.75rem;
    }
    
    .logo-section .logo img {
        height: 45px;
        max-width: 150px;
    }
    
    .functions-section a,
    .mobie_cart .check-cart {
        font-size: 11px;
        padding: 3px 6px;
    }
}