/**
 * @file
 * Styling for the dynamic price slider.
 *
 * This is a trimmed-down, safe version of the old styling
 * that keeps the "black fantastic" look without affecting
 * the slider geometry or position (no custom top/left/right).
 */

/* Slider track: sleek & bold */
.bef-slider {
  background: #f3f3f3 !important;
  border-radius: 999px !important;
  height: 6px !important;
}

/* Progress / connection bar between handles */
.bef-slider .noUi-connect {
  background: linear-gradient(90deg, #000000, #444444) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset !important;
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

.bef-slider:hover .noUi-connect {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure the unselected track is still visible but subtle */
.bef-slider .noUi-base {
  background: #e3e3e3 !important;
}

/* Slider handles (no positioning changes, only look & feel) */
.bef-slider .noUi-handle {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
  cursor: grab !important;
  width: 26px !important;
  height: 26px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-width 0.18s ease;
}

.bef-slider .noUi-handle:hover {
  transform: scale(1.16);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.4) !important;
}

.bef-slider .noUi-handle:active {
  cursor: grabbing !important;
  transform: scale(1.08);
}

.bef-slider .noUi-handle:focus {
  outline: none;
  border-color: #000000 !important;
}

/* Remove the internal noUi "pip" so handle looks clean */
.bef-slider .noUi-handle::before,
.bef-slider .noUi-handle::after {
  display: none !important;
}

/* Tooltip styling (if BEF/noUi tooltips are enabled) */
.bef-slider .noUi-tooltip {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
}

.bef-slider .noUi-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000000;
}

/* Centered price range text below slider */
.price-range-display {
  width: 100%;
  text-align: center;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
}

.price-range-display .price-range-value {
  display: inline-block;
}