@charset "utf-8";
.ui-filter.is-sticky {
	opacity: 1;
  padding-top: var(--space-inset-md); 
  padding-bottom: var(--space-inset-md);
  background-color: var(--bg-surface);
}
.ui-filter__bar {
  display: flex;
  align-items: center;
  gap: var(--space-inline-sm);
  flex-wrap: wrap;
}

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

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

/* ---------------------------------------------------------------
   3. Filter button
---------------------------------------------------------------- */
.ui-filter__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-sm);
  padding: var(--space-inset-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;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}

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

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

.ui-link__icon {
  padding: var(--space-inset-xs);
  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% + var(--space-inset-2xs));
  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);
  box-sizing: border-box;
  width: max-content;
  min-width: 250px;
  padding:var(--space-inset-3xs);
}
  @media (max-width: 1600px) {
    .ui-filter__dropdown {
      min-width: 220px;
    }
  }

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

.ui-filter__dropdown-search .ui-input {
  height: 46px;
}

.ui-filter__dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ui-filter__dropdown-list[hidden] {
  display: none;
}
.ui-filter__dropdown--single .ui-filter__dropdown-list {
	gap:0;
}

/* 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;
}

/* ---------------------------------------------------------------
   4b. Single-select dropdown variant
   單選下拉：無 checkbox、點選即選取；已選項整列底色 highlight
---------------------------------------------------------------- */
.ui-filter__dropdown--single {
  
}

.ui-filter__option {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-inline-xs);
  width: 100%;
  padding: var(--space-inset-2xs) var(--space-inset-2xs);
  border-radius: var(--radius-element);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text-default);
  cursor: pointer;
  transition: background 0.15s;
}

.ui-filter__option:hover,
.ui-filter__option:focus-visible {
  background: var(--bg-surface-soft);
}
a.ui-filter__option:hover {
  text-decoration: none;
}
/* 已選：整列底色 highlight */
.ui-filter__option.is-active {
  background: var(--color-brand-blue-100);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-blue-900);
}

.ui-filter__option[hidden] {
  display: none;
}
.ui-filter__dropdown .ui-input-group__prepend + .ui-input {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right: 1px solid var(--color-border);
}
/* ---------------------------------------------------------------
   5. Filter group (collapsible category)
---------------------------------------------------------------- */
.ui-filter__group-toggle {
  all: unset;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: var(--space-inline-sm);
}

.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-inset-md);
  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-inline-sm);
  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: var(--space-inset-2xs) 0 var(--space-inset-2xs) var(--space-inset-md);
  font-size: var(--font-size-base);
  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;
  }

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

@media (max-width: 580px) {
  .ui-filter.is-sticky {
        padding-top: var(--space-inset-sm);
        padding-bottom: var(--space-inset-sm);
  }

  /* 下拉選單沿用桌機樣式（按鈕外觀、浮動面板都不變），
     只是版面改成每個篩選項目各自一行，不再是全螢幕蓋板 */
  .ui-filter-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Group 滿版寬度，讓浮動面板（position:absolute 以 group 為錨點）也能滿版展開 */
  .ui-filter-controls > .ui-filter__group {
    width: 100%;
  }

  .ui-filter__dropdown {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Clear All 尚未出現時不要用 visibility:hidden 預留版位高度，
     改成 display:none 直接不佔位；出現時才佔一行 */
  .ui-filter__clear-all {
    display: none;
  }

  .ui-filter__clear-all.is-visible {
    display: inline;
  }
}
/* ---------------------------------------------------------------
   Single-select Filter Dropdown（Resources 頁面 .ui-filter__bar 單選版）
   沿用 component-filter.css 既有的 .ui-filter__dropdown--single /
   .ui-filter__option / .ui-filter__clear-all，這裡只補上：
   浮動 label、Product 大類/項目雙欄瀏覽、搜尋攤平結果的父類別標示
---------------------------------------------------------------- */

/* 選取狀態不要用 font-weight 變粗來標示，粗體字寬度比細體寬，
   會讓 .ui-filter__dropdown（width: max-content）選了項目後跟著跳寬度；
   選取用底色+文字顏色標示就足夠清楚了，這裡蓋掉上面 4b 區塊原本
   .ui-filter__option.is-active 的 font-weight */
.ui-filter-controls .ui-filter__option.is-active {
  font-weight: var(--font-weight-regular);
}

/* Trigger 文字置左（button 預設是 text-align:center，flex:1 撐開後文字會被置中） */
.ui-filter__trigger {
  text-align: left;
}

/* Clear All 一開始就保留版位寬度，不要等出現才擠壓其他欄位；
   用 visibility 而非 hidden/display，寬度會一直存在 */
.ui-filter__clear-all {
  visibility: hidden;
  pointer-events: none;
}

.ui-filter__clear-all.is-visible {
  visibility: visible;
  pointer-events: auto;
}

/* 桌機：右側四個 facet 欄位扣除 Clear All 寬度後均分；
   每個 trigger 寬度固定為該欄寬，不隨選取文字長短改變，過長用...截斷 */
@media (min-width: 581px) {
  .ui-filter-controls {
    flex: 1 1 0%;
    min-width: 0;
  }

  .ui-filter-controls > .ui-filter__group {
    width: 25%;
    min-width: 0;
  }

  .ui-filter-controls > .ui-filter__group > .ui-filter__trigger {
    width: 100%;
    min-width: 0;
  }

  .ui-filter-controls > .ui-filter__group > .ui-filter__trigger .ui-filter__btn-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-filter-controls > .ui-filter__group > .ui-filter__trigger .ui-filter__btn-icon {
    flex-shrink: 0;
  }
}

.ui-filter__label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  padding: 0 5px;
  background: transparent;
  font-size: var(--font-size-base);
  color: var(--color-text-default);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.15s ease, transform 0.15s ease, top 0.15s ease, font-size 0.15s ease;
}

/* 只有真的選了值，label 才浮到邊框上緣；單純點開下拉不會觸發 */
.ui-filter__group.has-value .ui-filter__label {
  top: -9px;
  transform: translateY(0);
  padding: 0 4px;
  background: var(--bg-surface);
  font-size: 14px;
  color: var(--color-text-muted);
  opacity: 1;
}

.ui-filter__dropdown--wide {
  width: min(620px, calc(100vw - 60px));
  min-width: 480px;
}

.ui-filter__dropdown-list--reset {
  max-height: none;
  overflow: visible;
  margin-bottom: var(--space-inset-xs);
  padding-bottom: var(--space-inset-xs);
  border-bottom: 1px solid var(--color-border);
}

/* Solution/Others/Type（非 wide 版）的「All」reset 選項跟清單裡其他
   選項擠在同一個 .ui-filter__dropdown-list，用分隔線隔開，
   視覺上跟 Product（wide 版，用獨立的 .ui-filter__dropdown-list--reset
   容器）一致 */
.ui-filter__dropdown--single:not(.ui-filter__dropdown--wide) .ui-filter__option[data-reset] {
}

/* Product：左（大類）右（該大類項目）雙欄瀏覽
   兩欄固定同一高度，不隨切換分類後項目數量多寡而撐高/縮矮外框，
   內容超過高度時各自欄位內部捲動 */
.ui-filter__dropdown-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-inset-xs);
  height: 320px;
}

.ui-filter__dropdown-col--categories {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: var(--space-inset-xs);
  border-right: 1px solid var(--color-border);
  height: 100%;
  overflow-y: auto;
}

.ui-filter__dropdown-col--items {
  height: 100%;
  overflow: hidden;
}

.ui-filter__dropdown-col--items .ui-filter__dropdown-list {
  height: 100%;
  max-height: none;
  overflow-y: auto;
}

/* 尚未點選任何大類時，右欄顯示的提示文字，對齊方式跟左邊
   .ui-filter__category / 選項按鈕的 padding 一致 */
.ui-filter__dropdown-placeholder {
  margin: 0;
  padding: var(--space-inset-xs) var(--space-inset-2xs);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.ui-filter__dropdown-placeholder[hidden] {
  display: none;
}

/* 大類按鈕：瀏覽狀態用，不是最終選取值，樣式比照 .ui-filter__option 但保留獨立 class */
.ui-filter__category {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-inline-xs);
  width: 100%;
  padding: var(--space-inset-2xs) var(--space-inset-2xs);
  border-radius: var(--radius-element);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text-default);
  cursor: pointer;
  transition: background 0.15s;
}

.ui-filter__category:hover,
.ui-filter__category:focus-visible {
  background: var(--bg-surface-soft);
  color: var(--color-text-primary);
}

.ui-filter__category.is-active {
  background: var(--color-brand-blue-100);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-blue-900);
}

.ui-filter__category i {
  font-size: 12px;
  flex-shrink: 0;
}

/* 搜尋攤平模式：項目前面的灰色小字父類別標示 */
.ui-filter__option-parent {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-right: 4px;
}

/* Mobile (≤580px)：下拉選單沿用桌機的浮動面板樣式（含浮動 label），
   寬度改成滿版（含 --wide 的 Product 面板）；
   Product 雙欄瀏覽在窄螢幕改成單欄手風琴 */
@media (max-width: 580px) {
  .ui-filter-controls .ui-filter__dropdown--wide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Product 分類/項目雙欄 → 手風琴：每個分類緊接自己的項目列表，
     只有目前選取的分類會展開項目（沿用既有 is-active / hidden 邏輯） */
  .ui-filter__dropdown-columns {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
  }

  .ui-filter__dropdown-col--categories,
  .ui-filter__dropdown-col--items {
    display: contents;
  }

  /* 手風琴模式不需要跟左欄對齊固定高度，各分類展開的項目清單
     維持原本各自 320px 上限、超過內部捲動 */
  .ui-filter__dropdown-col--items .ui-filter__dropdown-list {
    height: auto;
    max-height: 320px;
    overflow-y: auto;
  }

  /* 手風琴模式沒有獨立的右欄可以顯示「請先選分類」的提示，
     點開分類就直接接在該分類按鈕下面，所以這段提示文字不需要 */
  .ui-filter__dropdown-placeholder {
    display: none;
  }

  /* 分類與其對應項目清單的 order 改由 JS 依實際 data-category 配對指定
     （見 resources.html），不再用 nth-child 手動編號 —
     手動編號假設分類與項目清單在原始碼裡是一一對應、順序相同，
     分類數一多或不對齊就會配錯位置 */

  /* 桌機用 chevron-right（往右瀏覽），手機用旋轉變成 chevron-down／up（展開/收合） */
  .ui-filter__category i {
    transition: transform 0.2s;
    transform: rotate(90deg);
  }

  .ui-filter__category.is-active i {
    transform: rotate(-90deg);
  }

  .ui-filter__dropdown-col--items [data-category-items] .ui-filter__option {
    padding-left: var(--space-inset-xs) ;
  }
  .ui-filter__trigger {
    width: 100%;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------
   Search bar / filter controls width ratio (1200px ~ 960px)
   縮小 search bar 的成長權重，優先把空間讓給右側下拉選單，
   確保 960px 之前選單按鈕的文字不會被 ellipsis 截斷；
   960px 以下 search bar 佔滿整列，下拉選單整排換到下一列
---------------------------------------------------------------- */
@media (max-width: 1200px) {
  .ui-filter-search {
    flex: 0 1 260px;
    max-width: 260px;
  }

  .ui-filter-controls {
    flex: 1 1 0%;
  }
}

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

  /* 下拉選單換到下一行時，Clear All 跟下拉選單同一行，
     所以這裡不強制 width:100%，讓 Clear All 有空間留在同一列 */
  .ui-filter-controls {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
  }
}

/* 580px 以下改回每個篩選項目各自一行，Clear All 也讓出獨立一行，
   讓 .ui-filter-controls 滿版，下拉選單（以 group 為錨點）才能滿版展開 */
@media (max-width: 580px) {
  .ui-filter__bar {
    gap: var(--space-inline-md);
  }
  .ui-filter-controls {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    gap: var(--space-inline-md);
  }
  .ui-filter__clear-all.is-visible {
    padding: 0;
  }
  .ui-filter__dropdown-col--items .ui-filter__dropdown-list {
    background-color: var(--bg-surface-soft);
    border-radius: 5px;
    margin-top: var(--space-stack-2xs);
  }
}

/* ---------------------------------------------------------------
   581px ~ 768px：4 個篩選按鈕仍維持同一行（25% 均分），
   但 Product 是雙欄瀏覽面板，固定寬度（min-width:480px）在這個
   區間會超出自己只有 25% 寬的 group，導致面板整個跑出螢幕外。

   做法：面板仍錨定在自己的 .ui-filter__group（不動 position，
   避免影響同一個 group 內浮動 label 的定位基準），但用「相對於
   自身容器寬度的負百分比位移」把它左移、加寬，貼齊整個
   .ui-filter-controls（四個按鈕所在整排）的左右邊界展開。
   Product 是 4 欄中的第 2 欄、group 寬度固定 25%：
   left:-100%（即 -25% of controls）把左邊界移回整排最左側，
   width:400%（即 100% of controls）鋪滿整排寬度。
   面板寬度因此跟著這一排的實際寬度走，不會超出螢幕，
   雙欄瀏覽樣式也維持不變（不像 580px 以下改成手風琴）。
---------------------------------------------------------------- */
@media (min-width: 581px) and (max-width: 768px) {
  .ui-filter__dropdown--wide {
    left: -100%;
    width: 400%;
    min-width: 0;
    max-width: none;
  }
}