/* Restyling della mappa VibrationPOI (pagine caccia-al-tesoro-mappa_0…9).
   Solo aspetto: cambia colori, font e dimensioni. Non tocca GPS, marker, punti, popup.
   Dove incollarlo: Aspetto → Personalizza → CSS aggiuntivo. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,700;6..72,800&family=Atkinson+Hyperlegible:wght@400;700&display=swap");

.vpoi-container, .vpoi-modal {
  --vpoi-map-bg:#264653 !important; --vpoi-map-border:#E9C46A !important;
  --vpoi-button-bg:#E9C46A !important; --vpoi-button-border:#264653 !important; --vpoi-button-icon:#264653 !important;
  --vpoi-button-hover:#F4A261 !important; --vpoi-button-active-bg:#F4A261 !important; --vpoi-button-active-icon:#264653 !important;
  --vpoi-badge-bg:#E9C46A !important; --vpoi-badge-text:#264653 !important; --vpoi-badge-border:#264653 !important;
  --vpoi-modal-overlay:rgba(20,40,48,.82) !important; --vpoi-modal-bg:#264653 !important;
  --vpoi-modal-title-color:#E9C46A !important; --vpoi-modal-close-color:#E9C46A !important; --vpoi-modal-close-hover-bg:#CE6A85 !important;
  --vpoi-modal-body-text:#FBF6EA !important; --vpoi-modal-title-font:"Newsreader",Georgia,serif !important; --vpoi-modal-body-font:"Atkinson Hyperlegible",system-ui,sans-serif !important;
  --vpoi-modal-title-size:24px !important; --vpoi-modal-title-weight:800 !important; --vpoi-modal-body-size:18px !important; --vpoi-modal-radius:24px !important;
  --vpoi-dist-bg:#264653 !important; --vpoi-dist-overlay:rgba(20,40,48,.82) !important; --vpoi-dist-title-color:#E9C46A !important;
  --vpoi-dist-label-color:#FBF6EA !important; --vpoi-dist-value-color:#E9C46A !important; --vpoi-dist-close-color:#E9C46A !important;
  --vpoi-dist-title-font:"Newsreader",Georgia,serif !important; --vpoi-dist-body-font:"Atkinson Hyperlegible",system-ui,sans-serif !important;
  --vpoi-dist-label-size:17px !important; --vpoi-dist-value-size:17px !important; --vpoi-dist-radius:24px !important; --vpoi-dist-item-border:1px solid rgba(251,246,234,.18) !important;
}
.vpoi-container{border:3px solid #E9C46A;border-radius:24px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
/* Pulsanti: grandi e cliccabili con una mano, sotto il sole */
.vpoi-locate-btn,.vpoi-distances-btn{width:56px;height:56px;border-radius:50%;border-width:3px;box-shadow:0 3px 10px rgba(0,0,0,.35);bottom:14px}
.vpoi-locate-btn{right:84px}.vpoi-distances-btn{right:14px}
.vpoi-locate-btn svg,.vpoi-distances-btn svg{width:26px;height:26px}
.vpoi-locate-btn:focus-visible,.vpoi-distances-btn:focus-visible,.vpoi-modal-close:focus-visible{outline:3px solid #FBF6EA;outline-offset:3px}
/* Distanza dal prossimo punto */
.vpoi-distance-badge{top:14px;padding:10px 20px;border-radius:999px;font:700 17px/1.2 "Atkinson Hyperlegible",system-ui,sans-serif;border-width:2px;box-shadow:0 3px 10px rgba(0,0,0,.35)}
/* Finestre dei punti */
.vpoi-modal-content{border:3px solid #E9C46A}
.vpoi-modal-close{width:48px;height:48px;font-size:34px;border-radius:50%}
.vpoi-modal-body,.vpoi-modal-body p{font-size:18px;line-height:1.5}
.vpoi-modal-body a,.vpoi-modal-body button{min-height:56px}
/* Pin dei punti: medaglione con vetro crema quasi trasparente, anello nel colore dello stato, numero crema.
   Sotto il crema c'è un fondo teal scuro per tenere il numero leggibile anche sopra i disegni chiari. La goccia SVG del plugin viene nascosta. */
body .vpoi-poi-marker{position:relative !important;width:40px !important;height:40px !important;color:#2A9D8F;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
body .vpoi-poi-marker .vpoi-poi-marker-svg svg{display:none !important}
body .vpoi-poi-marker .vpoi-poi-marker-svg{position:absolute !important;left:4px !important;top:1px !important;width:32px !important;height:32px !important;box-sizing:border-box !important;border-radius:50% !important;
  background:linear-gradient(rgba(251,246,234,.14),rgba(251,246,234,.14)),rgba(38,70,83,.62) !important;border:3px solid currentColor !important}
body .vpoi-poi-marker::after{content:"";position:absolute;left:50%;top:32px;width:0;height:0;transform:translateX(-50%);
  border:5px solid transparent;border-top:7px solid currentColor;border-bottom:0}
body .vpoi-poi-marker .vpoi-poi-marker-label{top:17px !important;left:50% !important;transform:translate(-50%,-50%) !important;font:800 16px/1 "Atkinson Hyperlegible",system-ui,sans-serif !important;color:#FBF6EA !important;text-shadow:0 1px 2px rgba(0,0,0,.6) !important}

/* Titolo della finestra dei punti: colore e carattere del sito (le impostazioni del plugin non lo cambiavano) */
.vpoi-modal-header h3{color:#E9C46A !important;font-family:"Newsreader",Georgia,serif !important;font-weight:800 !important;font-size:26px !important}
.vpoi-modal-close{color:#E9C46A !important}

/* Colori degli stati dei pin (palette del sito): bloccato teal, completato rosa, lontano giallo, medio arancio, vicino/raggiunto giallo */
.vpoi-poi-marker[style*="#95A5A6" i],.vpoi-poi-marker[style*="149, 165, 166"]{color:#2A9D8F !important}
.vpoi-poi-marker[style*="#8E44AD" i],.vpoi-poi-marker[style*="142, 68, 173"]{color:#CE6A85 !important}
.vpoi-poi-marker[style*="#E74C3C" i],.vpoi-poi-marker[style*="231, 76, 60"]{color:#E9C46A !important}
.vpoi-poi-marker[style*="#F39C12" i],.vpoi-poi-marker[style*="243, 156, 18"]{color:#F4A261 !important}
.vpoi-poi-marker[style*="#F1C40F" i],.vpoi-poi-marker[style*="241, 196, 15"]{color:#E9C46A !important}
.vpoi-poi-marker[style*="#2ECC71" i],.vpoi-poi-marker[style*="46, 204, 113"]{color:#E9C46A !important}