/* ============================================================
 * 滚轮日期时间选择器（参考天府 Agent · 5 列：年/月/日/时/分）
 * ----------------------------------------------------------
 * 设计：
 * - 中间高亮一行（粗黑），上下各 2 行候选（灰）
 * - 触屏拖拽 + 鼠标滚轮 + 点击候选项跳转
 * - 极简东方风：浅米底 / 黑字 / 细边框
 * ============================================================ */

/* 夏令时提示 */
.wp-dst-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #FFF8E6;
  color: #8A6F1F;
  border: 1px solid #F0DFA8;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.wp-dst-tip svg { flex-shrink: 0; }

/* 快捷输入 */
.wp-quick {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}
.wp-quick-input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #E5E1D8;
  border-radius: 8px;
  background: #FAF8F2;
  font-size: 14px;
  color: #1a1a1a;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color .15s, background .15s;
}
.wp-quick-input::placeholder { color: #B5B0A3; }
.wp-quick-input:focus { border-color: #1a1a1a; background: #fff; }
.wp-quick-input.is-valid { border-color: #5A8C4F; background: #F2FAF0; }
.wp-quick-input.is-error { border-color: #C8473A; background: #FBF1EE; }

.wp-quick-apply {
  width: 40px;
  height: 40px;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.wp-quick-apply:hover { opacity: 0.85; }
.wp-quick-apply:active { transform: scale(0.96); }
.wp-quick-apply:disabled { opacity: 0.35; cursor: not-allowed; }

/* 不确定时辰开关 */
.wp-hour-unknown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: #555;
}
.wp-hour-unknown input { display: none; }
.wp-hour-unknown-track {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  background: #D8D3C7;
  border-radius: 999px;
  transition: background .2s;
}
.wp-hour-unknown-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: transform .2s;
}
.wp-hour-unknown input:checked ~ .wp-hour-unknown-track { background: #1a1a1a; }
.wp-hour-unknown input:checked ~ .wp-hour-unknown-track .wp-hour-unknown-thumb { transform: translateX(14px); }

/* 滚轮主体 */
.wheel-picker {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr;
  gap: 6px;
  height: 200px;
  padding: 0 6px;
  background: #FAF8F2;
  border: 1px solid #EAE5D9;
  border-radius: 12px;
  overflow: hidden;
}

/* 中间高亮带（位于父容器中间，视觉上置于内容之下） */
.wheel-picker::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 40px;
  margin-top: -20px;
  background: rgba(26,26,26,0.045);
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
}
/* 上下渐变遮罩（顶/底候选项淡出） */
.wheel-picker::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #FAF8F2 0%, rgba(250,248,242,0) 30%, rgba(250,248,242,0) 70%, #FAF8F2 100%);
  z-index: 2;
}

/* 单列 */
.wp-col {
  position: relative;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.wp-col-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;            /* 0 偏移时第一个 item 中心对齐中间高亮带 */
  margin-top: -20px;   /* item 一半高 */
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.wp-col-inner.is-dragging {
  transition: none;
}

/* 单个候选项 */
.wp-item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  color: #B5B0A3;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color .2s, font-size .2s, font-weight .2s;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* 选中项（中间一行） */
.wp-item.is-active {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 17px;
}
/* 选中相邻一行（次亮） */
.wp-item.is-near {
  color: #888;
}

/* 当列被禁用（如不确定时辰时禁用 时/分） */
.wp-col.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.wp-col.is-disabled .wp-item.is-active {
  text-decoration: line-through;
}

/* 可读回显 */
.wp-readout {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: #666;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

/* 中国/海外 胶囊切换 */
.region-toggle {
  display: inline-flex;
  background: #F0EBDF;
  border-radius: 999px;
  padding: 3px;
  gap: 0;
}
.region-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #666;
  padding: 6px 18px;
  font-size: 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.region-toggle-btn.is-active {
  background: #1a1a1a;
  color: #fff;
}

/* 移动端微调 */
@media (max-width: 480px) {
  .wheel-picker {
    grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr;
    height: 180px;
  }
  .wheel-picker::before { height: 36px; margin-top: -18px; }
  .wp-item { height: 36px; line-height: 36px; font-size: 14px; }
  .wp-item.is-active { font-size: 16px; }
  .wp-col-inner { margin-top: -18px; }
}

/* 深色模式（如果未来开） */
[data-theme="dark"] .wheel-picker {
  background: #1f1f1f;
  border-color: #333;
}
[data-theme="dark"] .wheel-picker::before { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .wheel-picker::after {
  background: linear-gradient(to bottom, #1f1f1f 0%, rgba(31,31,31,0) 30%, rgba(31,31,31,0) 70%, #1f1f1f 100%);
}
[data-theme="dark"] .wp-item { color: #555; }
[data-theme="dark"] .wp-item.is-active { color: #fff; }
[data-theme="dark"] .wp-item.is-near { color: #999; }
[data-theme="dark"] .wp-readout { color: #999; }
[data-theme="dark"] .wp-quick-input { background: #2a2a2a; border-color: #444; color: #f5f5f5; }
[data-theme="dark"] .wp-dst-tip { background: #3d2f0f; color: #f0c97a; border-color: #5a4a25; }
[data-theme="dark"] .region-toggle { background: #2a2a2a; }
[data-theme="dark"] .region-toggle-btn { color: #aaa; }
[data-theme="dark"] .region-toggle-btn.is-active { background: #f5f5f5; color: #1a1a1a; }

/* ============================================================
 * wxti page-header 内的命主胶囊微调
 * （避免胶囊占太宽撑破移动端 header）
 * ============================================================ */
.wxti-result-pill .pp-btn {
  padding: 5px 10px 5px 5px;
  background: rgba(0,0,0,0.04);
}
.wxti-result-pill .pp-avatar { width: 26px; height: 26px; font-size: 12px; }
.wxti-result-pill .pp-name { font-size: 12.5px; max-width: 90px; }
.wxti-result-pill .pp-birth { font-size: 10.5px; max-width: 110px; }
@media (max-width: 480px) {
  .wxti-result-pill .pp-name { max-width: 64px; }
  .wxti-result-pill .pp-birth { display: none; }
}

/* 性别区被聚焦时的轻微高亮（用于"滑停 1.2s 自动跳下一步"） */
#form-section-gender.is-just-focused {
  animation: wp-focus-flash 1.2s ease;
}
@keyframes wp-focus-flash {
  0%   { background: rgba(200,155,64,0); }
  20%  { background: rgba(200,155,64,0.10); }
  100% { background: rgba(200,155,64,0); }
}

/* 真太阳时修正提示（接在 readout 后面） */
.wp-readout-solar {
  display: inline-block;
  margin-left: 6px;
  color: #C89B40;
  font-weight: 600;
  letter-spacing: 1px;
}
.wp-readout-solar em {
  font-style: normal;
  color: #9CA3AF;
  font-weight: 400;
  font-size: 11px;
  margin-left: 2px;
}
[data-theme="dark"] .wp-readout-solar { color: #d4a957; }
[data-theme="dark"] .wp-readout-solar em { color: #6E6759; }

@media (max-width: 480px) {
  /* 移动端：真太阳时另起一行避免挤 */
  .wp-readout-solar { display: block; margin-left: 0; margin-top: 4px; font-size: 12px; }
}