/* Price slider CSS */
.price-facet {
  padding-bottom: 20px;
}

.price-facet .range-container {
  position: relative;
  height: 40px;
  margin: 1em 0;
  padding: 15px 0;
}

/* Track background - create a visual track for the sliders */
.price-facet .range-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  transform: translateY(-50%);
  z-index: 0;
}

/* Progress bar to show selected range */
.price-facet .range-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--progress-left, 0%);
  width: var(--progress-width, 100%);
  height: 6px;
  background: linear-gradient(90deg, #007bff, #0056b3);
  border-radius: 3px;
  transform: translateY(-50%);
  z-index: 1;
  transition: all 0.3s ease;
}
.price-facet .range-container input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 6px;
  background: transparent;
  pointer-events: all;
  z-index: 2;
  transform: translateY(-50%);
}

.price-facet .range-container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 3px solid #007bff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: grab;
  transition: all 0.2s ease;
  margin-top: -7px;
}

.price-facet .range-container input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}

.price-facet .range-container input[type=range]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.price-facet .range-container input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 3px solid #007bff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: grab;
  transition: all 0.2s ease;
}
/* Masquer les pistes natives */
.price-facet .range-container input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
  height: 6px;
  border: none;
}
.price-facet .range-container input[type=range]::-moz-range-track {
  background: transparent;
  height: 6px;
  border: none;
}

/* Curseur grab uniquement sur les thumbs */
.price-facet .range-container input[type=range]::-webkit-slider-thumb {
  cursor: grab;
}
.price-facet .range-container input[type=range]::-moz-range-thumb {
  cursor: grab;
}

/* Gestion z-index simple : hover/active seulement */
.price-facet .range-container input[type=range]:hover,
.price-facet .range-container input[type=range]:active {
  z-index: 5; /* slider survolé ou cliqué passe au-dessus */
}
/* Curseurs par défaut au même niveau */
.price-facet .range-container input[type=range] {
  z-index: 2;
}

/* Gérer z-index et curseur sur le thumb (pas seulement l’input) */
.price-facet .range-container input[type=range]::-webkit-slider-thumb:hover,
.price-facet .range-container input[type=range]::-webkit-slider-thumb:active,
.price-facet .range-container input[type=range]::-moz-range-thumb:hover,
.price-facet .range-container input[type=range]::-moz-range-thumb:active {
  z-index: 5; /* thumb survolé ou cliqué passe au-dessus */
  cursor: grabbing;
}
/* Retirer focus outline */
.price-facet .range-container input[type=range]:focus {
  outline: none;
}

/* Chaque slider occupe toute la largeur mais avec z-index dynamique */
.price-facet .range-container input#price-min {
  z-index: 2;
}
.price-facet .range-container input#price-max {
  z-index: 2;
}
/* Le slider actif passe devant */
.price-facet .range-container input:focus,
.price-facet .range-container input:active {
  z-index: 10 !important;
}