/* ==========================================================================
   公共下拉框 / Shared custom select
   --------------------------------------------------------------------------
   原生 <select> 展开后的列表由浏览器/系统绘制（蓝色高亮、默认滚动条），
   和站点风格差异很大，也无法用 CSS 控制。这里把 select[data-custom-select]
   增强成站点自己的下拉面板：

   - 触发器沿用所在容器的边框、圆角、高度，只负责文字与箭头；
   - 面板是白色圆角卡片，悬停/选中用品牌橙，滚动条一并统一；
   - 未加载 JS、或页面没有标记 data-custom-select 时保持原生外观（渐进增强）。

   用法：<div class="xxx" data-poa-select><select data-custom-select>…</select></div>
   ========================================================================== */

.poa-select { position: relative; }

/* 增强后容器不再需要原生箭头与为箭头预留的内边距 */
.poa-select.is-enhanced { background-image: none; }
.poa-select.is-enhanced::after { content: none; }

/* 原生 select 保留在 DOM 里（业务代码继续读写 value / 监听 change），
   但不再参与鼠标交互，避免点出系统面板 */
.poa-select.is-enhanced > select {
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.poa-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0 13px;
  border: 0;
  border-radius: inherit;
  color: #1f2329;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}

.poa-select-trigger:focus { outline: 0; }

.poa-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 未选择时用占位灰，和原来的 :has(option[value=""]:checked) 行为一致 */
.poa-select.is-placeholder .poa-select-label { color: #4e5f70; font-weight: 400; }

.poa-select-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #98a2ae;
  transition: transform .18s ease, color .18s ease;
}

.poa-select.is-open .poa-select-chevron { color: #f28c18; transform: rotate(180deg); }

/* ---------------------------------------------------------------- 下拉面板 */

.poa-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100%;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  max-height: 268px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(23, 43, 61, .16), 0 2px 8px rgba(23, 43, 61, .06);
  animation: poaSelectDrop .16s ease both;
  scrollbar-gutter: stable;
}

.poa-select-menu[hidden] { display: none; }
.poa-select-menu.is-up { top: auto; bottom: calc(100% + 6px); animation-name: poaSelectRise; }
.poa-select-menu.is-end { right: 0; left: auto; }

@keyframes poaSelectDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes poaSelectRise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.poa-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #172b3d;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.poa-select-option:hover,
.poa-select-option.is-active { color: #a25109; background: #fff4e5; }

.poa-select-option[aria-selected="true"] { color: #a25109; background: #fff4e5; font-weight: 700; }

/* 选中项右侧的对勾 */
.poa-select-option[aria-selected="true"]::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 6px;
  margin-bottom: 3px;
  border-bottom: 2px solid #f28c18;
  border-left: 2px solid #f28c18;
  transform: rotate(-45deg);
}

/* 首项是「未选择」占位项：代表「不筛选」，始终灰底灰字，不跟随选中态的橙色，
   避免看起来像已经套用了筛选条件 */
.poa-select-option.is-placeholder {
  margin-bottom: 5px;
  border-bottom: 1px dashed #e9edf2;
  border-radius: 8px;
  color: #8b95a1;
  font-weight: 400;
}

.poa-select-option.is-placeholder:hover,
.poa-select-option.is-placeholder.is-active,
.poa-select-option.is-placeholder[aria-selected="true"] {
  color: #5b6673;
  background: #f2f4f7;
  font-weight: 500;
}

.poa-select-option.is-placeholder::after { border-color: #a3adb8; }

/* ---------------------------------------------------------------- 滚动条 */

.poa-select-menu::-webkit-scrollbar { width: 8px; }
.poa-select-menu::-webkit-scrollbar-track { border-radius: 999px; background: #f7f8fa; }
.poa-select-menu::-webkit-scrollbar-thumb { border: 2px solid #f7f8fa; border-radius: 999px; background: #f0c08a; }
.poa-select-menu::-webkit-scrollbar-thumb:hover { background: #f28c18; }

@media (prefers-reduced-motion: reduce) {
  .poa-select-menu { animation: none; }
  .poa-select-chevron { transition: none; }
}

/* 小屏：面板最多铺满可视宽度，避免贴边溢出 */
@media (max-width: 620px) {
  .poa-select-menu { max-width: calc(100vw - 20px); max-height: 246px; }
}