/* ============================================================
   LIVING COASTAL — /search refine bar             2026-07-20 (v2)
   WPCodeBox snippet: "CSS - Search results refinement bar".
   Scope: .lc-search-top-widget  (fmcsearch-3, sidebar "search-results-top")

   v2 (2026-07-20): the results-page bar is now the SINGLE search surface
   (Option A). It carries the FULL filter set, Lean-collapsible:
     DEFAULT visible : Location · Price · Beds · Property Type · Search
     "More Filters"  : Baths · Square Feet · Year Built · Listing Status · Sort By
   The min/max wrapper is unwrapped (display:contents) so every field is an
   independent flex item that can be ordered, sized, and collapsed. The
   "More Filters" toggle (.lc-open on the widget) is wired in lc-results-header.js
   — it reuses the plugin's old "More Search Options" link (no longer navigates).

   NOTE: two .lc-search-top-widget elements exist in this sidebar — a hero-copy
   Custom HTML block and the IDX Search form. Only the form has the fields, so
   these rules no-op on the hero block. The JS toggle scopes per-widget (closest).

   PAIRS WITH ONE WIDGET SETTING (CSS can't do it — the plugin injects an
   inline !important black gradient on the Search button):
     Classic Widgets → "search-results-top" → IDX Search (fmcsearch-3) →
       Search Button Color = #d0a667   ·   Button Shine = None
       Other Fields to Show = List Price, Bedrooms, Bathrooms, Square Feet, Year Built
   ============================================================ */

.lc-search-top-widget{
  --navy:#334376; --gold:#d0a667; --teal:#26a9e1;
  --ink:#33373d; --muted:#6b6f76; --line:#e2e4e8; --field:#fafafb;
}

/* NOTE: the /search HERO (coastal photo band + trimmed copy) lives in the
   sibling snippet "CSS - Search results page top" (lc-results-top.css), together
   with the results-header styling — they belong to the same section. Not here. */

/* responsive guard: the Bricks container is a fixed ~1290px → force it to
   shrink on small screens (keeps the cap + centering on desktop) */
.brxe-container:has(.lc-search-top-widget){
  width:100% !important; max-width:1300px !important; margin-left:auto !important; margin-right:auto !important;
}
.brxe-sidebar.lc-search-top,
.lc-search-top-widget{width:100% !important; max-width:100% !important;}

/* the bar = clean white card */
.lc-search-top-widget .flexmls_connect__search_new{
  width:100% !important; max-width:1180px !important; margin:0 auto !important;
  background:#fff !important; border:1px solid var(--line) !important;
  border-radius:12px !important; padding:16px 20px 14px !important;
  box-shadow:0 6px 22px rgba(0,0,0,.05) !important;
  font-family:'Mulish',sans-serif !important; color:var(--ink) !important;
}

/* kill clutter: "IDX Search" heading + the subtype checkbox dump.
   Sort By is hidden too — it duplicates the results toolbar's Sort dropdown
   right below the bar. (Brad's Lean split listed it under More Filters; left
   out to avoid two competing Sort controls. Delete this line to bring it back
   — it already has an order/size slot in the More Filters set.) */
.lc-search-top-widget .flexmls_connect__search_new_title,
.lc-search-top-widget .flexmls_connect__search_new_subtypes,
.lc-search-top-widget .flexmls_connect__search_new_sort_by{display:none !important;}

/* UNWRAP min/max so its 5 fields become siblings in the form's flex row */
.lc-search-top-widget .flexmls_connect__search_new_min_max{display:contents !important;}
/* hide stray plugin scaffolding that would otherwise take a flex slot */
.lc-search-top-widget form > input,
.lc-search-top-widget form > .query{display:none !important;}

/* form = flex wrap, bottom-aligned so control rows line up.
   Wide column-gap (28px) separates the control groups on row 2 so the
   min/max pairs read as distinct fields instead of one continuous band
   (min↔to↔max inside a pair stay tight at 6px — see min_max_wrapper). */
.lc-search-top-widget form{
  display:flex !important; flex-wrap:wrap !important;
  align-items:flex-end !important; gap:14px 28px !important;
}
.lc-search-top-widget .flexmls_connect__search_field{margin:0 !important;}

/* ---- ORDER + SIZE (2-row default) ----
   Row 1 = Location (grows) + Property Type pills.
   Row 2 = Price · Beds · Baths ............... [More Filters][Search].
   Location's wide flex-basis + Property Type's natural width fill row 1 so
   Price is forced onto row 2 (keeps the default to exactly two rows on desktop).
   More Filters reveals Square Feet · Year Built · Listing Status. */
.lc-search-top-widget .flexmls_connect__search_field:has(.flexmlsLocationSearch){order:1 !important; flex:1 1 420px !important; min-width:0 !important;}
/* min-width gives the 4 pills (~512px) a buffer so "Commercial Sale" never
   wraps to a 2nd line — Property Type otherwise sizes to EXACTLY its content
   (Location grows and eats the slack), leaving the pills at the wrap boundary.
   Reset to 0 at mobile (see the max-width:900 block) so it can go full-width. */
.lc-search-top-widget .flexmls_connect__search_new_property_type{order:2 !important; flex:0 0 auto !important; min-width:528px !important;}
.lc-search-top-widget [data-connect-field="Price"]{order:3 !important; flex:0 0 224px !important;}
.lc-search-top-widget [data-connect-field="Beds"]{order:4 !important; flex:0 0 132px !important;}
.lc-search-top-widget [data-connect-field="Baths"]{order:5 !important; flex:0 0 132px !important;}
.lc-search-top-widget [data-connect-field="Sqft"]{order:6 !important; flex:0 0 200px !important;}
.lc-search-top-widget [data-connect-field="Year"]{order:7 !important; flex:0 0 150px !important;}
.lc-search-top-widget .flexmls_connect__search_new_field_group:not(.flexmls_connect__search_new_property_type):not(.flexmls_connect__search_new_sort_by):not(.flexmls_connect__search_new_min_max){order:8 !important; flex:0 0 auto !important;}
.lc-search-top-widget .flexmls_connect__search_new_sort_by{order:9 !important; flex:0 0 180px !important;}
.lc-search-top-widget .flexmls_connect__search_new_links{order:10 !important; flex:0 0 auto !important; margin-left:auto !important;}

/* ---- COLLAPSIBLE: hide the secondary set until the widget has .lc-open ---- */
.lc-search-top-widget:not(.lc-open) [data-connect-field="Sqft"],
.lc-search-top-widget:not(.lc-open) [data-connect-field="Year"],
.lc-search-top-widget:not(.lc-open) .flexmls_connect__search_new_field_group:not(.flexmls_connect__search_new_property_type):not(.flexmls_connect__search_new_sort_by):not(.flexmls_connect__search_new_min_max),
.lc-search-top-widget:not(.lc-open) .flexmls_connect__search_new_sort_by{display:none !important;}

/* labels / legends */
.lc-search-top-widget .flexmls_connect__search_new_label{
  font-family:'Mulish',sans-serif !important; font-size:11px !important;
  font-weight:700 !important; text-transform:uppercase !important;
  letter-spacing:.6px !important; color:var(--navy) !important;
  margin:0 0 6px !important; padding:0 !important; display:block !important; border:0 !important;
}
.lc-search-top-widget fieldset,
.lc-search-top-widget .flexmls_connect__search_new_field_group{
  border:0 !important; background:transparent !important; padding:0 !important; margin:0 !important;
}
.lc-search-top-widget .flexmls_connect__search_new_field_group br{display:none !important;}

/* min/max pairs (two inputs + "to") */
.lc-search-top-widget .flexmls_connect__min_max_wrapper{display:flex !important; align-items:center !important; gap:6px !important;}
.lc-search-top-widget .flexmls_connect__min_max_wrapper input.text{
  flex:1 1 0 !important; width:100% !important; min-width:0 !important;
  height:46px !important; border:1px solid var(--line) !important; border-radius:8px !important;
  background:var(--field) !important; padding:0 8px !important;
  font-family:'Mulish',sans-serif !important; font-size:13px !important; color:var(--ink) !important;
}
.lc-search-top-widget .flexmls_connect__min_max_wrapper input.text:focus{
  border-color:var(--teal) !important; box-shadow:0 0 0 3px rgba(38,169,225,.12) !important; outline:0 !important;}
.lc-search-top-widget .flexmls_connect__search_new_to{color:var(--muted) !important; font-size:12px !important; flex:0 0 auto !important;}

/* Location (select2 multiple) → forced to a SINGLE horizontal line.
   The plugin's multi-select stacks the city chip + the inline search box onto
   separate rows (85px tall). Pin height to 46px, lay the inner <ul> out as a
   nowrap flex row, and let extra chips scroll horizontally instead of growing. */
.lc-search-top-widget .select2-container{width:100% !important;}
.lc-search-top-widget .select2-container .select2-selection--multiple{
  height:46px !important; min-height:46px !important; box-sizing:border-box !important;
  border:1px solid var(--line) !important; border-radius:8px !important;
  background:var(--field) !important; padding:0 !important; overflow:hidden !important; display:block !important;}
.lc-search-top-widget .select2-selection--multiple .select2-selection__rendered{
  display:flex !important; align-items:center !important; flex-wrap:nowrap !important;
  height:44px !important; margin:0 !important; padding:0 8px !important;
  overflow-x:auto !important; overflow-y:hidden !important; white-space:nowrap !important;
  list-style:none !important;}
.lc-search-top-widget .select2-selection--multiple .select2-selection__choice{
  margin:0 6px 0 0 !important; height:30px !important; display:inline-flex !important; align-items:center !important;
  border:1px solid var(--line) !important; background:#fff !important; border-radius:6px !important;
  padding:0 8px !important; font-size:13px !important; color:var(--ink) !important; flex:0 0 auto !important;}
.lc-search-top-widget .select2-selection--multiple .select2-search--inline{display:inline-flex !important; align-items:center !important; flex:1 1 auto !important;}
.lc-search-top-widget .select2-selection--multiple .select2-search__field{
  height:30px !important; line-height:30px !important; margin:0 !important; padding:0 !important;
  font-family:'Mulish',sans-serif !important; font-size:14px !important;}
.lc-search-top-widget .select2-container--focus .select2-selection--multiple{border-color:var(--teal) !important; box-shadow:0 0 0 3px rgba(38,169,225,.12) !important;}

/* generic select (Sort By) */
.lc-search-top-widget select:not(.flexmlsLocationSearch){
  height:46px !important; width:100% !important; border:1px solid var(--line) !important; border-radius:8px !important;
  background:var(--field) !important; padding:0 34px 0 12px !important;
  font-family:'Mulish',sans-serif !important; font-size:13px !important; color:var(--ink) !important;
  appearance:none !important; -webkit-appearance:none !important; cursor:pointer !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M1.5 4L6 8l4.5-4' stroke='%23334376' stroke-width='1.6' fill='none'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important;}

/* Property Type → chips */
.lc-search-top-widget .flexmls_connect__checkbox_wrapper .flexmls_connect__search_new_checkboxes{
  position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important;}
.lc-search-top-widget .flexmls_connect__checkbox_wrapper{display:inline-flex !important; margin:0 !important;}
.lc-search-top-widget .flexmls_connect__search_new_property_type{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:8px !important;}
.lc-search-top-widget .flexmls_connect__search_new_property_type > legend{flex:0 0 100% !important; float:none !important;}
/* Pill toggle buttons — deliberately NOT textbox-shaped so they don't read as
   empty inputs. Rounded, white with a soft border; filled navy when selected. */
.lc-search-top-widget .flexmls_connect__checkbox_wrapper label{
  display:inline-flex !important; align-items:center !important; height:40px !important;
  padding:0 18px !important; border:1.5px solid #cfd6e4 !important; border-radius:999px !important;
  background:#fff !important; font-family:'Mulish',sans-serif !important;
  font-size:13px !important; font-weight:600 !important; color:var(--navy) !important;
  cursor:pointer !important; margin:0 !important; transition:all .15s ease !important;}
.lc-search-top-widget .flexmls_connect__checkbox_wrapper label:hover{
  border-color:var(--navy) !important; background:rgba(51,67,118,.05) !important;}
.lc-search-top-widget .flexmls_connect__checkbox_wrapper .flexmls_connect__search_new_checkboxes:checked + label{
  background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important;}

/* Listing Status → real inline checkboxes (bare input + text node).
   min-width:0 + max-width defeats the field's phantom min-content width (it
   otherwise computes ~512px and opens a gap before Property Type). */
.lc-search-top-widget .flexmls_connect__search_new_field_group:not(.flexmls_connect__search_new_property_type):not(.flexmls_connect__search_new_sort_by):not(.flexmls_connect__search_new_min_max){
  font-family:'Mulish',sans-serif !important; font-size:14px !important; color:var(--ink) !important;
  white-space:nowrap !important; min-width:0 !important; max-width:240px !important; overflow:hidden !important;}
.lc-search-top-widget .flexmls_connect__search_new_field_group > .flexmls_connect__search_new_checkboxes{
  appearance:auto !important; -webkit-appearance:auto !important; position:static !important; opacity:1 !important;
  width:16px !important; height:16px !important; accent-color:var(--navy) !important; vertical-align:middle !important;
  margin:0 6px 0 0 !important; cursor:pointer !important; display:inline-block !important;}
.lc-search-top-widget .flexmls_connect__search_new_field_group > .flexmls_connect__search_new_checkboxes ~ .flexmls_connect__search_new_checkboxes{margin-left:14px !important;}

/* submit area: More Filters (outlined toggle) + Search (gold from widget).
   justify-content:flex-end pins the two buttons to the RIGHT edge — the links
   container's flex-basis over-computes (renders ~512px, wider than the buttons),
   so without this the buttons float left-of-centre with dead space to their right. */
.lc-search-top-widget .flexmls_connect__search_new_links{display:flex !important; align-items:center !important; gap:10px !important; justify-content:flex-end !important;}
.lc-search-top-widget input[type="submit"].flexmls_connect__search_new_submit{
  height:46px !important; flex:0 0 auto !important; width:auto !important; min-width:120px !important; max-width:170px !important;
  border:0 !important; border-radius:8px !important; font-family:'Montserrat',sans-serif !important;
  font-size:14px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:1px !important;
  cursor:pointer !important; padding:0 20px !important; text-shadow:none !important;}
.lc-search-top-widget .flexmls_connect__search_new_links a{
  height:46px !important; display:inline-flex !important; align-items:center !important; gap:6px !important;
  padding:0 16px !important; border:1.5px solid var(--navy) !important; border-radius:8px !important;
  background:#fff !important; color:var(--navy) !important; font-family:'Montserrat',sans-serif !important;
  font-size:13px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:.2px !important;
  text-decoration:none !important; white-space:nowrap !important; cursor:pointer !important;}
.lc-search-top-widget .flexmls_connect__search_new_links a:hover{background:rgba(51,67,118,.06) !important;}
/* caret rotates when open */
.lc-search-top-widget .flexmls_connect__search_new_links a .lc-caret{transition:transform .15s ease !important; display:inline-block !important;}
.lc-search-top-widget.lc-open .flexmls_connect__search_new_links a .lc-caret{transform:rotate(180deg) !important;}

/* ≤1024: buttons drop to their OWN full-width row (right-aligned) so they can
   never crowd or run past the filters as the bar narrows. */
@media (max-width:1024px){
  .lc-search-top-widget .flexmls_connect__search_new_links{
    flex:1 1 100% !important; width:100% !important; margin-left:0 !important;
    justify-content:flex-end !important;}
}
@media (max-width:900px){
  .lc-search-top-widget [data-connect-field="Price"],
  .lc-search-top-widget [data-connect-field="Sqft"]{flex:1 1 150px !important;}
  .lc-search-top-widget [data-connect-field="Beds"],
  .lc-search-top-widget [data-connect-field="Baths"],
  .lc-search-top-widget [data-connect-field="Year"]{flex:1 1 120px !important;}
  .lc-search-top-widget .flexmls_connect__search_new_property_type{flex:1 1 100% !important; min-width:0 !important;}
}
@media (max-width:560px){
  .lc-search-top-widget .flexmls_connect__search_field:has(.flexmlsLocationSearch){flex:1 1 100% !important;}
  .lc-search-top-widget [data-connect-field="Price"],
  .lc-search-top-widget [data-connect-field="Beds"],
  .lc-search-top-widget [data-connect-field="Baths"],
  .lc-search-top-widget [data-connect-field="Sqft"],
  .lc-search-top-widget [data-connect-field="Year"]{flex:1 1 46% !important;}
  /* phone: the two buttons fill the row as equal, easy-to-tap targets */
  .lc-search-top-widget .flexmls_connect__search_new_links{justify-content:stretch !important;}
  .lc-search-top-widget .flexmls_connect__search_new_links a,
  .lc-search-top-widget input[type="submit"].flexmls_connect__search_new_submit{flex:1 1 0 !important; max-width:none !important;}
}