/* ============================================================
   share-button.css — Floating Share Button Widget
   For: AI Course pages (iadsclick.com / UpScale Skills)
   Usage: <link rel="stylesheet" href="share-button.css">
          <script src="share-button.js"></script>
   ============================================================ */

/* ===== SHARE BUTTON STYLES ===== */
.share-float-wrap{position:relative}

.f-share{background:#1e293b;border:none}

/* Share icon tray */
.share-menu{
  position:absolute;
  right:60px;
  bottom:0;
  display:flex;
  flex-direction:row;
  gap:8px;
  opacity:0;
  pointer-events:none;
  transform:translateX(18px);
  transition:opacity .3s ease, transform .3s ease;
  white-space:nowrap;
}
.share-menu.open{
  opacity:1;
  pointer-events:all;
  transform:translateX(0);
}

/* Individual share buttons */
.share-item{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:.92rem;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:transform .2s ease, box-shadow .2s ease;
  text-decoration:none;
  flex-shrink:0;
}
.share-item:hover{
  transform:scale(1.18) translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* Platform colours */
.share-wa  {background:#25D366}
.share-fb  {background:#1877f2}
.share-li  {background:#0a66c2}
.share-tw  {background:#1da1f2}
.share-copy{background:#64748b}

/* Tooltip on hover */
.share-item[title]{position:relative}
.share-item[title]::after{
  content:attr(title);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.75);
  color:#fff;
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.5px;
  padding:4px 8px;
  border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s;
}
.share-item[title]:hover::after{opacity:1}

/* Copied confirmation state */
.share-copy.copied{background:#10b981}

/* ===== SHARE TOGGLE PULSE ===== */
@keyframes share-pulse{
  0%,100%{box-shadow:0 8px 24px rgba(30,41,59,.5)}
  50%{box-shadow:0 8px 24px rgba(30,41,59,.5), 0 0 0 8px rgba(46,230,214,.08)}
}
.f-share{animation:share-pulse 3s ease-in-out infinite}
.f-share:hover{animation:none}