/* Quick-filter bar on property.php (assets/js/property-quick-filters.js).
   The search starts as one long bar. Once a place has been searched
   (#propertyFilter.hb-search-active) the property-type pills and this bar of
   Price / Beds / Baths / More filters appear underneath it, like Zillow.
   Everything is scoped under #propertyFilter: the page restyles bare
   buttons and selects site-wide, so these rules carry the id. */

#propertyFilter .hbq{display:none;position:relative;flex:1 1 auto;min-width:0;order:5}
#propertyFilter.hb-search-active .hbq{display:block}
#propertyFilter .hbq-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

#propertyFilter .hbq-loc{display:inline-flex;align-items:center;gap:8px;height:52px;max-width:100%;padding:0 18px;box-sizing:border-box;border-radius:30px;border:1px solid rgba(235,216,176,.35);background:rgba(235,216,176,.10);color:#ebd8b0;font-size:14px;font-weight:600;line-height:1}
#propertyFilter .hbq-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}

#propertyFilter .hbq-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;margin:0;padding:0 18px;box-sizing:border-box;border-radius:30px!important;border:1px solid rgba(235,216,176,.32)!important;background:rgba(6,17,33,.80)!important;color:#eaf1f7!important;font-family:inherit;font-size:14px!important;font-weight:500!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.30)!important}
#propertyFilter .hbq-chip:hover{background:rgba(235,216,176,.12)!important}
#propertyFilter .hbq-chip:focus-visible,#propertyFilter .hbq-opt:focus-visible,#propertyFilter .hbq-btn:focus-visible{outline:2px solid #f8dfaa;outline-offset:2px}
#propertyFilter .hbq-chip .fa-angle-down,#propertyFilter .hbq-chip .fa-sliders{font-size:13px}
#propertyFilter .hbq-chip[aria-expanded=true] .fa-angle-down{transform:rotate(180deg)}
#propertyFilter .hbq-chip.is-on{background:linear-gradient(135deg,#ebd8b0,#c9a96e)!important;color:#061121!important;border-color:rgba(235,216,176,.7)!important;font-weight:700!important}
#propertyFilter .hbq-chip.is-on:hover{background:linear-gradient(135deg,#f3e4c2,#d3b57b)!important}
#propertyFilter .hbq-n{display:none;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:#061121;color:#ebd8b0;font-size:12px;font-weight:700;line-height:20px;text-align:center}
#propertyFilter .hbq-n.is-on{display:inline-block}

#propertyFilter .hbq-pop{display:none;position:absolute;z-index:110;width:320px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:16px;border-radius:20px;border:1px solid rgba(235,216,176,.35);background:#0b1c2b;color:#eaf1f7;box-shadow:0 18px 46px rgba(0,0,0,.55)}
#propertyFilter .hbq-pop.is-open{display:block}
#propertyFilter .hbq-pop-title{margin:0 0 12px;color:#ebd8b0;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
#propertyFilter .hbq-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#propertyFilter .hbq-two label{display:block;margin:0 0 4px;color:#a9bccd;font-size:12px;font-weight:500}
/* appearance:none with a drawn chevron: WebKit ignores the dark background of a native-looking select but keeps the light text, which left it white-on-white */
#propertyFilter .hbq-two select{display:block;width:100%;height:46px;padding:0 34px 0 12px;box-sizing:border-box;border-radius:14px;border:1px solid rgba(235,216,176,.30)!important;background:#061121 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ebd8b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center/14px 14px!important;color:#eaf1f7!important;-webkit-text-fill-color:#eaf1f7;font-size:14px;color-scheme:dark;-webkit-appearance:none!important;appearance:none!important}
#propertyFilter .hbq-two select option{background:#061121;color:#eaf1f7}
#propertyFilter .hbq-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#propertyFilter .hbq-opt{height:44px;margin:0;padding:0;border-radius:14px!important;border:1px solid rgba(235,216,176,.30)!important;background:#061121!important;color:#eaf1f7!important;font-family:inherit;font-size:15px!important;font-weight:600!important;line-height:1!important;text-transform:none!important;cursor:pointer;box-shadow:none!important}
#propertyFilter .hbq-opt:hover{background:rgba(235,216,176,.12)!important}
#propertyFilter .hbq-opt.is-on{background:linear-gradient(135deg,#ebd8b0,#c9a96e)!important;color:#061121!important;border-color:rgba(235,216,176,.7)!important}
#propertyFilter .hbq-foot{display:flex;gap:10px;margin-top:14px}
#propertyFilter .hbq-btn{flex:1 1 0;height:44px;margin:0;padding:0 14px;border-radius:24px!important;border:1px solid rgba(235,216,176,.4)!important;background:transparent!important;color:#ebd8b0!important;font-family:inherit;font-size:14px!important;font-weight:700!important;line-height:1!important;text-transform:none!important;cursor:pointer;box-shadow:none!important}
#propertyFilter .hbq-btn.is-primary{background:linear-gradient(135deg,#ebd8b0,#c9a96e)!important;color:#061121!important;border-color:rgba(235,216,176,.7)!important}

/* desktop: row 1 is the long bar (search, Buy, filter icon, Find), row 2 the
   type pills and this bar. The ::after is the line break between them. */
@media(min-width:768px){
  #propertyFilter.hb-search-active .form-title #addressFieldWrapper{order:1}
  #propertyFilter.hb-search-active .form-title .propertyType{order:2}
  #propertyFilter.hb-search-active .form-title .wrap-btn{order:3}
  #propertyFilter.hb-search-active .form-title::after{content:'';display:block;flex:0 0 100%;height:0;margin:-6px 0;order:3}
  #propertyFilter.hb-search-active .form-title .hb-type-pill-group{order:4}
}

/* phone: stacked under Find, each popover opens inline under the chip row */
@media(max-width:767px){
  #propertyFilter.hb-search-active .form-title .propertyType{order:1}
  #propertyFilter.hb-search-active .form-title .wrap-btn{order:2}
  #propertyFilter.hb-search-active .form-title .hb-type-pill-group{order:3;display:flex!important;width:100%!important;min-height:60px}
  #propertyFilter .hbq{order:4;width:100%}
  #propertyFilter .hbq-loc{display:none}
  #propertyFilter .hbq-chip{height:44px;padding:0 16px}
  #propertyFilter .hbq-pop{position:static!important;width:100%;max-width:none;margin-top:10px}
  /* iOS Safari zooms the page when a field under 16px is focused */
  #propertyFilter .hbq-two select{font-size:16px}
}

/* The filter panel's own dropdowns (HOA fee, garage, days on Housbe, lot-size unit).
   They kept the native look (appearance:auto) and set a transparent background inline, which WebKit
   draws as a white box with the pale text on it. Same treatment as the price selects above:
   appearance:none and a drawn chevron, so the dark panel shows through in every browser.
   The inline background-color stays; only the arrow, the room for it and the option list are set here. */
.wd-search-form select{-webkit-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ebd8b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:14px 14px!important;padding-right:38px!important;color-scheme:dark;text-overflow:ellipsis}
.wd-search-form select option{background:#061121;color:#eaf1f7}

/* Google's suggestion list under the search bar. It is appended to <body>, so it is styled globally;
   it fell back to Google's plain white box with 12px type on this page. Dark and gold like the bar it
   drops from, with larger type. The home page keeps its own copy of these rules in index.php.
   "powered by Google" stays (Google's terms require it): the official non-white logo is used. */
.pac-container{z-index:2100000!important;box-sizing:border-box;margin-top:8px!important;padding:6px!important;border:1px solid rgba(235,216,176,.45)!important;border-radius:20px!important;background:linear-gradient(180deg,#0c1d30,#061121)!important;box-shadow:0 18px 46px rgba(0,0,0,.6)!important;font-family:inherit!important;overflow:hidden}
.pac-container .pac-item{display:flex;align-items:baseline;gap:6px;margin:0;padding:12px 14px!important;border:0!important;border-radius:14px;background:transparent!important;color:#a9bccd!important;font-size:14px!important;line-height:1.4!important;white-space:nowrap;overflow:hidden;cursor:pointer}
.pac-container .pac-item .pac-item-query{color:#fff!important;font-size:15px!important;font-weight:600}
.pac-container .pac-item span:not(.pac-icon):not(.pac-item-query):not(.pac-matched){overflow:hidden;text-overflow:ellipsis}
.pac-container .pac-matched{color:#ebd8b0!important;font-weight:700}
.pac-container .pac-item:hover,.pac-container .pac-item-selected{background:rgba(235,216,176,.12)!important}
.pac-container .pac-icon{flex:0 0 auto;align-self:center;width:20px;height:20px;margin:0 6px 0 0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ebd8b0'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:15px 15px!important}
.pac-container:after{height:18px;padding:6px 10px 2px 0;background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-non-white3.png)!important}
.pac-container.hdpi:after,.hdpi.pac-logo:after{background-image:url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-non-white3_hdpi.png)!important}