/* Frontend side */

.hotspot-container {
  position: relative;
  display: inline-block;
}

.hotspot-marker {
  position: absolute;
  width: 22px;
  height: 22px;
  background: blue;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -55%);

  /* Anima un “cerchio” che si allarga e sbiadisce */
  animation: ripple 1.5s infinite ease-out;
}


@keyframes ripple {
  0% {
    transform: translate(-50%, -55%) scale(1);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -55%) scale(1.5);
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -55%) scale(1.5);
    opacity: 0;
  }
}

/* Stile base per popup callout */

.hotspot-popup {
  position: absolute;
  
  /* Larghezza “responsiva” con limite di 600px.
     Se non vuoi il comportamento responsivo,
     usa direttamente “width: 600px”. */
  width: clamp(200px, 40vw, 600px);

  /* Altezza massima (se il contenuto supera questo valore, appare la scrollbar) */
  max-height: 500px;
  overflow-y: auto;
  
  /* Stili di base per il riquadro */
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 15px rgba(0,0,0,0.2);
  padding: 8px;
  border-radius: 4px;
  box-sizing: border-box;

  /* Per sovrapporsi a eventuali altri elementi sottostanti */
  z-index: 999;
}

/* Freccina (triangolino) che punta verso il basso */
.hotspot-popup::before {
  content: "";
  position: absolute;

  /* Triangolo: due bordi trasparenti e uno bianco in basso */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;

  /* Qui la posizioniamo 8px sopra il box e 20px da sinistra */
  top: -8px; 
  left: 20px;
}


@media (max-width: 600px) {
    /*.hotspot-popup::before {
        left: calc(20px + 80px);
    }
    
    .hotspot-popup {
        width: 300px!important;
        transform: translate(-70px, 10px);
    }*/
    
    .hotspot-marker {
      position: absolute;
      width: 10px;
      height: 10px;
      background: blue;
      border-radius: 50%;
      cursor: pointer;
    /* Per i dispositivi touch: ingrandiamo l’area cliccabile */
      padding: 0px;
      margin: -0px;
      box-sizing: content-box;
      transform: translate(-0%, -0%);
    
      /* Anima un “cerchio” che si allarga e sbiadisce */
      animation: ripple 1.5s infinite ease-out;
    }
}