/* A fallback that occupies exactly the space Poppins will.

   Poppins is 13% wider and 30% taller in the line box than the system
   fallback at the same font-size. So when the web font swapped in, every
   block of text grew and pushed the page down — on search.html the filter bar
   gained 12px and shoved <main> with it, which Lighthouse attributed as a
   0.127 layout shift against a 0.1 budget for the whole page.

   The overrides below stretch the fallback's metrics to match Poppins:
   size-adjust for width, ascent/descent/line-gap for the line box. Measured
   from both fonts at 100px — Poppins 1402x150, Arial 1240x115 — so the
   fallback now renders in the same box and the swap moves nothing.

   This is why the font stack lists it between Poppins and the generics. */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 113.13%;
  ascent-override: 92.8%;
  descent-override: 30.9%;
  line-gap-override: 8.8%;
}

/* ============ Real Living mobile app ============ */
:root {
  --orange: #ec0712;
  --orange-deep: #ec0712;
  /* Red TEXT only; fills stay #ec0712. See the note in css/site.css.
     index.html and app.html load this file without site.css, so the token
     has to exist here too or every red text rule resolves to nothing. */
  --red-text: #d40610;
  --orange-glow: #ff444d;
  --orange-soft: #fdedee;
  --ink: #17171b;
  --ink-2: #3c3c44;
  --muted: #8a8a93;
  --line: #ececf1;
  --bg: #fafafc;
  --white: #ffffff;
  --green: #2fae63;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --nav-h: 76px;
  --shadow-card: 0 18px 44px rgba(23, 23, 27, 0.16);
  --shadow-soft: 0 8px 24px rgba(23, 23, 27, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  /* Belt-and-suspenders against sideways panning/rubber-banding on real
     phones: restrict native touch gestures to vertical scrolling only,
     regardless of any element's computed width. */
  touch-action: pan-y;
}
body {
  font-family: "Poppins", "Poppins Fallback", -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: none;
  user-select: none;
}
img { display: block; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

#phone {
  position: relative;
  max-width: 460px;
  height: 100%;
  height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- logo wordmark ---------- */
.wordmark-img { display: inline-block; vertical-align: middle; }

/* ---------- signup ---------- */
#signup {
  position: absolute; inset: 0; z-index: 60;
  background: linear-gradient(168deg, var(--orange-glow) -18%, var(--orange) 42%, var(--orange-deep) 110%);
  color: var(--white);
  display: flex; flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) 26px 34px;
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.5s ease;
}
#signup.dismissed { transform: translateY(-104%); opacity: 0.4; pointer-events: none; }
.signup-logo { font-size: 34px; }
.orbit {
  position: relative; flex: 0 0 auto;
  height: 240px; margin: 8px 0 4px;
}
.orbit .ring {
  position: absolute; left: 50%; top: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit .avatar {
  position: absolute; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  animation: bob 5s ease-in-out infinite;
}
.orbit .avatar img { width: 100%; height: 100%; object-fit: cover; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.signup-copy h1 {
  font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em;
}
.signup-copy h1 .hl { background: var(--white); color: var(--orange); border-radius: 10px; padding: 0 10px; display: inline-block; }
.signup-copy p { margin-top: 14px; font-size: 14px; opacity: 0.86; font-weight: 400; max-width: 30ch; }

.signup-actions { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.signup-input {
  width: 100%; border: 0; outline: 0; border-radius: 16px;
  background: rgba(255, 255, 255, 0.16); color: var(--white);
  padding: 16px 18px; font: inherit; font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.signup-input::placeholder { color: rgba(255, 255, 255, 0.75); }
.btn-start {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--white); color: var(--ink);
  border-radius: 16px; padding: 17px 20px;
  font-weight: 600; font-size: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease;
}
.btn-start:active { transform: scale(0.97); }
.signin-link {
  display: block; width: 100%; text-align: center; margin-top: 16px;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.8);
}
.signin-link b { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.legal-note {
  margin-top: 14px; text-align: center; font-size: 10.5px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}
.legal-note a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- onboarding (intro + setup) ---------- */
.onboard {
  position: absolute; inset: 0; z-index: 61;
  background: var(--white);
  display: flex; flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.6, 0, 0.3, 1);
  overflow: hidden;
}
.onboard.ob-open { transform: translateX(0); }
#setup { z-index: 62; }

.ob-head { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-bottom: 6px; }
.ob-logo { font-size: 24px; }
.ob-back {
  width: 40px; height: 40px; border-radius: 50%; margin-left: -6px;
  display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line);
}
.ob-back svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2.2; }
.ob-steps { display: flex; gap: 6px; }
.ob-steps i { width: 22px; height: 5px; border-radius: 999px; background: var(--line); transition: background 0.2s; }
.ob-steps i.on { background: var(--orange); width: 28px; }

.ob-cta {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--orange); color: #fff; font-weight: 600; font-size: 16px;
  border-radius: 16px; padding: 17px; box-shadow: 0 12px 28px rgba(236, 7, 18, 0.4);
  transition: transform 0.15s ease;
}
.ob-cta:active { transform: scale(0.98); }
.ob-cta svg { width: 18px; height: 18px; }

/* intro visual */
.intro-demo {
  position: relative; flex: 0 0 auto;
  height: 312px; margin: 10px 0 4px;
  display: grid; place-items: center;
}
.demo-card {
  width: 194px; height: 268px; border-radius: 24px;
  background: #ccc center/cover no-repeat; position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
  animation: demoWobble 4.5s ease-in-out infinite;
}
@keyframes demoWobble {
  0%, 100% { transform: rotate(-3deg) translateX(-4px); }
  50% { transform: rotate(3deg) translateX(4px); }
}
.demo-card .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,8,0.8), rgba(10,8,8,0) 55%); }
.demo-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.92); color: var(--ink);
  font-size: 10px; font-weight: 600; padding: 5px 9px; border-radius: 999px;
  display: flex; align-items: center; gap: 5px;
}
.demo-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.demo-info { position: absolute; left: 14px; right: 14px; bottom: 14px; color: #fff; }
.demo-price { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.demo-price small { font-size: 12px; font-weight: 500; opacity: 0.85; }
.demo-sub { font-size: 12px; opacity: 0.9; margin-top: 2px; }
.demo-cue {
  position: absolute; z-index: 3;
  font-size: 12.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px;
  background: var(--white); box-shadow: var(--shadow-soft); white-space: nowrap;
}
.cue-left { left: 2px; top: 44%; color: #ff4d5e; border: 1px solid #ffd9dd; }
.cue-right { right: 2px; top: 30%; color: var(--orange); border: 1px solid #ffd8c8; }
.cue-up { top: -10px; left: 50%; transform: translateX(-50%); color: #3596ff; border: 1px solid #cfe6ff; }

.intro-copy { margin-top: 4px; }
.intro-copy h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.intro-copy p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.intro-copy p b { color: var(--ink); font-weight: 600; }

.swap-callout {
  margin-top: 18px; display: flex; align-items: stretch; gap: 10px;
  background: var(--orange-soft); border-radius: 18px; padding: 14px 16px;
}
.swap-side { flex: 1; }
.swap-side span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.swap-side b { display: block; font-size: 19px; font-weight: 700; margin-top: 3px; color: var(--ink); letter-spacing: -0.01em; }
.swap-side b i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.swap-side.own b { color: var(--red-text); }
.swap-arrow { display: grid; place-items: center; align-self: center; }
.swap-arrow svg { width: 22px; height: 22px; stroke: var(--orange); fill: none; stroke-width: 2; }
.swap-note { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.intro-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
.intro-scroll::-webkit-scrollbar { display: none; }

/* setup form */
.setup-intro { margin: 8px 0 4px; }
.setup-intro h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.setup-intro p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.setup-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; margin: 14px -4px 12px; padding: 0 4px; }
.setup-scroll::-webkit-scrollbar { display: none; }
.field { margin-bottom: 22px; }
.field-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.field-label em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 4px; }
.field-hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.rent-input {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 16px; padding: 4px 18px;
  transition: border-color 0.15s;
}
.rent-input:focus-within { border-color: var(--orange); }
.rent-input .cur { font-size: 24px; font-weight: 700; color: var(--ink); }
.rent-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 26px; font-weight: 700; padding: 12px 0; color: var(--ink); letter-spacing: -0.02em; }
.rent-input input::placeholder { color: #c9c9d0; }
.rent-input .per { font-size: 14px; color: var(--muted); font-weight: 500; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.p-chip {
  padding: 10px 14px; border-radius: 999px; background: var(--bg);
  border: 1.5px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: all 0.15s;
}
.p-chip.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; padding: 13px 0; border-radius: 14px; background: var(--bg);
  border: 1.5px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: all 0.15s;
}
.seg button.on { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ---------- app header ---------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 22px 10px;
}
.greeting { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.greeting small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.header-tools { display: flex; gap: 10px; align-items: center; }
.icon-pill {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line);
  display: grid; place-items: center; box-shadow: var(--shadow-soft);
  position: relative;
}
.icon-pill svg { width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 1.8; }
.icon-pill .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); border: 2px solid var(--white); }
.avatar-pill { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 2px solid var(--orange); }
.avatar-pill img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- views ---------- */
.view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.view.active { display: flex; }
.view-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 4px 22px calc(var(--nav-h) + 22px); }

/* ---------- swipe deck ---------- */
#deck-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 20px calc(var(--nav-h) + 30px); }
#deck { position: relative; flex: 1; min-height: 0; }
.card {
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #ddd center/cover no-repeat;
  box-shadow: var(--shadow-card);
  touch-action: none;
  will-change: transform;
}
.card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 8, 0.82) 0%, rgba(10, 8, 8, 0.24) 42%, rgba(10, 8, 8, 0) 62%);
}
.card .tag-row {
  position: absolute; top: 18px; left: 18px; right: 64px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.card .tag {
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  backdrop-filter: blur(6px);
  font-size: 11.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.card .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.card .swipe-up-hint {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(40, 40, 46, 0.78); backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: grid; place-items: center;
}
.card .swipe-up-hint svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.4; fill: none; }
.card-info { position: absolute; left: 22px; right: 22px; bottom: 20px; color: var(--white); }
.card-price { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.card-price small { font-size: 13px; font-weight: 500; opacity: 0.82; margin-left: 6px; }
.card-list-price { font-size: 12.5px; font-weight: 400; opacity: 0.78; margin-top: 5px; }
.rent-match {
  display: inline-flex; align-items: center; margin-top: 9px;
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.rent-match::before { content: "🔥"; margin-right: 6px; font-size: 11px; }
.rent-match.under { background: rgba(47, 174, 99, 0.9); border-color: transparent; }
.rent-match.under::before { content: "✓"; }
.rent-match.near { background: rgba(236, 7, 18, 0.92); border-color: transparent; }
.rent-match.over { background: rgba(255, 255, 255, 0.16); }
.rent-match.over::before { content: "↑"; }
.card-hood { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14.5px; font-weight: 500; }
.card-hood svg { width: 14px; height: 14px; fill: var(--orange-glow); }
.card-specs { display: flex; gap: 8px; margin-top: 12px; }
.spec-chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px; padding: 7px 11px;
  font-size: 12px; font-weight: 500;
}
.spec-chip svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 1.7; }

.stamp {
  position: absolute; top: 34px;
  font-size: 30px; font-weight: 800; letter-spacing: 0.08em;
  padding: 6px 16px; border-radius: 10px; border: 4px solid;
  opacity: 0; text-transform: uppercase;
}
.stamp.like { left: 22px; color: #3ddc84; border-color: #3ddc84; transform: rotate(-14deg); }
.stamp.nope { right: 22px; color: #ff4d5e; border-color: #ff4d5e; transform: rotate(14deg); }
.stamp.details {
  left: 50%; top: auto; bottom: 120px; transform: translateX(-50%) rotate(-4deg);
  color: #4db2ff; border-color: #4db2ff; font-size: 24px;
}

.deck-empty {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; color: var(--muted); padding: 0 30px;
}
.deck-empty.show { display: flex; }
.deck-empty .big { font-size: 46px; }
.deck-empty h3 { color: var(--ink); font-size: 19px; }
.btn-reset { margin-top: 6px; background: var(--orange); color: #fff; font-weight: 600; padding: 12px 26px; border-radius: 999px; box-shadow: 0 10px 24px rgba(236, 7, 18, 0.4); }

/* ---------- bottom nav ---------- */
#nav {
  position: absolute; left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom));
  height: var(--nav-h); z-index: 40;
  background: var(--ink); border-radius: 999px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 8px;
  box-shadow: 0 18px 40px rgba(23, 23, 27, 0.35);
}
.nav-btn {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; color: #9a9aa2;
  transition: color 0.2s ease;
}
.nav-btn svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.nav-btn.active { color: var(--white); }
.nav-btn.active::after {
  content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}
.nav-btn .badge {
  position: absolute; top: 8px; right: 8px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}
.nav-btn .badge:empty { display: none; }

/* ---------- section headers in views ---------- */
.view-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; padding: 14px 22px 4px; }
.view-sub { font-size: 12.5px; color: var(--muted); padding: 0 22px 10px; }
.msgs-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 6px 22px 0; }
.msgs-top .view-title, .msgs-top .view-sub { padding-left: 0; padding-right: 0; }
.empty-note .btn-compose {
  display: inline-flex; margin-top: 16px; background: var(--orange); color: #fff;
  font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(236, 7, 18, 0.35);
}

/* ---------- search ---------- */
.search-note {
  margin: 8px 22px 2px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.search-note a { color: var(--orange); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.search-box {
  margin: 10px 22px 4px; display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 16px; box-shadow: var(--shadow-soft);
}
.search-box svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; }
.search-box input { border: 0; outline: 0; flex: 1; font: inherit; font-size: 14px; background: none; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 12px 22px 4px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.f-chip {
  flex: 0 0 auto; padding: 9px 16px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
.f-chip.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.result-card {
  display: flex; gap: 14px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 10px; margin-bottom: 12px;
  box-shadow: var(--shadow-soft); align-items: center;
}
.result-card img { width: 96px; height: 96px; border-radius: var(--radius-md); object-fit: cover; }
.result-info { flex: 1; min-width: 0; }
.result-price { font-size: 16.5px; font-weight: 700; color: var(--orange); }
.result-price small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.result-addr { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.result-meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-2); margin-top: 7px; font-weight: 500; }
.result-meta span { white-space: nowrap; }
.result-fav { width: 38px; height: 38px; border-radius: 50%; background: var(--orange-soft); display: grid; place-items: center; flex: 0 0 auto; }
.result-fav svg { width: 17px; height: 17px; stroke: var(--orange); fill: none; stroke-width: 2; }
.result-fav.on svg { fill: var(--orange); }

/* ---------- favourites ---------- */
.fav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fav-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4; background: #ddd center/cover; box-shadow: var(--shadow-soft);
}
.fav-card .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 8, 8, 0.78), transparent 55%); }
.fav-card .fav-info { position: absolute; left: 12px; right: 12px; bottom: 12px; color: #fff; }
.fav-card .fav-price { font-size: 16px; font-weight: 700; }
.fav-card .fav-hood { font-size: 11px; opacity: 0.85; margin-top: 2px; }
.fav-card .unfav {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); display: grid; place-items: center;
}
.fav-card .unfav svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.empty-note { text-align: center; color: var(--muted); padding: 60px 30px; font-size: 14px; }
.empty-note .big { font-size: 42px; display: block; margin-bottom: 10px; }

/* ---------- messages ---------- */
.msg-row {
  display: flex; gap: 13px; align-items: center; padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.msg-row img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.msg-body { flex: 1; min-width: 0; }
.msg-name { font-weight: 600; font-size: 14.5px; display: flex; justify-content: space-between; }
.msg-name time { font-size: 11px; color: var(--muted); font-weight: 400; }
.msg-prev { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.msg-row .unread { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }

/* chat thread */
#chat { position: absolute; inset: 0; z-index: 50; background: var(--bg); display: none; flex-direction: column; }
#chat.open { display: flex; }
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 18px 12px;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.chat-head img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.chat-head .who { flex: 1; }
.chat-head .who b { font-size: 15px; display: block; }
.chat-head .who span { font-size: 11.5px; color: var(--green); }
.back-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); }
.back-btn svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2.2; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 76%; padding: 11px 15px; border-radius: 18px; font-size: 13.5px; line-height: 1.45; }
.bubble.them { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px; align-self: flex-start; }
.bubble.me { background: var(--orange); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.chat-input-row {
  display: flex; gap: 10px; padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--line);
}
.chat-input-row input {
  flex: 1; border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 18px; font: inherit; font-size: 14px; outline: 0; background: var(--bg);
}
.chat-send { width: 46px; height: 46px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; flex: 0 0 auto; }
.chat-send svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 2.2; }

/* ---------- details sheet ---------- */
#sheet {
  position: absolute; inset: 0; z-index: 55;
  background: var(--bg);
  transform: translateY(104%);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0.22, 1);
  display: flex; flex-direction: column;
}
#sheet.open { transform: translateY(0); }
.sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 110px; }
.gallery { position: relative; }
.gallery-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip img { width: 100%; flex: 0 0 100%; height: 320px; object-fit: cover; scroll-snap-align: center; }
.gallery .close-sheet {
  position: absolute; top: max(16px, env(safe-area-inset-top)); left: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
}
.gallery .close-sheet svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2.2; }
.gallery .fav-toggle {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.92);
  display: grid; place-items: center; box-shadow: var(--shadow-soft);
}
.gallery .fav-toggle svg { width: 19px; height: 19px; stroke: var(--orange); fill: none; stroke-width: 2; }
.gallery .fav-toggle.on svg { fill: var(--orange); }
.gallery-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.gallery-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.gallery-dots i.on { background: #fff; }
.photo-count {
  position: absolute; bottom: 12px; right: 14px;
  background: rgba(10, 8, 8, 0.6); color: #fff; font-size: 11px; font-weight: 500;
  padding: 5px 10px; border-radius: 999px;
}

.sheet-body { padding: 20px 22px 0; }
.sheet-body > section { margin-bottom: 26px; }
.d-price { font-size: 32px; font-weight: 700; color: var(--orange); letter-spacing: -0.02em; }
.d-price small { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.d-list-price { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.d-addr { font-size: 14px; color: var(--muted); margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.d-addr svg { width: 14px; height: 14px; fill: var(--orange); flex: 0 0 auto; }
.d-mls { font-size: 11px; color: var(--muted); margin-top: 5px; letter-spacing: 0.04em; }
.quick-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.qf {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 10px; text-align: center;
}
.qf b { font-size: 15px; display: block; }
.qf span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.s-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.d-remarks { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.info-rows { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.info-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.info-row:last-child { border-bottom: 0; }
.info-row span { color: var(--muted); }
.info-row b { font-weight: 500; text-align: right; }
.room-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.room-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 0; }
.room-table td { padding: 9px 0; border-top: 1px solid var(--line); }
.agent-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 16px; box-shadow: var(--shadow-soft);
}
.agent-card img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.agent-card .a-info { flex: 1; }
.agent-card .a-info b { font-size: 14.5px; display: block; }
.agent-card .a-info span { font-size: 12px; color: var(--muted); }
.agent-call { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.agent-call svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.9; }
.market-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.market-strip .qf b { color: var(--orange); }
.mortgage-calc-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--orange-soft); color: var(--red-text); font-weight: 600; font-size: 13.5px;
  padding: 13px; border-radius: 14px; margin: 4px 0 14px;
}
.mortgage-calc-link svg { width: 17px; height: 17px; stroke: var(--orange-deep); fill: none; stroke-width: 1.8; }
.legal-footer { padding-bottom: 8px; }
.legal-footer p { font-size: 10.5px; line-height: 1.5; color: var(--muted); margin-bottom: 8px; }
.legal-footer p:last-child { margin-bottom: 0; }
.sheet-cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 22px max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 68%, transparent);
  display: flex; gap: 12px;
}
.btn-book {
  flex: 1; background: var(--orange); color: #fff; font-weight: 600; font-size: 15.5px;
  border-radius: 16px; padding: 16px; box-shadow: 0 12px 28px rgba(236, 7, 18, 0.4);
  transition: transform 0.15s ease;
}
.btn-book:active { transform: scale(0.97); }
.btn-pass-sheet {
  width: 54px; border-radius: 16px; background: var(--white); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.btn-pass-sheet svg { width: 20px; height: 20px; stroke: #ff4d5e; fill: none; stroke-width: 2.2; }
.btn-info {
  flex: 1; background: var(--white); color: var(--ink); font-weight: 600; font-size: 15.5px;
  border-radius: 16px; padding: 16px; border: 1.5px solid var(--line); box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease;
}
.btn-info:active { transform: scale(0.97); }

/* ---------- book a showing ---------- */
#booking {
  position: absolute; inset: 0; z-index: 59;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0.22, 1);
}
#booking.open { transform: translateX(0); }
.booking-listing {
  display: flex; gap: 12px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 12px; margin-bottom: 22px; box-shadow: var(--shadow-soft);
}
.booking-listing img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.booking-listing .bl-price { font-size: 16px; font-weight: 700; }
.booking-listing .bl-addr { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
/* Booking time is a <select> now (was a wrapping grid of hour buttons, which
   made the form look busier than it is). Native selects ignore most of
   .text-input's look, so restate it here with a proper chevron. */
select.text-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px 18px;
  cursor: pointer;
}
.booking-done {
  text-align: center; padding: 40px 24px;
}
.booking-done .big { font-size: 48px; display: block; margin-bottom: 14px; }
.booking-done h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.booking-done p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ---------- mortgage calculator ---------- */
#mortgage-calc {
  position: absolute; inset: 0; z-index: 59;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0.22, 1);
}
#mortgage-calc.open { transform: translateX(0); }
.calc-slider-label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.calc-slider-label b { color: var(--orange); font-size: 15px; font-weight: 700; }
.calc-slider {
  width: 100%; height: 6px; border-radius: 999px; background: var(--line);
  appearance: none; -webkit-appearance: none; outline: 0;
}
.calc-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--orange);
  border: 3px solid var(--white); box-shadow: var(--shadow-soft); cursor: pointer;
}
.calc-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--orange);
  border: 3px solid var(--white); box-shadow: var(--shadow-soft); cursor: pointer;
}
.calc-result {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; text-align: center; box-shadow: var(--shadow-soft); margin: 22px 0 14px;
}
.calc-result > span { font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.calc-result > b { display: block; font-size: 34px; font-weight: 700; color: var(--orange); letter-spacing: -0.02em; margin: 6px 0 18px; }
.calc-breakdown { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.calc-breakdown div { flex: 1; }
.calc-breakdown span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.calc-breakdown b { font-size: 14px; font-weight: 700; color: var(--ink); }
.preapproval-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; margin-top: 18px; box-shadow: var(--shadow-soft); text-align: center;
}
.preapproval-card .s-title { margin-bottom: 8px; }
.preapproval-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 16px; }
.preapproval-card .btn-book { width: 100%; }

/* profile → map search launcher */
.map-launch {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 15px; font-weight: 600; font-size: 14.5px; color: var(--ink); box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease;
}
.map-launch:active { transform: scale(0.98); }
.map-launch svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; stroke-width: 1.8; }

/* ---------- auth modal (phone/SMS login) ---------- */
.sheet-modal {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(23, 23, 27, 0.5);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.sheet-modal.open { opacity: 1; pointer-events: auto; }
.auth-sheet {
  position: relative; width: 100%;
  background: var(--white); border-radius: 28px 28px 0 0;
  padding: 18px 24px max(26px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0.22, 1);
  max-height: 88%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
.sheet-modal.open .auth-sheet { transform: translateY(0); }
.auth-close {
  position: absolute; top: 14px; right: 18px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg); display: grid; place-items: center;
}
.auth-close svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 2.2; }
.auth-logo { font-size: 26px; margin: 6px 0 16px; }
.auth-step h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.auth-step p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
.auth-step p b { color: var(--ink); font-weight: 600; }
.auth-step .field-label { display: block; margin-bottom: 8px; }
.auth-step .ob-cta { width: 100%; }
.auth-step .text-input { margin-bottom: 14px; }
.auth-skip {
  display: block; width: 100%; text-align: center; margin-top: 14px;
  font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 8px;
}
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 16px; margin-bottom: 4px;
  background: var(--white); border: 1.5px solid var(--line); border-radius: 14px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.auth-google-btn:active { transform: scale(0.98); }
.auth-google-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
/* .auth-facebook-btn lives with the SECOND .auth-google-btn block further
   down this file (~line 1400) — that one is later, so it's the one that
   actually wins for both buttons. Defining the Facebook box here instead
   made it 4px taller than the Google button above it. */
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 14px 0;
  font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.auth-links { text-align: center; margin-top: 12px; }
.auth-link {
  display: block; width: 100%; padding: 6px; font-size: 13.5px; color: var(--muted);
}
.auth-link b { color: var(--orange); font-weight: 600; }
.auth-demo-note {
  display: block; font-size: 12px; color: var(--red-text); background: var(--orange-soft);
  border-radius: 10px; padding: 9px 12px; margin: -6px 0 16px; line-height: 1.5;
}

/* account status row in profile */
.account-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 16px; margin-bottom: 22px; box-shadow: var(--shadow-soft);
}
.account-row span { font-size: 13px; color: var(--muted); }
.account-row span.signed-in { color: var(--green); font-weight: 600; }
.account-row button { font-size: 13px; font-weight: 600; color: var(--orange); }

/* toast */
#toast {
  position: absolute; left: 50%; bottom: calc(var(--nav-h) + 34px); transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 500;
  padding: 12px 20px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease; z-index: 70; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- profile / settings ---------- */
#profile {
  position: absolute; inset: 0; z-index: 58;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0.22, 1);
}
#profile.open { transform: translateX(0); }
.profile-head {
  display: flex; align-items: center; gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 18px 12px;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.profile-head b { font-size: 16px; font-weight: 600; }
.profile-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 18px 22px 110px; }
.profile-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; margin-bottom: 24px; box-shadow: var(--shadow-soft);
}
.profile-card img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); }
.profile-card b { font-size: 17px; display: block; }
.profile-card span { font-size: 12.5px; color: var(--muted); }
.text-input {
  width: 100%; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 14px 18px; font: inherit; font-size: 15px; background: var(--bg); outline: 0;
}
.text-input:focus { border-color: var(--orange); }
.profile-cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 22px max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.profile-cta .btn-book { width: 100%; }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); margin-bottom: 10px;
}
.toggle-row b { font-size: 14px; font-weight: 600; display: block; }
.toggle-row span { font-size: 12px; color: var(--muted); }

.saved-search-row > div:first-child { min-width: 0; }
.saved-search-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-search-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ss-apply {
  font-size: 12px; font-weight: 600; color: var(--accent, #ec0712);
  background: none; border: 1px solid currentColor; border-radius: 999px;
  padding: 6px 12px;
}
.ss-delete {
  width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: #eee; color: #555; font-size: 16px; line-height: 1;
}
.ss-delete:hover { background: #ddd; }
.switch {
  width: 48px; height: 28px; border-radius: 999px; background: #d7d7de;
  position: relative; flex: 0 0 auto; transition: background 0.2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s;
}
.switch.on { background: var(--orange); }
.switch.on::after { transform: translateX(20px); }
.signout-row {
  width: 100%; text-align: center; color: #ff4d5e; font-weight: 600; font-size: 14.5px;
  padding: 15px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); margin-top: 4px;
}
.signout-row:active { background: #fff1f2; }

/* avatar upload */
.avatar-edit { position: relative; flex: 0 0 auto; cursor: pointer; display: block; width: 58px; height: 58px; }
.avatar-edit img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); background: var(--orange-soft); }
.cam-badge {
  position: absolute; bottom: -2px; right: -2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--orange); border: 2px solid var(--white); display: grid; place-items: center;
}
.cam-badge svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2; }

/* bio textarea */
.bio-input { resize: none; line-height: 1.5; font-size: 14px; min-height: 76px; }

/* add-your-own neighbourhood */
.hood-add { display: flex; gap: 8px; margin-bottom: 10px; }
.hood-add input {
  flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px;
  font: inherit; font-size: 14px; background: var(--bg); outline: 0;
}
.hood-add input:focus { border-color: var(--orange); }
.hood-add button {
  flex: 0 0 auto; padding: 0 18px; border-radius: 12px; background: var(--orange); color: #fff;
  font-weight: 600; font-size: 14px;
}

/* clickable community link on cards / details */
.hood-link { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hood-link:active { opacity: 0.7; }

/* ---------- search: list / map toggle ---------- */
.hidden { display: none !important; }
.search-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 4px; }
.search-top .view-title { padding: 0; }
.map-toggle { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
/* #6b6b73 not var(--muted): the muted token is 3.3:1 on this control's
   background, and an interactive label must clear 4.5:1 (WCAG 2.1 AA). */
.mt-btn { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #6b6b73; }
.mt-btn.on { background: var(--orange); color: #fff; }

#search-list-mode { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#search-map-mode { display: none; flex-direction: column; flex: 1; min-height: 0; }
#view-search.map-on #search-list-mode { display: none; }
#view-search.map-on #search-map-mode { display: flex; }

.map-hoods { display: flex; gap: 8px; overflow-x: auto; padding: 12px 22px 10px; scrollbar-width: none; }
.map-hoods::-webkit-scrollbar { display: none; }
.map-hoods .p-chip { flex: 0 0 auto; }

.map-stage { position: relative; flex: 1; min-height: 0; }
/* z-index (not just position) is required here: without it, Leaflet's
   internal panes (z-index up to ~700) aren't contained to #map's own
   stacking context and instead compare directly against #nav (z-index 40)
   in the shared ancestor context — and win, hiding the nav bar. Giving #map
   its own stacking context keeps all of Leaflet's internals scoped below it. */
#map { position: absolute; inset: 0; z-index: 1; background: #e8ebef; }
.map-hint {
  position: absolute; top: 12px; left: 14px; right: 14px; z-index: 500;
  background: rgba(23, 23, 27, 0.9); color: #fff; font-size: 12.5px; line-height: 1.5;
  padding: 10px 14px; border-radius: 12px; text-align: center; pointer-events: none;
}
.map-hint b { font-weight: 600; }
.map-tools { position: absolute; bottom: calc(var(--nav-h) + 24px); left: 0; right: 0; z-index: 500; display: flex; justify-content: center; gap: 10px; }
.map-tool {
  display: flex; align-items: center; gap: 8px;
  background: var(--orange); color: #fff; font-weight: 600; font-size: 14px;
  padding: 13px 22px; border-radius: 999px; box-shadow: 0 10px 26px rgba(236, 7, 18, 0.45);
}
.map-tool svg { width: 17px; height: 17px; fill: #fff; }
.map-tool.ghost { background: var(--white); color: var(--ink); box-shadow: var(--shadow-soft); border: 1px solid var(--line); }
.map-tool.drawing { background: var(--ink); box-shadow: 0 10px 26px rgba(23, 23, 27, 0.4); }

/* custom price markers */
.price-pin {
  background: var(--white); color: var(--ink); font-weight: 700; font-size: 12px;
  padding: 5px 9px; border-radius: 999px; border: 1.5px solid var(--white);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28); white-space: nowrap;
  transform: translate(-50%, -50%); transition: transform 0.12s;
}
.price-pin.on { background: var(--orange); color: #fff; border-color: #fff; transform: translate(-50%, -50%) scale(1.12); z-index: 400; }
.leaflet-div-icon { background: transparent; border: 0; }
.leaflet-container { font-family: inherit; }

/* zoom control — sits below the hint banner, styled to match */
.leaflet-top.leaflet-right { top: 64px; }
.leaflet-control-zoom { border: 0 !important; box-shadow: var(--shadow-soft); border-radius: 12px; overflow: hidden; margin-right: 14px !important; }
.leaflet-control-zoom a {
  width: 38px; height: 38px; line-height: 38px; font-size: 20px; font-weight: 600;
  color: var(--ink); background: var(--white); border-bottom: 1px solid var(--line);
}
.leaflet-control-zoom a:last-child { border-bottom: 0; }
.leaflet-control-zoom a:hover { background: var(--orange-soft); color: var(--orange); }

/* drawn area */
.draw-path { stroke: var(--orange); stroke-width: 3; fill: rgba(236, 7, 18, 0.12); }

/* results panel */
.map-results {
  position: absolute; left: 10px; right: 10px; bottom: calc(var(--nav-h) + 18px); z-index: 550;
  background: var(--white); border-radius: 20px; padding: 14px 16px 16px;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.18);
}
.mr-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.mr-head b { font-size: 17px; font-weight: 700; }
.mr-head span { font-size: 12.5px; color: var(--muted); }
.mr-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.mr-scroll::-webkit-scrollbar { display: none; }
.mr-mini { flex: 0 0 140px; border-radius: 14px; overflow: hidden; background: #ddd center/cover; height: 96px; position: relative; }
.mr-mini .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,8,0.8), transparent 60%); }
.mr-mini .mm-info { position: absolute; left: 8px; right: 8px; bottom: 7px; color: #fff; }
.mr-mini .mm-price { font-size: 13px; font-weight: 700; }
.mr-mini .mm-hood { font-size: 10px; opacity: 0.9; }
.mr-cta {
  width: 100%; margin-top: 12px; background: var(--orange); color: #fff; font-weight: 600; font-size: 15px;
  padding: 14px; border-radius: 14px; box-shadow: 0 8px 20px rgba(236, 7, 18, 0.38);
}
.mr-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 4px 0 8px; }

/* ============================================================
   DESKTOP FALLBACK — Real Living is mobile-only. #phone (the app) is
   what phones render, with zero redirect. This block is hidden by
   default and only swapped in via the media query below, so a
   desktop-width browser gets a lightweight pitch instead of a
   narrow app column stranded in the middle of the screen.
   ============================================================ */
#desktop-gate { display: none; }


#desktop-gate {
  position: fixed; inset: 0; z-index: 9999;
  overflow-y: auto; user-select: text; background: var(--white, #fff); color: #1c1c1c;
}

/* ---------- nav — floating frosted pill (movenew nav-b, Real Living orange) ---------- */
.dgn-wrap { position: fixed; top: 22px; left: 0; right: 0; z-index: 50; }
.dgn {
  /* Same container and proportions as css/site.css, which styles the nav on
     every other page. The homepage loads this file instead of that one, so the
     two definitions have to be kept in step — they drifted once already and
     the links sat at a different x here than everywhere else. */
  width: min(var(--page-max, 1560px), calc(100% - 2 * var(--page-gutter, 20px)));
  margin-inline: auto;
  display: flex; align-items: center; gap: 30px;
  padding: 11px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 34px -18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dgn-logo img { width: 142px; height: auto; display: block; }
.dgn-links { display: flex; gap: 32px; list-style: none; margin-left: auto; align-items: center; }
.dgn-links a, .dgn-links > li > button {
  font-family: inherit; font-weight: 500; font-size: 15px; color: #4e4f4f;
  text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
  transition: color 0.2s ease;
}
.dgn-links a:hover, .dgn-links > li > button:hover { color: var(--red-text); }
.dgn-drop { position: relative; }
.dgn-drop-btn { display: inline-flex; align-items: center; gap: 6px; }
.dgn-chev {
  width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s ease; margin-top: -2px;
}
.dgn-drop.is-open .dgn-chev { transform: rotate(225deg); margin-top: 3px; }
.dgn-drop-menu {
  display: none; position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 200px; list-style: none; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(51, 51, 51, 0.1);
  padding: 8px; z-index: 45;
}
.dgn-drop.is-open .dgn-drop-menu { display: block; }
.dgn-drop-menu li button, .dgn-drop-menu li a {
  display: block; width: 100%; text-align: left; padding: 10px 13px; border-radius: 12px;
  font-family: inherit; font-weight: 500; font-size: 14px; color: #4e4f4f;
  background: none; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.dgn-drop-menu li button:hover, .dgn-drop-menu li a:hover { background: var(--orange-soft); color: #1c1c1c; }
.dgn-drop-right { left: auto; right: 0; transform: none; }
.dgn-sub { position: relative; }
.dgn-sub > button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; padding: 10px 13px; border-radius: 12px;
  font-family: inherit; font-weight: 500; font-size: 14px; color: #4e4f4f;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.dgn-sub > button:hover { background: var(--orange-soft); color: #1c1c1c; }
.dgn-sub-chev {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); flex: none;
}
.dgn-sub-menu {
  display: none; position: absolute; left: calc(100% + 2px); top: -8px; min-width: 180px;
  list-style: none; background: #fff; border-radius: 18px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(51, 51, 51, 0.1);
  padding: 8px; z-index: 46;
}
.dgn-sub:hover > .dgn-sub-menu, .dgn-sub.is-open > .dgn-sub-menu { display: block; }
.dgn-sub-menu li a {
  display: block; padding: 9px 13px; border-radius: 12px; font-weight: 500; font-size: 14px;
  color: #4e4f4f; text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.dgn-sub-menu li a:hover { background: var(--orange-soft); color: #1c1c1c; }

.dgn-drop-note { padding: 10px 13px; font-size: 12.5px; color: #666; line-height: 1.55; width: 230px; white-space: normal; }
.dgn-drop-note strong { color: var(--red-text); }
.dgn-fav {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: #4e4f4f; background: none; border: 0; cursor: pointer;
  transition: color 0.2s ease;
}
.dgn-fav:hover { color: var(--red-text); }
.dgn-fav svg { width: 22px; height: 22px; }
#dg-fav-count {
  position: absolute; top: -3px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--orange); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
}
.dgn-cta {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit; font-weight: 600; font-size: 15px; color: #fff;
  background: var(--orange-deep); border: 0; border-radius: 999px;
  padding: 8px 8px 8px 22px; min-height: 46px; cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dgn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55); }
.dgn-orb {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #1c1c1c; color: #fff; transition: transform 0.25s ease;
}
.dgn-orb svg { width: 15px; height: 15px; }
.dgn-cta:hover .dgn-orb { transform: rotate(45deg); }

/* ---------- hero — full-bleed photo, overhanging search panel (movenew a2) ---------- */
.dg-hero {
  position: relative; min-height: clamp(620px, 92vh, 900px);
  display: flex; flex-direction: column; isolation: isolate; color: #fff;
  padding-bottom: 90px;
}
.dg-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.dg-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 24, 16, 0.46) 0%, rgba(20, 24, 16, 0) 32%),
    linear-gradient(75deg, rgba(20, 24, 16, 0.62) 0%, rgba(20, 24, 16, 0.22) 50%, rgba(20, 24, 16, 0.06) 74%),
    linear-gradient(0deg, rgba(20, 24, 16, 0.72) 0%, rgba(20, 24, 16, 0.34) 34%, rgba(20, 24, 16, 0) 60%);
}
.dg-hero-inner {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 26px;
  width: min(1200px, calc(100% - 40px)); margin-inline: auto;
  padding-top: 130px; padding-bottom: 70px;
}
.dg-headrow { display: flex; flex-direction: column; gap: 16px; }
.dg-hero h2 {
  font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}
.dg-hero h2 .hl { background: #fff; color: var(--orange); border-radius: 12px; padding: 0 14px; display: inline-block; }
.dg-hero-sub {
  font-size: 19px; line-height: 1.5; color: rgba(255, 255, 255, 0.93);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.4); max-width: 52ch;
}

.dg-searchwrap { position: relative; z-index: 2; margin-top: 30px; margin-bottom: -140px; }
.dg-panel {
  background: #fff; border-radius: 26px; padding: 20px 22px;
  box-shadow: 0 30px 70px -30px rgba(20, 24, 16, 0.55);
}
.dg-panel-title { font-weight: 600; font-size: 17px; color: #1c1c1c; margin-bottom: 12px; }
.dg-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 16px; align-items: end; }
.dg-field label { display: block; font-weight: 500; font-size: 12px; color: #6f7069; margin-bottom: 4px; }
.dg-field input, .dg-field select {
  width: 100%; font-family: inherit; font-size: 14px; color: #1c1c1c;
  background: #f2efe9; border: 1.5px solid transparent; border-radius: 12px;
  padding: 10px 13px; appearance: none; -webkit-appearance: none;
}
.dg-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234E4F4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px;
  padding-right: 34px; cursor: pointer;
}
.dg-field input:focus, .dg-field select:focus { outline: none; border-color: var(--orange); background: #fff; }
.dg-panel-go {
  font-family: inherit; font-weight: 600; font-size: 14.5px; color: #fff;
  background: #1c1c1c; border: 0; border-radius: 12px; padding: 11px 24px;
  cursor: pointer; white-space: nowrap; transition: background 0.2s ease;
}
.dg-panel-go:hover { background: #b93c10; }
.dg-filterrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(51, 51, 51, 0.1);
}
.dg-filterrow-label { font-weight: 500; font-size: 13px; color: #6f7069; margin-right: 3px; }
.dg-chip {
  font-family: inherit; font-weight: 500; font-size: 13px; color: #4e4f4f;
  background: #f2efe9; border: 1px solid rgba(51, 51, 51, 0.1); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease;
}
.dg-chip:hover { background: var(--orange-soft); color: #1c1c1c; }
.dg-chip-cta { color: #fff; background: var(--orange-deep); border-color: var(--orange); font-weight: 600; }
.dg-chip-cta:hover { background: #b93c10; border-color: var(--orange-deep); color: #fff; }
.dg-panel-fine { display: block; margin-top: 10px; font-size: 11.5px; color: #9b9b95; }

/* three-step "how it works" list inside the guide band */
.dg-steps {
  display: flex; gap: 34px; margin: 10px 0 8px; list-style: none;
  counter-reset: step; text-align: left; max-width: 860px;
}
.dg-steps li { counter-increment: step; font-size: 13.5px; color: #555; line-height: 1.5; flex: 1; }
.dg-steps li::before {
  content: counter(step); display: block; width: 26px; height: 26px; border-radius: 50%;
  background: var(--orange); color: #fff; font-weight: 700; font-size: 13px;
  line-height: 26px; text-align: center; margin-bottom: 8px;
}
.dg-steps li b { color: #1c1c1c; display: block; margin-bottom: 2px; font-size: 14px; }
#dg-results.hidden, #dg-rows.hidden { display: none; }

/* ---------- Airbnb-style horizontal rows ---------- */
.dg-row { margin-bottom: 40px; }
.dg-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.dg-row-head h2 {
  font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: #1c1c1c;
  display: flex; align-items: center; gap: 6px;
}
.dg-row-sub { margin-top: 2px; font-size: 13.5px; color: #737373; font-weight: 500; }
/* chevron beside the title — Airbnb's affordance for "this row is a link" */
.dg-row-open {
  width: 24px; height: 24px; border-radius: 50%; border: 0; background: none;
  font-family: inherit; font-size: 20px; font-weight: 400; color: #1c1c1c;
  cursor: pointer; line-height: 1; padding: 0;
}
.dg-row-open:hover { background: var(--orange-soft); color: var(--red-text); }
.dg-row-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.dg-row-all {
  background: none; border: 0; font-family: inherit; font-size: 14px; font-weight: 600;
  color: #1c1c1c; cursor: pointer; padding: 4px 0; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}
.dg-row-all:hover { color: var(--red-text); }
.dg-row-nav { display: flex; gap: 8px; }
/* Orange with a white arrow — grey-on-white made these read as disabled
   even when they were the way to see the rest of the row. */
.dg-row-nav button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--orange, #ec0712); background: var(--orange, #ec0712);
  font-family: inherit; font-size: 16px; color: #fff; cursor: pointer; line-height: 1;
}
.dg-row-nav button:hover:not([disabled]) {
  background: var(--orange-deep, #ec0712); border-color: var(--orange-deep, #ec0712);
}
/* Disabled still says "nothing that way" — faded orange, not a second colour. */
.dg-row-nav button[disabled] { opacity: 0.32; cursor: default; }
.dg-row-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: 188px; gap: 16px;
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.dg-row-scroll::-webkit-scrollbar { display: none; }
.dg-row-scroll .dg-card { scroll-snap-align: start; }

/* ---------- desktop: one row, no horizontal scroll ----------
   The swipe row above is a phone idiom, and on desktop it was doing badly.
   Measured at 1440px: seven of twelve cards visible, so the gesture paid out
   five more and then dead-ended — and a mouse without a horizontal wheel
   cannot make the gesture at all, leaving the chevrons as the only way to
   find the rest. On 68% of this site's traffic that is a control most people
   never touch.

   So desktop gets one full row and nothing to scroll. Cards past the first
   row land on rows of zero height and are clipped, which means the count
   adapts to the column count on its own — no per-breakpoint nth-child rules,
   and the markup stays identical for both layouts. Same technique as
   .bx-band-main in home.css.

   Six columns is the target; below ~1240px six would squeeze the cards under
   190px, so the row steps down to five and then four rather than getting
   narrower. "Show all" carries anyone who wants past the first row, which is
   what it was already there for.

   Note "Trending in Edmonton" has eight cards and deliberately no "Show all"
   — on desktop its last two are clipped with no way to reach them. It is a
   look-around taster rather than a list, so that is a trim, not a loss; the
   phone still swipes through all eight. */
@media (min-width: 860px) {
  .dg-row-scroll {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* The first row must be an EXPLICIT track. Without this, every row is an
       implicit one and grid-auto-rows: 0 collapses the whole band to nothing
       — which is exactly what it did on the first attempt here. */
    grid-template-rows: auto;
    grid-auto-rows: 0;
    overflow: hidden;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  /* Nothing left to page through. */
  .dg-row-nav { display: none; }
}
@media (min-width: 1020px) {
  .dg-row-scroll { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
  .dg-row-scroll { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- listings grid ---------- */
/* top padding clears the search panel overhanging the hero's bottom edge */
.dg-listings { max-width: 1240px; margin: 0 auto; padding: 190px 56px 20px; }
.dg-listings-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
#dg-results-count { font-size: 14px; color: #666; font-weight: 500; }
.dg-clear {
  background: none; border: 1.5px solid #ddd; border-radius: 999px; padding: 7px 16px;
  font-size: 13px; font-weight: 600; color: var(--red-text); cursor: pointer;
}
.dg-clear:hover { background: var(--orange-soft); }
.dg-clear.hidden { display: none; }
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 20px; }
.dg-card { position: relative; }
.dg-card-link { text-decoration: none; color: inherit; display: block; }
.dg-card-photo {
  /* One rule for every listing photo on the site: a fixed 4:3 box that the
     photo covers. The feed hands back everything from 4:3 to panoramas, so
     without a fixed shape each card is as tall as whatever photo it drew.
     Matches .rcard .ph on the search page — the two must agree, since the
     same homes appear in both places. */
  width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  background-size: cover; background-position: center; background-color: #eee;
  position: relative;
}
.dg-badge {
  position: absolute; top: 10px; left: 10px; background: #fff; color: #1c1c1c;
  font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); max-width: 70%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* sits above .dg-card-link so hearting doesn't navigate */
.dg-heart { position: absolute; top: 8px; right: 8px; background: none; border: 0; padding: 4px; cursor: pointer; z-index: 2; }
.dg-heart svg { width: 23px; height: 23px; fill: rgba(20, 20, 20, 0.5); stroke: #fff; stroke-width: 1.6; display: block; }
.dg-heart:hover svg { transform: scale(1.08); }
.dg-heart.on svg { fill: var(--orange); }
.dg-card-body { padding: 9px 2px 0; }
.dg-card-title { font-size: 14px; font-weight: 600; color: #1c1c1c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-card-meta { margin-top: 1px; font-size: 12.5px; color: #737373; }
.dg-card-price { margin-top: 3px; font-size: 13.5px; font-weight: 600; color: #1c1c1c; }
.dg-card-price small { font-weight: 500; font-size: 12px; color: #737373; margin-left: 4px; }

/* House-ad tile dropped into the homepage's first price band (js/home.js).
   Same .dg-card/.dg-card-photo/.dg-card-body shape as a real listing card,
   with the promo content living inside .dg-card-photo the same way
   js/search-page.js's tiles live inside .rcard .ph. Rules shared with the
   search page's own pd-promo-* classes in css/site.css — duplicated here
   because index.html loads app.css/home.css, not site.css. */
.dg-card-photo.pd-promo-ph {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px; background: var(--orange-soft, #fdedee);
}
.pd-promo-badge {
  align-self: flex-start; background: #fff; color: var(--orange-deep, #ec0712);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: 999px;
}
.pd-promo-body h2 {
  font-size: 15px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; color: #1c1c1c;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-promo-body p {
  font-size: 12px; line-height: 1.4; color: #555;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-promo-cta { color: var(--orange-deep, #ec0712); }
.dg-more {
  display: block; margin: 34px auto 12px; background: #fff; border: 1.5px solid #ddd;
  border-radius: 999px; padding: 12px 28px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.dg-more:hover { background: var(--orange-soft); border-color: var(--orange-soft); }
.dg-more.hidden { display: none; }

/* ---------- "get the app" band, replaces the old always-visible phone
   mockup — now a lower-priority note since the grid is the main event ---------- */
.dg-app-note {
  max-width: 1240px; margin: 30px auto 0; padding: 48px 56px;
  background: var(--orange-soft); border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
}
.dg-app-note b { font-size: 20px; color: #1c1c1c; }
.dg-app-note span { font-size: 14.5px; line-height: 1.6; color: #555; max-width: 480px; }
.dg-app-note strong { color: var(--red-text); }
.gate-phone {
  margin-top: 18px; width: 300px; height: 626px; flex: 0 0 auto;
  border-radius: 42px; background: #111; padding: 11px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28), inset 0 0 0 2px #333;
  position: relative;
}
.gate-phone::before {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px; background: #111; border-radius: 999px; z-index: 5;
}
.gate-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 33px; background: var(--bg); }

/* ---------- footer — ink, four-column (movenew site-footer) ---------- */
.dg-footer { margin-top: 56px; background: #333; color: rgba(255, 255, 255, 0.75); font-size: 14.5px; }
.dg-footer-inner {
  width: min(1200px, calc(100% - 40px)); margin-inline: auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 38px 48px; padding: 38px 0 28px; flex-wrap: wrap;
}
.dg-footer-brand { display: flex; flex-direction: column; gap: 8px; max-width: 260px; }
.dg-footer-logo { width: 122px; height: auto; }
.dg-footer-credit { font-size: 12px; color: rgba(255, 255, 255, 0.58); }
.dg-footer-contact { margin-top: 6px; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.75); }
.dg-footer-contact a { color: inherit; text-decoration: none; }
.dg-footer-contact a:hover { color: #fff; }
.dg-footer-col h2 {
  font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58); margin: 0 0 16px;
}
.dg-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dg-footer-col a, .dg-footer-col button {
  color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.dg-footer-col a:hover, .dg-footer-col button:hover { color: #fff; }
.dg-footer-legal { width: min(1200px, calc(100% - 40px)); margin-inline: auto; padding-bottom: 22px; }
.dg-footer-legal p { font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.6; margin-bottom: 8px; }
.dg-footer-bottom {
  margin-top: 16px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
}
.dg-footer-bottom p { margin: 0; }
.dg-footer-bottom a { font-size: 12px; color: rgba(255, 255, 255, 0.55); text-decoration: underline; }
.dg-footer-bottom a:hover { color: #fff; }

/* width gating: desktop gets the site; phones get the app — EXCEPT on
   body.dg-site (the rolled-over index.html), where the site shows at every
   width and the swipe app lives on at app.html. */
@media (min-width: 860px) {
  #phone { display: none; }
  #desktop-gate { display: block; }
}
body.dg-site #phone { display: none !important; }
body.dg-site #desktop-gate { display: block; }

/* burger — hidden on desktop, the nav on mobile */
.dgn-burger {
  display: none; background: none; border: 0; width: 40px; height: 40px;
  border-radius: 12px; cursor: pointer; flex: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.dgn-burger span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #1c1c1c; transition: transform 0.25s ease; }
.dgn.is-open .dgn-burger span:first-child { transform: translateY(4.25px) rotate(45deg); }
.dgn.is-open .dgn-burger span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* ---------- mobile: the rolled-over site under 860px ---------- */
@media (max-width: 859px) {
  body.dg-site .dgn-wrap { top: 10px; }
  body.dg-site .dgn { gap: 10px; padding: 9px 12px; width: calc(100% - 20px); }
  body.dg-site .dgn-logo img { width: 96px; }
  body.dg-site .dgn-cta { display: none; }
  /* Burger on the right, where a thumb reaches. The margin-left:0 that used
     to follow this line was left over from the retired nav heart, which took
     the auto margin for itself — with the heart gone it just pinned the
     burger back beside the logo. */
  body.dg-site .dgn-burger { display: flex; margin-left: auto; order: 3; }
  /* Dashboard rides outside the menu: it is what returning visitors come back
     for, and burying it behind a menu tap made the account area the hardest
     thing on the site to reach. Everything else stays in the dropdown. */
  body.dg-site .dgn-links { display: flex; margin-left: auto; gap: 0; order: 2; }
  body.dg-site .dgn-links > li { display: none; }
  body.dg-site .dgn-links > li.dgn-dash { display: block; }
  body.dg-site .dgn-links > li.dgn-dash > a { font-size: 15px; padding: 6px 2px; }
  body.dg-site .dgn.is-open .dgn-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: #fff; border-radius: 20px; padding: 10px;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(51, 51, 51, 0.1);
    margin-left: 0; z-index: 60;
  }
  body.dg-site .dgn.is-open .dgn-links > li { display: block; }
  body.dg-site .dgn.is-open .dgn-links > li > a,
  body.dg-site .dgn.is-open .dgn-links > li > button { display: block; width: 100%; text-align: left; padding: 11px 13px; border-radius: 12px; font-size: 15px; }
  body.dg-site .dgn-drop-menu, body.dg-site .dgn-sub-menu {
    position: static; transform: none; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0;
  }
  body.dg-site .dg-hero { min-height: 74vh; padding-bottom: 30px; }
  body.dg-site .dg-hero-inner { padding-top: 84px; padding-bottom: 30px; }
  body.dg-site .dg-searchwrap { margin-bottom: 0; }
  body.dg-site .dg-panel { padding: 16px; border-radius: 20px; }
  body.dg-site .dg-fields { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.dg-site .dg-panel-go { grid-column: 1 / -1; padding: 13px; }
  body.dg-site .dg-listings { padding: 28px 18px 16px; }
  body.dg-site .dg-steps { flex-direction: column; gap: 18px; }
  body.dg-site .dg-app-note { padding: 32px 18px; margin-top: 20px; }
  body.dg-site .dg-hero-sub { font-size: 16px; }
}

@media (min-width: 860px) and (max-width: 1020px) {
  .dg-hero h2 { font-size: 38px; }
  .dg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   AUTH MODAL + TOAST + NAV SIGN IN
   ------------------------------------------------------------
   js/rl-auth-ui.js is shared by every page, but it emits the
   desktop .modal-* vocabulary that lived only in css/site.css. This
   page loads app.css alone, so the sign-in modal was mounting with no
   styles at all — position:static, no overlay, invisible behind the
   hero. Ported here so the modal looks identical wherever it opens.
   (app.css also carries the phone app's own .sheet-modal/.auth-sheet
   login, which is a separate component for the swipe UI at app.html.)

   Keep in sync with the matching block in css/site.css.
   ============================================================ */

/* Only the three site.css tokens app.css doesn't already define. --ink,
   --orange* are left alone deliberately: app.css owns its own values. */
:root {
  --charcoal: #4e4f4f;
  --grid: #e6e4df;
  --linen: #f2efe9;
}

.pdp-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  background: #1c1c1c; color: #fff; font-size: 14.5px; border-radius: 999px;
  padding: 10px 21px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
.modal-back {
  position: fixed; inset: 0; z-index: 100; background: rgba(20, 18, 16, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 19px; overflow-y: auto;
}
.modal-card {
  position: relative; width: min(460px, 100%); background: #fff;
  border-radius: 26px; padding: 32px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.modal-x {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0;
  border-radius: 50%; background: none; font-size: 26px; line-height: 1;
  color: var(--ink-3); cursor: pointer;
}
.modal-x:hover { background: var(--linen); color: var(--ink); }
.modal-title { font-size: 24px; margin-bottom: 8px; padding-right: 32px; letter-spacing: -0.01em; }
.modal-sub { color: var(--ink-2); font-size: 15px; margin-bottom: 21px; line-height: 1.55; }
.modal-form label { display: block; font-weight: 500; font-size: 14.5px; margin-bottom: 5px; }
.modal-form input {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--linen); border: 1.5px solid transparent; border-radius: 14px;
  padding: 11px 14px; margin-bottom: 14px;
}
.modal-form input:focus { outline: none; border-color: var(--orange); background: #fff; }
.modal-submit {
  width: 100%; justify-content: center; border: 0; cursor: pointer; padding: 13px;
  background: var(--orange-deep); color: #fff; border-radius: 999px;
  font-family: inherit; font-weight: 600; font-size: 15px;
}
.modal-submit:hover { background: #b93c10; }
.modal-fine { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 14px; margin-bottom: 14px;
  background: #fff; border: 1.5px solid var(--grid); border-radius: 14px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.auth-google-btn:hover { border-color: #bbb; }
.auth-google-btn:active { transform: scale(0.98); }
/* Same box as the Google button above so the two stack as one pair. Meta's
   brand guidelines allow a white button with the blue mark, which keeps it
   from shouting over the app's own palette. Hidden until the Meta app is
   live — see FACEBOOK_ENABLED in js/app.js. */
.auth-facebook-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 14px; margin-bottom: 14px;
  background: #fff; border: 1.5px solid var(--grid); border-radius: 14px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.auth-facebook-btn:hover { border-color: #bbb; }
.auth-facebook-btn:active { transform: scale(0.98); }
.auth-facebook-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.auth-facebook-btn.hidden { display: none; }
.auth-divider {
  display: flex; align-items: center; gap: 11px; margin: -3px 0 14px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--grid); }
.auth-links { margin: -5px 0 5px; }
.modal-link {
  display: block; width: 100%; text-align: center; background: none; border: 0;
  padding: 6px; margin-top: 5px; font-family: inherit; font-size: 13.5px;
  color: var(--ink-3); cursor: pointer;
}
.modal-link:hover { color: var(--red-text); }
.modal-done { text-align: center; }
.modal-done h3 { font-size: 21px; margin-bottom: 6px; }
.modal-done p { color: var(--ink-2); font-size: 15px; }
.quiz-error { color: #b3372b; font-size: 14.5px; margin-bottom: 16px; }
.quiz-success-orb {
  display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 22px;
  border-radius: 50%; background: var(--orange-soft); font-size: 38px; font-style: normal;
}
/* Sign in/out inside the Dashboard dropdown */
.dgn-drop-menu li button.nav-auth-btn {
  display: block; width: 100%; text-align: left; padding: 10px 13px; border-radius: 12px;
  font-family: inherit; font-weight: 500; font-size: 14px; color: var(--charcoal);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.dgn-drop-menu li button.nav-auth-btn:hover { background: var(--orange-soft); color: var(--ink); }
/* the divider only makes sense when this sits at the foot of a dropdown */
.dgn-drop-menu #nav-auth-item { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--grid); }



/* The desktop site renders inside #desktop-gate, a fixed z-index:9999 layer.
   The auth modal is a sibling of that gate (rl-auth-ui.js appends to
   <body>), so site.css's z-index:100 left it painting *underneath* the whole
   page — present, correct, and completely invisible. Only this page has a
   gate, which is why the same modal was fine everywhere else. The toast has
   the same problem, so it moves up too. */
.modal-back { z-index: 10000; }
.pdp-toast { z-index: 10001; }

/* Sign in / Sign out as a top-level nav item — it used to live inside the
   Dashboard dropdown, which is now a direct link. Styled to match the other
   nav links rather than a menu row. */
.dgn-auth-item { display: flex; align-items: center; }
.dgn-auth-item > .nav-auth-btn {
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ink-2);
  background: none; border: 0; padding: 0; cursor: pointer;
  /* a button's baseline sits lower than an anchor's; without this it rides
     ~4px below the other nav links */
  display: block; line-height: 21px;
}
.dgn-auth-item > .nav-auth-btn:hover { color: var(--red-text); }