/* -------------------------------------------------------- */
/* 🔹 Price Areas Map                                      */
/* -------------------------------------------------------- */
/* Container and canvas styling for the interactive map     */
/* Mirrors sweden_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);
}

.price-areas-map__subtitle {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-body-medium);
  line-height: var(--text-body-medium-height);
  color: var(--color-on-surface-variant);
}

.price-areas-map__wrapper {
  width: 100%;
  max-width: 220px;
  /* Reserve the canvas area before JS renders — matches the SVG viewBox */
  aspect-ratio: 397 / 910;
}

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

@media (min-width: 768px) {
  .price-areas-map__wrapper {
    max-width: 260px;
  }
}

@media (min-width: 1200px) {
  .price-areas-map__wrapper {
    max-width: 320px;
  }
}