/* DTF Designer — homepage live price calculator.
 * Overlays a transparent native range input on the existing v3 slider track so
 * the rose fill + white knob (styled in dtf-home-v3.css) stay pixel-identical
 * while becoming fully draggable + keyboard-accessible. */

.dtfv3 .v3-slider-track { overflow: visible; touch-action: pan-y; }

/* visible parts are driven by JS; let pointer events fall through to the input */
.dtfv3 .v3-slider-fill,
.dtfv3 .v3-slider-knob { pointer-events: none; transition: width .04s linear, left .04s linear; }

.dtfv3 .v3-slider-input {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 30px;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: grab;
  z-index: 3;
}
.dtfv3 .v3-slider-input:active { cursor: grabbing; }
.dtfv3 .v3-slider-input:focus { outline: none; }

.dtfv3 .v3-slider-input::-webkit-slider-runnable-track { background: transparent; height: 30px; }
.dtfv3 .v3-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; border-radius: 50%; background: transparent; cursor: grab;
}
.dtfv3 .v3-slider-input::-moz-range-track { background: transparent; height: 30px; }
.dtfv3 .v3-slider-input::-moz-range-thumb { width: 30px; height: 30px; border: 0; background: transparent; cursor: grab; }

/* keyboard focus ring on the visible knob */
.dtfv3 .v3-slider-track:focus-within .v3-slider-knob {
  box-shadow: 0 4px 10px -2px rgba(31, 29, 26, .2), 0 0 0 4px var(--rose-light);
}

/* keep the proportional preview box snappy as it resizes */
.dtfv3 .dtf-price-calc .v3-print-box { transition: width .06s linear, height .06s linear; }