/* ============================================================
 * CPU Support 專用樣式（獨立檔，僅 ProductCPUSupport.cshtml 引用）
 * 所有 selector 皆包在 .cpu-support-page 命名空間下，避免與 product.css 衝突
 * ============================================================ */

.cpu-support-page {
    margin-bottom: 60px;
    color: #ddd;
    border: 1px solid #151516;
    background-color: #151516;
}

    /* -------- Toolbar -------- */
    .cpu-support-page .cpu-support-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 20px 0;
        border-bottom: 1px solid #333;
    }

    .cpu-support-page .cpu-support-toolbar-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .cpu-support-page .cpu-support-toolbar-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .cpu-support-page .cpu-support-search {
        display: flex;
        align-items: center;
        width: 320px;
        max-width: 100%;
        background: #0e0e0e;
        border: 1px solid #333;
        border-radius: 3px;
        padding: 6px 10px;
        transition: border-color 150ms ease;
    }

        .cpu-support-page .cpu-support-search:focus-within {
            border-color: #ed5d00;
        }

    .cpu-support-page .cpu-support-search-icon {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        fill: #888;
        margin-inline-end: 8px;
    }

    .cpu-support-page .cpu-support-search-input {
        flex: 1 1 auto;
        background: transparent;
        border: none;
        outline: none;
        color: #eee;
        font-size: 14px;
        line-height: 1.5;
    }

        .cpu-support-page .cpu-support-search-input::placeholder {
            color: #777;
        }

    .cpu-support-page .cpu-support-desc {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        color: #ccc;
        font-size: 14px;
    }

    .cpu-support-page .cpu-support-desc-item.is-highlight {
        color: #ed5d00;
        font-weight: 600;
    }

    /* -------- Table -------- */
    .cpu-support-page .cpu-support-table-wrapper {
        overflow-x: auto;
        margin: 20px 0;
        border: 1px solid #2a2a2a;
        border-radius: 4px;
        background: #101010;
    }

    .cpu-support-page .cpu-support-table {
        width: 100%;
        min-width: 1080px;
        border-collapse: collapse;
        color: #ddd;
        font-size: 14px;
        line-height: 1.5;
    }

        .cpu-support-page .cpu-support-table thead {
            background: #1c1c1c;
        }

        .cpu-support-page .cpu-support-table th {
            color: #fff;
            font-weight: 600;
            text-align: start;
            padding: 12px 14px;
            white-space: nowrap;
            border-bottom: 1px solid #333;
            cursor: pointer;
            user-select: none;
            transition: background-color 150ms ease;
        }

            .cpu-support-page .cpu-support-table th:hover {
                background: #232323;
            }

        .cpu-support-page .cpu-support-table .th-label {
            margin-inline-end: 6px;
        }

        .cpu-support-page .cpu-support-table .sort-icons {
            display: inline-flex;
            flex-direction: column;
            vertical-align: middle;
            gap: 2px;
        }

        .cpu-support-page .cpu-support-table .sort-icon {
            width: 8px;
            height: 6px;
            fill: #666;
        }

        .cpu-support-page .cpu-support-table th[aria-sort="ascending"] .sort-asc,
        .cpu-support-page .cpu-support-table th[aria-sort="descending"] .sort-desc {
            fill: #ed5d00;
        }

        .cpu-support-page .cpu-support-table tbody tr + tr td {
            border-top: 1px solid #262626;
        }

        .cpu-support-page .cpu-support-table tbody tr:hover {
            background: #191919;
        }

        .cpu-support-page .cpu-support-table td {
            padding: 12px 14px;
            vertical-align: middle;
            white-space: nowrap;
        }

    /* -------- Pagination -------- */
    .cpu-support-page .cpu-support-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 20px 0;
    }

        .cpu-support-page .cpu-support-pagination .pg-btn,
        .cpu-support-page .cpu-support-pagination .pg-page {
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #333;
            background: #151516;
            color: #ccc;
            font-size: 14px;
            cursor: pointer;
            border-radius: 3px;
            transition: all 150ms ease;
        }

            .cpu-support-page .cpu-support-pagination .pg-btn:hover:not(:disabled),
            .cpu-support-page .cpu-support-pagination .pg-page:hover:not(.is-active) {
                border-color: #ed5d00;
                color: #fff;
            }

            .cpu-support-page .cpu-support-pagination .pg-btn:disabled {
                opacity: 0.4;
                cursor: not-allowed;
            }

            .cpu-support-page .cpu-support-pagination .pg-btn svg {
                width: 14px;
                height: 14px;
                fill: currentColor;
            }

            .cpu-support-page .cpu-support-pagination .pg-page.is-active {
                background: #ed5d00;
                border-color: #ed5d00;
                color: #000;
                font-weight: 600;
            }

    /* -------- Pagination（比照 Product/Index，scope 於 .cpu-support-page） -------- */
    .cpu-support-page .pagination-control {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }

    .cpu-support-page .pagination-nav {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #dedede;
    }

    .cpu-support-page .pagination-prev,
    .cpu-support-page .pagination-next {
        color: #dedede;
        text-decoration: none;
        font-size: 16px;
    }

        .cpu-support-page .pagination-prev.disabled,
        .cpu-support-page .pagination-next.disabled {
            opacity: 0.4;
            pointer-events: none;
        }

    .cpu-support-page .pagination-info {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 16px;
    }

    .cpu-support-page .pagination-info-current {
        border: 1px solid #fff;
        padding: 5px 10px;
    }

    /* -------- Tabs (Support List) -------- */
    .cpu-support-page .support-tabs {
        display: flex;
        gap: 4px;
        border-bottom: 1px solid #333;
        margin-bottom: 12px;
    }

    .cpu-support-page .support-tab {
        background: transparent;
        border: none;
        color: #ccc;
        padding: 10px 18px;
        font-size: 14px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color 150ms ease, border-color 150ms ease;
    }

        .cpu-support-page .support-tab:hover {
            color: #fff;
        }

        .cpu-support-page .support-tab.is-active {
            color: #ed5d00;
            border-bottom-color: #ed5d00;
            font-weight: 600;
        }

    .cpu-support-page .support-panel[hidden] {
        display: none;
    }

    .cpu-support-page .support-table-loading {
        padding: 10px 14px;
        color: #888;
        font-size: 13px;
    }

    /* -------- Filter dropdown -------- */
    .cpu-support-page .support-filter {
        position: relative;
        cursor: pointer;
        padding: 6px 10px;
        border: 1px solid #333;
        border-radius: 3px;
        user-select: none;
    }

    .cpu-support-page .support-filter-caret {
        margin-inline-start: 6px;
        color: #888;
    }

    .cpu-support-page .support-filter-menu {
        position: absolute;
        top: calc(100% + 4px);
        inset-inline-start: 0;
        z-index: 10;
        min-width: 180px;
        max-height: 260px;
        overflow-y: auto;
        background: #151516;
        border: 1px solid #333;
        border-radius: 3px;
        padding: 6px 0;
        list-style: none;
        margin: 0;
    }

        .cpu-support-page .support-filter-menu li {
            padding: 4px 12px;
        }

        .cpu-support-page .support-filter-menu label {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #ccc;
            font-size: 13px;
            cursor: pointer;
        }

    /* -------- Module select (Select CPU) -------- */
    .cpu-support-page .support-section-function-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
    }

    .cpu-support-page .module-select-title {
        color: #ccc;
        font-size: 14px;
    }

    .cpu-support-page .module-select-container {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        background: #0e0e0e;
        border: 1px solid #333;
        border-radius: 3px;
        min-width: 260px;
        cursor: pointer;
    }

    .cpu-support-page .module-select-now-item {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: #eee;
        font-size: 14px;
        cursor: pointer;
    }

    .cpu-support-page .module-select-icon {
        width: 16px;
        height: 16px;
        fill: #888;
    }

    .cpu-support-page .module-select-menu {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 10;
        background: #151516;
        border: 1px solid #333;
        border-radius: 3px;
        padding: 6px 0;
        list-style: none;
        margin: 0;
        max-height: 260px;
        overflow-y: auto;
    }

        .cpu-support-page .module-select-menu li {
            padding: 8px 12px;
            color: #ccc;
            font-size: 14px;
            cursor: pointer;
        }

            .cpu-support-page .module-select-menu li:hover,
            .cpu-support-page .module-select-menu li.is-active {
                color: #ed5d00;
            }

/* -------- RWD -------- */
@media (max-width: 630.98px) {
    .cpu-support-page .cpu-support-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cpu-support-page .download-nav nav ul li a {
        inline-size: auto;
    }

    .cpu-support-page .support-accordion .collapse-header {
        padding-inline-start: calc(5vw + 20px);
    }

    .cpu-support-page .donwload-container {
        padding-inline: 5vw;
    }
}

.cpu-support-page .support-column-toggle {
    position: relative;
}

.cpu-support-page .support-column-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    color: #eee;
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

    .cpu-support-page .support-column-btn:hover {
        border-color: #ed5d00;
        color: #ed5d00;
    }

.cpu-support-page .support-column-caret {
    color: #888;
}

.cpu-support-page .support-column-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    background: #151516;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 6px 0;
    list-style: none;
    margin: 0;
}

    .cpu-support-page .support-column-menu li {
        padding: 4px 12px;
    }

    .cpu-support-page .support-column-menu label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #ccc;
        font-size: 13px;
        cursor: pointer;
    }

/* ============================================================
 * 從 product.css 的 .product-support-list-container 底下複製的樣式，
 * 改 scope 為 .cpu-support-page，讓 ProductSupportList 使用
 * ProductDownload 相同的 nav / accordion / collapse 外觀。
 * ============================================================ */

/* -------- Outer container 樣式（模擬 .product-support-list-container） -------- */
.cpu-support-page {
    border: 1px solid #151516;
    background-color: #151516;
}

    /* -------- Download nav (tabs) -------- */
    .cpu-support-page .download-nav nav {
        padding: 5px 10px;
        display: flex;
        font-size: 16px;
        overflow-x: auto;
        margin-block: 30px;
        position: relative;
    }

        .cpu-support-page .download-nav nav ul {
            display: inline-flex;
            list-style: none;
            margin: 0 auto;
            padding: 0;
        }

            .cpu-support-page .download-nav nav ul li {
                display: flex;
                color: #ccc;
                cursor: pointer;
            }

                .cpu-support-page .download-nav nav ul li a {
                    display: block;
                    color: inherit;
                    text-decoration: none;
                    position: relative;
                    padding: 8px 20px;
                    min-inline-size: 150px; /* ⭐ 由固定改為最小寬度 */
                    text-align: center;
                    border-bottom: 1px solid #333;
                    white-space: nowrap;
                }

@media (max-width: 630.98px) {
    .cpu-support-page .download-nav nav ul li a {
        inline-size: auto;
    }
}

.cpu-support-page .download-nav nav ul li.active,
.cpu-support-page .download-nav nav ul li:hover {
    color: #fff;
}

@media (min-width: 961px) {
    .cpu-support-page .download-nav nav ul li.active a,
    .cpu-support-page .download-nav nav ul li:hover a {
        border-bottom: 2px solid #fff;
    }
}

.cpu-support-page .download-nav nav ul li.active a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: #ff6400;
}

[dir=rtl] .cpu-support-page .download-nav nav ul li.active a::after {
    right: auto;
    left: 0;
    transform: scaleX(-1);
}

/* -------- donwload-container（保留原本錯字，配合 product.css 命名） -------- */
.cpu-support-page .donwload-container {
    padding-inline: 75px;
    margin-inline: auto;
}

@media (max-width: 630.98px) {
    .cpu-support-page .donwload-container {
        padding-inline: 5vw;
    }
}

.cpu-support-page .download-intro {
    padding-block: 1.4em;
    color: #ccc;
}

/* -------- Support accordion / collapse -------- */
.cpu-support-page .support-accordion .collapse-header {
    font-size: 24px;
    font-weight: bold;
    color: #eee;
    padding-block: 12px;
    padding-inline-start: 75px;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 630.98px) {
    .cpu-support-page .support-accordion .collapse-header {
        padding-inline-start: calc(5vw + 20px);
    }
}

.cpu-support-page .support-accordion .collapse-header[data-toggle=collapse] {
    background: transparent;
    transition: background-color 400ms ease;
}

    .cpu-support-page .support-accordion .collapse-header[data-toggle=collapse]::before {
        content: "";
        width: 30px;
        margin-inline-start: -30px;
        height: 30px;
        background: url("../images/svg/icon-expand-head-collapsed.svg") center no-repeat;
    }

    .cpu-support-page .support-accordion .collapse-header[data-toggle=collapse] + .collapse-content {
        height: 0;
    }

    .cpu-support-page .support-accordion .collapse-header[data-toggle=collapse]:hover {
        background: #1c1c1c;
    }

    .cpu-support-page .support-accordion .collapse-header[data-toggle=collapse].active {
        background: #1c1c1c;
    }

        .cpu-support-page .support-accordion .collapse-header[data-toggle=collapse].active::before {
            background-image: url("../images/svg/icon-expand-head.svg");
        }

        .cpu-support-page .support-accordion .collapse-header[data-toggle=collapse].active + .collapse-content {
            height: auto;
        }

.cpu-support-page .support-accordion .collapse-content {
    overflow: clip;
    contain: layout paint;
    transition: height 300ms ease allow-discrete;
}

/* -------- sel_select_type（原生 select 皮膚，比照 product.css 全域規則） -------- */
.cpu-support-page .sel_select_type {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

    .cpu-support-page .sel_select_type select {
        background: #0e0e0e;
        color: #fff;
        padding: 3px 5px 3px 5px;
        padding-right: 2em;
        outline: none;
        display: block;
        border-radius: 3px;
        border: 1px solid #333;
    }

/* ===== Panel visibility (比照 ProductDownload 的 .js-support-panel) ===== */
.cpu-support-page .js-support-panel {
    display: none;
}

    .cpu-support-page .js-support-panel.active {
        display: block;
    }