/* 設計稿 icon（public/images/icon，28×28 畫布、圖形約佔中間 16px）
   用法：<span class="ico ico--search" style="--s:16px"></span>，--s＝圖形視覺大小（預設 16px），顏色跟隨 currentColor
   另將舊的 Font Awesome／Bootstrap Icons 對應到設計稿 icon，JS 產生的也會一起換 */
.ico {
  --s: 16px;
  display: inline-block; flex-shrink: 0; vertical-align: middle;
  width: calc(var(--s) * 1.75); height: calc(var(--s) * 1.75); margin: calc(var(--s) * -0.375);
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico--account { --ico: url(/images/icon/icon-Account.svg); }
.ico--add { --ico: url(/images/icon/icon-Add.svg); }
.ico--arrow-back { --ico: url(/images/icon/icon-Arrow_back.svg); }
.ico--arrow-down { --ico: url(/images/icon/icon-Arrow_downward.svg); }
.ico--arrow-forward { --ico: url(/images/icon/icon-Arrow_forward.svg); }
.ico--arrow-up { --ico: url(/images/icon/icon-Arrow_upward.svg); }
.ico--camera { --ico: url(/images/icon/icon-Camera.svg); }
.ico--cancel { --ico: url(/images/icon/icon-Cancel.svg); }
.ico--check { --ico: url(/images/icon/icon-Check.svg); }
.ico--checkbox-on { --ico: url(/images/icon/icon-Checkbox-checked.svg); }
.ico--checkbox-off { --ico: url(/images/icon/icon-Checkbox-unchecked.svg); }
.ico--chevron-down { --ico: url(/images/icon/icon-Chevron_down.svg); }
.ico--chevron-left { --ico: url(/images/icon/icon-Chevron_left.svg); }
.ico--chevron-right { --ico: url(/images/icon/icon-Chevron_right.svg); }
.ico--chevron-up { --ico: url(/images/icon/icon-Chevron_up.svg); }
.ico--close { --ico: url(/images/icon/icon-Close.svg); }
.ico--date { --ico: url(/images/icon/icon-Date.svg); }
.ico--delete { --ico: url(/images/icon/icon-Delete.svg); }
.ico--edit { --ico: url(/images/icon/icon-Edit.svg); }
.ico--error { --ico: url(/images/icon/icon-Error.svg); }
.ico--fav { --ico: url(/images/icon/icon-Favourite.svg); }
.ico--fav-on { --ico: url(/images/icon/icon-Favourite-checkbox-active.svg); }
.ico--filter { --ico: url(/images/icon/icon-Filter.svg); }
.ico--grid { --ico: url(/images/icon/icon-Grid_view.svg); }
.ico--hide { --ico: url(/images/icon/icon-Hide.svg); }
.ico--home { --ico: url(/images/icon/icon-Home.svg); }
.ico--info { --ico: url(/images/icon/icon-Info.svg); }
.ico--list { --ico: url(/images/icon/icon-List_view.svg); }
.ico--location { --ico: url(/images/icon/icon-Location.svg); }
.ico--more { --ico: url(/images/icon/icon-More.svg); }
.ico--progress { --ico: url(/images/icon/icon-Progress_activity.svg); }
.ico--schedule { --ico: url(/images/icon/icon-Schedule.svg); }
.ico--search { --ico: url(/images/icon/icon-Search.svg); }
.ico--sort { --ico: url(/images/icon/icon-Sort.svg); }
.ico--sync { --ico: url(/images/icon/icon-Sync.svg); }
.ico--unhide { --ico: url(/images/icon/icon-Unhide.svg); }
.ico--waterfall { --ico: url(/images/icon/icon-Waterfall_view.svg); }
.ico--car { --ico: url(/images/icon/icon-car.svg); }
.ico--drag { --ico: url(/images/icon/icon-drag.svg); }
.ico--exhibition { --ico: url(/images/icon/icon-exhibition.svg); }
.ico--pin-gallery { --ico: url("/images/icon/icon-pin%20gallery.svg"); }
.ico--plan { --ico: url(/images/icon/icon-plan.svg); }
.ico--setting { --ico: url(/images/icon/icon-setting.svg); }
.ico--subway { --ico: url(/images/icon/icon-subway.svg); }
.ico--upload { --ico: url(/images/icon/icon-upload.svg); }
.ico--walk { --ico: url(/images/icon/icon-walk.svg); }
/* 收藏：實心用設計稿 active 版（保留原色），空心跟隨文字色 */
.ico--fav-on { background: none; -webkit-mask: none; mask: none; background-image: var(--ico); background-size: contain; background-repeat: no-repeat; background-position: center; }

/* ── 舊 icon 字型 → 設計稿 icon ── */
i.fa-search, i.bi-search { --ico: url(/images/icon/icon-Search.svg); }
i.fa-map-marker-alt, i.fa-map-pin, i.bi-geo-alt { --ico: url(/images/icon/icon-Location.svg); }
i.far.fa-heart { --ico: url(/images/icon/icon-Favourite.svg); }
i.fa-clock, i.bi-clock { --ico: url(/images/icon/icon-Schedule.svg); }
i.fa-calendar-alt, i.fa-calendar-plus { --ico: url(/images/icon/icon-Date.svg); }
i.bi-list-ul, i.fa-list, i.fa-list-ul { --ico: url(/images/icon/icon-List_view.svg); }
i.bi-grid-3x3-gap, i.fa-th-large { --ico: url(/images/icon/icon-Grid_view.svg); }
i.fa-th { --ico: url(/images/icon/icon-Waterfall_view.svg); }
i.bi-pencil-square, i.fa-pen { --ico: url(/images/icon/icon-Edit.svg); }
i.fa-trash-alt, i.bi-trash { --ico: url(/images/icon/icon-Delete.svg); }
i.fa-times { --ico: url(/images/icon/icon-Close.svg); }
i.fa-chevron-right, i.bi-chevron-right { --ico: url(/images/icon/icon-Chevron_right.svg); }
i.fa-chevron-left, i.bi-chevron-left { --ico: url(/images/icon/icon-Chevron_left.svg); }
i.fa-chevron-down, i.bi-chevron-down { --ico: url(/images/icon/icon-Chevron_down.svg); }
i.fa-camera, i.bi-camera { --ico: url(/images/icon/icon-Camera.svg); }
i.fa-grip-vertical { --ico: url(/images/icon/icon-drag.svg); }
i.fa-sliders-h, i.bi-sliders { --ico: url(/images/icon/icon-Filter.svg); }
i.fa-plus { --ico: url(/images/icon/icon-Add.svg); }
i.fa-car { --ico: url(/images/icon/icon-car.svg); }
i.fa-walking { --ico: url(/images/icon/icon-walk.svg); }
i.fa-bus { --ico: url(/images/icon/icon-subway.svg); }
i.fa-arrow-up-from-bracket { --ico: url(/images/icon/icon-upload.svg); }
i.fa-arrow-up { --ico: url(/images/icon/icon-Arrow_upward.svg); }
i.fa-arrow-left { --ico: url(/images/icon/icon-Arrow_back.svg); }
i.fa-check-circle, i.fa-check { --ico: url(/images/icon/icon-Check.svg); }
i.fa-info-circle { --ico: url(/images/icon/icon-Info.svg); }
i.fa-home, i.bi-house { --ico: url(/images/icon/icon-Home.svg); }
i.fa-user, i.bi-person { --ico: url(/images/icon/icon-Account.svg); }
i.fa-cog, i.bi-gear { --ico: url(/images/icon/icon-setting.svg); }
i.fa-eye { --ico: url(/images/icon/icon-Unhide.svg); }
i.fa-eye-slash { --ico: url(/images/icon/icon-Hide.svg); }
:is(i.fa-search, i.bi-search, i.fa-map-marker-alt, i.fa-map-pin, i.bi-geo-alt, i.far.fa-heart, i.fa-clock, i.bi-clock, i.fa-calendar-alt, i.fa-calendar-plus,
    i.bi-list-ul, i.fa-list, i.fa-list-ul, i.bi-grid-3x3-gap, i.fa-th-large, i.fa-th, i.bi-pencil-square, i.fa-pen, i.fa-trash-alt, i.bi-trash, i.fa-times,
    i.fa-chevron-right, i.bi-chevron-right, i.fa-chevron-left, i.bi-chevron-left, i.fa-chevron-down, i.bi-chevron-down, i.fa-camera, i.bi-camera,
    i.fa-grip-vertical, i.fa-sliders-h, i.bi-sliders, i.fa-plus, i.fa-car, i.fa-walking, i.fa-bus, i.fa-arrow-up-from-bracket, i.fa-arrow-up, i.fa-arrow-left,
    i.fa-check-circle, i.fa-check, i.fa-info-circle, i.fa-home, i.bi-house, i.fa-user, i.bi-person, i.fa-cog, i.bi-gear, i.fa-eye, i.fa-eye-slash) {
  display: inline-block; vertical-align: middle; width: 1.75em; height: 1.75em; margin: -0.375em;
  background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  font-size: inherit;
}
:is(i.fa-search, i.bi-search, i.fa-map-marker-alt, i.fa-map-pin, i.bi-geo-alt, i.far.fa-heart, i.fa-clock, i.bi-clock, i.fa-calendar-alt, i.fa-calendar-plus,
    i.bi-list-ul, i.fa-list, i.fa-list-ul, i.bi-grid-3x3-gap, i.fa-th-large, i.fa-th, i.bi-pencil-square, i.fa-pen, i.fa-trash-alt, i.bi-trash, i.fa-times,
    i.fa-chevron-right, i.bi-chevron-right, i.fa-chevron-left, i.bi-chevron-left, i.fa-chevron-down, i.bi-chevron-down, i.fa-camera, i.bi-camera,
    i.fa-grip-vertical, i.fa-sliders-h, i.bi-sliders, i.fa-plus, i.fa-car, i.fa-walking, i.fa-bus, i.fa-arrow-up-from-bracket, i.fa-arrow-up, i.fa-arrow-left,
    i.fa-check-circle, i.fa-check, i.fa-info-circle, i.fa-home, i.bi-house, i.fa-user, i.bi-person, i.fa-cog, i.bi-gear, i.fa-eye, i.fa-eye-slash)::before { content: none !important; }
/* 實心愛心（已收藏／已追蹤）：設計稿 active 版 */
i.fas.fa-heart { display: inline-block; vertical-align: middle; width: 1.75em; height: 1.75em; margin: -0.375em; background: url(/images/icon/icon-Favourite-checkbox-active.svg) center / contain no-repeat; color: transparent !important; }
i.fas.fa-heart::before { content: none !important; }

/* 已收藏／已追蹤：實心紫色愛心（設計稿 Favourite-checkbox-active） */
:is(.is-on, .is-active, .liked, [aria-pressed="true"]) > .ico--fav { --ico: url(/images/icon/icon-Favourite-checkbox-active.svg); color: #6537CF; }