/*!
 * RiPro-V5 分类归档筛选栏（.filter-warp）UI 统一
 * 结构：分类 / 子分类 / 价格 / 排序 若干行，每行 = .filter-name + 若干 .filter-link
 *
 * 改动要点：
 *  1. 行标签固定成 92px 的列，所有药丸从同一条竖线开始；换行后的药丸也回到这条竖线
 *     （主题原样式换行后会跑到标签下面，第二行永远对不齐）
 *  2. 药丸统一 30px 高 / 999px 圆角：未选=纯文字、悬停=浅蓝底、去掉原来那根悬停小下划线
 *  3. 层级收敛：一级分类“选中”=实心蓝渐变（全页唯一强色块），子分类 / 价格 / 排序“选中”=浅蓝药丸
 *  4. 数量角标统一成等宽小胶囊：未选=浅蓝底灰字，选中时按行的层级换配色
 *     （一级分类行的实心蓝药丸 → 半透明白底白字；子分类/价格/排序的浅蓝药丸 → 浅蓝底蓝字，避免白字白底）
 *  5. 卡片描边 + 双层柔和投影与 .card 完全一致；暗色模式、移动端横滑（标签吸边）同步适配
 *
 * 想改回“所有行都用实心蓝”：删掉本文件中「次级筛选」那一段即可。
 */

/* ============ 卡片：与 .card 同一套描边 / 投影 ============ */
.filter-warp {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .04);
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .03), 0 1px 2px rgba(0, 0, 0, .04);
}

/* ============ 行：左侧留出固定标签列 ============ */
.filter-warp .filter-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 9px 0 9px 104px; /* 92px 标签列 + 12px 间距 */
  border-bottom: 1px solid rgba(26, 28, 35, .05);
  overflow: visible; /* 原样式 overflow:hidden 会把换行内容裁掉 */
}
.filter-warp .filter-item:last-child {
  border-bottom: 0;
}

/* ============ 行标签：绝对定位在固定列内，长名称省略号 ============ */
.filter-warp .filter-item .filter-name {
  position: absolute;
  top: 9px;
  left: 0;
  width: 92px;
  height: 30px;
  margin: 0;
  padding: 0;
  display: block; /* 用 block + line-height 居中，text-overflow 才会生效 */
  font-size: .8125rem;
  font-weight: 600;
  line-height: 30px;
  color: #9aa0ac;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-warp .filter-item .filter-name i {
  display: inline-block;
  width: 1.1em;
  font-size: .9375rem;
  text-align: center;
  vertical-align: middle;
  opacity: .85;
}

/* ============ 药丸 ============ */
.filter-warp .filter-item .filter-link {
  margin: 0;
}
.filter-warp .filter-item .filter-link > a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 30px;
  padding: 0 .75rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  color: #5d616e;
  background: transparent;
  border-radius: 999px;
  box-shadow: none;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.filter-warp .filter-item .filter-link > a:hover {
  background: rgba(59, 111, 245, .08);
  color: #3b6ff5;
}
/* 去掉悬停时的小下划线，状态交给底色表达 */
.filter-warp .filter-item .filter-link > a:hover::after {
  display: none;
}

/* 次级筛选（子分类 / 价格 / 排序）选中：浅蓝药丸 */
.filter-warp .filter-item .filter-link.active > a {
  color: #3b6ff5;
  background: rgba(59, 111, 245, .1);
  font-weight: 600;
}
/* 一级分类行选中：实心蓝渐变，作为页面上唯一的重色块 */
.filter-warp .filter-item:first-of-type .filter-link.active > a {
  color: #fff;
  background: linear-gradient(135deg, #4d7ff7 0%, #3b6ff5 55%, #3161dd 100%);
  box-shadow: 0 2px 8px rgba(59, 111, 245, .28);
}

/* ============ 数量角标（模板输出数量时生效） ============ */
.filter-warp .filter-item .filter-link > a .badge,
.filter-warp .filter-item .filter-link > a .count,
.filter-warp .filter-item .filter-link > a [class*="count"],
.filter-warp .filter-item .filter-link > a small,
.filter-warp .filter-item .filter-link > a sup {
  min-width: 1.6em;
  padding: 0 .375em;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.5;
  color: #8b97b3;
  background: rgba(59, 111, 245, .08);
  border-radius: 999px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums; /* 数字等宽，纵向对齐 */
}
/* 选中态角标：按行的层级分两套，避免浅蓝药丸上出现“白字白底” */
.filter-warp .filter-item .filter-link.active > a .badge,
.filter-warp .filter-item .filter-link.active > a .count,
.filter-warp .filter-item .filter-link.active > a [class*="count"],
.filter-warp .filter-item .filter-link.active > a small,
.filter-warp .filter-item .filter-link.active > a sup {
  color: #3b6ff5;
  background: rgba(59, 111, 245, .16);
}
/* 一级分类行是实心蓝底（含选中的「掌机游戏」），角标用半透明白 */
.filter-warp .filter-item:first-of-type .filter-link.active > a .badge,
.filter-warp .filter-item:first-of-type .filter-link.active > a .count,
.filter-warp .filter-item:first-of-type .filter-link.active > a [class*="count"],
.filter-warp .filter-item:first-of-type .filter-link.active > a small,
.filter-warp .filter-item:first-of-type .filter-link.active > a sup {
  color: #fff !important;
  background: rgba(255, 255, 255, .22) !important;
}

/* ============ 暗色模式 ============ */
[data-bs-theme=dark] .filter-warp {
  background: #21242b;
  border-color: rgba(255, 255, 255, .04);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .24);
}
[data-bs-theme=dark] .filter-warp .filter-item {
  border-bottom-color: rgba(255, 255, 255, .05);
}
[data-bs-theme=dark] .filter-warp .filter-item .filter-name {
  color: #7c828d;
}
[data-bs-theme=dark] .filter-warp .filter-item .filter-link > a {
  color: #b0b5bd;
}
[data-bs-theme=dark] .filter-warp .filter-item .filter-link > a:hover {
  background: rgba(59, 111, 245, .16);
  color: #89a9f9;
}
[data-bs-theme=dark] .filter-warp .filter-item .filter-link.active > a {
  color: #89a9f9;
  background: rgba(59, 111, 245, .2);
}
[data-bs-theme=dark] .filter-warp .filter-item:first-of-type .filter-link.active > a {
  color: #fff;
  background: linear-gradient(135deg, #4d7ff7 0%, #3b6ff5 55%, #3161dd 100%);
}
[data-bs-theme=dark] .filter-warp .filter-item .filter-link > a .badge,
[data-bs-theme=dark] .filter-warp .filter-item .filter-link > a .count,
[data-bs-theme=dark] .filter-warp .filter-item .filter-link > a [class*="count"],
[data-bs-theme=dark] .filter-warp .filter-item .filter-link > a small,
[data-bs-theme=dark] .filter-warp .filter-item .filter-link > a sup {
  color: #9aa0ac;
  background: rgba(255, 255, 255, .08);
}
/* 暗色下选中态角标同样分两套 */
[data-bs-theme=dark] .filter-warp .filter-item .filter-link.active > a .badge,
[data-bs-theme=dark] .filter-warp .filter-item .filter-link.active > a .count,
[data-bs-theme=dark] .filter-warp .filter-item .filter-link.active > a [class*="count"],
[data-bs-theme=dark] .filter-warp .filter-item .filter-link.active > a small,
[data-bs-theme=dark] .filter-warp .filter-item .filter-link.active > a sup {
  color: #89a9f9;
  background: rgba(137, 169, 249, .16);
}
[data-bs-theme=dark] .filter-warp .filter-item:first-of-type .filter-link.active > a .badge,
[data-bs-theme=dark] .filter-warp .filter-item:first-of-type .filter-link.active > a .count,
[data-bs-theme=dark] .filter-warp .filter-item:first-of-type .filter-link.active > a [class*="count"],
[data-bs-theme=dark] .filter-warp .filter-item:first-of-type .filter-link.active > a small,
[data-bs-theme=dark] .filter-warp .filter-item:first-of-type .filter-link.active > a sup {
  color: #fff;
  background: rgba(255, 255, 255, .22);
}

/* ============ 移动端：保持横向滑动，标签吸在左边 ============ */
@media (max-width: 767.98px) {
  .filter-warp .filter-item {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-warp .filter-item .filter-name {
    position: sticky;
    left: 0;
    top: auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 6.5em;
    height: 30px;
    margin: 0 2px 0 0;
    padding: 0 .5rem 0 0;
    background: #fff; /* 盖住滑过的药丸 */
    z-index: 2;
  }
  [data-bs-theme=dark] .filter-warp .filter-item .filter-name {
    background: #21242b;
  }
}