* { 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: #0a0d10;
  transition: opacity .6s ease; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#splash-bg {
  position: absolute; inset: -40px; z-index: 0;
  /* Blurred, darkened fill of the cover itself, so the side areas match the image
     (seamless themed backdrop). The sharp, whole cover sits on top via #splash-fg. */
  background: url('/splash-bg.jpg') center center / cover no-repeat;
  background-color: #07090c;
  filter: blur(32px) brightness(.5) saturate(1.08);
  transform-origin: center;
  animation: splash-zoom 7s ease-in-out infinite alternate;
}
#splash-fg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* The PDF cover (page 1) shown WHOLE + centred, sharp, over the blurred backdrop. */
  background: url('/splash-bg.jpg') center center / contain no-repeat;
  transform-origin: center;
  animation: splash-zoom 9s 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(7,9,12,.58), rgba(7,9,12,.1) 42%, rgba(7,9,12,.66));
}
.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 { background: rgba(255,255,255,.88); color: #37474f; }
.rs-orbit.active, .rs-walk.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-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; }