.ontario-region-popup {
  display: none !important;
}

.ontario-region-popup.ontario-region-popup--visible {
  display: block !important;
}

/* Desktop-only close "X" inside popup header */
@media (min-width: 769px) {
  .ontario-region-popup .ontario-region-close {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #6B7A88;
    cursor: pointer;
  }
}

.ontario-map-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.ontario-map {
  width: 100%;
  height: auto;
  display: block;
}

/* Base look */
.map-region {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* Major region fills (tweak to match reference legend) */
/* Area classes kept for hooks, but no default colors applied anymore. */

/* Hover highlight */
.map-region:hover {
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.25));
  transform: translateY(-2px) scale(1.02);
}

.map-region.region-locked {
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.25));
  transform: translateY(-2px) scale(1.02);
}

/* Tooltip */
#map-tooltip {
  position: absolute;
  padding: 4px 10px;
  background: #003060;
  color: #ffffff;
  font-family: "Raleway","Segoe UI",Arial,sans-serif;
  font-size: 12px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s ease;
  z-index: 9999;
  white-space: nowrap;
}



/* Ensure the SVG overlay wrapper is the positioning context for the tooltip */
.ontario-svg-overlay-wrapper {
  position: relative;
}


/* Region popup (click-based details) */
.ontario-region-popup {
  position: absolute;
  max-width: 320px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  font-family: "Raleway","Segoe UI",Arial,sans-serif;
  color: #003060;
  padding: 14px 16px 16px;
  z-index: 10000;
  display: none;
}

.ontario-region-popup--visible {
  display: block;
}

.ontario-region-popup-inner {
  position: relative;
}

.ontario-region-popup-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: #003060;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.ontario-region-name {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.ontario-region-location {
  margin: 0 0 10px;
  font-size: 13px;
  color: #4B633B;
}

.ontario-region-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.ontario-region-stat {
  background: #F7F9FA;
  border-radius: 8px;
  padding: 6px 8px;
}

.ontario-region-stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-bottom: 2px;
}

.ontario-region-stat-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

/* Small screens: make popup full-width-ish */
@media (max-width: 768px) {
  .ontario-region-popup {
    left: 50% !important;
    top: 12px !important;
    transform: translateX(-50%);
    max-width: 90vw;
  }
}


/* Freeform region content block */
.ontario-region-content {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
}

.ontario-region-content p {
  margin: 0 0 6px;
}

.ontario-region-content ul,
.ontario-region-content ol {
  margin: 0 0 6px 18px;
  padding: 0;
}


/* === Mobile behaviour: region popup bottom-left, name only === */
@media (max-width: 768px) {
  /* Anchor popup card to bottom-left of map area */
  .ontario-region-popup {
    position: absolute;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    transform: none !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Only show the region name on mobile (no subtitle / notes) */
  .ontario-region-popup .ontario-region-location,
  .ontario-region-popup .ontario-region-content {
    display: none !important;
  }

  .ontario-region-popup .ontario-region-name {
    display: block;
    font-size: 16px;
    margin-bottom: 0;
  }
}


/* Hide the region close "X" on mobile */
@media (max-width: 768px) {
  .ontario-region-close {
    display: none !important;
  }
}


/* Strongly hide the region close "X" on mobile / small screens */
@media (max-width: 768px) {
  .ontario-region-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* On mobile, never show the desktop region popup – rely on small tooltips only */
@media (max-width: 768px) {
  .ontario-region-popup {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* Prevent SVG shadow/filter clipping */
.ontario-svg-overlay-wrapper svg,
.ontario-map { overflow: visible !important; }