@charset "utf-8";

.courses-filter-section {
    border-bottom: 1px solid var(--color-border);
    padding-top: var(--space-xs);
    padding-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 4px solid;
    border-image: var(--color-brand-gradient) 1;
}

.ui-filter__bar {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    flex-wrap: wrap;
}

/* Search box */
.ui-filter-search {
    flex: 1;
    max-width: 450px;
    position: relative;
}

/* Filter buttons group */
.ui-filter-controls {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    flex-wrap: wrap;
}

/* Hide suggestion box before Vue mounts — v-cloak is removed once Vue takes over,
   at which point v-show becomes the sole controller of visibility. */
[v-cloak] .ui-suggestion,
.ui-suggestion[v-cloak] {
    display: none;
}

.ui-suggestion {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-element);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
}

.ui-suggestion__item {
    padding: var(--space-xxs) var(--space-xs);
    cursor: pointer;
    list-style: none;
}

    .ui-suggestion__item.active, .ui-suggestion__item:hover {
        background-color: var(--bg-surface-soft);
    }

/* ---------------------------------------------------------------
   3. Filter button
---------------------------------------------------------------- */
.ui-filter__trigger {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--space-xs) / 2);
    padding: 10px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-element);
    background: var(--bg-surface);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-default);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s;
}

.ui-filter__btn-icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.ui-filter__trigger[aria-expanded="true"] .ui-filter__btn-icon {
    transform: rotate(180deg);
}

.ui-link__icon {
    padding: var(--space-xxs);
    cursor: pointer;
    font-size: var(--font-size-base);
}

    .ui-link__icon i {
        margin-right: 3px;
        background-image: var(--color-brand-gradient);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

a.ui-link__icon:hover {
    text-decoration: none;
}

/* ---------------------------------------------------------------
   4. Filter dropdown panel
---------------------------------------------------------------- */
.ui-filter__group {
    position: relative;
}

.ui-filter__dropdown {
    position: absolute;
    top: calc(100% + calc(var(--space-xxs) / 2));
    left: 0;
    z-index: 500;
    background: var(--bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-element);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    width: max-content;
    min-width: 200px;
    padding: 15px;
}

.ui-filter__dropdown-search {
    margin-bottom: var(--space-xxs);
}

.ui-filter__dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}

/* Individual flat item */
.ui-filter__dropdown-item {
    display: flex;
    align-items: center;
    padding: 0 0 6px 0;
    border-radius: var(--radius-element);
    cursor: pointer;
    transition: background 0.15s;
}

/* Disabled item (0 results) */
.ui-filter__dropdown-item--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Count text inside labels */
.ui-filter__count {
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: var(--font-weight-regular);
}

/* ---------------------------------------------------------------
   5. Filter group (collapsible category)
---------------------------------------------------------------- */
.ui-filter__group-toggle {
    all: unset;
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: var(--space-xxs);
}

    .ui-filter__group-toggle > i {
        margin-left: auto;
    }

    .ui-filter__group-toggle i {
        background-image: var(--color-brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .ui-filter__group-toggle .ui-checkbox {
        pointer-events: auto;
    }

.ui-filter__group-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: var(--space-xs);
    margin-top: 6px;
}

    .ui-filter__group-items[hidden] {
        display: none;
    }

.ui-filter__group-item {
    padding: 0 0 6px 0;
    border-radius: var(--radius-element);
    cursor: pointer;
    transition: background 0.15s;
}

/* ---------------------------------------------------------------
   6. Active filters row
---------------------------------------------------------------- */
.ui-filter__selected {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    flex-wrap: wrap;
    padding: 0;
}

    .ui-filter__selected .ui-tag__category::after {
        content: ":";
        color: var(--color-text-muted);
    }

    .ui-filter__selected .ui-tag-group {
        flex: 1;
    }

/* "Clear All" button sizing */
.ui-filter__clear-all {
    flex-shrink: 0;
    padding: 6px var(--space-xs);
    font-size: 14px;
    white-space: nowrap;
}

/* Mobile-only elements (hidden on desktop) */
.ui-filter-btn-mb,
.ui-filter__mobile-header,
.ui-filter__mobile-footer {
    display: none;
}

/* ---------------------------------------------------------------
   RWD
---------------------------------------------------------------- */
@media (max-width: 1600px) {
    .ui-filter-search {
        flex: 1 1 25%;
    }
}

@media (max-width: 1024px) {
    .ui-filter__bar {
        flex-wrap: wrap;
    }

    .ui-filter-search {
        flex: 1 1 50%;
    }

    .courses-search {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .ui-filter-search {
        flex: 1 1 100%;
    }

    .ui-filter-controls {
        width: 100%;
    }

    .ui-filter__dropdown {
        max-width: 90vw;
    }
}

@media (max-width: 580px) {
    /* Show mobile filter trigger button */
    .ui-filter-btn-mb {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xxs);
        width: 100%;
        padding: 10px var(--space-xs);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-element);
        background: var(--bg-surface);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-default);
        cursor: pointer;
    }

    /* Chrome creates a stacking context for position:sticky regardless of z-index value.
       Switching to static removes both the sticky and the stacking context entirely.
       Mobile filter uses a fixed overlay so sticky is not needed here. */
    .courses-filter-section {
        position: static;
    }

    /* Hide the inline filter buttons row */
    .ui-filter-controls {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: 1100;
        background: var(--color-grey-100);
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        overflow-y: auto;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
        padding: 0;
    }

        .ui-filter-controls.is-open {
            display: flex;
        }

    /* Mobile panel header */
    .ui-filter__mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px var(--space-xs);
        border-bottom: 3px solid var(--color-brand-blue-900);
        position: sticky;
        top: 0;
        background: var(--color-white);
        z-index: 1;
        flex-shrink: 0;
    }

    .ui-filter__mobile-title {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
        color: var(--color-brand-blue-900);
    }

    .ui-filter__mobile-close {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 18px;
        color: var(--color-text-default);
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-element);
        background-image: var(--color-brand-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Each top-level filter group → accordion row */
    .ui-filter-controls > .ui-filter__group {
        position: static;
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }

        /* Trigger button → full-width row (no button outline) */
        .ui-filter-controls > .ui-filter__group > .ui-filter__trigger {
            width: 100%;
            border: none;
            border-radius: 0;
            padding: var(--space-xxs) var(--space-xs);
            background: transparent;
            justify-content: flex-start;
            font-weight: var(--font-weight-medium);
            color: var(--color-brand-blue-900);
        }

            .ui-filter-controls > .ui-filter__group > .ui-filter__trigger .ui-filter__btn-icon {
                margin-left: auto;
            }

        /* Dropdown panel → inline (not floating) */
        .ui-filter-controls > .ui-filter__group > .ui-filter__dropdown {
            position: static;
            width: 100%;
            border: none;
            border-top: 1px solid var(--color-border);
            border-radius: 0;
            box-shadow: none;
            background: var(--color-white);
            max-width: 100%;
            padding: var(--space-xs);
            box-sizing: border-box;
        }

            .ui-filter-controls > .ui-filter__group > .ui-filter__dropdown .ui-filter__dropdown-list {
                max-height: none;
            }

    /* Mobile panel footer */
    .ui-filter__mobile-footer {
        display: flex;
        gap: var(--space-xs);
        padding: var(--space-xs) var(--space-sm);
        border-top: 1px solid var(--color-border);
        position: sticky;
        bottom: 0;
        background: var(--bg-surface);
        flex-shrink: 0;
        margin-top: auto;
    }

    .ui-filter__mobile-clear-all {
        flex: 1;
        padding: 10px;
        border: 2px solid transparent;
        border-radius: var(--radius-pill);
        background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--color-brand-gradient) border-box;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        color: var(--color-brand-blue-600);
        cursor: pointer;
    }

    .ui-filter__mobile-apply {
        flex: 1;
        padding: 10px;
        border: 2px solid transparent;
        border-radius: var(--radius-pill);
        background: linear-gradient(transparent, transparent) padding-box, var(--color-brand-gradient) border-box;
        color: var(--color-white);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
        cursor: pointer;
    }

    /* Backdrop overlay */
    .ui-mobile-filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1090;
    }

        .ui-mobile-filter-overlay[hidden] {
            display: none;
        }
}

/* ---------------------------------------------------------------
   Filter bar ≤580px override
   搜尋列 + 篩選連結 同列顯示，篩選鈕改為 icon+文字連結樣式
---------------------------------------------------------------- */
@media (max-width: 580px) {
    /* 同列不換行 */
    .ui-filter__bar {
        flex-wrap: nowrap;
        align-items: center;
    }

        /* 搜尋欄填滿剩餘空間，取消最大寬度限制 */
        .ui-filter__bar .courses-search {
            flex: 1;
            min-width: 0;
            max-width: none;
        }

        /* 篩選鈕：覆寫全寬 block 樣式，改為 inline icon+文字連結 */
        .ui-filter__bar .ui-filter-btn-mb {
            width: auto;
            flex-shrink: 0;
            padding: calc(var(--space-xxs) / 2) calc(var(--space-xxs) / 2);
            border: none;
            background: transparent;
            border-radius: 0;
            color: var(--color-brand-blue-600);
            font-weight: var(--font-weight-medium);
            white-space: nowrap;
            justify-content: flex-end;
        }

            /* Icon 使用品牌漸層色 */
            .ui-filter__bar .ui-filter-btn-mb i {
                background-image: var(--color-brand-gradient);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
}