/* Real Leaflet map — overrides for dark theme + custom pins inside phone bezel */

.phn-map-real {
  border-radius: 0;
  z-index: 0;
}
.phn-map-real .leaflet-container {
  background: #0a0a0a;
  font-family: var(--font-mono);
  outline: none;
}
.phn-map-real .leaflet-control-attribution {
  background: rgba(0,0,0,0.4) !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 8px !important;
  padding: 2px 4px !important;
  border-radius: 2px;
}
.phn-map-real .leaflet-control-attribution a {
  color: rgba(167,139,250,0.6) !important;
}

/* Custom divIcon pins */
.fnd-leaflet-pin {
  position: relative;
  width: 16px;
  height: 16px;
}
.fnd-leaflet-pin .fnd-pin-dot {
  position: absolute;
  inset: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 2;
}
.fnd-leaflet-pin .fnd-pin-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.4;
  animation: fnd-pin-ping 2.4s ease-out infinite;
  z-index: 1;
}
@keyframes fnd-pin-ping {
  0%   { transform: scale(0.6); opacity: 0.5; }
  80%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Tooltip */
.fnd-tooltip-wrap {
  background: rgba(20, 18, 30, 0.95) !important;
  border: 1px solid rgba(167, 139, 250, 0.4) !important;
  color: var(--text-hi) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.fnd-tooltip-wrap .leaflet-tooltip-tip {
  border-top-color: rgba(20, 18, 30, 0.95) !important;
}
.fnd-tooltip strong {
  color: var(--text-hi);
  font-weight: 600;
}
.fnd-tooltip .mono {
  color: var(--text-lo);
  font-size: 10px;
  letter-spacing: 0.05em;
}

/* Loading state */
.phn-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  color: var(--text-lo);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 5;
}