/* browse-filterbar.css — split from browse.css (lines 1-31), 2026-08-17.
   filter bar + its date-search grid variant (.filter-bar.has-dates, .fb-*)
   LOAD ORDER IS LOAD-BEARING. Link in this exact sequence, after nothing and
   before the engine-*.css layer:
     browse-filterbar.css -> browse-datepicker.css -> browse-guests.css -> browse-map.css -> browse-cards.css -> browse-detail.css
   Slices are CONTIGUOUS: rule order is unchanged from browse.css, so the cascade is
   equivalent by construction. Some selectors are redefined in a later module on
   purpose — do not reorder, and do not "tidy" rules between files.
   browse.css itself is UNTOUCHED on disk and still serves the other 17 pages. */
/* browse.css — shared styles for the property browse grid (browse.js).
 * Extracted from vacation-rentals.html so book.simplyhome.us's guest index and the
 * main-site browse share one look. Depends on shared.css design tokens.
 * (vacation-rentals.html still carries its own inline copy for now; dedupe later.) */

/* FILTER BAR */
.filter-bar { position:sticky; top:82px; z-index:50; background:rgba(5,29,64,0.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; padding:1.2rem 4vw; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.filter-label { font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--sage); white-space:nowrap; margin-right:0.25rem; }
.filter-btn { padding:0.5rem 1.05rem; border:1px solid var(--gold-line); background:transparent; color:var(--sage); font-size:0.78rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; cursor:pointer; transition:all 0.18s; font-family:var(--body); white-space:nowrap; border-radius:999px; }
.filter-btn:hover, .filter-btn.active { border-color:var(--gold); color:var(--parchment); background:rgba(201,169,110,0.1); }
.filter-right { margin-left:auto; display:flex; align-items:center; gap:0.75rem; }
.filter-count { font-size:0.76rem; color:var(--sage); white-space:nowrap; }

/* FILTER BAR, DATE-SEARCH VARIANT (.filter-bar.has-dates) — the ONE grouped
   sticky bar from vacation-rentals.html (Elec's 2026-07-26 spec, ported for the
   guest booking home): labels row on top ("Stay dates" far left · "Amenities
   filter" above the All button · the count at the right end), controls row
   beneath (date box on the same line as the chips). Mobile stacks. */
.filter-bar.has-dates { display:grid; grid-template-columns:auto 1fr; column-gap:1.5rem; row-gap:0.55rem; align-items:center; padding:1rem 4vw 1.1rem; }
.fb-datelabel { grid-column:1; grid-row:1; }
.fb-labelrow { grid-column:2; grid-row:1; display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; }
.fb-datecell { grid-column:1; grid-row:2; display:flex; align-items:center; gap:0.6rem; }
.fb-chips { grid-column:2; grid-row:2; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }

/* ONE-DROPDOWN DATE-RANGE PICKER (dr-*) — flyout v2 (2026-07-30, Elec: "sleek and
   elegant… mini super modal calendar fly out"). Desktop: two-month spread anchored
   to the field, dimming veil behind. Mobile: centered modal. Range endpoints are
   gold circles, the span a soft band, today gets a dot, and hovering a checkout
   date previews the span (.pre, set by browse.js). Entrance animations are killed
   by shared.css's global prefers-reduced-motion block. */