/* pixel_facetslider - feature range slider in faceted search filters (task 0013-D).
   Visual match with the theme price slider (noUiSlider: 4px track, green handles). */
.pixel-facetslider {
  --pixel-facetslider-color: var(--elnar-green, #2fb5d2);
  --pixel-facetslider-track: #e5e5e5;
  --pixel-facetslider-thumb: 16px;
}

/* Space is reserved before the script runs, so the filter column does not jump. */
.pixel-facetslider:not(.is-ready) .pixel-facetslider__body {
  visibility: hidden;
}

.pixel-facetslider.is-fallback .pixel-facetslider__body {
  display: none;
}

.pixel-facetslider__range {
  position: relative;
  height: 28px;
  margin: 0 calc(var(--pixel-facetslider-thumb) / 2);
}

.pixel-facetslider__track {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--pixel-facetslider-track);
  transform: translateY(-50%);
}

.pixel-facetslider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: var(--pixel-facetslider-color);
}

/* Two native range inputs stacked on one track: only the thumbs take pointer/touch events. */
.pixel-facetslider__input {
  position: absolute;
  top: 0;
  left: calc(var(--pixel-facetslider-thumb) / -2);
  z-index: 2;
  width: calc(100% + var(--pixel-facetslider-thumb));
  height: 28px;
  margin: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
}

.pixel-facetslider.is-from-on-top .js-pixel-facetslider-from {
  z-index: 3;
}

.pixel-facetslider__input:focus {
  outline: none;
}

.pixel-facetslider__input::-webkit-slider-runnable-track {
  height: 28px;
  background: none;
  border: 0;
}

.pixel-facetslider__input::-moz-range-track {
  height: 28px;
  background: none;
  border: 0;
}

.pixel-facetslider__input::-webkit-slider-thumb {
  width: var(--pixel-facetslider-thumb);
  height: var(--pixel-facetslider-thumb);
  margin-top: calc((28px - var(--pixel-facetslider-thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--pixel-facetslider-color);
  cursor: grab;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.pixel-facetslider__input::-moz-range-thumb {
  width: var(--pixel-facetslider-thumb);
  height: var(--pixel-facetslider-thumb);
  border: 0;
  border-radius: 50%;
  background: var(--pixel-facetslider-color);
  cursor: grab;
  pointer-events: auto;
}

/* Keyboard focus: white gap + ring in the slider colour, visible on any background. */
.pixel-facetslider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pixel-facetslider-color), 0 0 0 6px rgba(0, 0, 0, .15);
}

.pixel-facetslider__input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pixel-facetslider-color), 0 0 0 6px rgba(0, 0, 0, .15);
}

/* Larger hit area on touch screens. */
@media (pointer: coarse) {
  .pixel-facetslider {
    --pixel-facetslider-thumb: 20px;
  }
}

/* Read-only value boxes, same component as the price slider inputs. */
.pixel-facetslider__output,
.pixel-facetslider__output[readonly] {
  background-color: #fff;
  pointer-events: none;
}

.pixel-facetslider__values {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pixel-facetslider__value {
  padding: .25rem 0;
}

.pixel-facetslider__value input {
  margin-right: .5rem;
}