/* Theme-agnostic baseline for the Zrently map widget. Themes can
 * override .zrently-map and chip styles to match their visual
 * language; everything inside .maplibregl-* is delegated to MapLibre's
 * own CSS (loaded from CDN). */

.zrently-map {
  width: 100%;
  position: relative;
  font-family: inherit;
}

.zrently-map__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}

.zrently-map__chips-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.zrently-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.zrently-chip:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.zrently-chip.is-active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.zrently-map__canvas {
  width: 100%;
  height: 480px;
  border-radius: 12px;
  overflow: hidden;
  background: #e5e7eb; /* shows briefly while tiles load */
}

.zrently-map--detail .zrently-map__canvas {
  height: 360px;
}

.zrently-map--empty {
  display: none; /* themes can override to show "no map data" message */
}

/* Custom marker pin */
.zrently-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #111827;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.zrently-marker:hover {
  background: #ef4444;
}

/* Popup card inside marker tooltip */
.zm-popup {
  display: block;
  width: 220px;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}

.zm-popup__img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

.zm-popup__body {
  padding: 10px 12px;
}

.zm-popup__name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px 0;
  color: #111827;
}

.zm-popup__addr {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 6px 0;
}

.zm-popup__rent {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 2px 0;
}

.zm-popup__specs {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

/* MapLibre popup container — kill default padding so our card fills it */
.maplibregl-popup-content {
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.maplibregl-popup-tip {
  border-top-color: #fff !important;
}

@media (max-width: 640px) {
  .zrently-map__canvas {
    height: 360px;
  }
  .zrently-map--detail .zrently-map__canvas {
    height: 280px;
  }
}