/* ══════════ SHORTLIST — heart, fab, drawer ══════════ */
.brg-fav{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(15,26,46,.34);border:none;border-radius:50%;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .35s ease,transform .35s cubic-bezier(.34,1.65,.64,1);
  -webkit-tap-highlight-color:transparent}
.brg-fav:hover{background:rgba(15,26,46,.55);transform:scale(1.08)}
.brg-fav svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.6;transition:fill .3s ease,stroke .3s ease}
.brg-fav[aria-pressed="true"] svg{fill:var(--gold,#B8965A);stroke:var(--gold,#B8965A)}
.brg-fav.brg-fav-pop svg{animation:brgFavPop .45s cubic-bezier(.34,1.65,.64,1)}
@keyframes brgFavPop{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}
.prop-card-img{position:relative}

/* Inline variant — sits in the flow beside a price instead of over a photo.
   The button itself never scales: cards clip at their edge (overflow:hidden
   + zero side padding on .prop-body), so the glyph animates instead. */
.brg-fav.brg-fav-inline{position:static;width:34px;height:34px;flex:none;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.brg-fav.brg-fav-inline:hover{background:rgba(184,150,90,.12);transform:none}
.brg-fav.brg-fav-inline svg{width:18px;height:18px;stroke:var(--gold,#B8965A);
  transition:fill .3s ease,stroke .3s ease,transform .35s cubic-bezier(.34,1.65,.64,1)}
.brg-fav.brg-fav-inline:hover svg{transform:scale(1.12)}

/* Inline save button (single property actions row) */
#brg-sp-fav[aria-pressed="true"]{background:#1d1d1b;color:#fff}

/* Floating button — stacked directly above the WhatsApp float (.wa-float,
   footer.php: 54px @ 32/32 desktop, 48px @ 20/20 mobile), same right edge.
   Translucent navy glass; fades and rises in when the first save happens. */
/* --brg-cb-h is the live cookie-banner height (include/cookie-banner.php), 0px when absent */
#brg-fav-fab{position:fixed;right:32px;bottom:calc(98px + env(safe-area-inset-bottom,0px) + var(--brg-cb-h,0px));z-index:70;
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.16);cursor:pointer;
  background:rgba(27,42,74,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 14px 34px -12px rgba(15,26,46,.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);
  /* The lift carries a 70ms delay so this trails the WhatsApp float rather
     than moving in lockstep — reads as one choreographed lift.
     `translate` is the live one on any current engine (compositor-only, no
     relayout of this backdrop-filter glass); `bottom` is the pre-2022
     fallback. include/cookie-banner.php decides which via @supports, and
     zeroes the other, so listing both here is safe — only one can move.
     Both must appear in BOTH transition lists: the .on rule below restates
     the shorthand, and while it omitted them the FAB jumped instead of
     lifting in the only state where it is actually visible. */
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,bottom .62s cubic-bezier(.22,1,.36,1) .07s,translate .62s cubic-bezier(.22,1,.36,1) .07s,visibility 0s .6s}
#brg-fav-fab.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,bottom .62s cubic-bezier(.22,1,.36,1) .07s,translate .62s cubic-bezier(.22,1,.36,1) .07s,visibility 0s 0s}
/* Lift, not scale: scaling a backdrop-filter layer clips its edge in
   Chrome/Safari (the glass rasterizes at the pre-scale size). */
#brg-fav-fab.on:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(15,26,46,.62)}
@media(prefers-reduced-motion:reduce){#brg-fav-fab{transition:opacity .3s ease,visibility 0s;transform:none}}
#brg-fav-fab svg{width:20px;height:20px;fill:var(--gold,#B8965A);stroke:var(--gold,#B8965A);stroke-width:1.4}
#brg-fav-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold,#B8965A);color:#fff;border-radius:10px;
  font-family:var(--sans,'Neue Montreal',sans-serif);font-size:.62rem;font-weight:500;letter-spacing:.02em}
@media(max-width:600px){#brg-fav-fab{right:20px;bottom:calc(80px + env(safe-area-inset-bottom,0px) + var(--brg-cb-h,0px))}}
/* Property pages ≤767px: wa-float is hidden and the sticky action bar owns
   the bottom edge — sit just above the bar instead. The bar itself lifts by
   --brg-cb-h too, so this stacks on top of the lifted bar. */
@media(max-width:767px){body.single-property #brg-fav-fab{right:20px;bottom:calc(74px + env(safe-area-inset-bottom,0px) + var(--brg-cb-h,0px))}}

/* Drawer */
/* Above the fixed site nav (z-index:100, header.php), below the mobile menu (200) */
#brg-fav-scrim{position:fixed;inset:0;z-index:130;background:rgba(15,26,46,.4);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
#brg-fav-drawer{position:fixed;top:0;right:0;bottom:0;z-index:131;width:min(400px,92vw);
  background:var(--cream,#F9F6F1);box-shadow:-24px 0 60px -30px rgba(15,26,46,.4);
  display:flex;flex-direction:column;
  transform:translateX(105%);visibility:hidden;
  /* Hidden once it has slid out: a closed drawer must not paint its shadow
     onto the page edge or widen the page on narrow phones (review R-02) */
  transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s .5s}
body.brg-fav-open #brg-fav-scrim{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s 0s}
body.brg-fav-open #brg-fav-drawer{transform:translateX(0);visibility:visible;transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s 0s}
.brg-fav-head{display:flex;align-items:center;justify-content:space-between;
  padding:26px 26px 20px;border-bottom:1px solid rgba(29,29,27,.12)}
.brg-fav-head h3{margin:0;font-family:var(--serif,'ABC Arizona',Georgia,serif);font-weight:300;
  font-size:1.35rem;letter-spacing:-.01em;color:#1d1d1b}
.brg-fav-x{width:36px;height:36px;border:1px solid rgba(29,29,27,.2);border-radius:50%;
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,border-color .3s ease}
.brg-fav-x:hover{background:#1d1d1b;border-color:#1d1d1b}
.brg-fav-x svg{width:13px;height:13px;stroke:#1d1d1b;stroke-width:1.6;transition:stroke .3s ease}
.brg-fav-x:hover svg{stroke:#fff}
.brg-fav-list{flex:1;overflow-y:auto;padding:8px 0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.brg-fav-row{display:grid;grid-template-columns:86px 1fr auto;gap:16px;align-items:center;
  padding:16px 26px;border-bottom:1px solid rgba(29,29,27,.08);text-decoration:none}
.brg-fav-row:hover{background:rgba(184,150,90,.06)}
.brg-fav-row img{width:86px;height:62px;object-fit:cover;border-radius:4px;background:#EDE8DF}
.brg-fav-t{font-family:var(--serif,'ABC Arizona',Georgia,serif);font-weight:300;font-size:.95rem;
  line-height:1.3;color:#1d1d1b;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.brg-fav-m{display:block;font-family:var(--sans,'Neue Montreal',sans-serif);font-size:.56rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:#9a9a96;margin-bottom:7px}
.brg-fav-p{display:block;font-family:var(--sans,'Neue Montreal',sans-serif);font-size:.92rem;font-weight:400;
  letter-spacing:.02em;color:#1d1d1b}
.brg-fav-del{width:30px;height:30px;border:none;background:transparent;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .3s ease}
.brg-fav-del:hover{background:rgba(29,29,27,.08)}
.brg-fav-del svg{width:12px;height:12px;stroke:#9a9a96;stroke-width:1.6}
.brg-fav-del:hover svg{stroke:#1d1d1b}
.brg-fav-empty{padding:48px 32px;text-align:center;
  font-family:var(--sans,'Neue Montreal',sans-serif);font-size:.85rem;line-height:1.7;color:#9a9a96}
@media(prefers-reduced-motion:reduce){
  #brg-fav-drawer,#brg-fav-scrim,#brg-fav-fab,.brg-fav{transition:none}
  .brg-fav.brg-fav-pop svg{animation:none}
}





/* ══ 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"]) #brg-fav-fab{box-shadow:0 14px 34px -12px rgba(0,0,0,0.85)}
:where(:root[data-theme="dark"]) #brg-fav-fab.on:hover{box-shadow:0 20px 40px -12px rgba(0,0,0,1.00)}
:where(:root[data-theme="dark"]) #brg-fav-count{color:var(--on-accent)}
:where(:root[data-theme="dark"]) #brg-fav-drawer{box-shadow:-24px 0 60px -30px rgba(0,0,0,0.68)}
:where(:root[data-theme="dark"]) .brg-fav-head{border-bottom:1px solid rgba(255,255,255,.12)}
:where(:root[data-theme="dark"]) .brg-fav-head h3{color:var(--ink)}
:where(:root[data-theme="dark"]) .brg-fav-x{border:1px solid rgba(255,255,255,.2)}
:where(:root[data-theme="dark"]) .brg-fav-x svg{stroke:var(--ink)}
:where(:root[data-theme="dark"]) .brg-fav-row{border-bottom:1px solid rgba(255,255,255,.08)}
:where(:root[data-theme="dark"]) .brg-fav-row img{background:var(--surface-1)}
:where(:root[data-theme="dark"]) .brg-fav-t{color:var(--ink)}
:where(:root[data-theme="dark"]) .brg-fav-m{color:var(--ink-3)}
:where(:root[data-theme="dark"]) .brg-fav-p{color:var(--ink)}
:where(:root[data-theme="dark"]) .brg-fav-del svg{stroke:var(--ink-3)}
:where(:root[data-theme="dark"]) .brg-fav-del:hover svg{stroke:var(--ink)}
:where(:root[data-theme="dark"]) .brg-fav-empty{color:var(--ink-3)}
/* ══ end BRG DARK THEME ══ */