/* ══════════════════════════════════════════════════════
   BRG FILTER v6
   i-mad measurements used verbatim.
══════════════════════════════════════════════════════ */
.bsf {
  --pill-bg:   rgb(230,230,230);
  --pill-fg:   rgb(26,26,26);
  --pill-on:   rgb(152,152,152);
  --pill-set:  rgb(207,207,207);
  --pill-on-fg:#fff;
  --glass:     rgba(1,1,1,0.4);
  --blur:      blur(20px);
  --off:       rgba(255,255,255,0.5);
  --on:        rgb(255,255,255);
  /* i-mad item transition: 0.15s cubic-bezier(0.4,0,0.2,1) */
  --dur:       0.15s;
  --ease:      cubic-bezier(0.4,0,0.2,1);
  /* Glass fade: 0.3s — same as i-mad pill transition-all duration-300 */
  --glass-dur: 0.3s;
  --sans: 'Neue Montreal',-apple-system,'Helvetica Neue',sans-serif;
}
.bsf { width:100%; display:flex; flex-direction:column; align-items:flex-start; position:relative; padding:0 30px; }

/* ── Filter bar — left-aligned under the portfolio title ── */
.bsf-bar { display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; }

/* ── Pill ──────────────────────────── */
.bsf-pill { position:relative; }
.bsf-pill__btn {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.2em;
  color:#1d1d1b; background:transparent;
  border:1px solid rgba(29,29,27,.16); border-radius:0;
  padding:14px 22px; line-height:12px;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.bsf-pill__btn:hover              { background:#fff; border-color:#1d1d1b; }
.bsf-pill--set  .bsf-pill__btn   { background:transparent; color:#1d1d1b; border-color:#1d1d1b; }
.bsf-pill--open .bsf-pill__btn   { background:#fff; color:#1d1d1b; border-color:#1d1d1b; }

/* ── +/− icon ─────────────────────────
   overflow:hidden clips the two SVGs.
   --p = plus (visible when closed)
   --m = minus (visible when open)
   Each slides vertically in/out.
   ─────────────────────────────────── */
.bsf-ico {
  display:flex; align-items:center; justify-content:center;
  width:12px; height:12px; overflow:hidden; flex-shrink:0; position:relative;
}
.bsf-ico-p,.bsf-ico-m {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s var(--ease);
}
.bsf-ico-p { opacity:0.65; }
.bsf-ico-m { transform:translate(-50%,150%); opacity:0; }

.bsf-pill--open .bsf-ico-p { transform:translate(-50%,-150%); opacity:0; }
.bsf-pill--open .bsf-ico-m { transform:translate(-50%,-50%);  opacity:0.9; }

/* ══════════════════════════════════════
   DARK GLASS DROPDOWN
   i-mad architecture exactly:
   .bsf-dd          — position:absolute, scale(0.96)→scale(1) + opacity 0→1
                      transform-origin:top left (window grows from anchor)
   .bsf-dd__glass   — absolute fill, bg+blur, fades opacity 0→1 on open
   .bsf-dd__inner   — relative z:1, flex column
   .bsf-dd__scroll  — scrollable content

   The "window materialising" effect:
   - Wrapper: opacity + scale, ease-out 0.4s, origin top-left
   - Glass: opacity only, ease-out 0.2s (slightly faster so blur appears first)
   - Price panel uses transform-origin:top center + translateX(-50%) composed
   - Mobile overrides to translateY slide (no scale on full-width)
══════════════════════════════════════ */
.bsf-dd {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:200px;
  z-index:400;
  /* Window reveal: scale from top-left only — opacity is handled by the glass child
     so backdrop-filter renders at full strength before it becomes visible.
     Close is deliberately quicker than open (.22s vs .4s) and the content
     fades with it — text never outlives the glass. */
  transform-origin:top left;
  opacity:1;
  transform:scale(0.96);
  pointer-events:none;
  transition:transform 0.22s cubic-bezier(0.4,0,1,1),
             visibility 0s linear 0.22s;
  visibility:hidden;
}
.bsf-pill--open .bsf-dd {
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
  visibility:visible;
  transition:transform 0.4s cubic-bezier(0,0,0.2,1),
             visibility 0s linear 0s;
}

/* Location: wider */
.bsf-dd--loc { min-width:280px; }

/* Price: centred under pill — transform-origin and translateX must compose */
.bsf-dd--price {
  min-width:300px;
  left:50%;
  transform-origin:top center;
  /* --bsf-dx: set by search-form.js when the centred panel would leave the
     screen (price pill near the right edge, e.g. iPad mini portrait) */
  transform:translateX(calc(-50% + var(--bsf-dx, 0px))) scale(0.96);
}
.bsf-pill--open .bsf-dd--price {
  transform:translateX(calc(-50% + var(--bsf-dx, 0px))) scale(1);
}

/* Glass — backdrop-filter has NO transition so it renders immediately.
   Only opacity animates, which avoids the "dark overlay arrives, blur pops in" flash. */
.bsf-dd__glass {
  position:absolute; inset:0;
  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  z-index:0;
  opacity:0;
  transition: opacity 0.18s ease; /* close: out with the content */
}
.bsf-pill--open .bsf-dd .bsf-dd__glass { transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
/* Content fades out quickly on close, in gently on open */
.bsf-dd__inner { opacity:0; transition:opacity 0.16s ease; }
.bsf-pill--open .bsf-dd__inner { opacity:1; transition:opacity 0.28s ease 0.04s; }
.bsf-pill--open .bsf-dd__glass { opacity:1; }

/* Inner layout */
.bsf-dd__inner { position:relative; z-index:1; display:flex; flex-direction:column; }

/* Mobile close bar — desktop: hidden */
.bsf-mbar {
  display:none; align-items:center; justify-content:space-between;
  padding:12px 16px 8px; border-bottom:1px solid rgba(255,255,255,0.07);
}
.bsf-mbar__title {
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.4);
}
.bsf-mbar__close {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,0.45); padding:4px; display:flex;
  transition:color var(--dur);
  -webkit-tap-highlight-color:transparent;
}
.bsf-mbar__close:hover { color:#fff; }

/* Scroll area */
.bsf-dd__scroll {
  padding:6px 0 8px; max-height:480px;
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.bsf-dd__scroll::-webkit-scrollbar { width:2px; }
.bsf-dd__scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); }

/* Group headings */
.bsf-dd__hd {
  font-family:var(--sans); font-size:9px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.25); padding:10px 16px 3px; margin:0;
}
.bsf-dd__hd--mt { margin-top:2px; border-top:1px solid rgba(255,255,255,0.07); padding-top:10px; }

/* ══════════════════════════════════════
   DROPDOWN ITEMS — exact i-mad behaviour

   STRUCTURE: <button><span.bsf-dot/><span.bsf-dd__txt/></button>
   Dot is BEFORE the text, absolute-left, exactly like i-mad's
   "absolute left-0 -translate-x-[12.5px]" pattern.

   DEFAULT:  text rgba(255,255,255,0.5), dot opacity:0
   HOVER:    text rgb(255,255,255) only — dot stays hidden
   SELECTED (.bsf-on): text rgb(255,255,255) + dot opacity:1

   This matches i-mad exactly. The dot on hover in i-mad is
   group-hover:opacity-100 — but for our site, we show the dot
   persistently on selection only, which is cleaner UX.
══════════════════════════════════════ */
.bsf-dd__item {
  display:flex; align-items:center;
  width:100%; text-align:left;
  font-family:var(--sans); font-size:16px; font-weight:400;
  /* i-mad: py-1.5 = 6px, no horizontal padding (added by grid p-6 in i-mad) */
  padding:6px 16px 6px 28px;  /* 28px left = 16px + 12px dot space */
  color:var(--off);
  background:none; border:none; cursor:pointer; position:relative;
  transition:color var(--dur) var(--ease);
  line-height:1.2;
}
/* Hover: text goes white, nothing else */
.bsf-dd__item:hover { color:var(--on); }

/* Dot: 5×5 white circle, absolute left, initially hidden */
.bsf-dot {
  position:absolute;
  left:16px;
  top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:9999px;
  background:#fff; opacity:0;
  transition:opacity var(--dur) var(--ease);
  flex-shrink:0;
}
/* Selected: white text + dot appears */
.bsf-dd__item.bsf-on         { color:var(--on); }
.bsf-dd__item.bsf-on .bsf-dot { opacity:1; }

/* ── Hierarchy levels — country anchors, indented children ──
   lvl0 = country: brighter, medium weight, hairline separator above
   lvl1 = city/district: indented one step
   lvl2 = Riviera city: indented two steps                       */
.bsf-dd__item.bsf-lvl0 { font-weight:500; color:rgba(255,255,255,0.78); }
.bsf-dd__item.bsf-lvl0:hover, .bsf-dd__item.bsf-lvl0.bsf-on { color:var(--on); }
.bsf-dd__item.bsf-lvl0:not(:first-child) {
  margin-top:6px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.07);
}
/* Separator rows carry 6px extra top padding, shifting the text centre
   3px below the row's 50% — nudge the dot to stay on the text line */
.bsf-dd__item.bsf-lvl0:not(:first-child) .bsf-dot { top:calc(50% + 3px); }
.bsf-dd__item.bsf-lvl1 { padding-left:44px; }
.bsf-dd__item.bsf-lvl1 .bsf-dot { left:32px; }
.bsf-dd__item.bsf-lvl2 { padding-left:60px; }
.bsf-dd__item.bsf-lvl2 .bsf-dot { left:48px; }

/* Price panel presets share the same item style */
.bsf-preset {
  display:block; width:100%; text-align:left;
  font-family:var(--sans); font-size:16px; font-weight:400;
  padding:6px 16px; color:var(--off);
  background:none; border:none; cursor:pointer;
  transition:color var(--dur) var(--ease); line-height:1.2;
}
.bsf-preset:hover  { color:var(--on); }
.bsf-preset.bsf-on { color:var(--on); }

/* Price inputs */
.bsf-rule  { height:1px; background:rgba(255,255,255,0.08); margin:6px 12px; }
.bsf-price-row { display:flex; align-items:flex-end; gap:8px; padding:6px 12px 4px; }
.bsf-price-field { flex:1; display:flex; flex-direction:column; gap:5px; }
.bsf-price-lbl { font-family:var(--sans); font-size:9px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.25); }
.bsf-price-wrap { display:flex; align-items:center; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03); transition:border-color var(--dur); }
.bsf-price-wrap:focus-within { border-color:rgba(255,255,255,0.35); }
.bsf-price-sym { font-family:var(--sans); font-size:13px; color:rgba(255,255,255,0.3); padding:0 4px 0 8px; flex-shrink:0; }
.bsf-price-input { width:100%; background:none; border:none; outline:none; font-family:var(--sans); font-size:16px; color:rgba(255,255,255,0.85); padding:8px 8px 8px 0; -moz-appearance:textfield; } /* 16px stops iOS Safari zooming the page on focus */
.bsf-price-input::-webkit-inner-spin-button,.bsf-price-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.bsf-price-input::placeholder { color:rgba(255,255,255,0.15); font-size:12px; }
.bsf-price-dash { font-size:13px; color:rgba(255,255,255,0.15); padding-bottom:8px; flex-shrink:0; }
.bsf-apply { display:block; width:calc(100% - 24px); margin:8px 12px 10px; padding:9px; font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:rgb(26,26,26); background:rgba(255,255,255,0.88); border:none; cursor:pointer; transition:background var(--dur); }
.bsf-apply:hover { background:#fff; }

/* ── Dropdown item stagger — items cascade in with the panel ── */
@keyframes bsfItemIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.bsf-pill--open .bsf-dd__scroll > .bsf-dd__item,
.bsf-pill--open .bsf-dd__scroll > .bsf-preset,
.bsf-pill--open .bsf-dd__scroll > .bsf-dd__hd {
  animation: bsfItemIn .38s cubic-bezier(0.16,1,0.3,1) backwards;
}
.bsf-pill--open .bsf-dd__scroll > *:nth-child(1) { animation-delay: 20ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(2) { animation-delay: 40ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(3) { animation-delay: 60ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(4) { animation-delay: 80ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(5) { animation-delay: 100ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(6) { animation-delay: 120ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(7) { animation-delay: 140ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(8) { animation-delay: 160ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(9) { animation-delay: 180ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(10) { animation-delay: 200ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(11) { animation-delay: 220ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(12) { animation-delay: 240ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(13) { animation-delay: 260ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(14) { animation-delay: 280ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(15) { animation-delay: 300ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(16) { animation-delay: 320ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(17) { animation-delay: 340ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(18) { animation-delay: 360ms; }
.bsf-pill--open .bsf-dd__scroll > *:nth-child(n+19) { animation-delay: 380ms; }
@media (prefers-reduced-motion: reduce) {
  .bsf-pill--open .bsf-dd__scroll > * { animation: none !important; }
}

/* ── Dark apply pill ───────────────── */
.bsf-go {
  display:inline-flex; align-items:center;
  font-family:var(--sans); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.2em;
  color:#fff; background:#1d1d1b;
  border:1px solid #1d1d1b; border-radius:0;
  padding:14px 26px; line-height:12px;
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.bsf-go:hover { background:#000; }
@media (max-width:640px) { .bsf-go { padding:9px 18px; } }

/* ── Active tags ───────────────────── */
.bsf-active { display:flex; align-items:center; gap:8px; margin-top:0.9rem; flex-wrap:wrap; justify-content:flex-start; width:100%; }
.bsf-tags { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-start; }
.bsf-tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:#1d1d1b; background:#fff; border:1px solid rgba(29,29,27,.16); padding:6px 8px 6px 12px; transition:border-color 0.25s; animation:bsf-in 0.18s cubic-bezier(0.16,1,0.3,1) both; }
.bsf-tag:hover { border-color:#1d1d1b; }
@keyframes bsf-in { from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:translateY(0)} }
.bsf-tag__x { background:none; border:none; padding:0; cursor:pointer; color:#1d1d1b; opacity:0.35; font-size:14px; line-height:1; transition:opacity 0.12s; }
.bsf-tag__x:hover { opacity:1; }
.bsf-clear { font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:#6b6b68; background:none; border:none; cursor:pointer; text-decoration:none; order:-1; margin-right:10px; padding:6px 10px 6px 0; flex-shrink:0; transition:color 0.13s; }
.bsf-clear:hover { color:#1d1d1b; }

/* ── Scrim ─────────────────────────── */
.bsf-scrim { display:none; position:fixed; inset:0; z-index:99; }
.bsf-scrim--on { display:block; }

/* ════════════════════════════════════
   MOBILE ≤ 640px — slide DOWN from top
════════════════════════════════════ */
@media (max-width:640px) {
  .bsf-bar   { gap:5px; }
  .bsf-pill__btn { font-size:11px; padding:9px 13px; gap:8px; }

  /* Full-width bottom sheet — position is independent of the
     variable-height portfolio title above the filter bar */
  .bsf-dd {
    position:fixed!important;
    top:auto!important; bottom:0!important; left:0!important; right:0!important;
    width:100%!important; min-width:unset!important;
    transform-origin:bottom center!important;
    opacity:0;
    transform:translateY(8px) scale(1)!important;
    transition:opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
  }
  .bsf-pill--open .bsf-dd {
    opacity:1; transform:translateY(0) scale(1)!important;
    transition:opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0s;
  }
  /* Price on mobile same as others */
  .bsf-dd--price { left:0!important; transform:translateY(8px) scale(1)!important; }
  .bsf-pill--open .bsf-dd--price { transform:translateY(0) scale(1)!important; }

  /* Show mobile close bar */
  .bsf-mbar { display:flex; }

  .bsf-dd__scroll { max-height:55vh; padding-bottom:max(env(safe-area-inset-bottom,16px),16px); }
  .bsf-price-row  { flex-direction:column; gap:10px; }
  .bsf-price-dash { display:none; }
  .bsf-scrim--on  { background:rgba(0,0,0,0.25); }
}





/* ══ BRG DARK THEME — generated, additive; see header.php tokens ══ */

/* ──────────────────────────────────────────────────────────────────────────
   Every rule below is ADDITIVE and scoped to :where(:root[data-theme="dark"]).
   Nothing above this marker was modified, so light mode renders exactly as it
   did before dark mode existed.

   :where() contributes ZERO specificity on purpose. These rules therefore tie
   with the light-mode rules they shadow and win only on source order — which
   means a page template loading after header.php can still override them (that
   is what keeps the photo-hero nav white and transparent).
   ────────────────────────────────────────────────────────────────────────── */
:where(:root[data-theme="dark"]) .bsf-pill__btn{color:var(--ink);border:1px solid rgba(255,255,255,.16)}
:where(:root[data-theme="dark"]) .bsf-pill__btn:hover{background:var(--surface-2);border-color:var(--ink)}
:where(:root[data-theme="dark"]) .bsf-pill--set  .bsf-pill__btn{color:var(--ink);border-color:var(--ink)}
:where(:root[data-theme="dark"]) .bsf-pill--open .bsf-pill__btn{background:var(--surface-2);color:var(--ink);border-color:var(--ink)}
:where(:root[data-theme="dark"]) .bsf-dot{background:var(--surface-2)}
:where(:root[data-theme="dark"]) .bsf-apply{color:var(--ink)}
:where(:root[data-theme="dark"]) .bsf-apply:hover{background:var(--surface)}
:where(:root[data-theme="dark"]) .bsf-tag{color:var(--ink);background:var(--surface);border:1px solid rgba(255,255,255,.16)}
:where(:root[data-theme="dark"]) .bsf-tag:hover{border-color:var(--hair-strong)}
:where(:root[data-theme="dark"]) .bsf-tag__x{color:var(--ink)}
:where(:root[data-theme="dark"]) .bsf-clear{color:var(--ink-2)}
:where(:root[data-theme="dark"]) .bsf-clear:hover{color:var(--ink)}
/* ══ end BRG DARK THEME ══ */

/* Results updating in place (search-form.js): the current cards dim while
   the new ones load, then the list cross-fades */
#house-loop { transition: opacity .3s ease }
#house-loop.bsf-loading { opacity: .45 }
@media (prefers-reduced-motion: reduce) { #house-loop { transition: none } }