/* ---------- home-page attribute filters (see filters_bar.stpl) ----------

   Sized to stay out of the way: the resting state is one slim pill plus, when something is
   actually filtered, a row of chips. The panel only occupies space once opened, so the profile
   grid sits where it always did for anyone who ignores this bar. Everything reuses theme.css's
   coral palette — no new hues. */

/* The search pill and everything filter-related share one wrapper so the panel below lines up
   with the bar above it exactly — the pill used to carry its own `mx-auto my-4`. */
.search-filters {
  max-width: 700px;
  margin: 1.5rem auto;
}

.filters-bar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* ---- the toggle: the search pill's own leftmost segment ----
   Styled as a segment of the pill (flat, hairline divider on the right) rather than as a button
   sitting on top of it — same treatment .city-field gets, so the bar still reads as one control
   instead of a button that happens to be nearby. */
.search-pill .filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  background: transparent;
  color: var(--ink);
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 999px 0 0 999px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.search-pill .filters-toggle:hover,
.search-pill .filters-toggle.is-open {
  background-color: var(--rose-soft);
  color: var(--wine-strong);
}
.search-pill .filters-toggle:focus {
  outline: none;
}
.search-pill .filters-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(252, 130, 116, 0.35);
}
.filters-toggle-caret {
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}
.filters-toggle.is-open .filters-toggle-caret {
  transform: rotate(180deg);
}
.filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: var(--wine);
  color: #fff5f0;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

/* ---- active-filter chips ---- */
.filters-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.filters-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--rose-soft);
  border: 1px solid var(--rose);
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-size: 0.78rem;
  color: var(--ink);
  white-space: nowrap;
}
.filters-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--wine);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}
.filters-chip-remove:hover {
  background-color: var(--wine);
  color: #fff5f0;
  text-decoration: none;
}
.filters-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  text-decoration: none;
}
.filters-reset:hover {
  color: var(--wine);
  text-decoration: none;
}
.filters-reset-x {
  font-size: 1rem;
  line-height: 1;
}

/* Per-field × inside the panel, mirroring .search-text-clear / .city-field-clear in search.css —
   same coral ×, same "acts immediately" behaviour (it's a link, not a form control). */
.filters-field-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--rose);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0.85;
}
.filters-field-clear:hover {
  background-color: var(--rose-soft);
  color: var(--wine);
  opacity: 1;
  text-decoration: none;
}

/* ---- the panel ----
   Opens directly under the search bar, matching its width (both are inside .search-filters). */
.filters-panel {
  display: none;
  margin-top: 8px;
  padding: 14px 16px;
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(178, 36, 20, 0.06);
}
.filters-panel.is-open {
  display: block;
}
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 22px;
}
/* Spans every column, so its chips lay out along the panel's full width in one row instead of
   wrapping inside one slider-width column. */
.filters-field-wide {
  grid-column: 1 / -1;
}
/* A column with the slider pinned to the bottom, so every slider in the row sits on the same
   baseline even when one field's label wraps to two lines ("Ціна за годину" does at this width). */
.filters-field {
  display: flex;
  flex-direction: column;
}
.filters-field .range-slider {
  margin-top: auto;
}
.filters-field-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
/* The label takes the slack so the value + × always sit flush right, whether or not the × is
   rendered — `justify-content: space-between` would instead re-centre the value when it is. */
.filters-field-label {
  flex: 1 1 auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}
.filters-field-value {
  font-size: 0.78rem;
  color: var(--wine-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- dual-handle range slider ----
   Two <input type="range"> stacked on the same track. Both are transparent and
   `pointer-events: none`, with only their thumbs re-enabled, so a drag always lands on a handle
   instead of on whichever input happens to paint on top. */
.range-slider {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
}
.range-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background-color: var(--line);
}
.range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--rose);
  border-radius: 999px;
}
.range-input {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  height: 28px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range-input:focus {
  outline: none;
}
.range-input::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
  height: 28px;
}
.range-input::-moz-range-track {
  background: transparent;
  border: none;
  height: 28px;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--wine);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgba(178, 36, 20, 0.35);
  cursor: pointer;
}
.range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--wine);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgba(178, 36, 20, 0.35);
  cursor: pointer;
}
.range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(252, 130, 116, 0.45);
}
.range-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(252, 130, 116, 0.45);
}

/* ---- service-type chips ---- */
.filters-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}
.filters-option {
  margin: 0;
  cursor: pointer;
}
/* The checkbox itself is visually hidden but still focusable — the pill below is its label, and
   `:focus-visible + span` keeps keyboard users a visible focus ring. */
.filters-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.filters-option-pill {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink);
  background-color: var(--blush);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filters-option input:checked + .filters-option-pill {
  background-color: var(--wine);
  border-color: var(--wine);
  color: #fff5f0;
}
.filters-option input:focus-visible + .filters-option-pill {
  box-shadow: 0 0 0 3px rgba(252, 130, 116, 0.35);
}

/* ---- panel footer ---- */
.filters-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.filters-apply {
  background-color: var(--rose);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 7px 22px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.filters-apply:hover {
  background-color: var(--wine);
  color: #fff5f0;
}

/* ---- mobile ----
   Same breakpoint as the search pill's own stacked layout (search.css). One column, wider touch
   targets on the slider thumbs, and a full-width apply button so the panel is usable one-handed
   rather than being a desktop layout squeezed down. */
@media (max-width: 576px) {
  /* The pill stacks its segments into full-width rows at this breakpoint (search.css) — the
     toggle joins that stack as the top row, with the same hairline divider underneath that
     .city-field gets, instead of keeping a right-hand border against nothing. */
  .search-pill .filters-toggle {
    flex: 1 1 100%;
    justify-content: center;
    border-right: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 9px 12px;
    font-size: 16px;
  }
  .filters-panel {
    padding: 12px;
    border-radius: 14px;
  }
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .range-slider {
    height: 34px;
  }
  .range-input {
    height: 34px;
  }
  .range-input::-webkit-slider-runnable-track,
  .range-input::-moz-range-track {
    height: 34px;
  }
  .range-input::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  .range-input::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
  .filters-option-pill {
    padding: 7px 14px;
    font-size: 0.82rem;
  }
  /* Clear/remove ×s are the smallest tap targets here — grow them rather than leaving 18px dots
     that need a precise tap. */
  .filters-field-clear,
  .filters-chip-remove {
    width: 26px;
    height: 26px;
    font-size: 1.25rem;
  }
  .filters-actions {
    flex-wrap: wrap;
  }
  .filters-apply {
    flex: 1 1 100%;
    padding: 10px 22px;
  }
}