/* CSS basilare per le icone social - approccio drasticamente semplificato */

/* Container principale */
.social-container {
  display: flex;
  gap: 20px; /* Aumentata spaziatura come richiesto */
  padding: 15px 0;
}

/* Stile base per tutte le icone social */
.social-icon {
  width: 45px; /* Leggermente più grandi */
  height: 45px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1); /* Sfondo scuro semitrasparente */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Bordo sottile per definizione */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Icona bianca all'interno */
.social-icon i {
  color: #FFFFFF; /* Bianco puro */
  font-size: 20px;
  transition: all 0.3s ease;
}

/* Effetto hover */
.social-icon:hover {
  background-color: #00D4FF; /* Electric Blue */
  border-color: #00D4FF;
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 212, 255, 0.4);
}

.social-icon:hover i {
  color: #0A0614; /* Icona diventa scura su sfondo chiaro per contrasto */
}

/* Stile specifico per "Coming Soon" (YouTube) */
.social-icon.coming-soon {
  opacity: 0.7;
  cursor: not-allowed;
}

.social-icon.coming-soon:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Non diventa blu */
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
  transform: none;
}

.social-icon.coming-soon:hover i {
  color: #FFFFFF; /* Rimane bianca */
}

/* TOOLTIP Generico (mostra il contenuto di data-tooltip) */
.social-icon::after {
  content: attr(data-tooltip); /* Prende il testo dall'attributo HTML */
  position: absolute;
  bottom: 120%; /* Posizionato sopra */
  left: 50%;
  transform: translateX(-50%);
  background-color: #00D4FF;
  color: #0A0614;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Freccetta del tooltip */
.social-icon::before {
  content: "";
  position: absolute;
  bottom: 110%; /* Posizionato appena sotto il tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #00D4FF transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Mostra tooltip all'hover */
.social-icon:hover::after,
.social-icon:hover::before {
  opacity: 1;
  visibility: visible;
  bottom: 125%; /* Leggero movimento verso l'alto */
}

.social-icon:hover::before {
  bottom: 115%;
}