:root {

  /* Brand palette */
  --green-primary: #1A7A4C;
  --green-dark:    #145E3A;
  --green-light:   #E8F5EF;
  --green-mid:     #2AA065;

  --gold:    #E8A33D;
  --cream:   #FAFAF8;
  --ink:     #0F1C1A;
  --ink-2:   #2D3B38;
  --muted:   #8A9590;
  --border:  #E4EAE8;
  --white:   #FFFFFF;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
  height: 100%; width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #0d1410;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* -- Phone frame -- */
.app-frame {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

/* Same specificity as the base.css override (body .app-frame .main-content)
   and loaded after it, so this wins. The scroll container ENDS EXACTLY at
   the fixed CTA bar's top border: margin-bottom == the bar's measured
   height (--cta-reserve, re-measured by JS on font scaling / short
   screens). The pre-JS fallback is the CSS-determined height of the
   TWO-row bar (12+46+10+46+12 px) - matches the owner view and the
   anonymous public-share view at first paint. The signed-in public-share
   view renders ONE row; that case overrides the fallback below. 126px is
   exact at default font metrics; JS corrects any divergence within a
   frame. */
body .app-frame .main-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  /* Full-bleed photo hero - the image starts at the true screen edge and
     the floating back/share buttons handle status-bar overlap themselves. */
  --top-pad: 0;
  /* Scroll area ends ON the CTA bar's top border (no gap, no overlap),
     with 15px inner bottom pad above the bar - same global rule. */
  margin-bottom: var(--cta-reserve, 126px);
  padding-bottom: 15px;
}

/* Signed-in public-share view: the CTA bar is a SINGLE row (~70px), so the
   pre-JS fallback must be that smaller height - still auto-corrected by JS. */
body .app-frame.bar-single .main-content {
  margin-bottom: var(--cta-reserve, 70px);
}

/* -- Status bar -- */
.status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--safe-area-top);
  z-index: 20;
  pointer-events: none;
}

/* -- Floating header bar -- */
.float-bar {
  position: absolute;
  top: calc(var(--safe-area-top, 44px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 10;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.float-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  font-size: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.14);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.float-btn:active { transform: scale(0.93); background: rgba(255,255,255,1); }
.float-btn-row { display: flex; gap: 8px; }

/* -- Gallery -- */
.gallery-wrap {
  position: relative;
  width: 100%;
  /* Scales with the viewport instead of a fixed pixel height, so short
     screens still leave room for the details + CTA bar. */
  height: clamp(200px, 36vh, 320px);
  overflow: hidden;
  background: #1a2420;
}
.gallery-slides {
  display: flex;
  height: 100%;
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
}
.gallery-slide {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Gradient overlay at bottom for text legibility */
.gallery-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(10,20,16,0.72) 0%, transparent 100%);
  pointer-events: none;
}
/* Photo counter pill */
.photo-counter {
  position: absolute;
  bottom: 25px; right: 16px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex; align-items: center; gap: 5px;
  letter-spacing: 0.2px;
}
/* Dot indicators */
.gallery-dots {
  position: absolute;
  bottom: 33px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px;
}
.gallery-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.2s ease;
  cursor: pointer;
}
.gallery-dot.active {
  background: #fff;
  width: 18px;
  border-radius: 3px;
}

/* -- Card body -- */
.card-body-section {
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: -20px;
  position: relative;
  z-index: 2;
  padding: 22px 20px 0;
}

/* Pull indicator */
.pull-tab {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 18px;
}

/* Header row */
.prop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.prop-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  flex: 1;
}
.prop-price {
  text-align: right;
  flex-shrink: 0;
}
.price-amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--green-primary);
}
.price-period {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  display: block;
  margin-top: 1px;
}

/* Location row */
.prop-location {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--muted); font-weight: 500;
  margin-bottom: 12px;
}
.prop-location i { color: var(--green-mid); font-size: 15px; }

/* Verified badge */
.verified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-light);
  color: var(--green-primary);
  font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 18px;
  letter-spacing: 0.1px;
}
.verified-badge i { font-size: 13px; }

/* -- Spec pills -- */
.specs-row {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  overflow-x: auto;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.specs-row::-webkit-scrollbar { display: none; }
.spec-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 40px;
  white-space: nowrap;
  flex-shrink: 0;
}
.spec-pill i { font-size: 16px; color: var(--green-mid); }
.spec-pill-text { font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* -- Divider -- */
.section-divider {
  height: 1px;
  background: var(--border);
  margin: 0 -20px 20px;
}

/* -- Description -- */
.section-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.description-text {
  font-size: 14px;
  line-height: 1.65;
  color: #4A5754;
}
.read-more {
  color: var(--green-primary);
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px;
}

/* -- Tabs -- */
.detail-tabs {
  display: flex;
  padding: 0 20px;
  gap: 0;
  border-bottom: 1.5px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 5;
}
.detail-tab {
  flex: 1;
  padding: 13px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border: none;
  background: none;
  position: relative;
  cursor: pointer;
  transition: color 0.18s ease;
  letter-spacing: 0.1px;
}
.detail-tab.active {
  color: var(--green-primary);
}
.detail-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1.5px; left: 20%; right: 20%;
  height: 2.5px;
  background: var(--green-primary);
  border-radius: 2px;
}

/* -- Tab panels -- */
.tab-panel { display: none; padding: 20px 20px 0; }
.tab-panel.active { display: block; }

/* Neighbourhood map */
/* -- Zone (radius) selector - sits BELOW the map as its own header block
   ("Amenities within" + the measure chips), so the map isn't squeezed at
   the top of the panel. -- */
.zone-controls {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
  margin-bottom: 8px;
}
/* Fine print under the zone selector - amenity points/distances/times are
   OSM-derived approximations, never exact. */
.zone-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 14px;
}
.zone-label {
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.zone-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.zone-chip {
  padding: 7px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--cream);
  color: var(--ink-2);
  font-size: 12.5px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.zone-chip.active {
  background: #1A73E8;          /* matches the map's zone circle */
  border-color: #1A73E8;
  color: #fff;
}
.zone-chip:active { transform: scale(0.96); }

/* -- POI searching indicator - same visual language as my-home's
   upload progress ring -- */
.poi-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: var(--white, #fff);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.poi-loading-label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.poi-ring { width: 40px; height: 40px; transform: rotate(-90deg); }
.poi-ring circle { fill: none; stroke-width: 5; }
.poi-ring .ring-bg { stroke: var(--border); }
.poi-ring .ring-fg {
  stroke: var(--green-primary);
  stroke-linecap: round;
  stroke-dasharray: 63;               /* small arc, not a full circle */
  stroke-dashoffset: 21;
  animation: poi-ring-spin 0.9s linear infinite;
  transform-origin: center;
}
@keyframes poi-ring-spin {
  to { transform: rotate(360deg); }
}

.neighbourhood-map {
  width: 100%; height: 220px;
  border-radius: var(--radius-md);
  background: #e8efe8;
  overflow: hidden;
  position: relative;
}
.map-loading-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #e8efe8;
  z-index: 10;
  gap: 10px;
  transition: opacity 0.3s ease;
}
.map-loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.map-loading-label {
  font-size: 13px;
  color: #8A9590;
  font-weight: 500;
}
.poi-list { margin-top: 16px; }
.poi-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.poi-item:active { background: var(--green-light); }
.poi-item.active {
  background: var(--green-light);
  padding-left: 8px; padding-right: 8px;
  margin: 0 -8px;
}
.poi-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--green-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.poi-item.active .poi-icon { background: var(--white); }
.poi-icon i { color: var(--green-primary); font-size: 17px; }
.poi-name { font-weight: 600; color: var(--ink-2); flex: 1; }
.poi-dist { font-size: 12px; font-weight: 500; color: var(--muted); }
.poi-item.active .poi-dist { color: var(--green-primary); }
.poi-item .bi-chevron-right { color: var(--muted); font-size: 13px; margin-left: 2px; }

/* -- Route info panel -- */
.route-info {
  margin-top: 12px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  animation: routeFadeIn 0.2s ease;
}
@keyframes routeFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.route-info-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.route-poi-name {
  font-size: 14px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 7px;
}
.route-poi-name .dot { width: 9px; height: 9px; border-radius: 50%; background: #2A6FDB; flex-shrink: 0; }
.route-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.route-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.route-mode-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 9px 6px;
  border-radius: 40px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--ink-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.route-mode-btn i { font-size: 15px; }
.route-mode-btn.active {
  background: var(--green-primary);
  border-color: var(--green-primary);
  color: #fff;
}
.route-stats { display: flex; gap: 10px; }
.route-stat {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border: 1.5px solid var(--border);
}
.route-stat i { color: var(--green-mid); font-size: 16px; }
.route-stat span { font-size: 13px; font-weight: 700; color: var(--ink); }
.route-loading { font-size: 12px; color: var(--muted); font-weight: 500; }

/* -- CTA bar --
   Lifted above the Android/iOS system nav via safe-area-inset-bottom;
   the padding lets its opaque background extend into that strip so the
   bar never sits underneath system UI (even when a WebView misreports
   the inset as 0, padding keeps buttons tappable). */
/* -- CTA bar - FIXED to the real viewport (restored, proven pattern).
   Lifted above the Android/iOS system nav via safe-area-inset-bottom; the
   padding lets its opaque background extend into that strip so the bar
   never sits underneath system UI. */
/* -- Inquire sheet (replaces Schedule Visit stub) --
   Bottom sheet in the app's standard pattern: fixed, above safe area.
   max-height reserves room for the fixed CTA bar on short screens so the
   sheet never hides behind the bar's buttons. Long labels (e.g. FR
   translations, large system fonts) ellipsize via .cta-btn span. */
.inq-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 70;
  display: none;
}
.inq-backdrop.show { display: block; }
.inq-sheet {
  position: fixed; bottom: 0; left: 50%;
  transform: translate(-50%, 100%);
  width: 100%; max-width: 430px;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 16px 20px calc(16px + var(--safe-area-bottom));
  z-index: 80;
  max-height: calc(100dvh - var(--safe-area-top) - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* visibility gating: a merely translated-off-screen sheet can phantom-
     capture taps on iOS Safari - fully hide it while closed. */
  visibility: hidden;
  transition:
    transform 0.3s cubic-bezier(.22,1,.36,1),
    visibility 0s linear 0.3s;
}
.inq-sheet.show {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.inq-handle { width: 36px; height: 5px; background: var(--border); border-radius: 3px; margin: 0 auto 12px; }
.inq-sheet h5 { font-weight: 700; margin-bottom: 12px; }
.inq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.inq-chip {
  padding: 8px 14px;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  background: var(--cream);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.inq-chip:active { background: var(--green-light); }
.inq-sheet textarea {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
  outline: none;
}
.inq-attach-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.inq-attach-btn {
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.inq-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.inq-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.inq-thumb { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); }
.inq-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inq-thumb button {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.inq-send {
  width: 100%; margin-top: 14px;
  padding: 14px;
  background: var(--green-primary); color: #fff;
  border: none; border-radius: 30px;
  font-weight: 700; font-size: 15px;
  cursor: pointer;
}
.inq-send:disabled { opacity: 0.5; }
.inq-cancel {
  width: 100%; margin-top: 8px;
  padding: 10px;
  background: none; border: none;
  color: var(--muted); font-weight: 600; font-size: 14px;
  cursor: pointer;
}

/* Offline banner */
.offline-banner {
  background: #FFF3CD;
  color: #5a3e00;
  padding: 7px 16px;
  font-size: 13px;
  text-align: center;
  display: none;
  font-weight: 500;
}

/* Swipe hint animation on gallery */
@keyframes swipeHint {
  0%,100% { opacity: 0; transform: translateX(0); }
  30% { opacity: 1; }
  70% { opacity: 1; transform: translateX(-8px); }
}

/* -- Height responsiveness ---------------------------------------
   Short screens (small phones / landscape): shrink the CTA bar and map so
   the content area stays usable and the bar never eats the viewport. */
@media (max-height: 700px) {
  .neighbourhood-map { height: 170px; }
}
@media (max-height: 560px) {
  .gallery-wrap { height: clamp(150px, 30vh, 220px); }
}

/* ================================================================
   MULTI-UNIT SELECTOR (property detail)
   ================================================================ */
.units-section {
  margin-top: 16px;
  padding-bottom: 4px;
}
.units-section .section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--ink-2);
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.3px;
}
.units-section .section-label i { font-size: 16px; color: var(--green-primary); }

.unit-cards {
  display: flex; flex-direction: column; gap: 10px;
}

.unit-selector-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.unit-selector-card:active { transform: scale(0.98); }
.unit-selector-card.active {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(26, 122, 76, 0.15);
}

.unit-selector-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.unit-selector-type {
  font-size: 12px; font-weight: 700; color: var(--green-primary);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.unit-selector-number {
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--cream); padding: 2px 8px; border-radius: 6px;
}
.unit-selector-price {
  font-size: 20px; font-weight: 800; color: var(--ink);
  margin-bottom: 8px;
}
.unit-selector-details {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.unit-selector-details span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.unit-selector-details i { font-size: 12px; color: var(--muted); }

/* ================================================================
   POI MARKER BOUNCE — AdvancedMarkerElement has no setAnimation(), so we
   apply a CSS keyframe animation to the marker's content <img> instead.
   ================================================================ */
@keyframes poiBounce {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-12px); }
  50%      { transform: translateY(0); }
  75%      { transform: translateY(-6px); }
}
.poi-marker-bounce {
  animation: poiBounce 0.6s ease-in-out infinite;
}