/* Section: Property Search Form */

.property-search {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--padding-page);
  scroll-padding-inline: var(--padding-card);
}


.property-search h2{
  margin-block-end: var(--space-1);
}

/* Such-Historie-Pills (JS-befüllt von search-history.js, nur eingeloggte User
   mit gespeicherten Suchen). Pattern analog .trust-badges / .pill — kompakte
   Cards mit Hover-Effekt, klickbar → Form füllen + submit. X-Badge je Eintrag
   zum Einzel-Löschen, h3 als kleine Überschrift damit klar ist was das ist. */
.search-history-pills {
  margin-block-start: var(--gap-block);
  margin-block-end: var(--gap-block);
}

.search-history-pills[hidden] {
  display: none;
}

.search-history-pills h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking);
}

.search-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* li ist Wrapper für Pill + X-Badge — relative damit X absolut positioniert
   am Eck sitzen kann. padding-block-start 0.4rem damit der ragende X-Badge
   nicht über die Container-Oberkante geclippt wird. */
.search-history-list > li {
  position: relative;
  padding-block-start: 0.4rem;
  padding-inline-end: 0.4rem;
}

.search-history-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text);
  transition: border-color var(--transition), background var(--transition);
}

.search-history-pill:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
}

.search-history-summary {
  font-weight: 500;
}

.search-history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.search-history-tags > span {
  display: inline-block;
  padding: 0 var(--space-1);
  background: var(--color-bg-alt);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* X-Badge zum Einzel-Löschen — über dem oberen rechten Pill-Eck. Kreis,
   neutral grau, hover rot. Min target-size 1.5rem für brauchbare Touch-
   Bedienbarkeit ohne den Pill-Klickbereich zu sehr zu beschneiden. */
.search-history-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  border: 0.0625rem solid var(--color-border);
  border-radius: 50%;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.search-history-remove:hover {
  background: var(--color-heart);
  color: var(--color-text-inverse);
  border-color: var(--color-heart);
}

#property-search-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--gap-inline);
  padding: var(--gap-inline);
  background: var(--color-bg-alt);
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
  margin-block-end: var(--gap-block);
}

#property-search-form > div:first-child,
#property-search-form > .detail-search,
#property-search-form > button {
  grid-column: 1 / -1;
}

/* --- Range slider ---
   Structure:
     <fieldset class="range-slider">
       <legend>
       <div class="range-inputs">    → order default (after track)
         <label> <input type="number"> <label> <input type="number"> <span class="unit">
       </div>
       <div class="range-track">     → order: -1 (track sits above inputs)
         <input type="range" class="range-thumb range-thumb-min">
         <input type="range" class="range-thumb range-thumb-max">
       </div>
     </fieldset>

   Thumb shared values live in CSS custom properties (--thumb-*) so webkit/
   moz pseudo-elements stay declaratively close. */

.range-slider {
  --thumb-size: 1.25rem;
  --thumb-radius: calc(var(--thumb-size) / 2);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.range-slider legend {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-block-end: var(--space-1);
}

/* --- Inputs row (labels hidden, number fields compact + wide) --- */

.range-inputs {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* Labels visuell versteckt aber Screen-Reader-zugänglich.
   display:none würde sie aus dem a11y-Tree entfernen → Lighthouse-Fehler
   "Formularelemente nicht mit Labels verknüpft". */
.range-inputs label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.range-inputs input[type="number"] {
  width: 8rem;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  text-align:left;
}

/* Erstes Input links, zweites Input rechts — robust über margin-auto
   (funktioniert zuverlässig auch wenn labels/whitespace im DOM liegen). */
.range-inputs > input[type="number"] + label + input[type="number"] {
  margin-inline-start: auto;
  text-align:right;
}

/* --- Track (visual bar + overlapping range inputs) ---
   Track geht über die volle Container-Breite. Die visuelle Bar und die
   Range-Inputs werden um `--thumb-radius` nach innen gerückt, damit die
   Thumbs bei min/max bündig am Container-Rand abschließen. */

.range-track {
  order: -1;
  position: relative;
  height: var(--thumb-size);
}

/* Grauer Track — bis an die Thumb-Extrem-Positionen eingerückt, sodass der
   Thumb-Rand bündig mit dem Container abschließt und der Track beim Bewegen
   der Thumbs nicht über die Ränder hinausragt. */
.range-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--thumb-radius);
  right: var(--thumb-radius);
  height: 0.25rem;
  border-radius: 0.125rem;
  background: var(--color-border);
  transform: translateY(-50%);
}

/* Range-Input ist um thumb-size schmaler als Container, mit thumb-radius
   eingerückt. Dadurch sitzt Thumb-Zentrum bei value=min an thumb-radius
   (→ Thumb-Rand bündig Container-links), bei value=max an 100%-thumb-radius
   (→ Thumb-Rand bündig Container-rechts). */

.range-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* Pseudo-elements can't be grouped in one selector, so webkit + moz are
   duplicated — values stay in sync via --thumb-* custom properties. */
.range-thumb::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: var(--color-primary);
  border: 0.125rem solid var(--color-bg);
  box-shadow: var(--shadow);
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--transition);
}

.range-thumb::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: var(--color-primary);
  border: 0.125rem solid var(--color-bg);
  box-shadow: var(--shadow);
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--transition);
}

.range-thumb:hover::-webkit-slider-thumb { transform: scale(1.15); }
.range-thumb:hover::-moz-range-thumb     { transform: scale(1.15); }

.range-thumb::-moz-range-track {
  background: transparent;
  border: none;
  height: 0;
}

/* --- Autocomplete suggestions --- */

#property-search-form > div:first-child > div {
  position: relative;
}

#property-search-form > div:first-child > div > ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 12rem;
  overflow-y: auto;
  z-index: 20;
  box-shadow: var(--shadow-lg);
}

#property-search-form > div:first-child > div > ul li {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition);
}

#property-search-form > div:first-child > div > ul li[aria-selected="true"],
#property-search-form > div:first-child > div > ul li:hover {
  background: var(--color-bg-alt);
}

/* --- Detail Search Accordion --- */

.detail-search {
  margin-block-start: var(--gap-inline);
}

.detail-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: auto;
  margin-block-end: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  width: auto;
}

.detail-toggle:hover {
  color: var(--color-text);
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
}

.detail-toggle svg {
  transition: transform var(--transition-med);
}

.detail-search.open .detail-toggle svg {
  transform: rotate(180deg);
}

.detail-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--gap-inline);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-slow), opacity var(--transition);
  border-radius: var(--radius);
  background: var(--color-bg);
  opacity: 0;
}

.detail-search.open .detail-fields {
  max-height: 60rem;
  margin-block: var(--gap-inline) var(--space-1);
  padding: var(--gap-inline);
  opacity: 1;
}

.detail-fields .feature-checkboxes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
  gap: var(--space-1) var(--gap-inline);
}

/* range-slider fieldsets nehmen jeweils 1 Spalte ein (4 Slider → 2×2 Grid).
   Andere fieldsets im Detail-Block (z.B. features) spannen über beide Spalten. */
.detail-fields > fieldset:not(.range-slider) {
  grid-column: 1 / -1;
}

@media screen and (max-width: 44.999rem) {
  #property-search-form {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .detail-fields {
    grid-template-columns: 1fr;
  }

  .detail-fields .feature-checkboxes {
    grid-template-columns: 1fr 1fr;
  }
}