/* 自定义下拉、搜索框、升降钮这类输入控件。
   页面组件在 组件.css，配色和排版底座在 样式.css，字体和字号刻度在 字体.css。 */

/* ================= 自定义下拉 ================= */

/* 原生 select 留在 DOM 里当数据源和事件源，只是不显示（见 下拉.js） */
.原生选择 { display: none !important; }

.选器 { position: relative; }

.选器面 {
  display: flex; align-items: center; gap: 9px;
  min-width: 168px; padding: 6px 10px 6px 11px;
  font-family: var(--正文); text-align: left;
  color: var(--字); background: var(--墨浅);
  border: 1px solid var(--线); border-radius: 9px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.选器面:hover { border-color: var(--线亮); }
.选器.展开 .选器面 { border-color: var(--琥珀); background: var(--墨面); }

/* 图标压到弱色、细描边：它是给人认位置的，不是视觉重点 */
.选器图 { width: 17px; height: 17px; flex-shrink: 0; color: var(--字弱); }
.选器.展开 .选器图, .选器面:hover .选器图 { color: var(--琥珀字); }

.选器文 { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.选器标 {
  font-size: var(--号-微); line-height: 1.2;
  color: var(--字弱); letter-spacing: var(--标距);
}
.选器值 {
  font-size: var(--号-正); line-height: 1.35; font-weight: var(--重-次);
  color: var(--字); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.选器角 {
  width: 15px; height: 15px; flex-shrink: 0; color: var(--字弱);
  transition: transform .16s ease, color .15s ease;
}
.选器.展开 .选器角 { transform: rotate(180deg); color: var(--琥珀字); }

.选器板 {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%;
  max-height: 320px; overflow-y: auto; padding: 5px;
  background: var(--墨面); border: 1px solid var(--线亮); border-radius: 10px;
  box-shadow: var(--浮影);
}
.选项 {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 7px 9px 7px 10px;
  font-size: var(--号-正); font-family: var(--正文); font-weight: var(--重-常);
  color: var(--字次); background: transparent;
  border: 0; border-radius: 7px; cursor: pointer; text-align: left; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.选项:hover { color: var(--字); background: var(--墨浅); }
.选项.选中 { color: var(--琥珀字); font-weight: var(--重-次); }
.选项勾 { width: 15px; height: 15px; flex-shrink: 0; opacity: 0; }
.选项.选中 .选项勾 { opacity: 1; }

/* ================= 搜索框与升降钮 ================= */

#商品搜索 {
  min-width: 210px; padding: 9px 12px 9px 33px;
  font-size: var(--号-正); font-family: var(--正文);
  color: var(--字); background: var(--墨浅) no-repeat 11px center / 15px 15px;
  border: 1px solid var(--线); border-radius: 9px;
  /* 放大镜画在背景里：多一个 wrapper 只为放图标不值当。
     stroke 用固定灰是因为 data URI 里读不到 CSS 变量，这个灰在两套主题下都够看。 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7f99' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
}
#商品搜索:focus { outline: 0; border-color: var(--琥珀); }
#商品搜索::placeholder { color: var(--字弱); }

.升降钮 {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; font-size: var(--号-注); font-weight: var(--重-次);
  border-radius: 9px; letter-spacing: var(--标距);
}

/* 日期框跟下拉对齐：同样的高度、圆角和描边，一排看过去是一套东西 */
.筛选条 input[type=date] {
  padding: 9px 11px; font-size: var(--号-正); border-radius: 9px;
}
.筛选条 input[type=date]:focus { outline: 0; border-color: var(--琥珀); }
.快捷组, .分段 { border-radius: 9px; }
.快捷 { padding: 7px 14px; font-size: var(--号-正); }

@media (max-width: 720px) {
  .选器面 { min-width: 140px; }
}