/* =============================================================================
   Prime Loft — filter dropdown panels, ONE component          (plv-dropdowns)

   Loaded by the two pages that carry the legacy Webflow search dropdowns:
     • Home "/"                           hero search    .form-2
     • /real-estate-pages/properties-all  search rail    #plv-bar .form-2
   Source of record: dropdowns-shared.css + dropdowns-shared.js in the bundle.
   Change it here and both pages change together — that is the point.

   Every filter panel is drawn the way the "More" panel already was, because
   that is the one the client pointed at: a white card, an uppercase section
   label, the options as pills. Location, Property and Deal used to be bare
   checkbox rows in a 212px box — the same data, a different family of control
   from the panel beside them.

   Presentation only. No fs-list-* attribute is touched; the checkbox inputs
   stay in the DOM and keep receiving the click through their <label>, so
   Finsweet on the listing and the URL builder on Home read them unchanged.
   ========================================================================== */
.filter_type_list{
  --plvd-a:#1F3A5F;
  --plvd-a-hover:#162B47;
  --plvd-head:#8a8a8a;
  --plvd-chip-ink:#414141;
  --plvd-line:#eeeeee;
  --plvd-line-2:#e0e0e0;
  --plvd-tint:#F4F7FB;
  --plvd-ease:cubic-bezier(.23,1,.32,1);
}

/* ---------------------------------------------------------------------------
   1. The card
   Width follows the content between a floor and a ceiling, and the ceiling is
   never wider than the screen minus its gutters — the More panel was a fixed
   440px and pushed a 390px phone out to 528px.
   ------------------------------------------------------------------------ */
.filter_type_list:not(.is-more):not(.is-sorting) > .filter_options,
.filter_type_list.is-more > .wrapper-districts-new.more,
.filter_type_list.is-sorting > .filter_options{
  box-sizing:border-box;
  background:#fff !important;
  border:1px solid var(--plvd-line) !important;
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04) !important;
}
.filter_type_list:not(.is-more):not(.is-sorting) > .filter_options{
  display:block !important;
  width:max-content !important;
  min-width:248px !important;
  max-width:min(380px, calc(100vw - 32px)) !important;
  height:auto !important; min-height:0 !important; max-height:none !important;
  overflow:visible !important;
  padding:22px !important;
}
.filter_type_list.is-more > .wrapper-districts-new.more{
  padding:22px !important;
  width:min(440px, calc(100vw - 32px)) !important;
}

/* ---------------------------------------------------------------------------
   2. Section label — the More panel's own "BEDROOMS" style, now on all four
   ------------------------------------------------------------------------ */
.filter_type_list .plv-dd-head,
.filter_type_list.is-more .separate-text{
  display:block;
  margin:0 0 12px !important;
  font-size:12px !important; font-weight:600 !important; line-height:1.2 !important;
  color:var(--plvd-head) !important;
  text-transform:uppercase; letter-spacing:.08em;
}
.filter_type_list.is-more .separate-text{margin-top:24px !important;}
.filter_type_list.is-more .separate-text:first-child{margin-top:0 !important;}

/* ---------------------------------------------------------------------------
   3. Options as pills
   The CMS list ships as a one-column grid of full-width rows; it becomes a
   wrapping row of chips. The legacy checkbox square is hidden where :has() can
   paint the chosen state instead, and stays visible where it cannot.
   ------------------------------------------------------------------------ */
.filter_type_list .filter_options .w-dyn-items{
  display:flex !important; flex-wrap:wrap !important; gap:6px !important;
  grid-template-columns:none !important;
  width:100% !important;
}
.filter_type_list .filter_options .w-dyn-item{width:auto !important; margin:0 !important;}
.filter_type_list .filter_options .checkbox-wrapper{
  position:relative;
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  width:auto !important; min-height:36px; box-sizing:border-box;
  padding:7px 14px !important; margin:0 !important;
  background:#fff; border:1px solid var(--plvd-line-2); border-radius:999px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color 160ms var(--plvd-ease), border-color 160ms var(--plvd-ease),
             transform 140ms var(--plvd-ease);
}
.filter_type_list .filter_options .checkbox-wrapper:active{transform:scale(.97);}
.filter_type_list .filter_options .checkbox-text{
  margin:0 !important; padding:0 !important;
  font-size:13px !important; font-weight:500 !important; line-height:1.2 !important;
  color:var(--plvd-chip-ink) !important; white-space:nowrap;
}
.filter_type_list .filter_options.bedrooms .checkbox-wrapper,
.filter_type_list .filter_options.bathrooms .checkbox-wrapper{min-width:48px;}

@supports selector(:has(*)){
  .filter_type_list .filter_options .w-checkbox-input{display:none !important;}
  /* input:checked, not .w--redirected-checked: Finsweet's Clear unchecks the
     input without telling Webflow, and the class would leave the chip navy */
  .filter_type_list .filter_options .checkbox-wrapper:has(input:checked){
    background:var(--plvd-a); border-color:var(--plvd-a);
  }
  .filter_type_list .filter_options .checkbox-wrapper:has(input:checked) .checkbox-text{
    color:#fff !important; font-weight:600 !important;
  }
  .filter_type_list .filter_options .checkbox-wrapper:has(input:focus-visible){
    box-shadow:0 0 0 3px rgba(31,58,95,.18);
  }
}
@media (hover:hover) and (pointer:fine){
  .filter_type_list .filter_options .checkbox-wrapper:hover{background:var(--plvd-tint);}
  .filter_type_list .filter_options .checkbox-wrapper:has(input:checked):hover{background:var(--plvd-a-hover);}
}

/* ---------------------------------------------------------------------------
   4. Sort menu — a single choice, so it keeps rows, but in the same card
   ------------------------------------------------------------------------ */
.filter_type_list.is-sorting > .filter_options{
  display:flex !important; flex-direction:column; gap:2px !important;
  padding:10px !important; min-width:232px; max-height:none !important;
}
.filter_type_list.is-sorting .plv-dd-head{margin:6px 8px 8px !important;}

/* ---------------------------------------------------------------------------
   5. Phones: the panel opens UNDER its own row, inside the page flow
   A floating panel under a stacked list either covers the rows beneath it or
   has to be guessed a width; in the flow it is exactly as wide as the row that
   opened it and can never leave the screen. The shadow goes with the float.
   ------------------------------------------------------------------------ */
@media (max-width:767px){
  .form-2 .filter_type_dropdown{position:relative !important; width:100% !important;}
  .form-2 .filter_type_list{
    position:static !important;
    left:auto !important; right:auto !important; top:auto !important;
    width:100% !important; min-width:0 !important;
    padding:8px 0 2px !important;
  }
  .form-2 .filter_type_list:not(.is-more):not(.is-sorting) > .filter_options,
  .form-2 .filter_type_list.is-more > .wrapper-districts-new.more{
    width:100% !important; min-width:0 !important; max-width:none !important;
    max-height:none !important; overflow:visible !important;
    padding:18px !important;
    box-shadow:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .filter_type_list .filter_options .checkbox-wrapper{transition:none !important;}
  .filter_type_list .filter_options .checkbox-wrapper:active{transform:none;}
}