/* -------------------------------------------------------- */
/* 🔹 Price Areas Map                                      */
/* -------------------------------------------------------- */
/* Container and canvas styling for the interactive map     */
/* Mirrors country_price_areas_map.dart layout              */

.price-areas-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-m) 0;
}

.price-areas-map__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

/* The wrapper's aspect-ratio is set inline per country to match the
   map SVG's viewBox — reserves the canvas area before JS renders.
   --map-scale comes with it and keeps every country the same visual
   size; the widths below are for the narrowest map (see countries.js) */
.price-areas-map__wrapper {
  width: 100%;
  max-width: calc(220px * var(--map-scale, 1));
}

.price-areas-map__canvas {
  display: block;
  width: 100%;
  touch-action: manipulation;
}

@media (min-width: 768px) {
  .price-areas-map__wrapper {
    max-width: calc(260px * var(--map-scale, 1));
  }
}

@media (min-width: 1200px) {
  .price-areas-map__wrapper {
    max-width: calc(320px * var(--map-scale, 1));
  }
}