/* ══════════════════════════════════════════════════════════
   SITE PLANS — LOCATIONS MAP (real state data)  ·  prefix: spla-map
   ══════════════════════════════════════════════════════════ */
.spla-map-wrap{font-family:'Poppins',sans-serif;width:100%;
  --teal:#17585D;--orange:#E87002;--ink:#1A1A1A;--body:#5A5A5A;--mute:#8A8A8A;--tint:#EBF4F4;
  --flag-blue:#3C5A99;--flag-red:#B22234}
.spla-map-wrap *{box-sizing:border-box}

.spla-map-head{text-align:center;margin-bottom:24px}
.spla-map-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);background:#fff;border:1px solid rgba(23,88,93,.2);padding:6px 14px;border-radius:100px;margin-bottom:14px}
.spla-map-eyebrow svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none}
.spla-map-head h2{font-size:clamp(21px,2.6vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:0}

/* thin patriotic accent strip above the stage */
.spla-map-stage{position:relative;border-radius:16px;overflow:visible}
.spla-map-stage::before{
  content:'';position:absolute;top:-8px;left:8%;right:8%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--flag-red) 0 33%,#fff 33% 66%,var(--flag-blue) 66% 100%);
  opacity:.7
}

.spla-map-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;font-weight:600;color:var(--mute)
}
.spla-spinner{
  width:16px;height:16px;border-radius:50%;border:2.5px solid var(--tint);border-top-color:var(--teal);
  animation:spla-spin .8s linear infinite
}
@keyframes spla-spin{to{transform:rotate(360deg)}}

.spla-map-svg{width:100%;height:100%;display:block;transition:opacity .35s ease}

/* ── States ── */
.spla-state{
  fill:#DCE6EF;stroke:#fff;stroke-width:1.1;
  transition:fill .18s,stroke-width .18s
}
.spla-state.has-link{cursor:pointer}
.spla-state.has-link:hover{fill:var(--flag-blue);stroke-width:1.6}
.spla-state.is-highlighted{fill:var(--orange)}
.spla-state.is-highlighted:hover{fill:#c46000}
.spla-state.is-muted{fill:#EDEFF1;opacity:.55}

.spla-state-label{
  font-family:'Poppins',sans-serif;font-size:9px;font-weight:700;fill:#5A6B7A;
  text-anchor:middle;dominant-baseline:middle;letter-spacing:.02em
}
.spla-state-label.has-link{fill:#fff;font-weight:800}
.spla-state.is-highlighted + .spla-state-label,
.spla-state-label.has-link{paint-order:stroke}

/* ── Pins ── */
.spla-pins-group .spla-pin{transition:transform .15s}
.spla-pin-dot{fill:var(--orange);stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.spla-pin.c-teal .spla-pin-dot{fill:var(--teal)}
.spla-pin.c-orange .spla-pin-dot{fill:var(--orange)}
.spla-pin.c-gold .spla-pin-dot{fill:#D4A017}
.spla-pin.c-coral .spla-pin-dot{fill:#E35B4F}

.spla-pin-ring{fill:none;stroke:var(--orange);stroke-width:1.6;opacity:.6;animation:spla-pulse 2.4s ease-out infinite}
.spla-pin.c-teal .spla-pin-ring{stroke:var(--teal)}
.spla-pin.c-gold .spla-pin-ring{stroke:#D4A017}
.spla-pin.c-coral .spla-pin-ring{stroke:#E35B4F}
.spla-pin:nth-child(3n) .spla-pin-ring{animation-delay:.5s}
.spla-pin:nth-child(3n+1) .spla-pin-ring{animation-delay:1s}

@keyframes spla-pulse{
  0%{r:5.5;opacity:.7}
  100%{r:16;opacity:0}
}

.spla-pins-group .spla-pin:hover .spla-pin-dot{r:7.5}
.spla-pins-group .spla-pin:hover{transform:scale(1.08)}

/* ── Tooltip ── */
.spla-tooltip{
  position:absolute;z-index:5;pointer-events:none;
  background:#fff;border-radius:10px;padding:9px 13px;
  box-shadow:0 14px 34px rgba(11,31,34,.28);
  font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;
  transform:translate(-50%,calc(-100% - 14px));
  opacity:0;transition:opacity .12s
}
.spla-tooltip.is-on{opacity:1}
.spla-tooltip small{display:block;font-size:10px;font-weight:600;color:var(--mute);margin-top:2px}

.spla-map-empty{text-align:center;font-size:13px;color:var(--body);margin-top:18px;padding:16px;background:var(--tint);border-radius:10px}

@media(prefers-reduced-motion:reduce){
  .spla-pin-ring{animation:none;display:none}
}
@media(max-width:640px){
  .spla-state-label{font-size:7.5px}
}