/* CD Mappa (common module, master cd-lab/scripts/wp/cd-mappa). Colours from the theme: --cd-mappa-sfondo, --cd-mappa-testo,
   --cd-mappa-btn, --cd-mappa-btn-testo, --cd-mappa-raggio; height from --cd-mappa-altezza (set on the box). */
.cd-mappa {
  --cdm-sfondo: var(--cd-mappa-sfondo, #f2f2f2); --cdm-testo: var(--cd-mappa-testo, #222);
  --cdm-btn: var(--cd-mappa-btn, #222); --cdm-btn-testo: var(--cd-mappa-btn-testo, #fff);
  position: relative; border-radius: var(--cd-mappa-raggio, 0); overflow: hidden; background: var(--cdm-sfondo); color: var(--cdm-testo);
}
.cd-mappa__attesa {
  min-height: var(--cd-mappa-altezza, 400px); display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center;
}
.cd-mappa__attesa p { margin: 0; max-width: 32rem; font-size: .9rem; line-height: 1.5; }
.cd-mappa__mostra, .cd-mappa__comandi button {
  border: 0; border-radius: 4px; background: var(--cdm-btn); color: var(--cdm-btn-testo); font: inherit; cursor: pointer;
}
.cd-mappa__mostra { min-height: 40px; padding: 0 18px; font-size: .9rem; }
.cd-mappa__mostra:focus-visible, .cd-mappa__comandi button:focus-visible, .cd-mappa__puntina:focus-visible, .cd-mappa__chiudi:focus-visible {
  outline: 3px solid var(--cdm-btn); outline-offset: 2px;
}
/* The list of the points: hidden, read by screen readers (the map itself is a picture) */
.cd-mappa__elenco { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; }
.cd-mappa__vista { position: relative; height: var(--cd-mappa-altezza, 400px); overflow: hidden; touch-action: pan-y; user-select: none; }
.cd-mappa__vista--trascina { cursor: grab; }
.cd-mappa__vista--trascina:active { cursor: grabbing; }
.cd-mappa__tessere img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.cd-mappa__puntine { position: absolute; inset: 0; }
.cd-mappa__puntina {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -44px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer;
}
.cd-mappa__puntina:not(.cd-mappa__puntina--icona)::before {
  content: ""; position: absolute; left: 10px; top: 4px; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--cdm-btn); box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.cd-mappa__puntina--icona { width: auto; height: auto; margin: 0; translate: -50% -100%; }
.cd-mappa__puntina--icona img { display: block; max-width: none; }
.cd-mappa__scheda { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; }
.cd-mappa__scheda-dentro {
  position: absolute; bottom: 52px; left: 0; translate: -50% 0; width: min(280px, 80vw); padding: 14px 16px; border-radius: 8px;
  background: #fff; color: #222; box-shadow: 0 6px 24px rgba(0, 0, 0, .22); font-size: .9rem; line-height: 1.45;
}
.cd-mappa__titolo { margin: 0 28px 6px 0; font-size: 1rem; line-height: 1.25; }
.cd-mappa__testo > :first-child { margin-top: 0; }
.cd-mappa__testo > :last-child { margin-bottom: 0; }
.cd-mappa__chiudi {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: inherit;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.cd-mappa__comandi { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; gap: 4px; }
.cd-mappa__comandi button { width: 36px; height: 36px; font-size: 1.2rem; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.cd-mappa__attribuzione {
  position: absolute; right: 0; bottom: 0; z-index: 1; padding: 2px 6px; background: rgba(255, 255, 255, .85); color: #333; font-size: 11px; text-decoration: none;
}
