/* Gurugram Rent — rent, transparently. Dark design system from the final
   prototype (Basera Rent Map (2).html). */

:root {
  --bg: #0e1320;
  --panel: rgba(18, 24, 38, .94);
  --panel-solid: #121826;
  --card: #151c2c;
  --border: rgba(255, 255, 255, .13);
  --border-soft: rgba(255, 255, 255, .08);
  --text: #e8ecf3;
  --bright: #eef2f8;
  --muted: #8b96ad;
  --label: #57627d;
  --blue: #2f6fe0;
  --blue-hi: #4d8ef8;
  --link: #5b8cff;
  --orange: #ff9a2b;
  --orange-hi: #ffb658;
  --orange-text: #3a2400;
  --green: #4fd08a;
  --green-bg: #12331f;
  --red: #f47d72;
  --red-bg: #3a1518;
  --purple: #a982f0;
  --shadow: 0 8px 22px rgba(0, 0, 0, .5);
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: #7ba4ff; }
button, input, select { font-family: inherit; }
::selection { background: rgba(91, 140, 255, .3); }
.scry::-webkit-scrollbar { width: 8px; }
.scry::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }
.scry::-webkit-scrollbar-track { background: transparent; }

/* ---------- Topbar ---------- */
#topbar {
  position: relative; z-index: 1100;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--panel-solid);
}
.floating #topbar { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.floating #topbar > * { pointer-events: auto; }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
}
.brand .logo {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(#4d8ef8, #2f6fe0);
  display: flex; align-items: center; justify-content: center;
}
.brand .logo svg { display: block; }
.brand h1, .brand .bh1 { font-size: 15px; margin: 0; font-weight: 800; color: var(--bright); display: block; line-height: 1.2; }
.brand p { margin: 0; font-size: 10.5px; color: var(--muted); font-weight: 600; }

.searchwrap {
  flex: 1; min-width: 180px; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 0 14px;
}
.searchwrap:focus-within { border-color: rgba(255, 255, 255, .22); }
.searchwrap .searchico { color: var(--label); flex: 0 0 auto; display: flex; }
.searchwrap input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 14px; padding: 9px 0; min-width: 0;
}
.searchwrap input::placeholder { color: var(--label); }

.tbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 9px 16px;
  color: var(--bright); font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.tbtn:hover { border-color: rgba(255, 255, 255, .25); }

/* nav row — flat strip fused to the topbar */
.navrow {
  position: relative; z-index: 1090;
  display: flex; justify-content: center; gap: 4px;
  margin: 0; width: 100%; max-width: 100%;
  background: var(--panel-solid);
  border-bottom: 1px solid var(--border-soft);
  padding: 0 16px 8px;
  overflow-x: auto;
}
.floating .navrow { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); }
.navrow a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  color: var(--muted); font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 10px;
}
.navrow a:hover { color: var(--bright); }
.navrow a.active { background: linear-gradient(#4d8ef8, #2f6fe0); color: #fff; }

/* ---------- Map screen ---------- */
main { flex: 1; display: flex; min-height: 0; position: relative; }
#mapWrap { flex: 1; position: relative; }
#map { position: absolute; inset: 0; background: var(--bg); }
.leaflet-container { font-family: var(--font); background: var(--bg); }
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow) !important; }
.leaflet-control-zoom a {
  background: var(--panel-solid) !important; color: var(--bright) !important;
  border: 1px solid var(--border) !important; width: 40px !important; height: 40px !important;
  line-height: 38px !important; font-size: 18px !important;
}
.leaflet-control-zoom a:first-child { border-radius: 12px 12px 0 0 !important; }
.leaflet-control-zoom a:last-child { border-radius: 0 0 12px 12px !important; }
.leaflet-control-attribution {
  background: rgba(14, 19, 32, .75) !important; color: var(--label) !important; font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }

[hidden] { display: none !important; }

/* price pins */
.pin { display: flex; flex-direction: column; align-items: center; cursor: pointer;
  transform: translate(-50%, -100%); width: max-content;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.pin-body {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-weight: 700; font-size: 10px; line-height: 1;
  padding: 4px 7px; border-radius: 7px;
}
.pin .dot { width: 3px; height: 3px; border-radius: 9px; }
.pin-tail { width: 7px; height: 7px; transform: rotate(45deg); margin: -4px auto 0; }
.pin-avail .pin-body {
  background: linear-gradient(#ffb658, #ff9a2b); color: var(--orange-text);
  border: 1px solid rgba(255, 190, 100, .6);
  box-shadow: 0 2px 8px rgba(255, 150, 40, .28);
}
.pin-avail .dot { background: rgba(58, 36, 0, .4); }
.pin-avail .pin-tail { background: #ff9a2b; }
/* reference (area-median) pins read quieter than the actionable orange ones */
.pin-ref .pin-body {
  background: linear-gradient(#3f7de6, #2a63cf); color: #eaf1ff;
  border: 1px solid rgba(120, 170, 255, .4); font-weight: 600;
  box-shadow: 0 2px 8px rgba(20, 40, 90, .35);
}
.pin-ref .dot { background: rgba(255, 255, 255, .5); }
.pin-ref .pin-tail { background: #2f6fe0; }
.pin .bhk { font-weight: 600; opacity: .85; }
.pin.selected .pin-body { outline: 2px solid #fff; }

/* cluster pins — kept close to the blue/orange pin scale so the map reads calm */
.pin-cluster {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px 8px;
  backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  color: var(--bright); font-weight: 700; font-size: 11px; white-space: nowrap;
  transform: translate(-50%, -50%); width: max-content;
}
.pin-cluster .sub {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .3px;
  color: var(--green); margin-top: 1px; font-weight: 600;
}

/* legend */
#legend {
  position: absolute; left: 18px; bottom: 18px; z-index: 1000;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--shadow); backdrop-filter: blur(8px);
  font-size: 12.5px;
}
#legend .ltitle {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  color: var(--label); margin-bottom: 8px; font-weight: 600;
}
#legend .lrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); }
#legend .lrow b { color: var(--bright); }
#legend .sw { width: 14px; height: 14px; border-radius: 5px; flex: 0 0 auto; }
#legend .sw.avail { background: linear-gradient(#ffb658, #ff9a2b); }
#legend .sw.ref { background: linear-gradient(#4d8ef8, #2f6fe0); }
#legend .sw.cluster { background: var(--panel-solid); border: 1px solid var(--border); }

/* status pill */
#statusPill {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1000;
  display: flex; align-items: center; gap: 14px; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 11px 18px; box-shadow: var(--shadow); backdrop-filter: blur(8px);
  font-size: 13px; color: var(--muted);
}
#statusPill b { color: var(--bright); }
#statusPill .live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px rgba(79, 208, 138, .8);
}

/* ---------- Filter drawer ---------- */
#drawerBackdrop {
  position: fixed; inset: 0; z-index: 1500; background: rgba(5, 8, 15, .55);
  animation: bdIn .2s ease;
}
#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1510;
  width: 380px; max-width: 100vw;
  background: #0f1524; border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  animation: drawerIn .25s ease;
}
#drawer .dhead { display: flex; align-items: start; justify-content: space-between; padding: 22px 24px 8px; }
#drawer .dhead h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--bright); }
#drawer .dhead p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
#drawer .dbody { flex: 1; overflow-y: auto; padding: 8px 24px 20px; }
#drawer .dfoot {
  display: flex; gap: 10px; padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
}
.dlabel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; font-weight: 600;
  color: var(--label); text-transform: uppercase; margin: 22px 0 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.dlabel .dvalue { font-size: 12px; color: var(--link); font-weight: 700; }
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 700; color: var(--text);
  cursor: pointer;
}
.chip:hover { border-color: rgba(255, 255, 255, .3); }
.chip.active { background: linear-gradient(#4d8ef8, #2f6fe0); border-color: rgba(120, 170, 255, .5); color: #fff; }

input[type="range"].slider { width: 100%; accent-color: var(--blue-hi); margin: 6px 0 2px; }
.slider-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--label); }

.btn {
  border: none; cursor: pointer; font-weight: 700; font-size: 14px;
  border-radius: 14px; padding: 14px 20px;
}
.btn-primary { flex: 1; background: linear-gradient(#4d8ef8, #2f6fe0); color: #fff;
  box-shadow: 0 6px 18px rgba(47, 111, 224, .35); }
.btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.iconbtn {
  width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.iconbtn:hover { color: var(--bright); border-color: rgba(255, 255, 255, .3); }

/* ---------- Detail modal ---------- */
#modalBackdrop {
  position: fixed; inset: 0; z-index: 1600; background: rgba(5, 8, 15, .6);
  animation: bdIn .2s ease;
}
#modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1610;
  width: 520px; max-width: calc(100vw - 24px); max-height: min(86vh, 820px);
  background: #131a2a; border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; overflow: hidden;
  animation: cardIn .22s ease;
}
#modal .mphoto {
  height: 190px; flex: 0 0 auto; position: relative;
  background: repeating-linear-gradient(135deg, #1a2233 0 12px, #161d2c 12px 24px);
  display: flex; align-items: center; justify-content: center;
}
#modal .mphoto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
#modal .mphoto .nophoto {
  font-family: var(--mono); font-size: 12px; color: var(--label);
  letter-spacing: 1px; white-space: nowrap;
}
#modal .mbadge {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .6px;
  padding: 3px 7px; border-radius: 6px;
}
.mbadge.owner { background: var(--green-bg); color: var(--green); border: 1px solid rgba(79, 208, 138, .4); }
.mbadge.dealer { background: #101c33; color: var(--blue-hi); border: 1px solid rgba(77, 142, 248, .4); }
#modal .mclose {
  position: absolute; top: 12px; right: 12px;
}
#modal .mbody { overflow-y: auto; padding: 18px 24px 24px; }
#modal .mlabel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; font-weight: 600;
  color: var(--label); text-transform: uppercase;
}
#modal .mrent { font-size: 34px; font-weight: 800; color: var(--bright); line-height: 1.15; }
#modal .mrent small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 6px; }
#modal .msub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
#modal .mchips { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.mchip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 7px 11px; font-size: 12.5px; font-weight: 700; color: var(--text);
}
.mchip .cdot { width: 6px; height: 6px; border-radius: 50%; }
#modal .mmeta {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  margin: 14px 0 18px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  color: var(--muted); font-size: 13px; font-weight: 600;
}
#modal .mactions { display: flex; gap: 10px; }

/* pin rating segment */
.pin-avail .rate {
  display: inline-flex; align-items: center; gap: 2px;
  padding-left: 6px; border-left: 1px solid rgba(58, 36, 0, .25);
  color: #7a4d00; font-weight: 800; font-size: 11px;
}

/* filter button badge */
.fbadge {
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: linear-gradient(#4d8ef8, #2f6fe0); color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.navrow .nico { font-size: 12px; opacity: .9; }

/* area snapshot + rating inside flat card */
.snapshot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 13px 16px;
  background: rgba(255, 154, 43, .07); border: 1px solid rgba(255, 154, 43, .25);
  border-radius: 14px; font-size: 12.5px; color: var(--muted);
}
.snapshot b { display: block; color: var(--bright); font-size: 13px; margin-bottom: 2px; }
.snapshot a { font-size: 18px; font-weight: 800; }
.mrating { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.mrating .rrow { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.mrating .rnum { font-size: 30px; font-weight: 800; color: var(--bright); }
.mrating .rstars { color: var(--orange-hi); letter-spacing: 2px; }
.mrating .rmeta { color: var(--muted); font-size: 12px; }

/* cluster list modal */
.ctitle { margin: 0; font-size: 21px; font-weight: 800; color: var(--bright); }
.csub { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; margin: 6px 0 14px; }
.csub .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.clist { display: flex; flex-direction: column; gap: 8px; }
.crow {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 11px 14px; cursor: pointer; color: var(--text); font-family: inherit;
}
.crow:hover { border-color: var(--border); background: #182034; }
.crow b { font-size: 15px; color: var(--bright); }
.crow small { color: var(--muted); }
.crmain { flex: 1; line-height: 1.35; }
.crmeta { font-size: 12px; color: var(--muted); }
.crgo { color: var(--label); font-size: 18px; }
.rbadge {
  font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 6px; flex: 0 0 auto;
}
.rbadge.avail { background: var(--green-bg); color: var(--green); border: 1px solid rgba(79, 208, 138, .4); }
.rbadge.pinned { background: #101c33; color: var(--blue-hi); border: 1px solid rgba(77, 142, 248, .4); }

/* list-a-flat modal */
.tabrow { margin-top: 16px; }
.tabrow .chip { flex: 1; text-align: center; }
.lfselect {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  font-size: 14px; font-weight: 600; outline: none;
}
.lfselect option { background: var(--panel-solid); }

/* lead ("I'm interested") form fields */
.leadfield {
  width: 100%; padding: 12px 14px; margin-top: 6px; border-radius: 12px;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  font-family: var(--font); font-size: 14px; font-weight: 600; outline: none;
}
.leadfield::placeholder { color: var(--label); font-weight: 600; }
.leadfield:focus { border-color: var(--link); }
textarea.leadfield { resize: vertical; min-height: 46px; line-height: 1.4; }

/* how-it-works modal */
.hsub { color: var(--muted); font-size: 13.5px; margin: 8px 0 18px; }
.hrow { display: flex; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.hrow b { display: block; color: var(--bright); font-size: 14px; margin-bottom: 2px; }
.hico {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.hico.avail { background: linear-gradient(#ffb658, #ff9a2b); color: var(--orange-text); }
.hico.ref { background: linear-gradient(#4d8ef8, #2f6fe0); color: #fff; }
.hico.bell { background: #241d10; border: 1px solid rgba(255, 182, 88, .4); color: var(--orange-hi); }
.hnote {
  margin-top: 18px; padding: 13px 16px; font-size: 12.5px; color: var(--muted);
  background: rgba(79, 208, 138, .06); border: 1px solid rgba(79, 208, 138, .22);
  border-radius: 14px;
}

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 1700;
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: 12px;
  color: var(--bright); font-size: 13.5px; font-weight: 600;
  padding: 12px 20px; box-shadow: var(--shadow);
  animation: toastIn .25s ease;
}

/* ---------- Localities page ---------- */
#locPanel {
  width: 380px; max-width: 42%; border-right: 1px solid var(--border-soft);
  overflow-y: auto; background: #0f1524;
}
#listMeta {
  padding: 12px 18px; font-size: 11px; color: var(--label);
  font-family: var(--mono); letter-spacing: 1px; text-transform: uppercase;
  position: sticky; top: 0; background: #0f1524; border-bottom: 1px solid var(--border-soft); z-index: 2;
}
#locRows { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
#emptyState { padding: 30px 16px; color: var(--muted); text-align: center; }
.locrow {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 12px 14px; cursor: pointer; transition: border-color .12s, background .12s;
}
.locrow:hover { border-color: var(--border); background: #182034; }
.locrow.active { border-color: rgba(120, 170, 255, .55); background: #17233d; }
.locrow-name { font-size: 14px; font-weight: 700; color: var(--bright); }
.locrow-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.locrow-side { text-align: right; flex: 0 0 auto; }
.locrow-rent { font-size: 14px; font-weight: 800; color: var(--orange-hi); }
.locrow-appr { font-size: 11px; margin-top: 1px; }

#detailWrap { flex: 1; overflow-y: auto; }
#detail { padding: 24px 30px 48px; max-width: 880px; }
.detail-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.detail-head h2 { margin: 0 0 2px; font-size: 24px; font-weight: 800; color: var(--bright); }
.detail-sub { color: var(--muted); font-size: 13px; }
.ext { font-weight: 700; font-size: 13px; white-space: nowrap; }
#detail h3 { margin: 26px 0 12px; font-size: 15px; font-weight: 800; color: var(--bright); }
#detail h3 small { color: var(--label); font-weight: 500; font-size: 12px; }

.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.stat {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 12px 16px; min-width: 132px;
}
.stat-label {
  font-family: var(--mono); font-size: 9.5px; color: var(--label);
  text-transform: uppercase; letter-spacing: .8px; font-weight: 600;
}
.stat-value { font-size: 19px; font-weight: 800; margin-top: 3px; color: var(--bright); }
.stat-value small { font-weight: 500; color: var(--muted); font-size: 11px; }
.stat-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
a.stat { color: inherit; text-decoration: none; display: block; }
a.stat:hover { border-color: var(--orange); }

/* floating BHK size filter — pinned to the right edge on the map and on
   locality/BHK pages (above Leaflet's ~1000, below the drawer's 1500s) */
.bhkbar {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px); z-index: 1080;
  max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: none;
}
.bhkbar::-webkit-scrollbar { display: none; }
.bhkbar a, .bhkbar button {
  padding: 8px 12px; border-radius: 11px; white-space: nowrap; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: none;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.bhkbar a:hover, .bhkbar button:hover { color: var(--bright); }
.bhkbar a.on, .bhkbar button.on {
  background: linear-gradient(var(--orange-hi), var(--orange)); color: var(--orange-text);
}
/* on the map the top nav pill reaches the right edge on smaller windows — sit lower */
.floating .bhkbar { top: 58%; }
/* homepage scrolls now: keep the size bar inside the map viewport (absolute in
   #mapWrap) so it scrolls away with the map instead of floating over #browse */
body.mappage #mapBhkBar { position: absolute; }
/* keep the zoom control clear of the bar */
#map .leaflet-bottom.leaflet-right { right: 104px; }
/* below ~1120px the centered 920px article runs under the right rail — pad for it */
@media (max-width: 1120px) {
  .locpage .locmain { padding-right: 100px; }
}

.pct.up { color: var(--green); font-weight: 700; }
.pct.down { color: var(--red); font-weight: 700; }

/* /rent/ + /price/ hubs — full directory of locality + BHK pages */
.hubsearch { margin: 18px 0 6px; }
.hubsearch input {
  width: 100%; max-width: 420px;
  background: var(--panel-solid); color: var(--bright);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 16px; font: inherit; font-size: 13.5px; font-weight: 600;
  outline: none;
}
.hubsearch input::placeholder { color: var(--muted); font-weight: 500; }
.hubsearch input:focus { border-color: var(--orange); }
.alist { display: flex; flex-direction: column; }
.arow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border-soft);
}
.arow .aloc { color: var(--text); font-size: 13.5px; font-weight: 700; margin-right: auto; }
.arow .aloc:hover { color: var(--link); }
.asub { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.asub a {
  font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap;
  padding: 3px 8px; border: 1px solid var(--border-soft); border-radius: 8px;
}
.asub a:hover { color: var(--bright); border-color: var(--border); }

table.appr { border-collapse: collapse; font-size: 13px; width: 100%; max-width: 580px; }
table.appr th, table.appr td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
table.appr th:first-child, table.appr td:first-child { text-align: left; color: var(--text); }
table.appr th {
  font-family: var(--mono); color: var(--label); font-size: 10px;
  text-transform: uppercase; letter-spacing: .8px; font-weight: 600;
}

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 6px 0; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-item b { color: var(--bright); }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chartwrap {
  border: 1px solid var(--border-soft); border-radius: 14px;
  background: var(--card); padding: 10px; overflow-x: auto;
}
.chartwrap svg { width: 100%; height: auto; display: block; min-width: 480px; }
.gridline { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.tick { font-size: 11px; fill: var(--label); font-family: var(--mono); }
.note { color: var(--muted); font-size: 12px; max-width: 640px; }

/* localities topbar filters */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters select {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px;
  font-size: 13.5px; font-weight: 700; background: var(--panel); color: var(--text);
  box-shadow: var(--shadow); outline: none; cursor: pointer;
}
.filters select option { background: var(--panel-solid); }
.checklabel {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: var(--muted); font-weight: 600;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 12px 16px; box-shadow: var(--shadow);
}
.checklabel input { accent-color: var(--blue-hi); }

/* ---------- Homepage: map fills the first viewport, crawlable browse
   section scrolls in below (tier-2 links for users and crawlers) ---------- */
body.mappage { height: auto; min-height: 100vh; overflow-y: auto; overflow-x: hidden; }
body.mappage main {
  flex: none;
  height: calc(100vh - 94px);   /* header (55px) + navrow (39px) */
  height: calc(100dvh - 94px);
  min-height: 420px;
}
#statusPill #statBrowse { font-weight: 700; }
/* Prominent, always-visible jump-to-content button over the map. Absolute in
   #mapWrap so it sits above the map and scrolls away once #browse is reached. */
.scrolldown {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 1000; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: linear-gradient(var(--orange-hi), var(--orange)); color: var(--orange-text);
  font-weight: 800; font-size: 14px; letter-spacing: .2px; text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .18);
  animation: scrollNudge 1.8s ease-in-out infinite;
}
.scrolldown:hover { color: var(--orange-text); filter: brightness(1.06); }
.scrolldown:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes scrollNudge {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 5px); }
}
@media (prefers-reduced-motion: reduce) { .scrolldown { animation: none; } }
#browse { max-width: 920px; margin: 0 auto; padding: 30px 22px 60px; width: 100%; scroll-margin-top: 12px; }
#browse h2 { font-size: 17px; font-weight: 800; color: var(--bright); margin: 28px 0 12px; }
#browse .intro { color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 720px; }
#browse .intro b { color: var(--bright); }
#browse .chiprow .chip { text-decoration: none; display: inline-block; }
#browse a.chip:hover { color: var(--bright); }
/* docked locality landing page (fetched static page) — #browse already pads;
   its own footer sits flush at the bottom of the docked view */
#browse .locmain.embed { padding: 0; max-width: none; }
#browse .locmain.embed .sitefoot { margin-left: -22px; margin-right: -22px; }
/* SEO content section (below #browse; hidden while a locality is docked) */
#seo-home {
  max-width: 1040px; margin: 0 auto; width: 100%;
  padding: 6px 22px 72px; border-top: 1px solid var(--border-soft);
}
body.loc-focused #seo-home { display: none; }
#seo-home h2 { font-size: 18px; font-weight: 800; color: var(--bright); margin: 36px 0 12px; }
#seo-home h3 { font-size: 14px; font-weight: 700; color: var(--text); margin: 20px 0 10px; }
#seo-home h3 small { color: var(--muted); font-weight: 600; font-size: 12px; }
#seo-home .intro { color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 780px; margin: 0 0 12px; }
#seo-home .intro b { color: var(--bright); }
#seo-home .chiprow { margin-bottom: 6px; }
#seo-home .chiprow .chip { text-decoration: none; display: inline-block; }
#seo-home a.chip:hover { color: var(--bright); }
#seo-home .lgrid { margin-bottom: 8px; }

/* ---------- Locality SEO pages (/rent/<slug>/) ---------- */
body.locpage { overflow: auto; height: auto; min-height: 100vh; }
body.locpage #topbar { position: static; }
body.locpage .navrow { margin: 4px auto 0; position: static; transform: none; }
.locmain { max-width: 920px; margin: 0 auto; padding: 26px 22px 60px; width: 100%; }
.locmain h1 { font-size: 26px; font-weight: 800; color: var(--bright); margin: 6px 0 10px; }
.locmain h2 { font-size: 17px; font-weight: 800; color: var(--bright); margin: 30px 0 12px; }
.locmain h2 small { color: var(--label); font-weight: 500; font-size: 12px; }
.locmain .intro { color: var(--muted); font-size: 14.5px; line-height: 1.65; max-width: 720px; }
.locmain .intro b { color: var(--bright); }
#locmap {
  height: 380px; border-radius: 16px; border: 1px solid var(--border-soft);
  overflow: hidden; background: var(--bg);
}
.lgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;
}
.lcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 14px;
  color: var(--text); transition: border-color .12s;
}
.lcard { cursor: pointer; text-align: left; font: inherit; padding: 0; }
.lcard:hover { border-color: var(--border); color: var(--text); }
.lcard:hover .lcta { color: var(--orange-hi); }
.lcard:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.lbody .lcta { margin-top: 6px; color: var(--link); font-weight: 700; font-size: 12.5px; }
.lthumb {
  height: 140px; background: repeating-linear-gradient(135deg, #1a2233 0 12px, #161d2c 12px 24px);
  display: block; overflow: hidden;
}
.lthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lbody { padding: 11px 14px; display: flex; flex-direction: column; gap: 2px; }
.lbody b { font-size: 16px; color: var(--bright); }
.lbody b small { font-weight: 500; color: var(--muted); font-size: 11px; }
.lbody span { font-size: 12.5px; color: var(--muted); }
.lbody .lproj { color: var(--orange-hi); font-weight: 600; font-size: 12px; }
.faqs details {
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 0 16px; margin-bottom: 8px;
}
.faqs summary {
  cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--bright);
  padding: 13px 0; list-style-position: outside;
}
.faqs p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.locmain .chiprow .chip { text-decoration: none; display: inline-block; }
.locmain a.chip:hover { color: var(--bright); }

/* site-wide footer on generated pages */
.sitefoot { border-top: 1px solid var(--border-soft); margin-top: 44px; padding: 24px 22px 46px; }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; max-width: 920px; margin: 0 auto 10px; }
.sitefoot nav a { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sitefoot nav a:hover { color: var(--bright); }
.sitefoot p { max-width: 920px; margin: 8px auto 0; font-size: 11.5px; color: var(--label); }

/* mobile toggle */
#toggleView {
  display: none; position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 1200; background: linear-gradient(#4d8ef8, #2f6fe0); color: #fff; border: none;
  border-radius: 999px; padding: 13px 24px; font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(47, 111, 224, .45); cursor: pointer;
}

/* ---------- Animations ---------- */
@keyframes bdIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.94) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } }
@keyframes drawerIn { from { transform: translateX(100%) } to { transform: translateX(0) } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px) } to { opacity: 1; transform: translate(-50%, 0) } }

@media (max-width: 820px) {
  .floating .navrow { top: 132px; }
  .brand p { display: none; }
  #legend { display: none; }
  #statusPill { bottom: 74px; font-size: 12px; padding: 9px 14px; }
  #locPanel { width: 100%; max-width: 100%; }
  #detailWrap { display: none; }
  body.show-map #locPanel { display: none; }
  body.show-map #detailWrap { display: block; }
  #toggleView { display: block; }
  #drawer { width: 100vw; }
}

/* ---------- Phones: full-width content pages, collapsing grid, and the BHK
   size filter moved to a slim bottom bar (was a fixed right rail that pinched
   the text). Kept last so it overrides the 1120px right-gutter rule. ---------- */
@media (max-width: 640px) {
  /* near-full-width gutters everywhere */
  .locmain, #browse, #seo-home { padding-left: 14px; padding-right: 14px; }
  body.locpage .locmain { padding-right: 14px; }   /* beats the 100px rail gutter */
  body.locpage { overflow-x: hidden; }             /* clip any stray overflow */

  /* listing grid: collapse to 1–2 columns instead of overflowing at 250px */
  .lgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* appreciation table: scroll horizontally rather than cramp */
  table.appr { display: block; overflow-x: auto; white-space: nowrap; max-width: none; }

  /* BHK size filter -> slim swipeable bottom bar (content pages only) */
  body.locpage .bhkbar {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto;
    transform: none; flex-direction: row; justify-content: center;
    max-height: none; overflow-x: auto; overflow-y: hidden;
    gap: 6px; padding: 6px 8px;
  }
  body.locpage .bhkbar a, body.locpage .bhkbar button { flex: 0 0 auto; }

  /* misc phone tidy-ups */
  .searchwrap { max-width: none; }
  .locmain h1 { font-size: 22px; }
  .scrolldown { bottom: 14px; padding: 11px 18px; font-size: 13px; }
}