/* AgroCares calibrated countries map - frontend styles.
   Colours come from the admin settings as --ac-map-* on .ac-map (brand tokens by default);
   everything else uses the --ac-* brand tokens with fallbacks. Flat design: no shadows/gradients. */

.ac-map {
  --ac-map-fill: var(--ac-green, #37AB49);
  --ac-map-hover: var(--ac-green-dark, #2E9440);
  --ac-map-other: var(--ac-grey-200, #EDEDED);
  --ac-map-border: var(--ac-white, #FFFFFF);
  --ac-map-ocean: transparent;
  --ac-map-height: 520px;
  position: relative;
  max-width: 100%;
  font-family: var(--ac-font, 'Poppins', 'Segoe UI', system-ui, sans-serif);
  color: var(--ac-text, #3C3734);
}

/* Stage + SVG ------------------------------------------------------------- */
.ac-map__stage {
  position: relative;
  width: 100%;
  background: var(--ac-map-ocean);
  border-radius: var(--ac-radius-lg, 12px);
}
.ac-map__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--ac-map-height);
  overflow: visible;
}
.ac-map__country path,
.ac-map__country .ac-map__dot {
  fill: var(--ac-map-other);
  stroke: var(--ac-map-border);
  stroke-width: 1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  fill-rule: evenodd;
  transition: fill var(--ac-transition, .18s ease);
}
.ac-map__country .ac-map__dot { display: none; }
.ac-map__country.is-calibrated path { fill: var(--ac-map-fill); }
.ac-map__country.is-calibrated .ac-map__dot {
  display: block;
  fill: none;
  stroke: var(--ac-map-fill);
  stroke-width: 2px;
  pointer-events: stroke;
}
.ac-map__country.is-calibrated { cursor: pointer; outline: none; }
.ac-map__country.is-calibrated:hover path,
.ac-map__country.is-calibrated:focus path,
.ac-map__country.is-calibrated.is-active path { fill: var(--ac-map-hover); }
.ac-map__country.is-calibrated:hover .ac-map__dot,
.ac-map__country.is-calibrated:focus .ac-map__dot,
.ac-map__country.is-calibrated.is-active .ac-map__dot { stroke: var(--ac-map-hover); stroke-width: 3px; }
.ac-map__country:not(.is-calibrated):hover path { fill: var(--ac-grey-300, #D0D0D0); }
.ac-map__country.is-calibrated:focus-visible path { stroke: var(--ac-brown, #3C3734); stroke-width: 2px; }

/* Tooltip ------------------------------------------------------------------ */
.ac-map__tooltip {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  max-width: min(280px, calc(100% - 16px));
  padding: .625rem .875rem;
  background: var(--ac-brown, #3C3734);
  color: var(--ac-white, #FFFFFF);
  border-radius: var(--ac-radius, 6px);
  font-size: var(--ac-fs-small, .875rem);
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ac-transition, .18s ease);
}
.ac-map__tooltip.is-visible { opacity: 1; }
.ac-map__tooltip[hidden] { display: none; }
.ac-map__tooltip::after {
  content: "";
  position: absolute;
  left: var(--ac-tip-arrow, 50%);
  bottom: -6px;
  width: 12px; height: 12px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.ac-map__tooltip.is-below::after { bottom: auto; top: -6px; }
.ac-map__tooltip-name { display: block; font-weight: 600; font-size: 1rem; margin-bottom: .125rem; }
.ac-map__tooltip-status { display: block; opacity: .85; }
.ac-map__tooltip-note { display: block; margin-top: .375rem; opacity: .85; }

/* Legend -------------------------------------------------------------------- */
.ac-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: var(--ac-s-2, 1rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--ac-fs-small, .875rem);
  color: var(--ac-text-muted, #646363);
}
.ac-map__legend li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.ac-map__swatch {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid var(--ac-map-border);
  box-sizing: border-box;
}
.ac-map__swatch--calibrated { background: var(--ac-map-fill); }
.ac-map__swatch--other { background: var(--ac-map-other); border-color: var(--ac-grey-300, #D0D0D0); }
.ac-map__legend-count { font-weight: 600; color: var(--ac-text, #3C3734); }

/* Country list -------------------------------------------------------------- */
.ac-map__list { margin-top: var(--ac-s-4, 2rem); }
.ac-map__list-title {
  font-size: var(--ac-fs-h3, 1.375rem);
  font-weight: 600;
  margin: 0 0 var(--ac-s-2, 1rem);
  color: var(--ac-text, #3C3734);
}
.ac-map__continents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ac-s-3, 1.5rem);
}
.ac-map__continent {
  padding: var(--ac-s-2, 1rem) var(--ac-s-3, 1.5rem);
  border: 1px solid var(--ac-border, #D0D0D0);
  border-radius: var(--ac-radius-lg, 12px);
  background: var(--ac-bg, #FFFFFF);
}
.ac-map__continent-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 0 .75rem;
  font-size: var(--ac-fs-h4, 1.125rem);
  font-weight: 600;
  color: var(--ac-text, #3C3734);
}
.ac-map__continent-count {
  min-width: 1.75rem;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--ac-green-tint, #EAF6EC);
  color: var(--ac-leaf, #1F6C21);
  font-size: var(--ac-fs-small, .875rem);
  text-align: center;
  line-height: 1.75rem;
}
.ac-map__countries { list-style: none; margin: 0; padding: 0; }
.ac-map__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  padding: .5rem 0;
  border-top: 1px solid var(--ac-grey-200, #EDEDED);
  font-size: var(--ac-fs-body, 1rem);
  line-height: 1.4;
}
.ac-map__item:first-child { border-top: 0; }
.ac-map__item-name { font-weight: 500; margin-right: .25rem; }
.ac-map__item-note {
  flex-basis: 100%;
  font-size: var(--ac-fs-small, .875rem);
  color: var(--ac-text-muted, #646363);
}
.ac-map__item.is-highlight { background: var(--ac-green-tint, #EAF6EC); margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; border-radius: var(--ac-radius, 6px); }


/* Mobile ----------------------------------------------------------------- */
@media (max-width: 767px) {
  .ac-map__svg { max-height: none; }
  .ac-map__tooltip { font-size: .8125rem; max-width: calc(100% - 16px); }
  .ac-map__continents { grid-template-columns: 1fr; gap: var(--ac-s-2, 1rem); }
  .ac-map__continent { padding: .75rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-map__country path, .ac-map__tooltip { transition: none; }
}