.h2apex-map-container {
  position: relative;
  width: 100%; min-height: 600px; height: 100%;
  overflow: hidden;
  background: #050810;
}
.h2apex-map-container canvas { display: block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.h2apex-map-container > h1,
.h2apex-map-container > h2,
.h2apex-map-container > .page-title,
.h2apex-map-container > .entry-title { display: none !important; }

.h2apex-map-container .legend {
  position: absolute; bottom: 16px; right: 16px; z-index: 100;
  background: rgba(8,16,32,0.88); backdrop-filter: blur(12px);
  padding: 14px 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08); color: #fff; font-size: 13px;
}
.h2apex-map-container .legend h3 { font-size: 11px; color: #778; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.h2apex-map-container .legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.h2apex-map-container .legend-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.h2apex-map-container .legend .controls-hint { font-size: 11px; color: #556; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }

.h2apex-map-container .tooltip {
  position: absolute; z-index: 200; pointer-events: none;
  background: rgba(8,16,32,0.92); backdrop-filter: blur(10px);
  border: 1px solid rgba(20,160,222,0.5); border-radius: 10px;
  color: #fff; padding: 10px 16px; display: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.h2apex-map-container .tooltip-title { font-weight: 700; font-size: 14px; color: #14a0de; }
.h2apex-map-container .tooltip-detail { font-size: 12px; color: #aab; margin-top: 2px; }

.h2apex-map-container #h2apex-loading {
  position: absolute; inset: 0; z-index: 1000;
  background: #050810; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #14a0de; font-size: 16px; transition: opacity 0.8s;
}
.h2apex-map-container #h2apex-loading .spinner {
  width: 40px; height: 40px; border: 3px solid rgba(20,160,222,0.2);
  border-top-color: #14a0de; border-radius: 50%;
  animation: h2apex-spin 0.8s linear infinite; margin-bottom: 16px;
}
@keyframes h2apex-spin { to { transform: rotate(360deg); } }