/* ==========================================================================
   Apex Evergreen Pharma — Interactive World Map styles (shared)
   --------------------------------------------------------------------------
   Styling for the .ae-world-map component and the jsVectorMap chrome
   (tooltip, zoom buttons). Consumes design-system variables. Load this AFTER
   the jsVectorMap CDN stylesheet so these overrides win.
   ========================================================================== */

/* The map fills its framed slot (a .media-frame, which is position:relative).
   Clipped to the frame's rounded corners; sits below the gold corner brackets
   (frame ::before/::after are z-index 1). */
.ae-world-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-forest);
}

/* jsVectorMap injects a .jvm-container — keep it transparent over our forest. */
.ae-world-map .jvm-container {
  background: transparent !important;
  width: 100%;
  height: 100%;
}

/* Loading / fallback note shown until the map initialises. */
.ae-world-map__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted-dark);
}

/* ---- Tooltip (country name on hover) ---- */
.jvm-tooltip {
  background-color: var(--color-forest) !important;
  border: 1px solid rgba(201, 169, 74, 0.5) !important;
  color: var(--color-text-light) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  padding: 0.4rem 0.7rem !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(12, 26, 18, 0.55) !important;
}

/* ---- Zoom buttons ---- */
.jvm-zoom-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  color: var(--color-gold) !important;
  background-color: rgba(30, 58, 42, 0.85) !important;
  border: 1px solid rgba(201, 169, 74, 0.4) !important;
  border-radius: 7px !important;
  /* Top-right corner (the frame's gold brackets are top-left & bottom-right,
     so the top-right stays clear). */
  left: auto !important;
  right: 12px !important;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.jvm-zoom-btn:hover {
  background-color: var(--color-gold) !important;
  color: var(--color-forest) !important;
  border-color: var(--color-gold) !important;
}
.jvm-zoom-btn.jvm-zoomin { top: 12px !important; }
.jvm-zoom-btn.jvm-zoomout { top: 46px !important; }

/* ---- Reduced motion: keep it calm (no smooth zoom easing) ---- */
@media (prefers-reduced-motion: reduce) {
  .jvm-zoom-btn { transition: none; }
}