/*
 * Listing filter rail.
 *
 * Loaded on the listing and search pages only. Plain form controls posting by
 * GET, so every filtered view has a shareable URL — styled to read as one
 * panel rather than a stack of unrelated inputs.
 */

.lf {
  background: #fff;
  border: 1px solid #e6eaee;
  border-radius: 8px;
  padding: 18px 18px 16px;
  margin-bottom: 24px;
}

.lf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.lf-title { font-size: 16px; color: #004274; margin: 0; }
.lf-clear { font-size: 13px; color: #00aeff; }

.lf-group {
  border-top: 1px solid #eef1f4;
  padding: 12px 0;
}
.lf-group:first-of-type { border-top: 0; padding-top: 0; }

.lf-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #66707a;
  margin-bottom: 8px;
  cursor: default;
}
/* Collapsible groups: the label is the summary. */
details.lf-group > summary.lf-label {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 18px;
}
details.lf-group > summary.lf-label::-webkit-details-marker { display: none; }
details.lf-group > summary.lf-label::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 15px;
  color: #00aeff;
}
details.lf-group[open] > summary.lf-label::after { content: "\2212"; }

.lf-note { font-size: 12px; color: #98a1aa; margin: -4px 0 8px; }

.lf-pair { display: flex; gap: 8px; }
.lf-pair .form-control { min-width: 0; }

/* Buy / rent / any. */
.lf-segmented { display: flex; border: 1px solid #dfe4e9; border-radius: 6px; overflow: hidden; }
.lf-segment {
  flex: 1 1 0;
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 4px;
  cursor: pointer;
  color: #66707a;
  border-right: 1px solid #dfe4e9;
}
.lf-segment:last-child { border-right: 0; }
.lf-segment input { position: absolute; opacity: 0; pointer-events: none; }
.lf-segment.is-on { background: #eef8fd; color: #004274; font-weight: 700; }

/* Bedroom chips. */
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-chip {
  margin: 0;
  border: 1px solid #dfe4e9;
  border-radius: 30px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 400;
  color: #4a5260;
  cursor: pointer;
}
.lf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lf-chip.is-on { border-color: #00aeff; background: #f3fbff; color: #004274; font-weight: 700; }

/* Checkbox lists. */
.lf-list, .lf-scroll { display: flex; flex-direction: column; gap: 2px; }
/* Every list is capped so the rail stays a rail rather than a page of its
   own; anything longer scrolls within its group. */
.lf-list { max-height: 200px; overflow-y: auto; padding-right: 4px; }
.lf-scroll { max-height: 230px; overflow-y: auto; padding-right: 4px; }

.lf-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #4a5260;
  padding: 3px 0;
  cursor: pointer;
}
.lf-check input { flex: 0 0 auto; margin: 0; }
.lf-check span { flex: 1 1 auto; min-width: 0; }
.lf-check em { font-style: normal; font-size: 12px; color: #a5adb6; }
.lf-check-city { font-weight: 700; color: #004274; }
.lf-check-locality { padding-left: 16px; }
.lf-loc-group + .lf-loc-group { margin-top: 8px; }

.lf-search { margin-bottom: 8px; font-size: 13px; }
.lf-actions { margin-top: 16px; }

/* Applied filters, above the results. */
.listing-applied { margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.listing-applied-chip {
  background: #eef6fb;
  color: #00688f;
  border-radius: 3px;
  padding: 3px 9px;
  font-size: 12px;
}
.listing-applied-clear { font-size: 12px; color: #00aeff; margin-left: 4px; }

/* --------------------------------------------------- desktop: a plain rail */
/* The trigger and the sheet chrome exist in the markup for every width; above
   the theme's 992px breakpoint they are simply not shown. */
.lf-trigger,
.lf-backdrop,
.lf-close { display: none; }

/* ------------------------------------------------------ mobile: a sheet */
/* Below 992px the sidebar stacks under the listings, which puts the filters
   past forty results — somewhere nobody scrolls. So they become a sheet that
   comes up over the page, reached from a button pinned to the viewport. */
@media (max-width: 991.98px) {

  .lf-trigger {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 1150;
    border: 0;
    border-radius: 30px;
    padding: 12px 24px;
    background: #004274;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 40, 70, .32);
    cursor: pointer;
  }

  .lf-trigger-count {
    background: #00aeff;
    color: #fff;
    border-radius: 20px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
  }

  .lf-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1160;
    background: rgba(10, 14, 22, .5);
  }
  .lf-backdrop[hidden] { display: none; }

  .lf {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1170;
    margin: 0;
    max-height: 88svh;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
    border-radius: 14px 14px 0 0;
    padding: 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .28);
    /* Off-screen until opened, and not reachable by tab while hidden. */
    transform: translateY(100%);
    /* visibility keeps the closed sheet out of the tab order; it is not part of
       the transition, so it flips at once rather than lagging the slide. */
    visibility: hidden;
    transition: transform .3s ease;
  }

  .lf.is-open {
    transform: translateY(0);
    visibility: visible;
  }

  /* Header and footer stay put; only the groups scroll. */
  .lf-head {
    /* sticky also positions the drag handle below, so there is no second
       `position` declaration here — the later one would win and unstick it. */
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    align-items: center;
    padding: 16px 18px 12px;
    margin: 0;
    border-bottom: 1px solid #eef1f4;
  }
  .lf-head::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 3px;
    background: #dfe4e9;
  }
  .lf-title { font-size: 17px; }

  .lf-close {
    display: block;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #8a9099;
    padding: 0 2px;
    margin-left: 12px;
    cursor: pointer;
  }

  .lf > .lf-group { margin: 0 18px; }

  .lf-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 12px 18px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eef1f4;
    background: #fff;
  }

  /* Inside a sheet the inner lists can breathe. */
  .lf-scroll { max-height: 200px; }
  .lf-list { max-height: 180px; }

  /* The page must not scroll behind the sheet. */
  body.lf-open { overflow: hidden; }
}

/* A phone in landscape has very little height; give the sheet more of it. */
@media (max-width: 991.98px) and (max-height: 520px) {
  .lf { max-height: 94vh; }
  .lf-scroll, .lf-list { max-height: 130px; }
}