/* =============================================================================
   picker.css —— 站内下拉（替代原生 <select> 弹层），2026-10-24
   -----------------------------------------------------------------------------
   全部走 design token（--ink-2/--ink-4/--text/gold），所以深色与白色主题自动跟随，
   不需要在 theme-light.css 里重复一遍。
   定位：`.pk` 是 reltive 包裹，`.pk-panel` 绝对定位在按钮下方、宽 ≥ 按钮宽度。
   ========================================================================== */

.pk {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

/* 原生 select 不删，只压成透明覆盖在按钮上：
   键盘/读屏仍然操作它（这是无障碍的保底），指针事件我们自己接管。 */
.pk > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 🔴 `pointer-events: none`：让它只保留"可聚焦 + 可读屏"的能力，
     不再抢走鼠标/手指的点击 —— 否则原生弹层会被点出来（正是要消灭的那个窗口），
     而且按钮也点不动。键盘（Tab/方向键）不受 pointer-events 影响，仍然可用。 */
  pointer-events: none;
  z-index: 1;
}

.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ink-4);
  border-radius: 9px;
  background: var(--ink-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
}
/* 右侧的小箭头：用 CSS 画，避免再引一个图标文件 */
.pk-btn::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
  flex: none;
}
.pk-btn:hover { border-color: var(--brand-2); }
.pk-open .pk-btn { border-color: var(--brand-2); }

.pk-panel {
  /* 位置由 picker.js 按按钮矩形以 fixed 方式给出（见那里的注释：会被 overflow 裁掉） */
  z-index: 220;
  min-width: 100%;
  max-height: 46vh;
  overflow: auto;
  padding: 6px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 11px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: pk-in .14s ease-out;
}
@keyframes pk-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
/* 2026-10-25：与站点口径对齐 —— 只认 `html.mv-off`（用户在本站主动关动效），
   不再由系统 `prefers-reduced-motion` 单独决定。理由同 footer-drawer.css：
   店主那台 PC 的 Windows 关着动画效果，用 media 写会让他这一处"永远没有动画"，
   而站点其它地方（mv-force 默认开）却有。 */
html.mv-off .pk-panel { animation: none; }

.pk-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.pk-opt:hover { background: var(--ink-4); color: var(--text); }
.pk-opt.on {
  color: var(--gold-ink);           /* 选中项：品牌金，与全站「选中即金」一致 */
  font-weight: 700;
  background: rgba(255, 224, 0, .10);
}
/* 选中项右侧的点（原生 radio 的替身），让"当前是哪个"一眼看到 */
.pk-opt.on::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* 白色主题：面板要更实一点的白 + 更浅的阴影，否则浮在浅底上像脏块 */
html[data-theme="light"] .pk-panel {
  background: #FFFFFF;
  box-shadow: 0 16px 34px rgba(30, 26, 10, .16);
}
html[data-theme="light"] .pk-opt:hover { background: #F0F0EA; }
html[data-theme="light"] .pk-opt.on { background: rgba(255, 212, 0, .18); }