/* ============================================================
   slider.css — Slider 0-10 (Q3)
   DS: amarelo solido, sem shimmer, tipografia pesada
   ============================================================ */

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

.slider-number{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(80px, 22vw, 120px);
  line-height: 1;
  color: var(--gold);
  letter-spacing: -1px;
}

.slider-scale-label{
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2.5px;
  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: 4px;
  background: transparent;
  cursor: pointer;
}

/* WebKit track */
input[type=range].primal-slider::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 0;
  background: linear-gradient(90deg,
    var(--gold) 0%,
    var(--gold) var(--fill, 50%),
    var(--bg-elev-2) var(--fill, 50%),
    var(--bg-elev-2) 100%);
}

/* Firefox track */
input[type=range].primal-slider::-moz-range-track{
  height: 4px;
  border-radius: 0;
  background: var(--bg-elev-2);
}
input[type=range].primal-slider::-moz-range-progress{
  height: 4px;
  border-radius: 0;
  background: var(--gold);
}

/* Thumb WebKit */
input[type=range].primal-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: var(--gold);
  border: 3px solid var(--bg-deep);
  margin-top: -9px;
  cursor: pointer;
  transition: transform .15s 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: 22px;
  height: 22px;
  border-radius: 0;
  background: var(--gold);
  border: 3px solid var(--bg-deep);
}

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