/* Homepage map, more features (map-features.js). */

/* Headline counter, top-left of the map */
.mapf-counter {
  position: absolute; top: 12px; left: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px; background: rgba(6, 12, 34, 0.78); border: 1px solid rgba(120, 170, 255, 0.35);
  color: #dbe7ff; font-size: 0.8rem; white-space: nowrap; backdrop-filter: blur(6px); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.mapf-counter strong { color: #fff; font-weight: 800; }
.mapf-counter-ic { font-size: 0.9rem; }
/* Phones: bottom-left, clear of the Map / Globe switch at the top. */
@media (max-width: 600px) { .mapf-counter { top: auto; bottom: 8px; left: 8px; padding: 4px 9px; font-size: 0.66rem; } }

/* Zoom and drag in full screen */
.mapf-pan { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.mapf-zoom { display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 6; flex-direction: column; gap: 6px; }
.mapf-fs .mapf-zoom { display: flex; }
.mapf-zoom button {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(6, 12, 34, 0.82);
  color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.mapf-zoom button:hover, .mapf-zoom button:focus-visible { border-color: var(--accent-2); }
.mapf-fs .map-panel { touch-action: none; }
.mapf-fs.mapf-zoomed .map-panel { cursor: grab; }
.mapf-fs.mapf-zoomed .map-panel:active { cursor: grabbing; }
.mapf-zoomed .map-card { display: none; } /* cards point at map spots; hidden while zoomed in */

/* Phones: the small map can't fit a card above a country without it running off
   the top, so cards sit at the bottom centre; the counter steps aside meanwhile. */
@media (max-width: 600px) {
  .hero-map .map-card, .hero-map .map-card.below { left: 50% !important; top: auto !important; bottom: 8px; transform: translateX(-50%); max-width: calc(100% - 16px); white-space: normal; }
  .hero-map:has(.map-card:not([hidden])) .mapf-counter { opacity: 0; }
}