/* immo-search.css — engine widget look (BEM, ACSS-driven).
   Only immo-* classes; no ais-/wpgb-/noUi-. Colours/sizes/spacing use ACSS
   variables where a token exists. Two greys have no ACSS token and are kept
   exact (measured 1:1 from the original WPGB facets). Root font = 62.5% → 1rem = 10px. */

:root {
  --immo-range-track: #e8e8e8;      /* slider rail — no ACSS token */
  --immo-control-border: #c8c8c8;   /* checkbox box / number field border — no ACSS token */
}

/* auto-hide for empty filters / groups + dependency hide (engine sets the class).
   The compound forms must outrank .immo-range{display:flex!important} (same specificity,
   so order would otherwise let the flex rule win and un-hide the slider). */
.is-immo-empty, .is-immo-hidden { display: none !important; }
.immo-range.is-immo-empty, .immo-range.is-immo-hidden { display: none !important; }

/* Form controls live inside a theme ".form--light/.form--dark" scope whose
   rules (e.g. .form--light input[type=number]) outrank single-class selectors.
   We isolate our controls by forcing the measured values. */

/* ── Search box ─────────────────────────────────────────────── */
.immo-searchbox__input {
  width: 100% !important; height: 5rem !important; padding: .8rem 1.6rem !important;
  font-size: 1.6rem !important; line-height: 1.2 !important;
  color: var(--base-ultra-dark) !important; background: var(--white) !important;
  border: 1px solid var(--shade-light) !important; border-radius: 3px !important;
  appearance: none; -webkit-appearance: none;
}

/* ── Select (menu dropdown) ─────────────────────────────────── */
.immo-select__control { position: relative; display: block; width: 100%; }
.immo-select__field {
  width: 100% !important; height: 5rem !important; padding: .5rem 4.2rem .5rem .8rem !important;
  font-size: var(--text-m) !important; line-height: 1.2 !important;
  color: var(--base-ultra-dark) !important; background: var(--white) !important;
  border: 1px solid var(--shade-light) !important; border-radius: 3px !important;
  appearance: none !important; -webkit-appearance: none !important; cursor: pointer;
}
.immo-select__icon {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; color: var(--immo-control-border); pointer-events: none;
}
/* muted placeholder text while nothing is chosen (engine toggles the class) */
.immo-select__field.immo-is-placeholder,
.immo-sort__field.immo-is-placeholder { color: var(--shade-medium) !important; }

/* ── Searchable select (combobox) ───────────────────────────── */
.immo-combo { position: relative; }
.immo-combo__input {
  width: 100% !important; height: 5rem !important; padding: .5rem 4.2rem .5rem .8rem !important;
  font-size: var(--text-m) !important; line-height: 1.2 !important;
  color: var(--base-ultra-dark) !important; background: var(--white) !important;
  border: 1px solid var(--shade-light) !important; border-radius: 3px !important;
  appearance: none !important; -webkit-appearance: none !important;
}
.immo-combo__icon {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; color: var(--immo-control-border); pointer-events: none;
}
.immo-combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  max-height: 280px; overflow-y: auto; background: var(--white);
  border: 1px solid var(--shade-light); border-radius: 3px; box-shadow: var(--box-shadow-m); display: none;
}
.immo-combo.is-open .immo-combo__list { display: block; }
.immo-combo__option { padding: .6rem 1.2rem; font-size: 1.5rem; color: var(--base-ultra-dark); cursor: pointer; }
.immo-combo__option:hover, .immo-combo__option.is-selected { background: var(--action-ultra-light); }

/* ── Checkbox list (refinement-list + toggle) — 1:1 zur WPGB-Referenz ─── */
/* der Bricks-Block (brxe-block) hat per Default flex + gap ~27px → riesiger Abstand
   zwischen Facetten-Label und Liste. Hier neutralisieren, Abstand steuern die margins. */
.immo-checklist { gap: 0 !important; row-gap: 0 !important; }
/* Facetten-Label exakt wie die Bricks-Legende "Sonstiges" (grau, 15px, 600) */
.immo-checklist__heading { font-size: 1.5rem; font-weight: 600; color: #808080; line-height: 1.45; margin: 0 0 .6rem; }
.immo-checklist__list { list-style: none; margin: 0; padding: 0; }
.immo-checklist__item {
  display: flex; align-items: center; gap: .9rem; margin: 0 0 .5rem; line-height: 1.2; cursor: pointer;
}
.immo-checklist__control {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: var(--radius-xs);
  border: 2px solid var(--immo-control-border); display: grid; place-items: center;
}
.immo-checklist__item--active .immo-checklist__control {
  background: #0099CC; border-color: #0099CC;
}
.immo-checklist__item--active .immo-checklist__control::after {
  content: ""; width: 5px; height: 9px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px);
}
.immo-checklist__label { font-size: 1.4rem; color: #171A1C; line-height: 1.2; }
.immo-checklist__item[hidden] { display: none; }

/* ── Facet search (single checkbox finder over Ausstattung + Sonstiges) ─ */
.immo-facet-search__input {
  width: 100% !important; height: 4.2rem !important; margin-bottom: 1.4rem; padding: .6rem 1rem !important;
  font-size: 1.5rem !important; line-height: 1.2 !important;
  color: #171A1C !important; background: #fff !important;
  border: 1px solid #d9d9d9 !important; border-radius: 3px !important;
  appearance: none !important; -webkit-appearance: none !important;
}

/* ── Range slider (self-built, dual thumb) ──────────────────── */
/* the slider must stack track + number fields full-width, regardless of the
   Bricks container's flex/align settings (else an empty track collapses to 0). */
.immo-range { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
.immo-range__label { font-size: 1.4rem; font-weight: 600; color: var(--base-ultra-dark); margin-bottom: .5rem; }
.immo-range__track {
  position: relative; height: 6px; margin: .6rem 0 .8rem;
  background: var(--immo-range-track); border-radius: 4px;
}
.immo-range__progress {
  position: absolute; top: 0; height: 6px; background: var(--action); border-radius: 4px;
}
.immo-range__thumb {
  position: absolute; top: 50%; width: 1.6rem; height: 1.6rem;
  transform: translate(-50%, -50%); background: var(--white);
  border: 2px solid var(--action); border-radius: 50%; cursor: grab; touch-action: none;
}
.immo-range__thumb:active { cursor: grabbing; }
.immo-range__fields { display: flex; align-items: center; gap: .8rem; }
/* field = bordered box holding the number input + a unit suffix (€ / m²) */
.immo-range__field {
  display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px;
  background: var(--white); border: 1px solid var(--immo-control-border); border-radius: 3px;
  font-size: 1.3rem; line-height: 1; color: var(--base-ultra-dark);
}
.immo-range__input {
  border: 0 !important; background: transparent !important; padding: 0 !important;
  height: auto !important; min-width: 2ch; width: auto; text-align: right !important;
  font: inherit !important; color: inherit !important; line-height: 1 !important;
  appearance: textfield !important; -webkit-appearance: textfield !important; -moz-appearance: textfield !important;
}
.immo-range__input::-webkit-outer-spin-button,
.immo-range__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.immo-range__unit { font-size: 1.3rem; color: var(--base-ultra-dark); white-space: nowrap; }
.immo-range__sep { color: var(--base-ultra-dark); }

/* ── Sort (select variant) ──────────────────────────────────── */
.immo-sort__control { position: relative; display: inline-block; }
.immo-sort__field {
  width: auto !important; min-width: 20rem; height: 4.6rem !important;
  padding: .5rem 3.4rem .5rem 1.2rem !important;
  font-size: 1.6rem !important; line-height: 1.2 !important;
  color: var(--base-ultra-dark) !important; background: var(--white) !important;
  border: 1px solid var(--shade-light) !important; border-radius: 3px !important;
  appearance: none !important; -webkit-appearance: none !important; cursor: pointer;
}
.immo-sort__icon {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; color: var(--immo-control-border); pointer-events: none;
}

/* ── Pagination ─────────────────────────────────────────────── */
.immo-pager__list {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.immo-pager__link {
  display: block; min-width: 32px; height: 32px; line-height: 32px; text-align: center;
  padding: 0 11px; font-size: 1.6rem; font-weight: 600; color: var(--action);
  text-decoration: none; border-radius: var(--radius-xs);
}
.immo-pager__item--current .immo-pager__link { background: var(--action); color: var(--white); }
.immo-pager__item--disabled .immo-pager__link { opacity: .35; pointer-events: none; }
.immo-pager__item--prev .immo-pager__link,
.immo-pager__item--next .immo-pager__link { min-width: 0; padding: 0 12px; }
.immo-pager__dots {
  display: block; min-width: 32px; height: 32px; line-height: 32px;
  text-align: center; color: var(--base-medium);
}

/* ── Stats ──────────────────────────────────────────────────── */
.immo-stats { font-size: 1.6rem; color: var(--base-ultra-dark); }

/* ── Reset button ───────────────────────────────────────────── */
.immo-reset {
  height: 4.7rem; padding: 1.3rem 2.7rem; font-size: var(--text-m); font-weight: 500;
  color: var(--white); background: var(--primary); border: 0; border-radius: var(--radius-xs);
  cursor: pointer;
}
.immo-reset:disabled { opacity: .4; cursor: default; }