/* share-widget.css — Social Share FAB
   Desktop: barra verticale sinistra con FAB
   Mobile: Web Share API nativa (<768px)
   Zero dipendenze. */

#sw-fab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  pointer-events: none;
}

/* Bottone trigger principale */
#sw-trigger {
  pointer-events: all;
  width: 44px;
  height: 44px;
  border-radius: 0 8px 8px 0;
  background: #d85a30;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 8px rgba(0,0,0,.25);
  transition: background .15s, transform .15s;
  position: relative;
  z-index: 2;
}
#sw-trigger:hover { background: #c04a22; transform: translateX(2px); }
#sw-trigger svg { width: 20px; height: 20px; fill: #fff; pointer-events: none; }

/* Pannello che si espande verso il basso (o sopra se troppo vicino al fondo) */
#sw-panel {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .2s;
  background: #1a1a1a;
  border-radius: 0 0 8px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 2px 4px 12px rgba(0,0,0,.35);
  width: 44px;
}
#sw-panel.sw-above {
  order: -1;
  border-radius: 0 8px 0 0;
  border-top: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#sw-fab.sw-open #sw-panel {
  max-height: 440px;
  opacity: 1;
  pointer-events: all;
}

/* Singolo bottone social */
.sw-btn {
  width: 44px;
  height: 44px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .12s, transform .1s;
  position: relative;
  flex-shrink: 0;
  background: transparent;
}
.sw-btn:hover { filter: brightness(1.18); transform: translateX(3px); }
.sw-btn svg { width: 18px; height: 18px; pointer-events: none; }

/* Tooltip a destra al hover */
.sw-btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.sw-btn:hover::after { opacity: 1; }

/* Colori per social */
.sw-btn[data-net="facebook"] { background: #1877F2; }
.sw-btn[data-net="twitter"]  { background: #000; }
.sw-btn[data-net="whatsapp"] { background: #25D366; }
.sw-btn[data-net="telegram"] { background: #26A5E4; }
.sw-btn[data-net="reddit"]   { background: #FF4500; }
.sw-btn[data-net="pinterest"]{ background: #E60023; }
.sw-btn[data-net="email"]    { background: #555; }
.sw-btn[data-net="copy"]     { background: #333; }

/* Separatore sottile tra bottoni */
.sw-btn + .sw-btn {
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Feedback "copiato" */
#sw-fab .sw-copied-toast {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #25a244;
  color: #fff;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#sw-fab .sw-copied-toast.sw-show { opacity: 1; }

/* Mobile: nasconde tutto (usa Web Share API via JS) */
@media (max-width: 767px) {
  #sw-fab { display: none; }
}