* { 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. */
#loading {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4vh;
  background: #7e2c0c;
  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: #7e2c0c;   /* Heritage hero image (splash_bg.webp) removed — brand colour only until a Qaiser Park image is provided */
  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(9,13,21,.5), rgba(9,13,21,.32) 42%, rgba(9,13,21,.72));
}
.splash-center {
  position: relative; z-index: 2; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center; padding: 16px;
}
.splash-logo-top { width: 60px; height: auto; margin-bottom: 20px; opacity: .96; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.splash-presenting { font-size: 11px; letter-spacing: 6px; color: #d3dae3; opacity: .82; }
.splash-title {
  font-size: clamp(26px, 5vw, 44px); font-weight: 800; letter-spacing: 6px;
  margin: 12px 0 7px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.55);
}
.splash-sub { font-size: 12px; letter-spacing: 4px; color: #bdc6d2; opacity: .8; }
/* 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;
}
.cube div {
  position: absolute; width: 46px; height: 46px;
  background: linear-gradient(135deg, #9ccc4e, #5fa233);
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 18px rgba(124,192,67,.35) inset;
}
.cube .cf { transform: translateZ(23px); }
.cube .cb { transform: rotateY(180deg) translateZ(23px); background: linear-gradient(135deg,#6fa83a,#4a8128); }
.cube .cr { transform: rotateY(90deg)  translateZ(23px); background: linear-gradient(135deg,#7ab33f,#4f8a2b); }
.cube .cl { transform: rotateY(-90deg) translateZ(23px); background: linear-gradient(135deg,#7ab33f,#4f8a2b); }
.cube .ct { transform: rotateX(90deg)  translateZ(23px); background: linear-gradient(135deg,#b4dd6a,#74af3c); }
.cube .cd { transform: rotateX(-90deg) translateZ(23px); background: linear-gradient(135deg,#5a8f30,#3c6b22); }
#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, #4caf50, #1a8fc4); transition: width .3s ease; }
.splash-status { margin-top: 13px; font-size: 11px; letter-spacing: 3px; color: #b3bcc9; opacity: .85; }
.splash-powered {
  position: absolute; right: 18px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: 2px;
  color: #d3dae3; opacity: .5;
}
.splash-powered img { width: 50px; height: auto; }
#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-vr { background: rgba(255,255,255,.88); color: #37474f; }
.rs-orbit.active, .rs-walk.active, .rs-vr.active { background: #4caf50; color: #fff; }

#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; }
  #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 { 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; }


/* ---- bare-number search: "which zone?" picker (see openZonePicker in viewer.js) ----
   Shown when a digits-only query matches a plot in more than one zone - R-01 and I-01 both
   answer to "1". One card per zone, each with a site mini-map and the plot ringed, so the
   buyer sees WHERE each candidate is instead of guessing from a list of names. */
.ui-modal-box:has(.ui-blockpick) { max-width: 560px; }
.ui-blockpick { text-align: center; }
.ui-blockpick h3 { font-size: 22px; margin-bottom: 6px; }
.ui-blockpick p { line-height: 1.5; }
.ui-bp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px; margin: 16px 0 10px;
}
.ui-bp-card {
  background: #f6f8fb; border: 1px solid #e3e8ee; border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ui-bp-card:hover, .ui-bp-card:focus-visible {
  border-color: #8bc34a; box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); outline: none;
}
.ui-bp-thumb { width: 100%; height: 132px; border-radius: 8px; display: block; background: #16232f; }
.ui-bp-name { color: #1f2733; font-size: 13px; font-weight: 700; letter-spacing: .4px; }
.ui-bp-num { color: #1f2733; font-size: 16px; font-weight: 800; }
.ui-bp-status { display: inline-flex; align-items: center; gap: 6px; color: #5a6675; font-size: 12px; font-weight: 600; }
.ui-bp-status i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ui-bp-foot { color: #97a1ad !important; font-size: 11.5px !important; margin-top: 4px; }

/* Per-zone plot count in the Zone filter rows. Sits immediately AFTER the name so the row reads
   [box] [dot] [name] [count], identical in shape to the Booking Status rows above it.
   margin-left:auto was tried first and threw the badge ~168px out, leaving a gap that made the
   row look broken next to the status list. */
.ui-filter-count {
  /* order:4 is REQUIRED. .ui-filter-row already orders its children explicitly - the dot is 2 and
     the name is 3 - so a new child at the default order:0 groups with the checkbox and renders
     BEFORE them, which is what put the count between the box and the dot. DOM order alone does
     not decide this row. */
  order: 4;
  color: #97a1ad; font-size: 12px; font-weight: 700;
  background: #eef2f6; border-radius: 999px; padding: 1px 8px; flex: none;
}

/* Marketing agent subtitle, sits right after .uh-name in the header bar. Deliberately lighter and
   smaller than the project name so the hierarchy reads project-first, agent-second. Hidden by the
   .hidden class when no agent is configured, so other projects get no empty gap. */
.uh-agent {
  margin-left: 8px; color: #6b7684; font-size: 12px; font-weight: 600;
  letter-spacing: .2px; white-space: nowrap; align-self: center;
}
.uh-agent::before { content: '·'; margin-right: 8px; color: #b3bcc6; }
@media (max-width: 560px) { .uh-agent { display: none; } }  /* dock width is tight on a phone */