/* ============================================================
   slider.css — Slider 0-10 (Q3)
   ============================================================ */

.slider-display{
  text-align: center;
  margin: 8px 0 28px;
}

.slider-number{
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(80px, 22vw, 120px);
  line-height: 1;
  background: var(--grad-foil);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(198,156,109,.4));
  animation: shimmer 5s linear infinite;
  letter-spacing: -3px;
}

.slider-scale-label{
  font-family: var(--font-h);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--warm);
  text-transform: uppercase;
  margin-top: 4px;
}

.slider-wrap{
  position: relative;
  padding: 8px 0;
  margin-bottom: 24px;
}

input[type=range].primal-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  cursor: pointer;
}

/* WebKit track */
input[type=range].primal-slider::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--gold) 0%,
    var(--gold) var(--fill, 50%),
    rgba(245,242,232,.12) var(--fill, 50%),
    rgba(245,242,232,.12) 100%);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

/* Firefox track */
input[type=range].primal-slider::-moz-range-track{
  height: 6px;
  border-radius: 4px;
  background: rgba(245,242,232,.12);
}
input[type=range].primal-slider::-moz-range-progress{
  height: 6px;
  border-radius: 4px;
  background: var(--gold);
}

/* Thumb WebKit */
input[type=range].primal-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad-gold);
  border: 2px solid var(--bg-deep);
  margin-top: -9px;
  box-shadow:
    0 0 0 4px rgba(198,156,109,.18),
    0 6px 14px rgba(0,0,0,.5);
  cursor: pointer;
  transition: transform .2s var(--ease);
}
input[type=range].primal-slider::-webkit-slider-thumb:hover{
  transform: scale(1.1);
}

/* Thumb Firefox */
input[type=range].primal-slider::-moz-range-thumb{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg-deep);
  box-shadow: 0 0 0 4px rgba(198,156,109,.18);
}

.slider-ends{
  display: flex;
  justify-content: space-between;
  font-family: var(--font-h);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--warm);
  margin-top: 14px;
}