.property-map-container { position: relative; max-width: 100%; margin: 20px 0; padding: 10px; background: #fff; }
.property-map-image { position: relative; max-width: 100%; }
.property-map-image img { display: block; max-width: 100%; height: auto; }

.property-site-marker {
  position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  margin-left: -10px; margin-top: -10px;
  cursor: pointer;
  z-index: 10;
  border: 2px solid #000;
  background: rgba(0,0,0,0.4);
}

.property-site-rectangle {
  position: absolute;
  cursor: pointer;
  z-index: 9;
  border: 2px solid #000;
  background: rgba(0,0,0,0.2);
  box-sizing: border-box;
}

.property-site-marker .site-name,
.property-site-rectangle .site-name {
  display: none;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  background: #333; color: #fff;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 100;
}

.property-site-marker .site-name { bottom: 120%; }
.property-site-rectangle .site-name { top: 50%; transform: translate(-50%, -50%); }

.property-map-legend { margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-color { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid #000; }

.legend-color.available,
.property-site-marker.available { border-color: var(--ipm-available-border, #00b300); background: var(--ipm-available-bg, rgba(0,255,0,0.7)); }
.legend-color.sold,
.property-site-marker.sold { border-color: var(--ipm-sold-border, #b30000); background: var(--ipm-sold-bg, rgba(255,0,0,0.7)); }
.legend-color.not-yet,
.property-site-marker.not-yet { border-color: var(--ipm-notyet-border, #666); background: var(--ipm-notyet-bg, rgba(128,128,128,0.7)); }

/* Rectangle fills use different vars */
.property-site-rectangle.available { border-color: var(--ipm-available-border, #00b300); background: var(--ipm-rect-available-bg, rgba(0,255,0,0.4)); }
.property-site-rectangle.sold { border-color: var(--ipm-sold-border, #b30000); background: var(--ipm-rect-sold-bg, rgba(255,0,0,0.4)); }
.property-site-rectangle.not-yet { border-color: var(--ipm-notyet-border, #666); background: var(--ipm-rect-notyet-bg, rgba(128,128,128,0.4)); }

/* PREMIUM STATUS */

.legend-color.premium,
.property-site-marker.premium {
  border-color: #006400;
  background: rgba(0, 100, 0, 0.7);
}

.property-site-rectangle.premium {
  border-color: #006400;
  background: rgba(0, 100, 0, 0.4);
}

.property-map-image {
  position: relative;
  width: 100%;
}

/* Aspect-ratio box */
.property-map-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* default fallback */
}

/* Image fills the ratio box */
.property-map-ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* All markers + rectangles */
.property-site-marker,
.property-site-rectangle {
  position: absolute;
}