/* Overrides for the self-hosted svgMap on the international coverage page.
   Must be loaded AFTER svgMap.min.css to win on equal specificity. */

/* Transparent "ocean" so the page background (white / dark) shows through
   instead of svgMap's default light-blue. */
.svgMap-map-wrapper {
  background: transparent;
}

/* Country separator lines: muted grey-purple instead of svgMap's default white. */
.svgMap-map-wrapper .svgMap-country {
  stroke: #a8a3c0;
}

/* Hover/active highlight: accent yellow border instead of svgMap's default dark gray. */
.svgMap-map-wrapper .svgMap-country:hover,
.svgMap-map-wrapper .svgMap-country.svgMap-active {
  stroke: #fed73a;
  stroke-width: 2;
}

/* Dark mode tooltips/popups (app uses prefers-color-scheme). svgMap defaults to
   a white card with dark text; flip to a dark card with light text + brand stem. */
@media (prefers-color-scheme: dark) {
  /* NOTE: svgMap styles these with a `.svgMap-tooltip ...` ancestor selector, so
     our overrides must include the same ancestor to match its specificity. */
  .svgMap-tooltip {
    background: #1f2937; /* gray-800 */
    border-bottom-color: #592879; /* brand stem */
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  }

  .svgMap-tooltip.svgMap-tooltip-flipped {
    border-top-color: #592879;
  }

  .svgMap-tooltip .svgMap-tooltip-title {
    color: #f3f4f6; /* gray-100 */
  }

  .svgMap-tooltip .svgMap-tooltip-content {
    color: #9ca3af; /* gray-400 labels */
  }

  /* The VALUE cells are <span>s svgMap colors #111 (invisible on dark). */
  .svgMap-tooltip .svgMap-tooltip-content table td span {
    color: #f3f4f6; /* gray-100 */
  }

  .svgMap-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data {
    color: #9ca3af; /* gray-400 */
  }

  .svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container .svgMap-tooltip-flag {
    background: rgba(255, 255, 255, 0.1);
  }
}