/* ─── Sold Portfolio Map (V1) ──────────────────────────────────────────────
   Uses existing Black Diamond brand tokens from css/styles.css :root.
   Responsive: stacked filters/summary on narrow viewports, map always fills
   remaining height.
   ─────────────────────────────────────────────────────────────────────── */

.spm-wrap { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 4px 2px; }

.spm-loading, .spm-error {
  padding: 24px; text-align: center; color: var(--text-2, #6B6965);
  background: var(--card, #fff); border: 1px solid var(--border, #E3E1D9); border-radius: 10px;
}
.spm-error { color: var(--red, #C94B3E); }

.spm-summary-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; background: var(--card, #fff); border: 1px solid var(--border, #E3E1D9);
  border-radius: 12px; padding: 14px 16px;
}
.spm-stat { display: flex; flex-direction: column; gap: 2px; }
.spm-stat-value { font-size: 20px; font-weight: 700; color: var(--text, #1C1B18); }
.spm-stat-label { font-size: 11px; color: var(--text-2, #6B6965); text-transform: uppercase; letter-spacing: 0.03em; }

.spm-notice {
  background: var(--gold-dim, rgba(201,168,76,0.10)); border: 1px solid var(--gold, #C9A84C);
  color: var(--text, #1C1B18); border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
}
.spm-notice code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.spm-notice-headline { font-weight: 700; font-size: 14px; }

.spm-filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: var(--surface, #EEECEA); border: 1px solid var(--border, #E3E1D9);
  border-radius: 10px; padding: 12px 14px;
}
.spm-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.spm-filter-field label { font-size: 11px; color: var(--text-2, #6B6965); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.spm-filter-field select,
.spm-price-range input {
  border: 1px solid var(--border, #E3E1D9); border-radius: 7px; padding: 6px 8px;
  font-size: 13px; background: var(--card, #fff); color: var(--text, #1C1B18);
}
.spm-price-range { display: flex; align-items: center; gap: 6px; }
.spm-price-range input { width: 80px; }

.spm-btn-reset {
  background: transparent; border: 1px solid var(--border, #E3E1D9); border-radius: 7px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--text-2, #6B6965); cursor: pointer;
  height: 32px; align-self: flex-end;
}
.spm-btn-reset:hover { border-color: var(--gold, #C9A84C); color: var(--gold, #8a6d00); }

.spm-map-meta { font-size: 12px; color: var(--text-2, #6B6965); padding-left: 2px; }

.spm-map-canvas {
  flex: 1 1 auto; min-height: 420px; width: 100%;
  border-radius: 12px; border: 1px solid var(--border, #E3E1D9); overflow: hidden;
}

/* Leaflet popup — Black Diamond styling */
.spm-popup { font-family: inherit; min-width: 180px; }
.spm-popup-address { font-weight: 700; color: var(--text, #1C1B18); font-size: 13px; margin-bottom: 2px; }
.spm-popup-locality { font-size: 11px; color: var(--text-2, #6B6965); margin-bottom: 6px; }
.spm-popup-side { border-top: 1px solid var(--border-soft, #EAE8E1); padding: 6px 0; font-size: 12px; }
.spm-popup-side:first-of-type { border-top: none; }
.spm-popup-side-row { margin-bottom: 2px; color: var(--text, #1C1B18); }
.spm-popup-side-row a { color: var(--gold, #8a6d00); text-decoration: none; font-weight: 600; }
.spm-popup-side-row a:hover { text-decoration: underline; }
.spm-popup-note { color: var(--text-2, #6B6965); font-size: 11px; font-style: italic; }

/* ── Branded map pins — small gold diamond on dark charcoal, replacing the
   generic bright-blue Leaflet marker and the removed cluster bubbles. ── */
.spm-pin { background: transparent; border: none; }
.spm-pin-diamond {
  display: block;
  width: 14px;
  height: 14px;
  margin: 2px;
  background: #C9A84C;
  border: 2px solid #1C1B18;
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: transform 0.12s ease;
}
.spm-pin:hover .spm-pin-diamond { transform: rotate(45deg) scale(1.18); }

@media (max-width: 720px) {
  .spm-filter-bar { flex-direction: column; align-items: stretch; }
  .spm-filter-field { min-width: 0; }
  .spm-btn-reset { align-self: stretch; height: auto; }
  .spm-map-canvas { min-height: 320px; }
}