@charset "utf-8";
/* =============================================================
   project-homepage-filter
   專案專用樣式：僅在 .filter-modal 範圍內生效，沿用 ui-kit 變數，
   不修改 ui-kit.css 與其他元件樣式。
============================================================= */

/* ---------- Body 主體版面 ---------- */
/* 強制 Modal 無論 PC 還是手機版都達到最大高度，不隨內容減少而縮水 */
.filter-modal .ui-modal__dialog {
    height: 100%;
    max-height: 100%; /* 覆蓋 ui-kit 可能設定的 max-height 限制 */
}

/* ui-kit overlay 預設 align-items:center，會讓 height:100% 失效。
   改為 stretch 讓 dialog 真正撐滿 overlay 內容區（上下間距由 overlay padding 保留）。 */
.filter-modal.ui-modal {
    align-items: stretch;
}

/* 獨立左右捲動並配合 sticky 變體 */
.filter-modal.ui-modal--sticky .ui-modal__body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.filter-grid {
    display: flex;
    gap: var(--space-inline-md);
    flex: 1;
    min-height: 0;
}

.filter-modal__main,
.filter-modal__sidebar {
    min-width: 0;
    overflow-y: auto;
    scrollbar-gutter: stable; /* 預留捲軸寬度，防止內容跳動 */
}

/* 重新分配 padding 到可捲動的內層容器 */
.filter-modal__main {
    flex: 2;
    padding-right: var(--space-inset-xs);
    border-right: 1px solid var(--color-border);
}


/* ---------- Search bar（搜尋 + Collapse All 並排） ---------- */
.filter-search-bar {
    display: flex;
    align-items: center;
    gap: var(--space-inline-md);
    padding-bottom: var(--space-inset-sm);
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-surface-soft);
}

    .filter-search-bar .filter-search {
        flex: 1;
        min-width: 0;
    }

/* ---------- Search ---------- */
/* .filter-search 改用 ui-kit 的 .ui-input-group（icon + input），視覺完全交給元件庫標準樣式 */

/* ---------- Toolbar ---------- */
.filter-toolbar {
    display: flex;
    justify-content: flex-end;
}

.filter-collapse-all {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .filter-collapse-all i {
        background: var(--color-brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* ---------- Accordion 兩欄 ---------- */
.filter-accordion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-inline-sm);
    align-items: start;
}

    .filter-accordion-grid > .ui-accordion {
        min-width: 0;
    }

.ui-accordion__item {
    background-color: var(--bg-surface);
}

/* 分類旁與 Tab 上的計數改用 ui-kit 的 .ui-badge.ui-badge--soft（與 Sidebar 計數一致），
   .filter-count 只作為 JS 選取用的 hook，不再自訂視覺樣式 */

/* ---------- Checkbox 清單 ---------- */
/* 手風琴內的 checkbox 堆疊改用 ui-kit 的 .ui-field-group（預設垂直、標準間距），不再自訂 .filter-options */

/* ---------- Sidebar：Your Focus Areas ---------- */
.filter-modal__sidebar {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-stack-md);
    padding-right: var(--space-inset-xs);
}

/* Your Focus Areas 標題列改用 ui-inline，計數改用 ui-badge，皆為 ui-kit 標準元件，不再自訂 */

/* 原生 <button> 外觀已由 ui-kit 的 button.ui-textlink 統一 reset，
   這裡只保留「Clear All」文字不換行的專案需求 */
.filter-focus__clear {
    white-space: nowrap;
}

/* Focus 清單改用 ui-kit 的 .ui-tag-group（水平排列、空間不足才換行），不再自訂 .filter-focus__list */

.filter-focus__placeholder {
    color: var(--color-text-muted);
    margin: 0;
}


/* ---------- Mobile Tabs（≥769px 隱藏） ---------- */
.filter-tabs {
    display: none;
}

/* =============================================================
   RWD
============================================================= */
@media (max-width: 1024px) {
    .filter-grid {
        gap: var(--space-inline-sm);
    }
}

@media (max-width: 768px) {


    .filter-search-bar .filter-toolbar {
        justify-content: flex-end;
    }

    .filter-modal .ui-modal__header {
        padding: var(--space-inset-xs);
    }

    .filter-modal.ui-modal {
        padding: var(--space-inset-xs);
    }



    .filter-modal.ui-modal--sticky .ui-modal__body {
        padding: var(--space-inset-xs);
    }

    .filter-modal__sidebar {
        padding: var(--space-inset-xs);
    }

    /* Tabs */
    .filter-tabs {
        display: flex;
        flex-shrink: 0;
        gap: var(--space-inline-sm);
        border-bottom: 1px solid var(--color-grey-200);
        margin-bottom: 15px;
    }

    .filter-tabs__tab {
        all: unset;
        cursor: pointer;
        flex: 1;
        text-align: center;
        padding: 5px 0 15px 0;
        position: relative;
    }

        .filter-tabs__tab.is-active {
            font-weight: var(--font-weight-medium);
        }

            .filter-tabs__tab.is-active::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -1px;
                height: 3px;
                background: var(--bg-brand-primary);
            }

    /* Grid 改單欄 + 依 tab 切換顯示 */
    .filter-grid {
        flex-direction: column;
        gap: 0;
        /* 讓視窗高度不隨內容變化，保持佔滿可用空間 */
        height: 100%;
    }

        .filter-grid[data-active-tab="topics"] .filter-modal__sidebar,
        .filter-grid[data-active-tab="focus"] .filter-modal__main {
            display: none;
        }

    .filter-accordion-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .filter-focus__head {
        padding: 0 0 var(--space-inset-2xs);
    }

    .filter-focus__list {
        padding: 0;
    }
}


@media (max-width: 580px) {
    .filter-search-bar {
        flex-direction: column;
        align-items: flex-end;
    }

    .filter-search {
        width: 100%;
    }
}

/* ---------- Personalize Toast ---------- */
.personalize-toast {
    position: fixed;
    bottom: 40px;
    left: 40px;
    z-index: 9999;
    background-color: var(--bg-surface);
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-inline-md);
    padding: var(--space-inset-md);
    width: 440px;
    box-sizing: border-box;
    border-radius: 15px;
}

.personalize-toast__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex-shrink: 0;
}

    .personalize-toast__icon i {
        color: var(--bg-brand-primary);
    }

.personalize-toast__content {
    flex: 1;
}

.personalize-toast__title {
    margin: 0 0 10px 0;
    font-weight: var(--font-weight-medium);
}

.personalize-toast__desc {
    margin: 0 0 16px 0;
}

.personalize-toast__close {
    all: unset;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--color-text-muted, #999999);
    font-size: 16px;
    transition: color 0.2s;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .personalize-toast__close:hover {
        color: var(--color-text-primary, #333333);
    }

@media (max-width: 440px) {
    .personalize-toast {
        width: 100%;
        bottom: 0;
        right: 0;
        left: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .personalize-toast__btn {
        width: 100%;
    }
}


/* ---------- 遮罩（Apply Preferences 後全螢幕白色半透明，避開 Customize View 按鈕） ---------- */
.coachmark-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

    .coachmark-overlay.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

/* Customize View 按鈕區塊浮出遮罩上方 */
.usermenu-customize.coachmark-active {
    position: relative;
    z-index: 1300;
}

/* ---------- Coachmark 漸層邊框動畫（彩色短段弧在灰框上跑一圈，跑到一半開始淡出） ---------- */
@property --coachmark-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --coachmark-border-alpha {
    syntax: '<number>';
    initial-value: 1;
    inherits: false;
}

@keyframes coachmark-border-spin {
    0% {
        --coachmark-border-angle: 0deg;
        --coachmark-border-alpha: 1;
    }

    60% {
        --coachmark-border-angle: 180deg;
        --coachmark-border-alpha: 1;
    }

    100% {
        --coachmark-border-angle: 360deg;
        --coachmark-border-alpha: 0;
    }
}

.customize-coachmark.border-spin {
    border-color: transparent;
    background: linear-gradient(var(--bg-surface-default, #ffffff), var(--bg-surface-default, #ffffff)) padding-box, conic-gradient( from var(--coachmark-border-angle), rgba(224, 224, 224, 1) 0deg, rgba(0, 91, 183, var(--coachmark-border-alpha)) 8deg, rgba(0, 170, 220, var(--coachmark-border-alpha)) 48deg, rgba(107, 91, 255, var(--coachmark-border-alpha)) 82deg, rgba(224, 224, 224, 1) 92deg, rgba(224, 224, 224, 1) 360deg ) border-box;
    background-color: var(--bg-surface-default, #ffffff);
    animation: coachmark-border-spin 1.5s linear 1 forwards;
}

/* ---------- Coachmark Tooltip ---------- */
.customize-coachmark {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color: var(--bg-surface);
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-inline-md);
    padding: var(--space-inset-md);
    width: 380px;
    border-radius: 15px;
    box-sizing: border-box;
    /* 預設隱藏：opacity + visibility 讓 transition 可作用，pointer-events 防止誤觸 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

    /* 淡入狀態 */
    .customize-coachmark.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .customize-coachmark::before,
    .customize-coachmark::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        pointer-events: none;
    }

    .customize-coachmark::before {
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 9px solid var(--color-border);
        transform: translate(-50%, -100%);
    }

    .customize-coachmark::after {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 10px solid var(--bg-surface-default, #ffffff);
        transform: translate(-50%, calc(-100% + 2.5px));
    }

.customize-coachmark__content {
    flex: 1;
}

.customize-coachmark__title {
    margin: 0 0 10px 0;
    font-weight: var(--font-weight-medium);
}

.customize-coachmark__desc {
    margin: 0 0 15px 0;
}

/* 淡入狀態 */
.customize-coachmark.is-visible {
    display: flex;
    opacity: 1;
}


@media (max-width: 440px) {
    .customize-coachmark {
        width: max-content;
        max-width: 90vw;
    }
}

@media (max-width: 1200px) {
    /* 小於 1200px 時改靠右對齊，避免超出螢幕右側被裁切 */
    .customize-coachmark {
        left: auto;
        right: 0;
        transform: none;
    }
        /* 箭頭對應移到右側，指向觸發按鈕位置 */
        .customize-coachmark::before {
            left: auto;
            right: 16px;
        }

        .customize-coachmark::after {
            left: auto;
            right: 14px;
        }
}

/* =============================================================
   Mobile 375px Specific Overrides
============================================================= */

@media (max-width: 375px) {

    /* 2. Topic/Your Focus Areas 區塊高度縮小 */
    .filter-tabs {
        margin-top: var(--space-stack-2xs);
        margin-bottom: 0;
    }

    /* 3. 搜尋框與 Collapse All 改成不置頂、隨內容滾動、垂直排列 */
    /* 同時重置 sticky 模式下的補償性 negative margin 與 extra padding */
    .filter-search-bar {
        position: static;
        flex-direction: column;
        align-items: stretch;
        margin-top: var(--space-stack-xs);
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        z-index: auto;
        background: transparent;
    }

    /* margin-top:50px 是為 sticky search bar 讓位，改成 non-sticky 後重置 */
    .filter-accordion-grid {
        margin-top: var(--space-stack-2xs);
    }

    /* 4. 彈出視窗全滿版，取消上下左右間距 */
    .filter-modal.ui-modal {
        padding: 0;
    }

    .filter-modal .ui-modal__dialog {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }
}


/* =============================================================
   ↑ 以上與設計稿 demo（customize-filter-0831.html）逐字元相同。
     設計端更新時上半段可以整段覆蓋，但**以下這一段一定要保留**。
   ─────────────────────────────────────────────────────────────
   2026 專案專屬樣式（設計稿 demo 沒有的功能）
   demo 只做了 Step 1 的靜態畫面，下列元素都是 2026 才有的：
   多步驟切換、搜尋模式／無結果、載入中、驗證訊息、隱私權同意、
   Preferences Applied toast、Coachmark 飛行圖示。
   2026-09-04：這段曾因為把 demo 的 CSS 整支覆蓋過來而遺失，
   造成 Step 2 與備用 Footer 一起顯示、toast 常駐畫面上。
============================================================= */

/* ---------- 多步驟切換（Step 1 選 Topics／Step 2 隱私權同意） ---------- */
/* JS 只切換 .is-active（customize-filter.js:680-683），顯示與否完全靠這裡。
   沒有這兩條規則，兩個 step 會同時出現在 modal 裡。 */
.filter-step {
    display: none;
}

.filter-step.is-active {
    /* .ui-modal__body 是 flex column + overflow:hidden，這層夾在 body 與 .filter-grid 之間，
       必須一起是 flex 且 min-height:0，否則 .filter-grid{flex:1} 撐不開、左右欄各自捲動會失效 */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Step 2 內容較長，讓它自己捲動而不是把 modal 撐高 */
.filter-step[data-step="2"].is-active {
    overflow-y: auto;
}

/* Footer 三組（首次 Step1／首次 Step2／回訪）同時存在，只顯示 .is-active 那一組。
   用 :not(.is-active) 而不是「.filter-step-footer{display:none} + 再覆寫」，
   是為了讓 .ui-btn-group 自己的 display 在 active 狀態下仍然生效。 */
.filter-step-footer:not(.is-active) {
    display: none;
}

/* ---------- 搜尋模式：item 自動左右排列 ---------- */
/* 平常兩個 .ui-accordion 各佔一欄；搜尋時多數 item 被隱藏，
   維持原本分欄會讓其中一欄空掉。改成 display:contents，
   讓 .ui-accordion__item 直接成為 grid item，依序左右填滿。 */
.filter-accordion-grid.search-mode > .ui-accordion {
    display: contents;
}

/* ---------- 載入中 ---------- */
.filter-loading {
    grid-column: 1 / -1; /* 跨滿兩欄，不要只佔左欄一格 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-inset-md);
    color: var(--color-text-muted);
}

/* ---------- 搜尋無結果 ---------- */
.filter-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-stack-2xs);
    padding: var(--space-inset-md);
}

.filter-no-results__icon {
    font-size: 32px;
    color: var(--color-text-muted);
}

.filter-no-results__title {
    margin: 0;
    font-weight: var(--font-weight-medium);
}

.filter-no-results__desc {
    margin: 0;
    color: var(--color-text-muted);
}

/* ---------- Sidebar 驗證訊息（至少選一項） ---------- */
.filter-focus__error {
    margin: 0;
    color: var(--color-danger, #d32f2f);
}

/* ---------- Step 2：隱私權同意 ---------- */
.filter-privacy {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-xs);
    padding: var(--space-inset-xs) 0;
}

    .filter-privacy > p {
        margin: 0;
    }

.filter-privacy__required {
    margin-left: 2px;
    color: var(--color-danger, #d32f2f);
}

.filter-privacy__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inline-md);
}

.filter-privacy__item + .filter-privacy__item {
    margin-top: var(--space-stack-2xs);
}

/* 「全體同意」底下的子項目縮排，視覺上表示從屬關係 */
.filter-privacy__group {
    padding-left: var(--space-inset-xs);
    border-left: 2px solid var(--color-border);
}

.filter-privacy__table {
    overflow-x: auto; /* 窄螢幕讓表格自己橫向捲，不要撐破 modal */
}

.filter-privacy__badge {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
}

.filter-privacy__badge--required {
    background: var(--bg-brand-primary);
    color: #ffffff;
}

.filter-privacy__badge--optional {
    background: var(--color-grey-200);
    color: var(--color-text-primary);
}

/* ---------- 步驟四：Preferences Applied Toast ---------- */
/* z-index 要高於 .coachmark-overlay(1200) 與 .usermenu-customize.coachmark-active(1300)，
   否則套用偏好後的成功提示會被白色遮罩蓋住。 */
.preferences-toast {
    position: fixed;
    bottom: 40px;
    left: 40px;
    z-index: 1400;
    background-color: var(--bg-surface);
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-inline-md);
    padding: var(--space-inset-md);
    width: 440px;
    box-sizing: border-box;
    border-radius: 15px;
    /* 預設隱藏。JS 只切 .is-visible（customize-filter.js:1091-1094），
       用 opacity + visibility 而不是 display，淡入淡出才能 transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

    .preferences-toast.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

.preferences-toast__icon {
    flex-shrink: 0;
    font-size: 30px;
    line-height: 1.2;
    color: var(--color-success, #2e7d32);
}

.preferences-toast__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
}

.preferences-toast__title {
    font-weight: var(--font-weight-medium);
}

.preferences-toast__desc {
    color: var(--color-text-muted);
}

@media (max-width: 440px) {
    .preferences-toast {
        width: 100%;
        bottom: 0;
        right: 0;
        left: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
}

/* ---------- Coachmark 階段一：飛行圖示 ---------- */
/* left/top/transform/opacity 全部由 JS 逐格設定（customize-filter.js:910-941），
   這裡只負責定位脈絡、層級與初始隱藏狀態。
   z-index 介於遮罩(1200)與 Customize View 按鈕(1300)之上，圖示才會飛在最上層。 */
.coachmark-fly-icon {
    position: fixed;
    z-index: 1350;
    font-size: 32px;
    line-height: 1;
    color: var(--bg-brand-primary);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    will-change: transform, opacity;
}