* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ui-modal-grad: linear-gradient(90deg, #d4f5d6 0%, #e8f7d8 30%, #cfeaff 100%); }
body, html { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1a1a; color: #eee; overflow: hidden; }

/* height: use the DYNAMIC viewport on mobile so the bottom dock isn't hidden behind the browser's
   URL bar. With plain 100vh the app is taller than the visible area (100vh excludes the URL bar),
   so an absolutely-positioned bottom:14px dock falls below the fold and can't be scrolled to
   (overflow is hidden). 100dvh matches the visible area; 100vh stays as the fallback. */
#app { position: relative; height: 100vh; height: 100dvh; width: 100vw; overflow: hidden; }

header {
  background: #2a2a2a;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #3a3a3a;
}
header h1 { font-size: 18px; font-weight: 600; }
header nav { display: flex; gap: 16px; margin-left: auto; }
header nav a { color: #aaa; text-decoration: none; padding: 8px 12px; border-radius: 6px; }
header nav a:hover { background: #3a3a3a; color: #fff; }

#legend { display: flex; gap: 14px; font-size: 13px; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

#renderCanvas { width: 100%; height: 100%; outline: none; touch-action: none; }

#info-panel {
  position: absolute;
  top: 130px;
  right: 16px;
  z-index: 20;
  width: 300px;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  transition: transform .2s, opacity .2s;
}
#info-panel.hidden { display: none; }
#info-panel h2 { margin-bottom: 12px; font-size: 20px; }
#info-panel button#close-panel {
  position: absolute; top: 8px; right: 12px;
  background: transparent; color: #aaa; border: none; cursor: pointer; font-size: 20px;
}
.info-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #333; font-size: 14px; }
.info-row label { color: #888; }
.info-row span { color: #fff; text-align: right; }
.status-badge { padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.status-badge.available { background: #4caf50; color: #000; }
.status-badge.reserved { background: #ffc107; color: #000; }
.status-badge.sold { background: #f44336; color: #fff; }
.status-badge.booked { background: #2196f3; color: #fff; }

/* Premium splash: full-screen project photo + centered branding, a green 3D-cube loader and
   a gradient progress bar; fades out once the scene is built and painted. Drop a hero image
   at /splash-bg.jpg to fill the background — falls back to a dark gradient if it's missing. */
/* Siyaram Enclave's palette is the developer's logo: Bhumi Developers' forest green (#0d6204, the
   "Developers" lettering), the saffron of "Bhumi" and its sun, and ivory - with the project's own
   gold logo animated in the empty middle of the screen (the fleet's branded-splash layout; it took
   the place of the developer's globe emblem, user 2026-10-02). The brown this replaced (#7e2c0c)
   was another client's brand colour, inherited with the fork. */
#loading {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 4vh;
  background: #0a2a07;
  transition: opacity .6s ease; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#splash-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 52% 40% at 50% calc(50% - 1.5vh + 64px), rgba(255,176,72,.17), rgba(255,176,72,0) 72%),  /* saffron sunrise behind the logo */
    radial-gradient(ellipse at 50% 40%, #1f6d16 0%, #0f420b 48%, #061b04 100%);                          /* Bhumi green */
  transform-origin: center;
  animation: splash-zoom 5s ease-in-out infinite alternate;
}
@keyframes splash-zoom { from { transform: scale(1.0); } to { transform: scale(1.12); } }
.splash-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(4,12,3,.30), rgba(4,12,3,0) 36%, rgba(4,12,3,0) 64%, rgba(4,12,3,.52));
}
/* The logo, centred in the free band between the title stack and the loader: the band is a flex
   item taking whatever height the title leaves - from where the title's text ends (the -16px undoes
   .splash-center's bottom padding) to the loader's box, pinned 7vh up and 99px tall - and the logo
   sizes itself from that band through a container query, less 28px top and bottom so its 6px float
   stays clear. Where the band is too short for a legible logo (a landscape phone) it is not shown. */
.splash-brand-band {
  position: relative; z-index: 2;
  flex: 1 1 0; min-height: 0; align-self: stretch;
  margin: -16px 0 calc(7vh + 99px);
  container-type: size;
  display: flex; align-items: center; justify-content: center;
}
/* Every motion below is transform or opacity, which the compositor runs on its own thread: the
   splash is on screen exactly while Babylon builds the scene in 100+ ms main-thread blocks. Nothing
   starts until the image has loaded AND decoded (.is-in, set by its onload); a failed load leaves
   the logo invisible rather than a broken-image icon. The logo is 1200 x 423 (2.84:1): the client's
   own transparent gold logo, made WebP by _source/make-splash-assets.py. */
.splash-emblem {
  position: relative; isolation: isolate;
  /* 44% of the screen's width (620 px at the least, 940 at the most), as the band's height allows */
  width: min(80vw, max(620px, 44vw), 940px, calc((89vh - 400px) * 2.84));   /* no container queries: a fixed-stack estimate */
  width: min(80vw, max(620px, 44vw), 940px, calc((100cqh - 56px) * 2.84));
  aspect-ratio: 1200 / 423;
}
.splash-brand {
  position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(255,190,90,.28));
  opacity: 0;
}
/* A warm aura breathing behind the gold - a wide logo, so no round ripple rings. */
.splash-emblem::before {
  content: ''; position: absolute; inset: -22% -6%; z-index: 0;
  background: radial-gradient(closest-side, rgba(255,186,84,.30), rgba(255,186,84,.10) 55%, rgba(255,186,84,0));
  opacity: 0; pointer-events: none;
}
/* A glint crossing the gold: a skewed band of light moved by transform, masked by the logo's own
   alpha so only the letters and the arrow catch it. */
.splash-glint {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  pointer-events: none; mix-blend-mode: overlay;
  -webkit-mask: url(/project-logo.webp) center / contain no-repeat;
          mask: url(/project-logo.webp) center / contain no-repeat;
}
.splash-glint::before {
  content: ''; position: absolute; top: -25%; bottom: -25%; left: 0; width: 18%;
  background: linear-gradient(90deg, rgba(255,251,236,0), rgba(255,251,236,.95) 50%, rgba(255,251,236,0));
  transform: translateX(-160%) skewX(-20deg);
}
.splash-emblem.is-in { animation: splash-emblem-float 3.2s ease-in-out 1.3s infinite alternate; }
.splash-emblem.is-in .splash-brand { animation: splash-emblem-rise 1.3s cubic-bezier(.2,.75,.25,1) both; }
.splash-emblem.is-in::before { animation: splash-emblem-fade 1.2s ease-out .5s both, splash-emblem-aura 3.2s ease-in-out 1.7s infinite alternate; }
.splash-emblem.is-in .splash-glint::before { animation: splash-emblem-glint 4.5s ease-in-out 1.2s infinite; }
@container (max-height: 110px) { .splash-emblem { display: none; } }
/* Rises into place like a sign tipping upright: from lying back, a touch past, and settle. */
@keyframes splash-emblem-rise {
  0%   { opacity: 0; transform: perspective(1200px) rotateX(34deg) translateY(22px) scale(.92); }
  50%  { opacity: 1; }
  80%  { transform: perspective(1200px) rotateX(-4deg) translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1); }
}
@keyframes splash-emblem-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes splash-emblem-aura { from { transform: scale(.95); } to { transform: scale(1.06); } }   /* opacity: the fade */
/* One 1.8s sweep, then a rest: a glint that never stops reads as a progress bar. (The band is 18%
   of the logo wide and skewed: -160% puts it clear of the left edge, 620% clear of the right.) */
@keyframes splash-emblem-glint {
  0%        { transform: translateX(-160%) skewX(-20deg); }
  40%, 100% { transform: translateX(620%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  #splash-bg, .splash-emblem.is-in, .splash-emblem.is-in .splash-glint::before { animation: none; }
  .splash-emblem.is-in::before { animation: none; opacity: .7; }
  .splash-emblem.is-in .splash-brand { animation: splash-emblem-fade .6s ease-out both; }
}
@keyframes splash-emblem-fade { from { opacity: 0; } to { opacity: 1; } }
.splash-center {
  position: relative; z-index: 2; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center; padding: 16px;
}
/* text-transform, NOT a .toUpperCase() at build time. build-config.js injects this slot
   upper-cased, and viewer.js then rewrites it from SITE_CONFIG.name, which is mixed
   case — so every project flashed caps for one frame and settled to title case. Doing it
   in CSS survives whatever writes the text last. Same class as the /project.config.js
   bug: build-config's output is not the last word on what the page says. */
/* Set in a serif, as the developer's wordmark is. */
.splash-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 5.2vw, 48px); font-weight: 400; letter-spacing: 8px;
  margin: 8px 0 8px; color: #f7f3e6; text-shadow: 0 2px 20px rgba(0,0,0,.55);
  text-transform: uppercase;
}
.splash-sub { font-size: 12px; letter-spacing: 4px; color: #ffc46e; opacity: .94; }   /* saffron */
@media (max-width: 420px) { .splash-title { letter-spacing: 4px; } .splash-sub { letter-spacing: 2.5px; } }   /* one line on a phone */
/* The developer's credit: their wordmark straight on the green, no tag (user 2026-10-02: "remove
   white background"). The letters' counters are cut out of the image; a thin light halo keeps the
   green "Developers" off the green ground, and a soft shadow lifts the whole mark. */
.splash-by {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px;
  font-size: 10.5px; letter-spacing: 3.5px; color: #eef3e6; opacity: .95;
}
.splash-by img {
  width: 150px; height: auto;
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.65)) drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
/* Loader (rotating cube + progress bar + status) pinned to the bottom centre, clear of the
   centred background logo art. The logo + title stay at the top via #loading's align-items. */
.splash-loader {
  position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.splash-cube { width: 46px; height: 46px; perspective: 220px; margin: 0 0 4px; }
.cube {
  width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  animation: kg-cube 2.6s infinite ease-in-out;
}
/* saffron cube: the "Bhumi" orange, so the loader stands off the green ground */
.cube div {
  position: absolute; width: 46px; height: 46px;
  background: linear-gradient(135deg, #ffc46e, #ea8a1e);
  border: 1px solid rgba(255,255,255,.2); box-shadow: 0 0 18px rgba(255,176,72,.35) inset;
}
.cube .cf { transform: translateZ(23px); }
.cube .cb { transform: rotateY(180deg) translateZ(23px); background: linear-gradient(135deg,#d27416,#9e520c); }
.cube .cr { transform: rotateY(90deg)  translateZ(23px); background: linear-gradient(135deg,#f0a040,#bd6812); }
.cube .cl { transform: rotateY(-90deg) translateZ(23px); background: linear-gradient(135deg,#f0a040,#bd6812); }
.cube .ct { transform: rotateX(90deg)  translateZ(23px); background: linear-gradient(135deg,#ffd796,#f3a645); }
.cube .cd { transform: rotateX(-90deg) translateZ(23px); background: linear-gradient(135deg,#a85a10,#7a3f08); }
#splash-bar-wrap { width: 200px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 18px; }
#splash-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #47a52c, #ffb44f); transition: width .3s ease; }
.splash-status { margin-top: 13px; font-size: 11px; letter-spacing: 3px; color: #d6e5cc; opacity: .85; }
/* The platform's credit, no tag (user 2026-10-02). The stock Plotex mark's wordmark is dark grey and
   vanishes on the green; a white silhouette of it "not looks proper" (user 2026-10-02), so this is
   the mark's ON-DARK variant - the X in its colours, "Plot" in ivory (as Vanadurga's splash) - cropped
   to the mark, where the stock file is a 500 px square with the mark in its middle 2/3. */
.splash-powered {
  position: absolute; right: 18px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 10px; font-size: 9.5px; letter-spacing: 2px;
  color: #eef3e6; opacity: .9;
}
.splash-powered img { width: auto; height: 46px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4)); }
@media (max-width: 520px) { .splash-powered { font-size: 8.5px; gap: 7px; } .splash-powered img { height: 36px; } }
#loading.fade-out { opacity: 0; pointer-events: none; }
@keyframes kg-spin { to { transform: rotate(360deg); } }
@keyframes kg-cube { 0% { transform: rotateX(-22deg) rotateY(0deg); } 100% { transform: rotateX(-22deg) rotateY(360deg); } }
.hidden { display: none !important; }

/* On-screen joysticks for touch walk mode (left = move, right = look). Shown only when body has
   .walk-touch (set on entering walk mode on a touch device). */
.walk-stick {
  position: fixed; bottom: 28px; width: 116px; height: 116px; border-radius: 50%; z-index: 36;
  background: rgba(255,255,255,.10); border: 2px solid rgba(255,255,255,.32);
  box-shadow: 0 2px 12px rgba(0,0,0,.25); touch-action: none; display: none; user-select: none;
}
.walk-stick.left { left: 22px; }
.walk-stick.right { right: 22px; }
.walk-stick .nub {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.walk-stick .ico { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-size: 9px; letter-spacing: 1px; color: rgba(255,255,255,.7); }
body.walk-touch .walk-stick { display: block; }
/* On touch in walk mode the top header + bottom dock cover too much of the small viewport and
   the joysticks need the full screen — viewer.js adds .walking-touch on entry, removes on exit. */
body.walking-touch #ui-header,
body.walking-touch #ui-dock,
body.walking-touch #ui-enquire { display: none; }

/* ============================ Viewer chrome (Plotex light theme) ============================ */
#ui-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 25; height: 60px;
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: linear-gradient(90deg, #fff, #e8f5e9, #a5d6a7, #81d4fa, #b3e5fc, #fff);
  border-bottom: 2px solid #4caf50;
}
.uh-logo { height: 44px; width: auto; }
.uh-sep { color: #4caf50; font-weight: 700; }
.uh-name { color: #2e7d32; font-weight: 600; font-size: 16px; }
.uh-floors {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255,255,255,.6); border: none; border-radius: 6px; padding: 7px 14px;
  color: #37474f; font-size: 13px; font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.uh-floors:hover { background: rgba(255,255,255,.85); }
.uh-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.uh-icon {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; background: transparent; border: none;
  display: flex; align-items: center; justify-content: center; color: #37474f; transition: all .2s;
}
.uh-icon:hover { background: rgba(0,0,0,.06); color: #1565c0; }
.uh-icon.muted { color: #c62828; }
.uh-badge {
  position: absolute; top: 4px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #3cb54a; color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

#ui-compass { position: absolute; top: 70px; right: 14px; z-index: 20; width: 80px; height: 80px; pointer-events: none; }
#ui-compass-rose { position: absolute; width: 100%; height: 100%; transition: transform .15s ease-out; transform-origin: 50% 50%; }
#ui-compass-rose svg { width: 100%; height: 100%; overflow: visible; display: block; }

#ui-rstack {
  position: absolute; top: 47%; right: 14px; transform: translateY(-50%); z-index: 20;
  display: flex; flex-direction: column; gap: 11px;
}
.rs-btn {
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer; border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: filter .2s, background .2s, color .2s;
}
.rs-btn:hover { filter: brightness(1.05); }
.rs-orbit, .rs-walk, .rs-dim { background: rgba(255,255,255,.88); color: #37474f; }
.rs-orbit.active, .rs-walk.active { background: #4caf50; color: #fff; }
/* 2D/3D is a text pill, not an icon — "2D"/"3D" says more in two characters than any glyph
   would, and it is the one control whose LABEL is the state, so it never shows .active. */
.rs-dim { font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .5px; }

#ui-dock {
  position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #ffffffd9, #e8f5e9d9, #a5d6a78c, #81d4fa8c, #ffffffd9);
  border: 1.5px solid rgba(76,175,80,.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 6px 10px; border-radius: 28px; box-shadow: 0 2px 16px rgba(0,0,0,.1);
  max-width: calc(100vw - 24px);
}
#ui-search { display: flex; align-items: center; background: #fff; border-radius: 22px; padding: 4px 6px 4px 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
#ui-search-input {
  background: transparent; border: none; outline: none; color: #2a3340; font-size: 13px;
  width: 180px; max-width: 38vw;
}
#ui-search-input::placeholder { color: #97a1ad; }
#ui-search-go { background: transparent; border: none; cursor: pointer; padding: 6px; display: flex; }
#ui-search-go svg { stroke: #4caf50; }
.ui-dock-divider { width: 1px; height: 26px; background: rgba(255,255,255,.5); margin: 0 2px; }
.ui-tool {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; flex: none;
  background: rgba(255,255,255,.5); border: 1.5px solid rgba(76,175,80,.35);
  display: flex; align-items: center; justify-content: center; color: #2e7d32; transition: all .2s;
}
.ui-tool svg { stroke: #2e7d32; }
.ui-tool:hover { background: rgba(76,175,80,.12); border-color: #4caf50; }
.ui-tool.active { background: #3cb54a; border-color: #2e9e3f; box-shadow: 0 2px 8px rgba(60,181,74,.45); }
.ui-tool.active svg { stroke: #fff; }
.ui-tool-legend, .ui-tool-legend svg { stroke: none; }
.ui-tool-legend { background: rgba(255,255,255,.62); }
.ui-tool-legend.active { background: rgba(76,175,80,.32); border-color: #4caf50; }

/* active-filter count badge on the dock filter button */
.ui-tool { position: relative; }
.ui-tool-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #f44336; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none;
}
.ui-tool-badge.hidden { display: none; }

/* ── Filter-results banner (top-center) — appears when a filter is active ── */
#ui-filter-banner {
  position: absolute; top: calc(68px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 21;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  max-width: min(560px, calc(100vw - 24px));
  background: rgba(16,22,30,.92); border: 1.5px solid #4caf50; border-radius: 16px;
  padding: 8px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#ui-filter-banner.hidden { display: none; }
.ui-fb-bar { display: flex; align-items: center; gap: 10px; width: 100%; }
.ui-fb-summary {
  display: inline-flex; align-items: center; gap: 8px; flex: 1;
  background: transparent; border: 0; cursor: pointer;
  color: #eaf6ec; font-size: 13.5px; font-weight: 700; padding: 4px 6px; white-space: nowrap;
}
.ui-fb-summary .ui-fb-caret { color: #8bc34a; font-size: 11px; }
.ui-fb-clear {
  display: inline-flex; align-items: center; gap: 5px;
  background: #e53935; border: 0; color: #fff; cursor: pointer;
  font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 9px; white-space: nowrap;
}
.ui-fb-clear:hover { background: #d32f2f; }
.ui-fb-chips {
  display: flex; flex-wrap: wrap; gap: 6px; width: 100%;
  max-height: 152px; overflow-y: auto; padding: 2px;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px;
}
.ui-fb-chips.hidden { display: none; }
.ui-fb-chip {
  min-width: 34px; padding: 5px 10px; border-radius: 9px; cursor: pointer;
  background: rgba(76,175,80,.12); border: 1.5px solid rgba(139,195,74,.55);
  color: #eaf6ec; font-size: 13px; font-weight: 700; transition: all .15s;
}
.ui-fb-chip:hover { background: rgba(76,175,80,.28); border-color: #8bc34a; }
.ui-fb-chip.active { background: #4caf50; border-color: #fff; color: #fff; }
.ui-fb-empty { color: #b8c2cc; font-size: 12.5px; padding: 2px 4px; }

/* status legend bar (visible only in status mode) — matches demo2.plotex.in pill */
#ui-legend {
  position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); z-index: 19;
  display: flex; align-items: center; gap: 18px; max-width: calc(100vw - 24px); flex-wrap: wrap;
  justify-content: center;
  background: #fff; padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  font-size: 13px; color: #1f2937;
}
#ui-legend .legend-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
#ui-legend .legend-label { font-weight: 500; }

#ui-enquire {
  position: absolute; bottom: 84px; right: 14px; z-index: 20;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: linear-gradient(135deg, #4caf50, #66bb6a); border: none; color: #fff;
  font-weight: 700; font-size: 16px; letter-spacing: .5px; padding: 14px 28px; border-radius: 30px;
  box-shadow: 0 4px 16px rgba(76,175,80,.35); transition: all .25s;
}
#ui-enquire:hover { background: linear-gradient(135deg, #43a047, #5cb860); box-shadow: 0 6px 24px rgba(76,175,80,.45); transform: translateY(-2px); }

.ui-powered {
  position: absolute; bottom: 14px; right: 18px; z-index: 15;
  display: flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 2px;
  color: #37474f; opacity: .55; pointer-events: none;
}
.ui-powered img { width: 46px; height: auto; }

/* filter popup */
.ui-pop {
  position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 25;
  background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); display: flex; flex-direction: column; gap: 4px; min-width: 160px;
}
.ui-filter-opt {
  display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left;
  background: transparent; border: none; color: #3a4456; font-size: 13px; padding: 8px 10px; border-radius: 8px;
}
.ui-filter-opt:hover { background: #f1f4f8; }
.ui-filter-opt.active { background: #e7f3d8; color: #1f2a16; }

/* generic modal */
.ui-modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(20,28,40,.5); backdrop-filter: blur(2px); padding: 18px;
}
.ui-modal-box {
  position: relative; background: #fff; border: 1px solid #e3e8ee; border-radius: 14px;
  width: 100%; max-width: 440px; max-height: 86vh; overflow: auto; padding: 22px;
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
/* Info modal needs more room for the property grid + chip rows. */
#ui-modal-body:has(.ui-info) { /* parent is the modal body */ }
.ui-modal-box:has(.ui-info) { max-width: 600px; }
.ui-modal-close {
  position: absolute; top: 10px; right: 14px; background: transparent; border: none;
  color: #97a1ad; font-size: 22px; cursor: pointer; line-height: 1;
}
.ui-modal h3 { color: #1f2733; font-size: 18px; margin-bottom: 4px; }
.ui-modal p, .ui-modal label { color: #5a6675; font-size: 13px; }
.ui-form { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.ui-form input, .ui-form textarea {
  width: 100%; background: #f6f8fb; border: 1px solid #d7dde6; border-radius: 8px;
  padding: 10px 12px; color: #2a3340; font-size: 14px; outline: none; font-family: inherit;
}
.ui-form input:focus, .ui-form textarea:focus { border-color: #8bc34a; }
.ui-btn { border: none; border-radius: 9px; padding: 11px 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ui-btn-wa { background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ui-btn-primary { background: #8bc34a; color: #fff; }
.ui-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ui-gallery img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }
.ui-docs-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ui-doc-row { display: flex; align-items: center; gap: 12px; background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 10px; padding: 10px 12px; }
.ui-doc-icon { font-size: 22px; line-height: 1; flex: none; }
.ui-doc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ui-doc-meta strong { color: #1f2733; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-doc-size { color: #7c8a98; font-size: 12px; }
.ui-doc-row .ui-btn { padding: 8px 12px; font-size: 13px; text-decoration: none; flex: none; }
.ui-docs-empty { color: #7c8a98; }
.ui-modal a.ui-admin-link { color: #2e7d32; font-size: 12px; text-decoration: none; }

/* Downloads modal — demo2 parity: gradient header, multi-select list, footer action */
.ui-downloads { margin: -22px; display: flex; flex-direction: column; }
.ui-downloads-head {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, #d4f5d6 0%, #e8f7d8 30%, #cfeaff 100%);
  padding: 14px 18px; border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.ui-downloads-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.55); color: #1b5e20; font-size: 14px; font-weight: 700;
}
.ui-downloads-title { color: #1b5e20; font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.ui-downloads-body { background: #fff; padding: 4px 16px 8px; }
.ui-downloads-empty { color: #7c8a98; text-align: center; padding: 28px 8px; margin: 0; font-size: 14px; }
.ui-downloads-all {
  display: flex; align-items: center; gap: 10px; padding: 12px 4px;
  border-bottom: 1px solid #eef0f3; cursor: pointer;
  color: #1f2733; font-size: 14px; font-weight: 700;
}
.ui-downloads-all input { width: 18px; height: 18px; accent-color: #4caf50; cursor: pointer; }
.ui-downloads-list { display: flex; flex-direction: column; }
.ui-downloads-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid #eef0f3; cursor: pointer;
}
.ui-downloads-row:last-child { border-bottom: none; }
.ui-downloads-cb { width: 18px; height: 18px; accent-color: #4caf50; cursor: pointer; flex: none; }
.ui-downloads-emoji { font-size: 22px; line-height: 1; flex: none; }
.ui-downloads-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ui-downloads-meta strong { color: #1f2733; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-downloads-type { color: #97a1ad; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.ui-downloads-foot {
  background: #fff; border-top: 1px solid #eef0f3; padding: 12px 16px;
  display: flex; justify-content: flex-end; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
}
.ui-downloads-foot .ui-btn-primary:disabled { background: #cfd6dd; color: #fff; cursor: not-allowed; }

/* Info modal — gradient header, tabs, mini-cards, chips. Demo2 parity. */
.ui-info { margin: -22px; display: flex; flex-direction: column; }
.ui-info-head {
  background: var(--ui-modal-grad);
  padding: 16px 18px 14px; border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.ui-info-head-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ui-info-title { color: #143a1c; font-size: 22px; font-weight: 800; letter-spacing: .2px; }
.ui-info-tag { color: #2e5a36; font-size: 12.5px; font-weight: 600; opacity: .85; }
.ui-info-rera {
  margin-top: 6px; display: inline-block; color: #2e7d32; font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.2px; padding: 3px 9px; border-radius: 12px;
  border: 1.5px solid #4caf50; background: rgba(255,255,255,.55);
}
.ui-info-tabs { display: flex; background: #fff; border-bottom: 1px solid #eef0f3; padding: 0 12px; }
.ui-info-tab {
  background: transparent; border: none; cursor: pointer; padding: 12px 16px;
  font-size: 13px; font-weight: 700; color: #7c8a98; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.ui-info-tab.active { color: #2e7d32; border-bottom-color: #4caf50; }
.ui-info-panel { background: #fff; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.ui-info-card {
  display: flex; align-items: center; gap: 10px;
  background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 10px; padding: 10px 12px;
}
.ui-info-card-ico { font-size: 18px; line-height: 1; flex: none; width: 24px; text-align: center; }
.ui-info-card-label { font-size: 10.5px; font-weight: 800; color: #7c8a98; letter-spacing: .7px; }
.ui-info-card-val { font-size: 13.5px; color: #1f2733; font-weight: 600; margin-top: 1px; }
.ui-info-loc { background: linear-gradient(90deg, #f1f8ed, #eaf6ff); border-color: #d6ecd8; }
.ui-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-info-section { display: flex; flex-direction: column; gap: 8px; }
.ui-info-section-head { font-size: 13px; font-weight: 700; color: #2e7d32; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ui-info-divider { height: 1px; background: linear-gradient(90deg, transparent, #e0e0e0, transparent); margin: 18px 0; }
.ui-info-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-info-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #2a3340;
  background: #eef2f7; border: 1px solid #e3e8ee; border-radius: 14px; padding: 5px 10px;
}
.ui-info-chip-ico { font-size: 13px; line-height: 1; }
.ui-info-chip.cat-security      { background: #fff8e1; border-color: #ffe7a3; color: #5a4a0c; }
.ui-info-chip.cat-services      { background: #e1f5fe; border-color: #b6e2f6; color: #074466; }
.ui-info-chip.cat-comfort       { background: #e8f5e9; border-color: #c0e2c3; color: #1b5e20; }
.ui-info-chip.cat-entertainment { background: #f3e5f5; border-color: #dcc0e0; color: #4a148c; }
.ui-info-chip.cat-connectivity  { background: #e8eaf6; border-color: #c4c9ec; color: #1a237e; }
.ui-info-dev {
  display: flex; align-items: center; gap: 14px;
  background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 12px; padding: 14px;
}
.ui-info-dev-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #fff; padding: 6px; flex: none; }
.ui-info-dev-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ui-info-dev-name { font-size: 16px; font-weight: 800; color: #1f2733; }
.ui-info-dev-tag { font-size: 12.5px; color: #5a6675; }
.ui-info-dev-link { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #2e7d32; text-decoration: none; }
.ui-info-dev-link:hover { text-decoration: underline; }

/* Developer tab — rich layout (demo2 parity). */
.ui-info-section-ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: #43a047; }
.ui-info-section-ico svg { width: 16px; height: 16px; display: block; stroke: #43a047; }
.ui-info-dev-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 14px;
}
.ui-info-dev-logo2 {
  width: 60px; height: 60px; border-radius: 10px; flex: none; object-fit: contain;
  background: #eaf6ec; padding: 6px;
}
.ui-info-dev-logo2.is-placeholder { background: #eaf6ec; }
.ui-info-dev-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ui-info-dev-name2 { font-size: 17px; font-weight: 800; color: #1f2733; }
.ui-info-dev-tag2  { font-size: 12.5px; color: #7c8a98; }
.ui-info-dev-desc {
  font-size: 13px; color: #2a3340; line-height: 1.45; margin-top: 6px;
}
.ui-info-dev-desc.is-clamped > span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.ui-info-dev-more {
  display: inline; padding: 0; margin-top: 2px;
  background: none; border: none; color: #2e7d32; font-weight: 700; font-size: 12.5px;
  cursor: pointer; text-decoration: none;
}
.ui-info-dev-more:hover { text-decoration: underline; }
.ui-info-dev-contacts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ui-info-dev-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #1f2733; text-decoration: none; padding: 4px 0;
}
.ui-info-dev-row:hover .ui-info-dev-row-val { text-decoration: underline; }
.ui-info-dev-row-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 13px; flex: none;
  background: #eef2f7;
}
.ui-info-dev-row-ico.is-phone { background: #e1f5e8; }
.ui-info-dev-row-ico.is-email { background: #fde2e7; }
.ui-info-dev-row-ico.is-web   { background: #ebe5f7; }
.ui-info-dev-row-val { color: #2a3340; word-break: break-all; }

.ui-info-dev-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-info-dev-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  color: #fff; font-weight: 800; font-size: 16px; text-decoration: none;
  transition: filter .15s, transform .15s;
}
.ui-info-dev-social:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ui-info-dev-social > span { display: block; line-height: 1; }

.ui-info-dev-rating {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 14px;
}
.ui-info-dev-rating-num { font-size: 32px; font-weight: 800; color: #1f2733; line-height: 1; }
.ui-info-dev-rating-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ui-info-dev-rating-stars { color: #f5a623; font-size: 16px; letter-spacing: 1px; }
.ui-info-dev-rating-count { font-size: 12px; color: #7c8a98; }
.ui-info-dev-rating-link { font-size: 12.5px; font-weight: 700; color: #2e7d32; text-decoration: none; margin-top: 2px; }
.ui-info-dev-rating-link:hover { text-decoration: underline; }

.ui-info-dev-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-info-dev-stat {
  background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 10px;
  padding: 12px; display: flex; flex-direction: column; gap: 3px;
}
.ui-info-dev-stat-ico { font-size: 16px; line-height: 1; }
.ui-info-dev-stat-label { font-size: 10px; font-weight: 800; color: #7c8a98; letter-spacing: .7px; }
.ui-info-dev-stat-val { font-size: 15px; font-weight: 800; color: #1f2733; }

.ui-info-dev-certs { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-info-dev-cert {
  font-size: 12px; font-weight: 700; color: #2a3340;
  background: #eef2f7; border: 1px solid #e3e8ee;
  border-radius: 999px; padding: 6px 12px;
}
.ui-info-dev-cert.cert-rera           { background: #e8f5e9; border-color: #c0e2c3; color: #1b5e20; }
.ui-info-dev-cert.cert-iso            { background: #fff8e1; border-color: #ffe7a3; color: #5a4a0c; }
.ui-info-dev-cert.cert-green_building { background: #e0f7fa; border-color: #b2ebf2; color: #006064; }
.ui-info-dev-cert.cert-igbc           { background: #e1f5fe; border-color: #b6e2f6; color: #074466; }
.ui-info-dev-cert.cert-griha          { background: #f3e5f5; border-color: #dcc0e0; color: #4a148c; }
.ui-info-dev-cert.cert-leed           { background: #e8f5e9; border-color: #c0e2c3; color: #1b5e20; }
.ui-info-dev-cert.cert-cred           { background: #fce4ec; border-color: #f5b3c8; color: #880e4f; }
.ui-info-dev-cert.cert-nbcc           { background: #e8eaf6; border-color: #c4c9ec; color: #1a237e; }
.ui-info-dev-cert.cert-fire_noc       { background: #e1f5fe; border-color: #b6e2f6; color: #074466; }

/* Developer tab — RERA Reg. No pill, Completed Projects list, Portfolio thumbnail grid. */
.ui-info-dev-rera {
  display: flex; align-items: center; gap: 8px;
  background: #fff8e1; border: 1px solid #ffe7a3; border-radius: 10px;
  padding: 10px 12px; font-size: 12px; color: #5a4a0c;
}
.ui-info-dev-rera-ico { font-size: 16px; line-height: 1; flex: none; }
.ui-info-dev-rera-label { font-weight: 800; letter-spacing: .3px; flex: none; }
.ui-info-dev-rera-num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px; color: #3d3208; word-break: break-all; min-width: 0;
}
.ui-info-dev-projects {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; overflow: hidden;
}
.ui-info-dev-project-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid #eef0f3;
  text-decoration: none; color: #1f2733;
}
.ui-info-dev-project-row:last-child { border-bottom: none; }
.ui-info-dev-project-row.is-link:hover { background: #f6f8fb; }
.ui-info-dev-project-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: #e1f5fe; color: #074466; font-size: 16px;
}
.ui-info-dev-project-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ui-info-dev-project-name { font-size: 13.5px; font-weight: 700; color: #1f2733; }
.ui-info-dev-project-meta { font-size: 11.5px; color: #7c8a98; }
.ui-info-dev-project-chev { color: #c0c8d2; font-size: 18px; line-height: 1; flex: none; }
.ui-info-dev-portfolio {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.ui-info-dev-portfolio-thumb {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px;
  cursor: pointer; background: #eef2f7; border: 1px solid #e3e8ee;
}
.ui-info-dev-portfolio-thumb:hover { filter: brightness(1.05); }

/* Make the Developer tab body scroll when its content overflows (RERA + Projects + Portfolio
   together can exceed the modal). Property tab stays auto-height since it's shorter. */
.ui-info-panel[data-info-panel="developer"] { max-height: 70vh; overflow-y: auto; }

.ui-info-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border-top: 1px solid #eef0f3; padding: 11px 16px;
  font-size: 11px; letter-spacing: 1.5px; color: #7c8a98;
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
}
.ui-info-foot img { width: 18px; height: 18px; object-fit: contain; }
.ui-info-foot strong { color: #2e7d32; font-weight: 800; letter-spacing: 1px; }

/* Filter modal — gradient header, status checkboxes with colour dots, size pills. Demo2 parity. */
.ui-filter { margin: -22px; display: flex; flex-direction: column; }
.ui-filter-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--ui-modal-grad);
  padding: 14px 18px; border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.ui-filter-head-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.55); color: #1b5e20; font-size: 14px; font-weight: 700;
}
.ui-filter-head-title { color: #1b5e20; font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.ui-filter-body { background: #fff; padding: 6px 16px 12px; display: flex; flex-direction: column; gap: 14px; max-height: min(64vh, 560px); overflow-y: auto; }
/* small helper line under budget / frontage inputs showing the available range */
.ui-filter-hint { font-size: 11px; color: #8a96a3; padding-left: 4px; margin-top: -2px; }
/* facing (vastu) direction chips — compact 8-point grid */
.ui-filter-facing { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 4px; }
.ui-filter-dir {
  min-width: 40px; padding: 7px 0; border-radius: 10px; cursor: pointer;
  background: #fff; border: 1.5px solid #ddd; color: #555;
  font-size: 12.5px; font-weight: 700; text-align: center; flex: 1 0 40px;
}
.ui-filter-dir:hover { border-color: #4caf50; color: #2e7d32; }
.ui-filter-dir.active { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.ui-filter-dir .fd-n { display: block; font-size: 9.5px; font-weight: 600; color: #9aa7b2; margin-top: 1px; }
.ui-filter-dir.active .fd-n { color: #4caf50; }
.ui-filter-section { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.ui-filter-section-head {
  font-size: 10.5px; font-weight: 800; color: #7c8a98; letter-spacing: 1px;
  text-transform: uppercase;
}
.ui-filter-list { display: flex; flex-direction: column; gap: 4px; padding-left: 4px; }
.ui-filter-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 6px; border-radius: 8px;
}
.ui-filter-row:hover { background: #f6f8fb; }
.ui-filter-cb { width: 18px; height: 18px; accent-color: #4caf50; cursor: pointer; flex: none; order: 1; }
.ui-filter-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.06); order: 2; }
.ui-filter-name { color: #1f2733; font-size: 14px; font-weight: 600; order: 3; }
.ui-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 4px; }
.ui-filter-pill {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 30px; padding: 5px 14px; border-radius: 999px;
  background: #fff; border: 1.5px solid #e3e8ee; color: #3a4456;
  font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.15;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.ui-filter-pill:hover { border-color: #c5d2dc; }
.ui-filter-pill.active { background: #eaf6e1; border-color: #8bc34a; color: #1b5e20; }
.ui-filter-pill-sub { font-size: 10.5px; font-weight: 600; color: inherit; opacity: .75; margin-top: 1px; letter-spacing: .2px; }
.ui-filter-custom { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.ui-filter-custom.hidden { display: none; }
.ui-filter-custom input {
  flex: 1; min-width: 0; background: #f6f8fb; border: 1px solid #d7dde6; border-radius: 8px;
  padding: 9px 11px; color: #2a3340; font-size: 13px; outline: none; font-family: inherit;
}
.ui-filter-custom input:focus { border-color: #8bc34a; }
.ui-filter-custom-sep { color: #7c8a98; font-size: 12px; font-weight: 700; }
.ui-filter-foot {
  background: #fff; border-top: 1px solid #eef0f3; padding: 12px 16px;
  display: flex; justify-content: flex-end; gap: 10px;
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
}
.ui-filter-reset {
  background: #fff; color: #3a4456; border: 1.5px solid #d7dde6;
}
.ui-filter-reset:hover { background: #f6f8fb; }

.set-list { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 10px; padding: 12px 14px; }
.set-row > span { display: flex; flex-direction: column; gap: 2px; }
.set-name { color: #1f2733; font-size: 14px; font-weight: 600; }
.set-sub { color: #7c8a98; font-size: 12px; }
.set-row input { width: 18px; height: 18px; accent-color: #4caf50; cursor: pointer; flex: none; }
.set-row select { background: #fff; border: 1px solid #d7dde6; border-radius: 8px; padding: 7px 10px; color: #2a3340; font-size: 13px; cursor: pointer; flex: none; }

#ui-toast {
  position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%); z-index: 70;
  background: #1f2733; color: #fff; font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

@media (max-width: 620px) {
  .uh-name { font-size: 13px; }
  .uh-floors { display: none; }
  .ui-tool { width: 34px; height: 34px; }
  /* Icon-only enquire on mobile to save space (the label is dropped). */
  #ui-enquire { padding: 0; width: 46px; height: 46px; border-radius: 50%; justify-content: center; gap: 0; bottom: 74px; }
  #ui-enquire-label { display: none; }
  /* Smaller compass on mobile (desktop keeps the larger 80px). */
  #ui-compass { width: 54px; height: 54px; top: 64px; }
  .ui-powered { bottom: 60px; right: 16px; }
  .rs-btn { width: 40px; height: 40px; }
  .rs-dim { font-size: 13px; }
  #ui-rstack { gap: 9px; }
  /* Keep the whole dock on-screen: tighter spacing, and collapse the search box to an icon. */
  #ui-dock { gap: 6px; padding: 5px 7px; }
  #ui-search { padding: 0; background: transparent; box-shadow: none; }
  #ui-search-input {
    width: 0; padding: 0; opacity: 0; transition: width .2s ease, opacity .2s ease;
  }
  #ui-search-go {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    background: rgba(255,255,255,.5); border: 1.5px solid rgba(76,175,80,.35);
  }
  #ui-search.search-open {
    background: #fff; border-radius: 22px; padding: 4px 4px 4px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.12);
  }
  #ui-search.search-open #ui-search-input { width: 120px; opacity: 1; padding: 4px 6px 4px 0; }
  #ui-search.search-open #ui-search-go { background: transparent; border: none; width: auto; height: auto; }
}

/* full-screen photo lightbox */
.ui-gallery-lb { position: fixed; inset: 0; z-index: 80; display: none; }
.ui-gallery-lb.is-open { display: block; }
.ui-gallery-lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); }
.ui-gallery-lb-header {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #1f2733;
  background: var(--ui-modal-grad); box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.ui-gallery-lb-counter { color: #2e7d32; font-weight: 600; }
.ui-gallery-lb-counter b { color: #1f2733; font-weight: 700; }
.ui-gallery-lb-actions { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; gap: 10px; }
.ui-gallery-lb-actions button {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20,28,40,.72); display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.ui-gallery-lb-actions button:hover { background: rgba(20,28,40,.92); }
.ui-gallery-lb-stage {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 80px 90px 140px;
  pointer-events: none;
}
.ui-gallery-lb-img {
  max-width: min(75vw, 1100px); max-height: 75vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.55); pointer-events: auto;
  touch-action: pan-y;
}
.ui-gallery-lb-caption {
  margin-top: 14px; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: auto;
}
.ui-gallery-lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20,28,40,.72); display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.ui-gallery-lb-arrow:hover { background: rgba(20,28,40,.92); }
.ui-gallery-lb-prev { left: 22px; }
.ui-gallery-lb-next { right: 22px; }
.ui-gallery-lb-arrow.is-hidden { display: none; }
.ui-gallery-lb-strip {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2;
  display: flex; gap: 8px; padding: 0 18px; overflow-x: auto; justify-content: flex-start;
  scrollbar-width: thin;
}
.ui-gallery-lb-strip::-webkit-scrollbar { height: 6px; }
.ui-gallery-lb-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.ui-gallery-lb-thumb {
  flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: 6px;
  opacity: .7; cursor: pointer; outline: 2px solid transparent;
  transition: opacity .15s ease, outline-color .15s ease;
}
.ui-gallery-lb-thumb:hover { opacity: .92; }
.ui-gallery-lb-thumb.is-active { opacity: 1; outline-color: var(--accent-green, #6cc04a); }
.ui-gallery-lb-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #d8e0ea; font-size: 14px;
}
@media (max-width: 620px) {
  .ui-gallery-lb-stage { padding: 80px 14px 120px; }
  .ui-gallery-lb-img { max-width: 92vw; max-height: 62vh; }
  .ui-gallery-lb-prev { left: 8px; }
  .ui-gallery-lb-next { right: 8px; }
  .ui-gallery-lb-arrow { width: 38px; height: 38px; }
}

/* Share View modal — demo2 parity: gradient header pill, "Copy Current View Link" hero button,
   customize section with camera-mode pills, options, UTM tracking, and a live URL preview. */
/* ── Redesigned Share modal (context-aware, native-first + QR) ── */
.ui-share2 { margin: -22px; display: flex; flex-direction: column; }
.ui-share2-head {
  display: flex; align-items: center; gap: 9px;
  background: var(--ui-modal-grad);
  padding: 14px 18px; border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.ui-share2-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.6); }
.ui-share2-title { font-size: 15px; font-weight: 800; color: #14331a; }
.ui-share2-ctx { padding: 10px 18px 0; font-size: 12.5px; color: #5a6675; font-weight: 600; }
.ui-share2-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 18px 4px; }
.ui-share2-qr img { width: 132px; height: 132px; border-radius: 10px; border: 1px solid #e3e8ee; padding: 6px; background: #fff; image-rendering: pixelated; }
.ui-share2-qr span { font-size: 11.5px; color: #8a96a3; font-weight: 600; }
.ui-share2-primary { display: flex; gap: 8px; padding: 12px 18px 4px; flex-wrap: wrap; }
.ui-share2-btn {
  flex: 1 1 0; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 12px; border-radius: 11px; border: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: #fff; transition: filter .15s, transform .1s;
}
.ui-share2-btn:hover { filter: brightness(1.06); }
.ui-share2-btn:active { transform: translateY(1px); }
.ui-share2-btn.is-wa { background: #25d366; }
.ui-share2-btn.is-copy { background: #2e7d32; }
.ui-share2-btn.is-native { background: #1f6feb; }
.ui-share2-social { padding: 12px 18px 6px; }
.ui-share2-social-lbl { display: block; font-size: 10.5px; font-weight: 800; color: #9aa6b2; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; }
.ui-share2-social-row { display: flex; gap: 10px; }
.ui-share2-soc {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 1px solid #e3e8ee;
  display: inline-flex; align-items: center; justify-content: center; background: #fff; transition: all .15s;
}
.ui-share2-soc:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.ui-share2-soc.is-fb { color: #1877f2; } .ui-share2-soc.is-x { color: #111; } .ui-share2-soc.is-email { color: #5a6675; }
.ui-share2-link { padding: 8px 18px 18px; }
.ui-share2-link input {
  width: 100%; box-sizing: border-box; background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 9px;
  padding: 9px 11px; font-size: 12px; color: #5a6675; font-family: inherit; outline: none;
}
.ui-share2-link input:focus { border-color: #8bc34a; }

.ui-share { margin: -22px; display: flex; flex-direction: column; }
.ui-share-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--ui-modal-grad);
  padding: 14px 18px; border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.ui-share-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.6);
}
.ui-share-title { color: #1b5e20; font-size: 16px; font-weight: 800; letter-spacing: .2px; }
.ui-share-body { background: #fff; padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 14px; }
.ui-share-copy-current {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; font-size: 14px;
}
.ui-share-divider {
  display: flex; align-items: center; gap: 10px;
  color: #97a1ad; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
}
.ui-share-divider::before, .ui-share-divider::after {
  content: ""; flex: 1; height: 1px; background: #eef0f3;
}
.ui-share-section { display: flex; flex-direction: column; gap: 6px; }
.ui-share-section-head { font-size: 10.5px; font-weight: 800; color: #7c8a98; letter-spacing: 1px; }
.ui-share-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-share-pills .ui-pill {
  flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; font-weight: 700;
  color: #5a6675; background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 999px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ui-share-pills .ui-pill:hover { background: #eef2f7; }
.ui-share-pills .ui-pill.is-active {
  background: #e7f3d8; color: #1b5e20; border-color: #8bc34a;
}
.ui-share-checks { display: flex; flex-direction: column; gap: 8px; }
.ui-share-check {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: #2a3340; font-weight: 600; cursor: pointer;
  padding: 8px 10px; background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 10px;
}
.ui-share-check input { width: 17px; height: 17px; accent-color: #4caf50; cursor: pointer; flex: none; }
.ui-share-tracking { display: flex; flex-direction: column; gap: 8px; }
.ui-share-tracking select, .ui-share-tracking input {
  width: 100%; background: #f6f8fb; border: 1px solid #d7dde6; border-radius: 8px;
  padding: 9px 11px; color: #2a3340; font-size: 13.5px; font-family: inherit; outline: none;
}
.ui-share-tracking select:focus, .ui-share-tracking input:focus { border-color: #8bc34a; }
.ui-share-preview {
  width: 100%; resize: none; padding: 10px 12px;
  background: #f1f4f8; border: 1px solid #e3e8ee; border-radius: 8px;
  color: #2a3340; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all; outline: none;
}
.ui-share-foot {
  background: #fff; border-top: 1px solid #eef0f3; padding: 12px 16px;
  display: flex; justify-content: flex-end; gap: 8px;
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
}
.ui-share-foot .ui-btn { display: inline-flex; align-items: center; gap: 6px; }
.ui-btn-outline {
  background: #fff; color: #2e7d32; border: 1.5px solid #c0e2c3;
}
.ui-btn-outline:hover { background: #f1f8ed; }

/* Admin styles */
.g-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 6px; }
.g-thumb { position: relative; aspect-ratio: 1 / 1; background: #1a1a1a; border-radius: 6px; overflow: hidden; border: 1px solid #333; }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-thumb button {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff; border: none; font: 700 14px/1 sans-serif; cursor: pointer;
}
.g-thumb button:hover { background: #d32f2f; }
.admin-form { padding: 20px; max-width: 600px; margin: 0 auto; background: #2a2a2a; border-radius: 8px; }
.admin-form .form-row { margin-bottom: 14px; }
.admin-form label { display: block; font-size: 13px; color: #888; margin-bottom: 4px; }
.admin-form input, .admin-form select, .admin-form textarea {
  width: 100%; padding: 8px 10px; background: #1a1a1a; color: #fff;
  border: 1px solid #444; border-radius: 4px; font-size: 14px;
}
.admin-form button {
  padding: 10px 20px; background: #2196f3; color: #fff; border: none;
  border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.admin-form button:hover { background: #1976d2; }
.admin-list { padding: 20px; }
.plot-card {
  background: #2a2a2a; padding: 12px 16px; margin-bottom: 8px;
  border-radius: 6px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.plot-card:hover { background: #333; }

/* =========================================================================================
   DEMO2 PARITY OVERRIDES — copies the exact .info-*/.fd-* values from demo2.plotex.in.
   Selectors here MUST come after our .ui-* rules so they win on equal specificity. Each block
   targets both the legacy ui-* class and the demo2 alias so the elements pick up both.
   ========================================================================================= */

/* --- INFO TABS --- */
.ui-info-tabs.info-tabs { display: flex; border-bottom: 2px solid #e9ecef; background: #fafbfc; padding: 0; }
.ui-info-tab.info-tab {
  flex: 1; padding: 12px 0; text-align: center; font-size: 13px; font-weight: 700; color: #999;
  background: none; border: none; cursor: pointer; border-bottom: 2.5px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ui-info-tab.info-tab svg { width: 15px; height: 15px; }
.ui-info-tab.info-tab.active { color: #2e7d32; border-bottom-color: #43a047; }
.ui-info-tab.info-tab:hover { color: #2e7d32; }

/* --- INFO BODY + PROPERTY GRID --- */
.ui-info-panel.info-body { padding: 20px 24px; flex: 1; overflow-y: auto; min-height: 0; gap: 0; }
.ui-info-grid.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }

/* --- PROPERTY CARDS (LOCATION / TOTAL FLOORS / etc.) --- */
.ui-info-card.info-card {
  background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 12px 14px;
  display: block;
}
.ui-info-card.info-card.full, .ui-info-card.info-card.ui-info-loc { grid-column: 1 / -1; }
.ui-info-card.info-card .ui-info-card-ico.info-card-icon {
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 12px; line-height: 1; margin-right: 6px; vertical-align: middle;
}
.ui-info-card.info-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.ui-info-card.info-card > span.info-card-icon { align-self: flex-start; margin-bottom: 4px; }
.ui-info-card.info-card > div { display: block; }
.ui-info-card.info-card .ui-info-card-label { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; font-weight: 600; }
.ui-info-card.info-card .ui-info-card-val   { font-size: 14px; font-weight: 700; color: #222; margin-top: 0; }

/* Icon tint variants (background + glyph color via filter on the emoji is impractical, so the
   background drives the tint; the inner emoji rides on top). svg fills inherit currentColor. */
.info-card-icon.blue   { background: #e3f2fd; color: #1565c0; }
.info-card-icon.green  { background: #e8f5e9; color: #2e7d32; }
.info-card-icon.amber  { background: #fff8e1; color: #f57f17; }
.info-card-icon.purple { background: #f3e5f5; color: #7b1fa2; }
.info-card-icon.teal   { background: #e0f2f1; color: #00695c; }
.info-card-icon.red    { background: #fce4ec; color: #c62828; }
.info-card-icon svg { width: 12px; height: 12px; stroke: currentColor; }

/* --- AMENITIES / CONNECTIVITY / CERT CHIPS --- */
.ui-info-chips.info-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ui-info-chip.info-chip, .ui-info-dev-cert.info-chip {
  border: none; border-radius: 10px; padding: 8px 14px 8px 10px;
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
  box-shadow: 0 1px 4px #0000000f; transition: transform .15s, box-shadow .15s;
}
.ui-info-chip.info-chip:hover, .ui-info-dev-cert.info-chip:hover {
  transform: translateY(-1px); box-shadow: 0 3px 8px #0000001a;
}
.info-chip.chip-green  { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); color: #1b5e20; }
.info-chip.chip-blue   { background: linear-gradient(135deg,#e1f5fe,#b3e5fc); color: #01579b; }
.info-chip.chip-teal   { background: linear-gradient(135deg,#e0f2f1,#b2dfdb); color: #004d40; }
.info-chip.chip-amber  { background: linear-gradient(135deg,#fff8e1,#ffecb3); color: #e65100; }
.info-chip.chip-purple { background: linear-gradient(135deg,#f3e5f5,#e1bee7); color: #4a148c; }
.info-chip-icon {
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(255,255,255,.6); font-size: 12px; line-height: 1;
}
.info-chip-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: currentColor; }

/* --- BUILDER CARD (developer top card) --- */
.ui-info-dev-card.info-builder-card {
  background: linear-gradient(135deg,#fafafa,#f0f4f8);
  border: 1px solid #e3e8ed; border-radius: 14px; padding: 18px;
}

/* --- RERA REG CARD --- */
.ui-info-dev-rera.info-rera {
  margin-top: 16px; padding: 12px 14px; background: #f5f5f5;
  border: 1px solid #e8e8e8; border-radius: 10px; font-size: 11px; color: #999;
  display: flex; align-items: center; gap: 8px;
}
.ui-info-dev-rera.info-rera .ui-info-dev-rera-num,
.ui-info-dev-rera.info-rera .ui-info-dev-rera-label { color: #333; font-weight: 600; }
.info-rera-icon {
  width: 26px; height: 26px; border-radius: 6px; background: #fff3e0;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-rera-icon svg { width: 14px; height: 14px; stroke: #e65100; }

/* --- COMPLETED PROJECTS LIST --- */
.info-projects { margin-bottom: 4px; flex-shrink: 0; }
.info-projects .ui-info-dev-projects { max-height: 200px; overflow-y: auto; padding-right: 4px; }
.ui-info-dev-project-row.info-project {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px;
  margin-bottom: 8px; cursor: pointer;
}
.ui-info-dev-project-row.info-project:hover { border-color: #a5d6a7; box-shadow: 0 2px 8px #4caf501a; }
.ui-info-dev-project-tile.info-project-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg,#e8f5e9,#b3e5fc);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #2e7d32; font-size: 0;
}
.info-project-icon svg { width: 16px; height: 16px; stroke: #2e7d32; }
.info-project-info { flex: 1; min-width: 0; }
.info-project-name { font-size: 13px; font-weight: 600; color: #333; }
.info-project-loc  { font-size: 11px; color: #888; margin-top: 1px; }
.info-project-arrow { color: #aaa; font-size: 14px; flex-shrink: 0; }

/* --- PORTFOLIO 3-COL GALLERY --- */
.ui-info-dev-portfolio.info-dev-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 4px; max-height: 240px; overflow-y: auto; padding-right: 4px;
}
.ui-info-dev-portfolio.info-dev-gallery img,
.ui-info-dev-portfolio-thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  border: 1px solid #e9ecef; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.ui-info-dev-portfolio.info-dev-gallery img:hover,
.ui-info-dev-portfolio-thumb:hover { transform: scale(1.03); box-shadow: 0 3px 12px #0000001f; }

/* --- SOCIAL TILES (brand colors per demo2) --- */
.ui-info-dev-socials.info-social { display: flex; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.ui-info-dev-social.info-social-btn {
  width: 38px; height: 38px; border-radius: 10px; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  color: #fff;
}
.ui-info-dev-social.info-social-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px #00000026; }
.ui-info-dev-social.info-social-btn > span { display: block; line-height: 1; font-weight: 800; font-size: 16px; }
.info-social-btn.facebook  { background: #1877f2; }
.info-social-btn.instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.info-social-btn.twitter   { background: #000; }
.info-social-btn.linkedin  { background: #0a66c2; }
.info-social-btn.youtube   { background: red; }
.info-social-btn.whatsapp  { background: #25d366; }
.info-social-btn svg { width: 18px; height: 18px; fill: #fff; }

/* --- RATING & REVIEWS (demo2 .info-rating) --- */
.ui-info-dev-rating.info-rating {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; margin-bottom: 4px;
}
.info-rating-score { font-size: 22px; font-weight: 800; color: #333; line-height: 1; }
.info-rating-label { font-size: 11px; color: #888; }
.info-rating-source { font-size: 11px; color: #aaa; margin-top: 1px; }
.info-rating-source a, a.info-rating-source { color: #2e7d32; text-decoration: none; font-weight: 600; }

/* --- POWERED FOOTER --- */
.ui-info-foot.info-powered { text-align: center; padding: 10px 0; font-size: 11px; color: #bbb; background: #fff; border-top: 1px solid #eef0f3; }

/* --- FILTER PILLS (demo2 .fd-chip) --- */
.ui-filter-pill.fd-chip {
  padding: 7px 16px; border: 1.5px solid #ddd; border-radius: 20px;
  background: #fff; font-size: 12px; color: #555; cursor: pointer;
  transition: all .15s; font-weight: 500;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0;
}
.ui-filter-pill.fd-chip:hover { border-color: #4caf50; color: #2e7d32; }
.ui-filter-pill.fd-chip.active { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; font-weight: 600; }

/* --- VR + mirror ------------------------------------------------------------------------- */
/* .rs-cast is kept for the mirror button, which is no longer offered in the right rail but is
   still created if a build re-enables initPresentButton(). */
.rs-cast { background: rgba(255,255,255,.88); color: #37474f; }
.rs-cast.active { background: #4caf50; color: #fff; }
/* A mirror screen is a display, not a control surface: strip every affordance that invites a
   click, since nothing on it can be driven locally — the presenter is driving. */
body.mirror-mode #ui-dock,
body.mirror-mode #ui-rstack,
body.mirror-mode #ui-legend,
body.mirror-mode .ui-fb,
body.mirror-mode #ui-enquire,
body.mirror-mode .walk-stick { display: none !important; }
/* Stereo (VR-box) mode: the phone is inside a headset, so the flat UI is unreachable and would
   only show up as clutter inside one eye. */
body.vr-stereo #ui-dock,
body.vr-stereo #ui-rstack,
body.vr-stereo #ui-header,
body.vr-stereo #ui-compass,
body.vr-stereo #ui-legend,
body.vr-stereo #ui-enquire { display: none !important; }