/* slider 家族：组合布局与橱窗节奏统一 */

/* ── 对照页舞台：横轨铺满；纵轨居中等高；舞台吃满卡片剩余高度 ── */
.wa-fam-section[data-family="slider"] .wa-fam-card__stage {
  flex: 1 1 auto;
  width: 100%;
  min-height: 72px;
  justify-content: stretch;
  align-items: center;
  padding: 4px 0;
  box-sizing: border-box;
}

.wa-fam-section[data-family="slider"] .wa-fam-card__stage > .wa-slider:not(.arco-slider-vertical),
.wa-fam-section[data-family="slider"] .wa-fam-card__stage > [class^="wa-slider-"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.wa-fam-section[data-family="slider"] .wa-fam-card[data-slug="slider-vertical"] .wa-fam-card__stage,
.wa-fam-section[data-family="slider"] .wa-fam-card[data-slug="slider-vertical-range"] .wa-fam-card__stage {
  min-height: 196px;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.wa-fam-section[data-family="slider"] .wa-fam-card[data-slug="slider-vertical"] .wa-fam-card__stage > .wa-slider,
.wa-fam-section[data-family="slider"] .wa-fam-card[data-slug="slider-vertical-range"] .wa-fam-card__stage > .wa-slider {
  width: auto;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.wa-fam-section[data-family="slider"] .wa-fam-card[data-slug="slider-equalizer"] .wa-fam-card__stage {
  min-height: 196px;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.wa-fam-section[data-family="slider"] .wa-fam-card[data-slug="slider-input"] .wa-fam-card__stage {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

.wa-fam-section[data-family="slider"] .wa-fam-card[data-slug="slider-price"] .wa-fam-card__stage {
  align-items: center;
}

body.wa-preview-embed .wa-preview-stage[data-slug^="slider-"] .wa-embed__stage {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

body.wa-preview-embed .wa-preview-stage[data-slug="slider-vertical"] .wa-embed__stage,
body.wa-preview-embed .wa-preview-stage[data-slug="slider-vertical-range"] .wa-embed__stage,
body.wa-preview-embed .wa-preview-stage[data-slug="slider-equalizer"] .wa-embed__stage {
  min-height: 196px;
  justify-content: center;
  align-items: center;
}

body.wa-preview-embed .wa-preview-stage[data-slug="slider-vertical"] .wa-embed__stage > .wa-slider,
body.wa-preview-embed .wa-preview-stage[data-slug="slider-vertical-range"] .wa-embed__stage > .wa-slider {
  width: auto;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

body.wa-preview-embed .wa-preview-stage[data-slug="slider-input"] .wa-embed__stage {
  align-items: center;
  justify-content: center;
}

/* ── 共享壳：行内夹持 / 上方说明 ── */
.wa-slider-labels,
.wa-slider-output,
.wa-slider-volume,
.wa-slider-stepper,
.wa-slider-mood,
.wa-slider-price,
.wa-slider-ticks {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* 刻度点：轨下主/次刻度 + 偶数标签（对齐截图 / shadcn ticks） */
.wa-slider-ticks {
  --wa-slider-thumb-w: 24px;
}

.wa-slider-scale {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  /* 半拇指内缩：0/12 对准拇指中心（外缘贴轨端） */
  padding: 8px calc(var(--wa-slider-thumb-w) / 2) 0;
}

.wa-slider-scale__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 0;
}

.wa-slider-scale__tick {
  display: block;
  width: 1px;
  height: 4px;
  background: var(--color-fill-3, #e5e6eb);
}

.wa-slider-scale__tick--major {
  height: 6px;
  background: var(--color-text-4, #c9cdd4);
}

.wa-slider-scale__label {
  margin-top: 4px;
  color: var(--color-text-3, #86909c);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  white-space: nowrap;
}

.wa-fam-section[data-family="slider"] .wa-fam-card[data-slug="slider-ticks"] .wa-fam-card__stage {
  min-height: 88px;
  align-items: flex-start;
  padding-top: 10px;
}

body.wa-preview-embed .wa-preview-stage[data-slug="slider-ticks"] .wa-embed__stage {
  min-height: 88px;
  align-items: flex-start;
}

.wa-slider-caption {
  margin: 0 0 10px;
  color: var(--color-text-1, #1d2129);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}

.wa-slider-caption--between {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wa-slider-caption__muted {
  color: var(--color-text-3, #86909c);
  font-size: 12px;
  line-height: 18px;
}

.wa-slider-ends {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--color-text-3, #86909c);
  font-size: 12px;
  line-height: 18px;
}

.wa-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.wa-slider-row .wa-slider {
  flex: 1 1 auto;
  min-width: 0;
}

.wa-slider-side {
  flex: 0 0 auto;
  color: var(--color-text-3, #86909c);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.wa-slider-side--value {
  min-width: 2.25em;
  color: var(--color-text-1, #1d2129);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: right;
}

.wa-slider-side--icon {
  width: 16px;
  font-size: 14px;
  text-align: center;
}

/* 兼容旧 class（成员 HTML / prompt §5） */
.wa-slider-labels__ends {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--color-text-3, #86909c);
  font-size: 12px;
  line-height: 18px;
}

.wa-slider-output,
.wa-slider-volume,
.wa-slider-stepper__row,
.wa-slider-mood__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.wa-slider-output .wa-slider,
.wa-slider-volume .wa-slider,
.wa-slider-stepper__row .wa-slider,
.wa-slider-mood__row .wa-slider {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.wa-slider-output__value {
  flex: 0 0 auto;
  min-width: 2.25em;
  color: var(--color-text-1, #1d2129);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: right;
}

.wa-slider-volume__icon {
  flex: 0 0 auto;
  width: 16px;
  color: var(--color-text-3, #86909c);
  font-size: 14px;
  text-align: center;
}

.wa-slider-stepper__label,
.wa-slider-price__label {
  margin: 0 0 10px;
  color: var(--color-text-1, #1d2129);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
}

.wa-slider-price__label {
  text-align: center;
}

.wa-slider-stepper__label {
  text-align: left;
}

.wa-slider-stepper__row .arco-btn-shape-circle.arco-btn-size-mini {
  width: 24px;
  height: 24px;
  padding: 0;
  flex: 0 0 auto;
  color: var(--color-text-3, #86909c);
}

.wa-slider-stepper__row .arco-btn-shape-circle.arco-btn-size-mini .pro-fa-icon,
.wa-slider-stepper__row .arco-btn-shape-circle.arco-btn-size-mini [class*="fa-"] {
  font-size: 11px;
  /* Light(300) 偏细；步进号用 Regular 更清晰 */
  font-weight: 400 !important;
}

.wa-slider-stepper__row .arco-btn-shape-circle.arco-btn-size-mini:hover {
  color: var(--color-text-2, #4e5969);
}

.wa-slider-mood__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--color-text-1, #1d2129);
  font-size: 13px;
  line-height: 20px;
}

.wa-slider-mood__live {
  color: var(--color-text-3, #86909c);
  font-size: 12px;
  line-height: 18px;
}

.wa-slider-mood__end {
  flex: 0 0 auto;
  color: var(--color-text-3, #86909c);
  font-size: 12px;
  line-height: 18px;
}

/* ── 纵向 / 均衡器 ── */
.wa-slider.wa-slider--vertical.arco-slider {
  width: auto;
  height: 160px;
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.wa-slider-eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  width: 100%;
  padding: 0;
}

.wa-slider-eq__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wa-slider-eq__band .wa-slider.wa-slider--vertical.arco-slider {
  height: 140px;
  flex: 0 0 auto;
  overflow: visible;
}

.wa-slider-eq__label {
  flex: 0 0 auto;
  color: var(--color-text-3, #86909c);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}
