/* Kawai custom range slider (replaces Filter Everything's jQuery UI slider).
   The original controls stay initialized for the plugin's internal syncing —
   they are only hidden: instantly via the critical CSS printed in wp_head
   (kawai_price_slider_critical_css), and here again scoped to forms our
   slider successfully attached to. */

.wpc-filter-range-form.kawai-slider-active .wpc-filters-range-slider-wrapper,
.wpc-filter-range-form.kawai-slider-active .wpc-filters-range-wrapper {
  display: none !important;
}

/* --- Formatted min/max text inputs --- */

.kawai-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kawai-range-inputs__sep {
  color: rgba(0, 0, 0, 0.4);
  flex: 0 0 auto;
}

.kawai-range-inputs__field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.kawai-range-input {
  width: 100%;
  padding: 8px 26px 8px 10px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  box-sizing: border-box;
}

.kawai-range-input:focus-visible {
  outline: 2px solid var(--kawai-slider-accent, #1a1a1a);
  outline-offset: -1px;
}

.kawai-range-input__clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.kawai-range-input__clear:hover {
  color: rgba(0, 0, 0, 0.85);
}

/* Visuals match the plugin's original jQuery UI slider (3px #C7D1E2 track,
   24px white handles, fill in the plugin's primary color — the accent var is
   set from that setting via wp_add_inline_style in functions.php). */
.kawai-range-slider {
  --kawai-slider-accent: #fe0411;
  --kawai-slider-track: #c7d1e2;
  --kawai-slider-handle-bg: #fff;
  padding: 24px 12px 38px; /* top gap to the number fields, side room for the 24px handles, bottom for tick labels */
}

.kawai-range-slider__track {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--kawai-slider-track);
  touch-action: none;
  cursor: pointer;
}

.kawai-range-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: var(--kawai-slider-accent);
}

/* Zone-boundary markers (scale changes from fine to coarse here) */
.kawai-range-slider__tick {
  position: absolute;
  top: calc(100% + 9px); /* below the track, clear of an overlapping 24px handle */
  width: 1px;
  height: 7px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.kawai-range-slider__tick-label {
  position: absolute;
  top: 25px;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  pointer-events: none;
}

/* Edge labels (smallest price left, real max right on linear pages) stay
   inside the track */
.kawai-range-slider__tick-label--edge {
  transform: none;
}

.kawai-range-slider__tick-label--edge-right {
  right: 0;
  transform: none;
}

.kawai-range-slider__handle {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid var(--kawai-slider-track);
  border-radius: 50%;
  background: var(--kawai-slider-handle-bg);
  box-shadow: 0 2px 6px 1px rgba(31, 32, 40, 0.1);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Active/focused handle: thicker neutral border, no offset outline ring */
.kawai-range-slider__handle.is-active,
.kawai-range-slider__handle:focus-visible {
  outline: none;
  border: 2px solid #9aa7bd; /* darker shade of the track tone */
}

.kawai-range-slider__handle.is-active {
  box-shadow: 0 2px 8px 1px rgba(31, 32, 40, 0.2);
}