/* 導航欄樣式 */
.header {
    background: #fff; /* 白色背景 */
    color: #000; /* 黑色文字 */
    padding: 10px 0;
    text-align: center;
}

/* 讓 top-nav 垂直排列（手機模式） */
.top-nav {
    display: flex;
    flex-direction: column; /* 手機模式下垂直排列 */
    align-items: stretch; /* 拉伸以佔滿寬度 */
    padding: 0 150px; /* 左右間距 */
    position: relative; /* 為搜尋表單的絕對定位提供參考 */
}

/* 頭部容器：包含 logo 和漢堡按鈕 */
.header-top {
    display: flex;
    justify-content: space-between; /* logo 和漢堡按鈕分開 */
    align-items: center; /* 垂直置中 */
    width: 100%;
}

/* logo 樣式 */
.logo {
    display: block;
    width: 300px; /* Logo 寬度，可調整 */
    height: 100px; /* Logo 高度，可調整 */
    background-image: url('../圖片/商標未去背.png'); /* 使用 Logo 圖片 */
    background-size: contain; /* 保持圖片比例 */
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 20px; /* 讓 Logo 與按鈕有間距 */
}

/* 漢堡選單按鈕 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* 確保按鈕在選單之上 */
}

.menu-icon {
    width: 30px;
    height: 30px;
}

/* 手機模式：漢堡選單 */
.nav-menu {
    display: flex; /* 改為 flex，確保結構存在 */
    flex-direction: column;
    position: fixed;
    top: 70px;
    width: 90%;
    height: calc(100% - 70px);
    background-color: #fff;
    color: #000;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0; /* 初始透明 */
    visibility: hidden; /* 初始隱藏 */
    right: -90%; /* 初始位置在右側外，使用百分比 */
    z-index: 1000;
}

.nav-menu.show {
    right: 0;
    opacity: 1; /* 展開時完全不透明 */
    visibility: visible; /* 展開時顯示 */
}

/* 搜尋欄 */
.search-bar {
    display: block; /* 確保搜尋欄顯示 */
    margin-bottom: 15px; /* 與下方元素間距 */
}

/* 導航項目容器 */
.nav-items {
    display: none; /* 預設隱藏 */
    flex-direction: row; /* 橫向排列 */
    flex-wrap: wrap; /* 允許換行 */
    gap: 10px; /* 項目間距 */
    justify-content: space-between; /* 均勻分佈 */
    margin-bottom: 15px; /* 與下方元素間距 */
}

.nav-menu.show .nav-items {
    display: flex; /* 漢堡選單展開時顯示導航項目 */
}

/* 導航項目 */
.nav-item {
    display: flex;
    align-items: center;
    padding: 5px 10px; /* 調整內邊距 */
    color: #000; /* 黑色文字 */
    text-decoration: none;
    font-size: 14px; /* 調整字體大小 */
    flex: 1; /* 每個項目均分空間 */
    justify-content: center; /* 內容居中 */
}

.nav-item:hover {
    background-color: #f5f5f5; /* 懸停時淺灰色背景 */
}

.nav-icon {
    width: 20px; /* 調整圖標大小 */
    height: 20px;
    margin-right: 5px; /* 圖標與文字間距 */
}

.nav-text {
    display: inline-block; /* 確保文字與圖標並排 */
}

.cart-count {
    background-color: #ff4d4f; /* 柔和的紅色 */
    color: white;
    font-size: 12px;
    border-radius: 50%;
    padding: 2px 6px;
    margin-left: 5px;
}

/* 搜尋按鈕 */
.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px 0;
    color: #000; /* 黑色文字 */
    font-size: 16px;
    width: 100%; /* 確保按鈕佔滿寬度 */
}

.search-btn:hover {
    background-color: #f5f5f5; /* 懸停時淺灰色背景 */
}

/* 手機模式搜尋表單樣式 */
.nav-menu .search-bar .search-form {
    margin-top: 5px;
    display: none; /* 預設隱藏 */
    width: 100%; /* 確保表單佔滿寬度 */
}

.nav-menu .search-bar .search-form.show {
    display: flex !important; /* 展開時顯示為 flex */
}

.nav-menu .search-bar .search-form form {
    display: flex;
    align-items: center;
    background-color: #f5f5f5; /* 淺灰色背景 */
    border: 1px solid #ddd;
    border-radius: 20px; /* 圓角更柔和 */
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 輕微陰影 */
}

.nav-menu .search-bar .search-form input {
    padding: 8px 10px;
    width: 100%; /* 輸入框佔滿可用空間 */
    border: none;
    background: none;
    border-radius: 20px 0 0 20px;
    font-size: 14px;
    outline: none;
}

.nav-menu .search-bar .search-form button {
    padding: 8px 12px;
    background: #007BFF; /* 藍色按鈕 */
    border: none;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon-white {
    width: 18px;
    height: 18px;
}

/* 手機模式：側邊欄占位符 */
.mobile-sidebar-placeholder {
    display: none; /* 預設隱藏 */
    margin: 15px 0; /* 上下間距 */
}

.nav-menu.show .mobile-sidebar-placeholder {
    display: block; /* 漢堡選單展開時顯示 */
}

/* 手機模式：導航連結 */
.nav-links {
    display: none; /* 預設隱藏 */
    flex-direction: row; /* 水平排列 */
    margin-top: 15px;
}

.nav-menu.show .nav-links {
    display: flex; /* 漢堡選單展開時顯示 */
}

.nav-links a {
    display: block;
    color: #000; /* 黑色文字 */
    padding: 10px 0;
    font-size: 16px;
    text-decoration: none;
}

.nav-links a:hover {
    background-color: #f5f5f5; /* 懸停時淺灰色背景 */
}

/* 禁用背景滾動 */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

/* 網頁模式：右側導航區域 */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px; /* 導航連結與圖標之間的間距 */
    position: relative; /* 為搜尋框定位提供參考 */
}

/* 網頁模式：導航連結 */
.desktop-nav-links {
    display: flex;
    gap: 15px; /* 連結間距 */
    align-items: center; /* 垂直居中 */
    flex-wrap: nowrap; /* 防止連結換行 */
    justify-content: flex-end;
    flex-wrap: wrap;
}

.desktop-nav-links a {
    color: #000;
    text-decoration: none;
    font-size: 16px;
    padding: 5px 10px;
    transition: color 0.3s ease;
    white-space: nowrap; /* 防止文字換行 */
}

.desktop-nav-links a:hover {
    color: #007BFF;
}

/* 網頁模式：導航圖標 */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative; /* 為搜尋框定位提供參考 */
}

.nav-icons .search-icon,
.nav-icons .user-icon,
.nav-icons .cart-icon {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

.nav-icons .icon {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s ease; /* 懸停效果 */
}

.nav-icons .icon:hover {
    opacity: 0.7; /* 懸停時變透明 */
}

.nav-icons .cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff4d4f; /* 柔和的紅色 */
    color: white;
    font-size: 12px;
    border-radius: 50%;
    padding: 2px 6px;
}

/* 網頁模式：搜尋框樣式 */
.nav-icons .search-bar {
    display: none; /* 預設隱藏，與 jQuery 代碼兼容 */
    position: absolute; /* 使用絕對定位 */
    top: 40px; /* 定位在圖標下方 */
    right: 0; /* 與圖標右側對齊 */
    z-index: 1000; /* 確保顯示在其他元素之上 */
}

.nav-icons .search-bar form {
    display: flex;
    align-items: center;
    background-color: #fff; /* 白色背景 */
    border: 1px solid #ddd;
    border-radius: 20px; /* 圓角更柔和 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 5px;
}

.nav-icons .search-bar input {
    padding: 8px 10px;
    width: 290px;
    border: none;
    background: none;
    border-radius: 20px 0 0 20px;
    font-size: 14px;
    outline: none;
}

.nav-icons .search-bar button {
    padding: 8px 12px;
    background: #007BFF; /* 藍色按鈕 */
    border: none;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cookies 通知橫幅 */
.cookie-notice {
    position: fixed;
    bottom: 0;
    right: 0; /* 靠右對齊 */
    transform: translateX(100%); /* 初始位置在右側外 */
    background-color: #333;
    color: #fff;
    padding: 15px;
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* 動畫包括 transform 和 opacity */
    opacity: 0; /* 初始透明 */
}

.cookie-notice.show {
    transform: translateX(0); /* 顯示時滑入 */
    opacity: 1; /* 完全不透明 */
}

/* 隱藏時禁用點擊，但不立即設置 display: none */
.cookie-notice:not(.show) {
    transform: translateX(100%); /* 滑出到右側 */
    opacity: 0;
    pointer-events: none; /* 禁用點擊事件 */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* 確保滑出動畫 */
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.cookie-content p {
    margin: 0;
    font-size: 14px;
}

.cookie-content a {
    color: #007bff;
    text-decoration: none;
}

.cookie-content a:hover {
    text-decoration: underline;
}

.cookie-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s;
}

.cookie-btn:hover {
    background-color: #0056b3;
}

/* 響應式調整 */
@media (min-width: 768px) {
    .top-nav {
        flex-direction: row; /* 水平排列 */
        justify-content: space-between; /* Logo 和 nav-right 分開 */
        align-items: center;
        padding: 0 150px;
        max-width: 100%; /* 確保佔滿可用寬度 */
    }

    .header-top {
        display: flex;
        align-items: center;
    }

    .menu-toggle {
        display: none; /* 隱藏漢堡選單按鈕 */
    }

    .nav-menu {
        display: none !important; /* 確保漢堡選單不顯示 */
    }

    .nav-right {
        display: flex; /* 顯示右側導航 */
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .nav-right {
        display: none; /* 手機模式下隱藏右側導航 */
    }

    .menu-toggle {
        display: block; /* 顯示漢堡選單按鈕 */
    }

    .top-nav {
        padding: 0 20px; /* 手機模式下減少左右間距 */
        flex-direction: column; /* 垂直排列 */
    }

    .logo {
        width: 200px; /* 手機模式下縮小 Logo */
        height: 60px;
    }

    .cookie-notice {
        /*width: 100%;  確保手機模式下佔滿寬度 */
        padding: 10px; /* 減少內邊距，適應小螢幕 */
    }

    .cookie-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-btn {
        margin-top: 10px;
    }
}