.share-links {
margin-bottom: 17px;
}
.share-links .shares {
display: flex;
justify-content: space-between;
margin-top: 7px;
}
.share-links .tit {
font-size: 0.8rem;
color: #898888;
text-align: center;
}
.social-share {
width: 24px;
height: 24px;
display: inline-block;
background-size: 24px 24px;
}
.social-share.facebook {
background-image: url('data:image/svg+xml,')
}
.social-share.X {
background-image: url('data:image/svg+xml,')
}
.social-share.whatsapp {
background-image: url('data:image/svg+xml,')
}
.social-share.mail {
background-image: url('data:image/svg+xml,')
}
.social-share.copy {
border: none;
background-color: transparent;
cursor: pointer;
background-image: url('data:image/svg+xml,')
}
.social-share.copy.okay {
animation: flash 0.5s ease-in-out 3;
background-image: url('data:image/svg+xml,')!important
}
@keyframes flash { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
.social-share.copy.okay::after {
content: "Link copiato";
position: absolute;
top: -35px; /* sopra l'icona */
left: 50%;
transform: translateX(-50%);
background: #333; color: #fff;
padding: 5px 8px; border-radius: 4px; font-size: 12px;
white-space: nowrap; opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.social-share.copy.okay:hover::after, .social-share.copy.okay:hover::before {
opacity: 1;
}