/**
 * Kasalia — rango de precio: histograma + dual thumbs (Desktop ≥1025).
 * Tokens: Styles/tokens/kasalia-filter-chip-tokens.css (--filter-price-*).
 * Móvil ≤1024: Styles/components/rwd-price-range.css (capa .rwd-).
 *
 * Geometría Desktop (arriba→abajo, ancho completo del dropdown):
 *   1) histograma (barras = counts reales del listado cargado)
 *   2) rail + thumbs en la BASE del histograma
 *   3) inputs Min € / Max €
 *   4) Borrar / Listo (fuera de este bloque, en .action-buttons)
 */

.kasalia-price-range {
  display: flex;
  flex-direction: column;
  gap: var(--filter-bar-gap, 8px);
  width: 100%;
  box-sizing: border-box;
}

.kasalia-price-range__hist,
.kasalia-price-range__slider {
  display: none;
}

.kasalia-price-range__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--filter-bar-gap, 8px);
  align-items: center;
}

.kasalia-price-range__sep {
  color: var(--filter-chip-color, #213b21);
  font-size: var(--filter-chip-fs, 12px);
  font-weight: var(--filter-chip-fw, 400);
  line-height: var(--filter-chip-lh, 1.4);
}

@media (min-width: 1025px) {
  /* Anula el grid 3-col legacy de index-casa-panel.css sobre .price-range */
  .banner-bottom #precio-dropdown .kasalia-price-range.price-range {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: var(--filter-bar-gap, 8px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative;
    overflow: visible;
    /* Aire lateral = radio del thumb para que no se recorte en los extremos */
    padding-inline: calc(var(--filter-price-thumb-size) / 2) !important;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__hist {
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    gap: var(--filter-price-hist-gap);
    height: var(--filter-price-hist-h);
    width: 100%;
    padding: 0;
    padding-bottom: calc(var(--filter-price-thumb-size) * 0.45);
    box-sizing: border-box;
    pointer-events: none;
    overflow: visible;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__hist-bar {
    flex: 1 1 0;
    min-width: 0;
    height: 0;
    align-self: flex-end;
    border-radius: 2px 2px 0 0;
    background: var(--filter-price-hist);
    opacity: 0.38;
    font-weight: inherit !important;
    color: transparent !important;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__hist-bar.is-in-range {
    opacity: 1;
    background: var(--filter-price-accent);
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__hist-bar.is-empty {
    opacity: 0.22;
  }

  /*
   * Slider a ancho completo del padding-box (incluye radio del thumb en extremos).
   * Rail + inputs inset = eje de valor; hit area ≥ --filter-price-thumb-size (44).
   */
  .banner-bottom #precio-dropdown .kasalia-price-range__slider {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    top: calc(var(--filter-price-hist-h) - var(--filter-price-thumb-size) + 4px);
    height: var(--filter-price-thumb-size);
    margin: 0;
    overflow: visible;
    z-index: 2;
    pointer-events: auto;
    touch-action: none;
    cursor: pointer;
    box-sizing: border-box;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__rail {
    position: absolute;
    left: calc(var(--filter-price-thumb-size) / 2);
    right: calc(var(--filter-price-thumb-size) / 2);
    top: 50%;
    height: var(--filter-price-rail-h);
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--filter-price-track);
    pointer-events: none;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: inherit;
    background: var(--filter-price-accent);
  }

  /*
   * Inputs alineados al rail (eje de valor). Hit = box del slider (44px).
   * Anula .banner-bottom .search-field input { width:auto !important }.
   */
  .banner-bottom #precio-dropdown .kasalia-price-range__thumb {
    position: absolute;
    left: calc(var(--filter-price-thumb-size) / 2);
    right: calc(var(--filter-price-thumb-size) / 2);
    top: 0;
    /*
     * Track = rail (inset thumb/2). left+right estiran el box;
     * width:auto !important anula .banner-bottom .search-field input { width:auto !important }
     * sin colapsar (antes width:0 con el grid 3-col legacy).
     */
    width: auto !important;
    max-width: none !important;
    min-width: calc(100% - var(--filter-price-thumb-size)) !important;
    flex: none !important;
    height: var(--filter-price-thumb-size);
    margin: 0;
    padding: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
    box-sizing: border-box;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__thumb::-webkit-slider-runnable-track {
    height: var(--filter-price-thumb-size);
    background: transparent;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__thumb::-moz-range-track {
    height: var(--filter-price-thumb-size);
    background: transparent;
    border: 0;
  }

  /*
   * Círculo visible pequeño + fill pino; pe:none — drag en el slider (hit 44).
   */
  .banner-bottom #precio-dropdown .kasalia-price-range__thumb::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: var(--filter-price-thumb-visual, 18px);
    height: var(--filter-price-thumb-visual, 18px);
    border-radius: 50%;
    border: 2px solid var(--filter-price-thumb-pine-border, #0f3820);
    background: var(--filter-price-thumb-pine, #174f2b);
    box-shadow: var(--filter-price-thumb-shadow-pine, 0 1px 3px rgba(15, 56, 32, 0.35));
    cursor: pointer;
    pointer-events: none;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__thumb::-moz-range-thumb {
    width: var(--filter-price-thumb-visual, 18px);
    height: var(--filter-price-thumb-visual, 18px);
    border-radius: 50%;
    border: 2px solid var(--filter-price-thumb-pine-border, #0f3820);
    background: var(--filter-price-thumb-pine, #174f2b);
    box-shadow: var(--filter-price-thumb-shadow-pine, 0 1px 3px rgba(15, 56, 32, 0.35));
    cursor: pointer;
    pointer-events: none;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__thumb--min {
    z-index: 3;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__thumb--max {
    z-index: 4;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: var(--filter-bar-gap, 8px) !important;
    align-items: center !important;
    width: 100%;
    margin-top: var(--filter-bar-gap, 8px);
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__fields .kasalia-price-range__sep {
    color: var(--filter-chip-color, #213b21) !important;
    font-weight: var(--filter-chip-fw, 400) !important;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__fields input {
    height: var(--filter-chip-h) !important;
    min-height: var(--filter-chip-h) !important;
    padding: 0 var(--filter-chip-pad-x) !important;
    border: 1px solid var(--filter-chip-border) !important;
    border-radius: 10px !important;
    background: var(--filter-chip-bg) !important;
    color: var(--filter-chip-color) !important;
    font-size: var(--filter-chip-fs) !important;
    font-weight: var(--filter-chip-fw) !important;
    line-height: var(--filter-chip-lh) !important;
    box-sizing: border-box !important;
    width: 100%;
  }

  .banner-bottom #precio-dropdown .kasalia-price-range__fields input:focus {
    outline: 2px solid var(--filter-price-accent);
    outline-offset: 1px;
  }
}