/* ----------------------2025.6.20-局部調整-page-2---------------------- */

/* 確保 page-2 的 tab 內容區域正確處理溢出，以便在小螢幕下有水平捲軸 */
#page-2 .tab-content-area {
    overflow-x: auto; /* 啟用水平捲軸 */
    -webkit-overflow-scrolling: touch; /* 為了 iOS 設備上的平滑滾動 */
}

/* 強制表格列寬按照設定的百分比分配，並確保表格佔滿父容器 */
#page-2 .data-table {
    table-layout: fixed; /* 關鍵：強制列寬嚴格按設定的百分比分配 */
    width: 100%; /* 確保表格佔滿其父容器的可用寬度 */
}

/* 統一設定 page-2 表格所有 th 和 td 的垂直置中 */
#page-2 .data-table th,
#page-2 .data-table td {
    vertical-align: middle; /* 垂直置中 */
    white-space: normal; /* 允許文本換行，避免長文本在固定寬度下溢出 */
    word-break: break-word; /* 確保長單詞能正確斷行 */
}

/* 針對 page-2 中表格標題 (th) 和內容 (td) 的寬度與對齊處理 */

/* 產品圖欄位 (第一欄) */
#page-2 .data-table th:nth-child(1) { /* 產品圖標題 */
    width: 12%; /* 最終確認為 12% */
    text-align: center; /* 水平置中 */
}
#page-2 .data-table td:nth-child(1) { /* 產品圖內容儲存格 */
    width: 12%; /* 最終確認為 12% */
    padding: 0; /* 移除圖片儲存格的內邊距 */
    text-align: center; /* 水平置中 (用於圖片置中) */
    border-bottom: 1px solid #9095a3; /* 新增：底部邊框 */
}

/* 產品圖 img 樣式：確保圖片在儲存格內正確顯示和置中 */
#page-2 .data-table td:nth-child(1) img {
    display: block; /* 將圖片設置為區塊元素 */
    width: 100%; /* 寬度佔滿父容器 */
    max-width: 150px; /* 最大寬度限制 */
    height: auto; /* 保持圖片比例 */
    margin: 0 auto; /* 透過 margin auto 確保區塊圖片在 td 內水平置中 */
}

/* 原廠型號欄位 (第二欄) - 設定為固定百分比寬度，靠左對齊 */
#page-2 .data-table th:nth-child(2) { /* 原廠型號標題 */
    width: 57%; /* 最終確認為 57% */
    text-align: left; /* 靠左對齊 */
}
#page-2 .data-table td:nth-child(2) { /* 原廠型號內容儲存格 */
    width: 57%; /* 最終確認為 57% */
    text-align: left; /* 靠左對齊 */
}

/* RYZEN 系列欄位 (第三欄) */
#page-2 .data-table th:nth-child(3),
#page-2 .data-table td:nth-child(3) {
    width: 11%; /* 最終確認為 11% */
    text-align: center; /* 水平置中 */
}

/* 分類欄位 (第四欄) */
#page-2 .data-table th:nth-child(4),
#page-2 .data-table td:nth-child(4) {
    width: 9%; /* 最終確認為 9% */
    text-align: center; /* 水平置中 */
}

/* 官方連結欄位 (第五欄) */
#page-2 .data-table th:nth-child(5) {
    width: 11%; /* 最終確認為 11% */
    text-align: center; /* 水平置中 */
}
#page-2 .data-table td:nth-child(5) {
    width: 11%; /* 最終確認為 11% */
    text-align: center; /* 水平置中 */
    padding: 10px; /* 針對有按鈕的儲存格，調整內邊距為10px */
}

/* 移除 page-2 表格外圍的圓角 */
#page-2 .tab-content-area {
    border-radius: 0; /* 將圓角設置為0，移除圓角效果 */
}

/* ----------------------2025.6.21-官方連結按鈕樣式---------------------- */

/* 官方連結欄位內的按鈕樣式 */
#page-2 .data-table td:nth-child(5) a {
    display: flex; /* 更改為 flex 容器 */
    justify-content: center; /* 水平置中內容 */
    align-items: center; /* 垂直置中內容 */
    background-color: #c00000; /* 紅色 #c00000 */
    color: #fff; /* 白色 #fff */
    padding: 18px 12px; /* 增加垂直內邊距 (上、下各18px)，讓按鈕自然高度接近50px */
    border: none; /* 無邊框 */
    border-radius: 5px; /* 稍微圓角 */
    text-decoration: none; /* 移除連結底線 */
    font-size: 0.9em; /* 按鈕文字大小 */
    white-space: nowrap; /* 防止按鈕文字換行 */
    overflow: hidden; /* 超出部分隱藏 */
    text-overflow: ellipsis; /* 文字過長顯示省略號 */
    width: 100%; /* 設定寬度為100% */
    max-height: 50px; /* 最大高度限制，確保不超過50px */
    box-sizing: border-box; /* 確保內邊距計算在寬度內 */
}

/* 按鈕懸停 (Hover) 效果 */
#page-2 .data-table td:nth-child(5) a:hover {
    background-color: #a00000; /* 懸停時顏色略深 */
    cursor: pointer; /* 顯示手型游標 */
}

/* 當按鈕被點擊 (Active) 時的效果 */
#page-2 .data-table td:nth-child(5) a:active {
    background-color: #800000; /* 點擊時顏色更深 */
}

/* ----------------------2025.6.21-表格列懸停效果---------------------- */
#page-2 .data-table tbody tr:hover {
    background-color: #722121; /* 根據您的要求，直接設定為指定的深紅色 */
    cursor: pointer;
}

/* ----------------------2025.6.21-page-3 表格樣式---------------------- */

/* page-3 表格容器的水平捲軸 */
.page-3-table-content {
    overflow-x: auto; /* 啟用水平捲軸 */
    -webkit-overflow-scrolling: touch; /* 為了 iOS 設備上的平滑滾動 */
    border-radius: 0; /* 移除容器圓角，與 page-2 保持一致 */
}

/* page-3 表格基本設置 */
.page-3-table-content .data-table {
    table-layout: fixed; /* 強制列寬嚴格按設定的百分比分配 */
    width: 100%; /* 確保表格佔滿其父容器的可用寬度 */
}

/* page-3 表格 th (表頭) 樣式 */
.page-3-table-content .data-table th {
    vertical-align: middle; /* 垂直置中 */
    white-space: normal; /* 允許文本換行 */
    word-break: break-word; /* 確保長單詞能正確斷行 */
    padding: 12px; /* 保持表頭的內邊距 */
}

/* page-3 表格 td (內容儲存格) 樣式 */
.page-3-table-content .data-table td {
    vertical-align: middle; /* 垂直置中 */
    white-space: normal; /* 允許文本換行 */
    word-break: break-word; /* 確保長單詞能正確斷行 */
    padding: 15px 12px; /* 將預設垂直內邊距設定為 15px (兼顧桌面版高度) */
}

/* page-3 表格頭部樣式 (網咖名稱的 th) */
.page-3-table-content .data-table th.header-red {
    background-color: #c00000; /* 與 page-2 統一的紅色背景 */
    color: #fff; /* 白色文字 */
}

/* page-3 表格列懸停效果 (與 page-2 相同顏色) */
.page-3-table-content .data-table tbody tr:hover {
    background-color: #722121; /* 深紅色 */
    cursor: pointer;
}

/* page-3 第一欄 (網咖名稱和按鈕) 的 flex 佈局 (預設：水平並排) */
.page-3-table-content .data-table td:nth-child(1) {
    display: flex;
    flex-wrap: wrap; /* 允許內容換行 */
    justify-content: space-between; /* 水平分散對齊 */
    align-items: center; /* 垂直置中內容 */
    align-content: center; /* 垂直置中多行內容塊 */
    gap: 10px; /* 網咖名稱和按鈕之間的間距 */
}

/* page-3 第一欄中的網咖名稱連結樣式 */
.page-3-table-content .data-table td:nth-child(1) .shop-name-link {
    flex-grow: 1; /* 允許文字區域佔用盡可能多的剩餘空間 */
    text-decoration: none; /* 移除預設和懸停底線 */
    color: #fff; /* 連結文字顏色改為白色 */
    /* 核心修改：確保文字可以自動換行，並移除強制截斷 */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left; /* 已修改為靠左對齊 */
}

/* 移除 shop-name-link 懸停時的底線 */
.page-3-table-content .data-table td:nth-child(1) .shop-name-link:hover {
    text-decoration: none;
}

/* page-3 中新增的「前往連結」按鈕樣式 */
.page-3-table-content .data-table .page3-view-link-button {
    flex-shrink: 0; /* 防止按鈕被壓縮 */
    background-color: #c00000; /* 紅色 */
    color: #fff;
    padding: 8px 15px; /* 較小的內邊距 */
    border: none;
    border-radius: 5px;
    text-decoration: none; /* 移除連結底線 */
    font-size: 0.8em; /* 略小字體 */
    white-space: normal; /* 允許文字換行 */
    overflow: visible;     /* 確保內容溢出時可見 (如果換行還不夠) */
    text-overflow: clip; /* 移除省略號，讓文字完全顯示 */
    text-align: center; /* 確保多行文字在按鈕內水平置中 */
    line-height: 1.3; /* 調整行高，讓多行文字更易讀 */
    cursor: pointer;
    display: inline-flex; /* 保持 flex 特性 */
    align-items: center; /* 垂直置中文字 */
    justify-content: center; /* 水平置中文字 */
}

/* 按鈕懸停 (Hover) 效果 */
.page-3-table-content .data-table .page3-view-link-button:hover {
    background-color: #a00000; /* 懸停時顏色略深 */
}

/* 按鈕點擊 (Active) 時的效果 */
.page-3-table-content .data-table .page3-view-link-button:active {
    background-color: #800000; /* 點擊時顏色更深 */
}

/* ---------------------- 媒體查詢：針對 416px 到 768px 範圍的按鈕調整 ---------------------- */
@media (max-width: 768px) and (min-width: 416px) {
    .page-3-table-content .data-table .page3-view-link-button {
        font-size: 1em; /* 調整字體大小，使其變大 */
        padding: 12px 15px; /* 增加按鈕的垂直內邊距，使其變高 */
    }
}

/* ---------------------- 媒體查詢：純 CSS 響應式表格佈局 (類似 div 堆疊效果) ---------------------- */
/* 當螢幕寬度小於或等於 415px 時，啟用表格堆疊佈局 */
@media (max-width: 415px) {
    /* 隱藏表格容器的水平捲軸，因為表格內容將被強制堆疊 */
    .page-3-table-content {
        overflow-x: hidden;
    }

    /* 將表格本身轉為區塊元素，佔滿父容器寬度，並允許自動佈局 */
    .page-3-table-content .data-table {
        display: block;
        width: 100%;
        table-layout: auto; /* 允許列寬彈性調整，不再固定 */
    }

    /* 將表頭、表身和每一行都轉為區塊元素，實現垂直堆疊 */
    .page-3-table-content .data-table thead,
    .page-3-table-content .data-table tbody,
    .page-3-table-content .data-table tr {
        display: block;
        width: 100%;
    }

    /* 在小螢幕下，隱藏表頭，通常堆疊後的資訊會包含在每一列中 */
    .page-3-table-content .data-table thead {
        display: none;
    }

    /* 將每個 th 和 td 都轉為區塊元素，並佔滿 100% 寬度，實現垂直堆疊 */
    .page-3-table-content .data-table th,
    .page-3-table-content .data-table td {
        display: block;
        width: 100%;
        box-sizing: border-box; /* 確保內邊距和邊框計算在寬度內 */
        text-align: center; /* 所有堆疊後的儲存格內容預設水平置中 */
        padding: 10px 12px; /* 增加垂直內邊距 (上下各 10px) */
        min-height: 85px; /* <-- 【調整處】設定一個較高的最小高度，以確保視覺連貫性 */
        border-bottom: 1px solid #555; /* 為每個堆疊的儲存格添加底部邊框 */
    }

    /* 確保每個 tr 的最後一個 td 沒有底部邊框，避免重複 */
    .page-3-table-content .data-table tr td:last-child {
        border-bottom: none;
    }

    /* 針對第一欄 (網咖名稱 + 按鈕) 的特殊堆疊和置中處理 */
    .page-3-table-content .data-table td:nth-child(1) {
        display: flex; /* 保持 flex 容器，以便控制其內部文字和按鈕 */
        flex-direction: column; /* 強制內部文字和按鈕垂直堆疊 */
        justify-content: center; /* 水平居中堆疊後的內容塊 */
        align-items: center; /* 垂直居中堆疊後的子元素 (文字和按鈕) */
        align-content: center; /* 垂直居中多行內容塊 (如果有多餘空間) */
        border-bottom: none; /* 第一欄的 td 自己處理邊框或由 tr 處理 */
    }

    /* 確保堆疊模式下，文字和按鈕各自佔滿一行並水平置中 */
    .page-3-table-content .data-table td:nth-child(1) .shop-name-link,
    .page-3-table-content .data-table td:nth-child(1) .page3-view-link-button {
        flex-basis: 100%; /* 讓它們各自佔據父容器的全部寬度 */
        text-align: center; /* 堆疊時，文本內容也水平置中 */
        margin-bottom: 5px; /* 給予堆疊後一些間距 */
    }
    /* 移除堆疊模式下最後一個元素的底部間距 */
    .page-3-table-content .data-table td:nth-child(1) .page3-view-link-button:last-child {
        margin-bottom: 0;
    }
}


/* ----------------------2025.6.21-下拉式選單樣式 (求有階段) - 適用於所有 .data-table 內的 th ---------------------- */

/* Style for the div holding text and select in ANY table header */
.data-table th .header-filter {
    display: flex; /* 使用 flexbox 將文字和下拉選單並排 */
    align-items: center; /* 垂直置中內容 */
    justify-content: center; /* 水平置中內容 */
    gap: 5px; /* 表頭文字和下拉選單之間的間距 */
    flex-wrap: wrap; /* 允許在空間不足時換行 */
    min-width: 0; /* 【關鍵調整】允許 flex 容器在需要時收縮 */
}

/* Basic styling for the dropdown selects in ANY table header */
.data-table th .filter-dropdown {
    padding: 5px; /* 較為緊湊的內邊距 */
    border: 1px solid #ccc; /* 淺灰色邊框 */
    border-radius: 3px; /* 輕微圓角 */
    font-size: 0.8em; /* 【關鍵調整】縮小字體以幫助適應小空間 */
    cursor: pointer;
    background-color: #fff; /* 白色背景 */
    color: #333; /* 深色文字 */
    box-sizing: border-box; /* 確保內邊距計算在寬度內 */
    width: 100%; /* 【關鍵調整】佔滿父容器可用寬度 */
    max-width: 100%; /* 【關鍵調整】確保不會超出父容器 */
    min-width: 0; /* 【關鍵調整】允許下拉選單自身收縮到最小內容寬度 */
    /* 移除任何自定義外觀的嘗試，保持瀏覽器預設樣式 */
}

/* Ensure text inside red header is white (applicable to any red header with dropdown) */
.data-table th.header-red .header-filter span {
    color: #fff; /* 紅色表頭內的文字保持白色 */
}

/* 媒體查詢：手機版 (寬度 <= 415px) 下拉式選單樣式調整 */
@media (max-width: 415px) {
    /* Apply to ANY table header with dropdown in mobile */
    .data-table th .header-filter {
        /* 【關鍵調整】保持它們並排，因為 page-2 表格整體會滾動而非堆疊 */
        flex-direction: row;
        flex-wrap: wrap; /* 允許文字/下拉選單在狹窄的欄位內換行 */
        justify-content: center;
        align-items: center;
        gap: 2px; /* 【關鍵調整】進一步縮小間距 */
    }
    .data-table th .filter-dropdown {
        width: 100%; /* 【關鍵調整】佔滿容器寬度 */
        /* 【關鍵調整】移除 max-width: 180px; 讓其能更自由收縮 */
        font-size: 0.8em; /* 保持字體大小，或根據需要微調 */
        min-width: 0; /* 再次強調，允許收縮 */
        padding: 4px; /* 【關鍵調整】稍微減少內邊距 */
    }
}


@media (max-width: 480px) {
    #page-2 .tab-content-area {
        max-height: 450px; /* 這裡設定您希望的最大高度，例如 400px 或 50vh */
        overflow-y: scroll;  /* 內容超出時顯示垂直捲軸 */
        -webkit-overflow-scrolling: touch; /* 確保 iOS 設備上的平滑滾動 */
    }
}

/* ----------------------2025.6.22-局部調整-page-2 表格內容尺寸 (手機版)---------------------- */
@media (max-width: 480px) {
    #page-2 .tab-content-area {
        width: 100%; /* 確保 tab-content-area 佔滿可用寬度 */
        max-height: 450px; /* 之前設定的高度限制 */
        overflow-y: scroll;  /* 垂直捲軸 */
        overflow-x: auto; /* 確保水平捲軸也啟用，即使所有寬度加起來不是100% */
        -webkit-overflow-scrolling: touch;
        border: 1px solid #445a86; /* 新增：邊框樣式 */
    }

    #page-2 .data-table {
        font-size: 0.9em; /* 表格內文字字體大小調整為 0.9em */
        table-layout: fixed; /* 確保列寬嚴格按設定分配 */
        width: 100%; /* 保持表格佔滿父容器 */
    }

    /* 調整 page-2 表格各欄位的寬度 (th 和 td 一起設定) */
    #page-2 .data-table th:nth-child(1),
    #page-2 .data-table td:nth-child(1) {
        width: 10%; /* 產品圖 */
    }
    #page-2 .data-table th:nth-child(2),
    #page-2 .data-table td:nth-child(2) {
        width: 30%; /* 店家名稱 */
    }
    #page-2 .data-table th:nth-child(3),
    #page-2 .data-table td:nth-child(3) {
        width: 16%; /* 店家地址 */
    }
    #page-2 .data-table th:nth-child(4),
    #page-2 .data-table td:nth-child(4) {
        width: 12%; /* 原廠型號 */
    }
    #page-2 .data-table th:nth-child(5),
    #page-2 .data-table td:nth-child(5) {
        width: 13%; /* RYZEN 系列 */
    }
}


/* ----------------------2025.6.22-局部調整-page-3 表格樣式 (手機版)---------------------- */

/* 預設隱藏這些提示文字 (在非 max-width: 415px 的情況下) */
#page-3 .page-3-table-note-1,
#page-3 .page-3-table-note-2 {
    display: none;
}

@media (max-width: 415px) {
    #page-3 .data-table {
        border-right: 0px solid #28324b;
        border-left: 0px solid #c00000;
    }

    #page-3 .data-table tbody tr {
        border-top: 15px solid #445a86;
        border-bottom: 2px solid #445a86;
        border-left: 2px solid #445a86;
        border-right: 2px solid #445a86;
        margin-bottom: 10%;
        padding: 5%;
    }

    /* 調整 td 樣式 */
    #page-3 .data-table td {
        padding: 2px;
        min-height: unset;
        border-bottom: none;
        border-right: none;
    }

    /* 調整標題文字樣式 (例如：哈哈哈活力網咖 - 士林店) */
    #page-3 .data-table td:nth-child(1) .shop-name-link {
        font-size: 1.3em;
        font-weight: bold;
    }

    /* 調整 [台北] 和 [桃園] 文字樣式 (假設在 td:nth-child(2)) */
    #page-3 .data-table td:nth-child(2) {
        font-size: 1.3em;
        font-weight: bold;
    }

    /* 調整按鈕樣式 */
    #page-3 .data-table td:nth-child(1) .page3-view-link-button {
        font-size: 1.2em;
    }

    /* 確保內容在 tr 的新 padding 下垂直置中和水平置中 */
    #page-3 .data-table th,
    #page-3 .data-table td {
        vertical-align: middle;
        text-align: center;
    }

    /* 調整 page-3 第一欄 (連結和按鈕) 的 flex 佈局，以確保置中和間距 */
    #page-3 .data-table td:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        white-space: normal;
        word-break: break-word;
    }

    #page-3 .data-table td:nth-child(1) .page3-view-link-button {
        white-space: nowrap;
        max-width: 100%;
    }

    /* 僅在 max-width: 415px 時顯示這些提示文字 */
    #page-3 .page-3-table-note-1,
    #page-3 .page-3-table-note-2 {
        display: inline !important; /* 使用 !important 確保覆蓋預設隱藏 */
    }

    /* 新增：page-3-table-note-1 樣式 */
    #page-3 .page-3-table-note-1 {
        font-weight: bold;
        color: #e51f1f; /* 紅色 */
    }

    /* 新增：page-3-table-note-2 樣式 */
    #page-3 .page-3-table-note-2 {
        font-weight: bold;
        color: #5b77ff; /* 藍色 */
    }
}