/* Spectrum social & call buttons — from Theme Templates/Spectrum-social-buttons.html */

.sbtn{
  --bg:var(--cobalt);
  position:relative;width:60px;height:60px;border-radius:50%;
  border:2px solid var(--ink);background:var(--bg);color:#fff;
  display:grid;place-items:center;cursor:pointer;text-decoration:none;
  box-shadow:3px 4px 0 var(--ink);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.sbtn:hover{transform:translateY(-4px);box-shadow:7px 9px 0 var(--ink)}
.sbtn:active{transform:translateY(-1px);box-shadow:3px 4px 0 var(--ink)}
.sbtn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.sbtn svg{width:28px;height:28px;fill:currentColor;position:relative;z-index:3}

.sbtn.fb{--bg:var(--cobalt)}
.sbtn.wa{--bg:var(--green)}
.sbtn.call{--bg:var(--coral)}
.sbtn.ig{
  background:linear-gradient(45deg,var(--sun),var(--coral) 44%,var(--magenta));
  background-size:180% 180%;animation:ig-shift 5s ease infinite;
}
@keyframes ig-shift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

.sbtn.wa::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--green);z-index:0;
  animation:wa-ripple 2.4s var(--ease) infinite;
}
@keyframes wa-ripple{0%{transform:scale(1);opacity:.65}100%{transform:scale(1.75);opacity:0}}

.sbtn.call svg{transform-origin:52% 56%;animation:call-ring 2.8s var(--ease) infinite}
@keyframes call-ring{
  0%,68%,100%{transform:rotate(0)}
  71%{transform:rotate(-15deg)}76%{transform:rotate(13deg)}
  81%{transform:rotate(-10deg)}86%{transform:rotate(7deg)}91%{transform:rotate(-3deg)}
}

.sbtn:hover svg{animation:pop .4s var(--ease)}
.sbtn.call:hover svg{animation:call-ring .6s var(--ease)}
@keyframes pop{0%{transform:scale(1)}42%{transform:scale(1.28)}100%{transform:scale(1)}}

.fab{position:fixed;right:24px;bottom:24px;z-index:200;display:flex;flex-direction:column;align-items:center;gap:16px}
.fab .stack{display:flex;flex-direction:column;gap:16px;align-items:center}
.fab .stack .sbtn{transition:transform .28s var(--ease),opacity .28s var(--ease),box-shadow .18s var(--ease)}
.fab.collapsed .stack .sbtn{transform:scale(0) translateY(14px);opacity:0;pointer-events:none}
.fab.collapsed .stack .sbtn:nth-child(1){transition-delay:.0s}
.fab.collapsed .stack .sbtn:nth-child(2){transition-delay:.03s}
.fab.collapsed .stack .sbtn:nth-child(3){transition-delay:.06s}
.fab.collapsed .stack .sbtn:nth-child(4){transition-delay:.09s}

.sbtn .lbl{
  position:absolute;right:calc(100% + 14px);top:50%;white-space:nowrap;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:.72rem;font-weight:600;
  padding:.42rem .7rem;border-radius:9px;border:2px solid var(--ink);
  transform:translateY(-50%) translateX(10px);opacity:0;pointer-events:none;transition:.18s var(--ease);
}
.sbtn .lbl::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:6px solid transparent;border-left-color:var(--ink)}
.fab .sbtn:hover .lbl{opacity:1;transform:translateY(-50%) translateX(0)}

.fab-toggle{
  position:relative;width:64px;height:64px;border-radius:50%;background:var(--ink);color:#fff;
  border:2px solid var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:3px 4px 0 rgba(17,16,21,.3);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.fab-toggle:hover{transform:translateY(-3px);box-shadow:6px 8px 0 var(--cobalt)}
.fab-toggle:focus-visible{outline:3px solid var(--cobalt);outline-offset:4px}
.fab-toggle svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;transition:transform .28s var(--ease)}
.fab:not(.collapsed) .fab-toggle svg{transform:rotate(135deg)}
.fab-toggle .badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--coral);border:2px solid var(--ink);border-radius:50%}
.fab:not(.collapsed) .fab-toggle .badge{display:none}
.fab.collapsed .fab-toggle{animation:nudge 2.6s var(--ease) infinite}
@keyframes nudge{0%,88%,100%{transform:translateY(0)}92%{transform:translateY(-5px)}96%{transform:translateY(-2px)}}

.pill{
  --bg:var(--cobalt);
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  padding:.72rem 1.15rem;border-radius:999px;border:2px solid var(--ink);
  background:var(--bg);color:#fff;font-family:var(--body);font-weight:600;font-size:.98rem;
  box-shadow:3px 4px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.pill:hover{transform:translateY(-3px);box-shadow:6px 8px 0 var(--ink)}
.pill:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.pill svg{width:20px;height:20px;fill:currentColor}
.pill.fb{--bg:var(--cobalt)} .pill.wa{--bg:var(--green)} .pill.call{--bg:var(--coral)}
.pill.ig{background:linear-gradient(45deg,var(--sun),var(--coral) 44%,var(--magenta))}

.spectrum-footer-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}

@media(max-width:560px){
  .fab{right:16px;bottom:16px}
}

@media(prefers-reduced-motion:reduce){
  .sbtn,.fab-toggle,.pill,.sbtn.ig,.sbtn.wa::after,.sbtn.call svg,.fab.collapsed .fab-toggle{
    animation:none!important;
  }
  .sbtn,.fab-toggle,.pill,.fab .stack .sbtn{transition:box-shadow .15s,transform .15s}
}