/* =========================================================================
   FitaFlow - Prova social (carrinho)
   Balaozinho que desliza de lado com "X pessoas visualizaram esse produto".
   Tema claro, para combinar com a pagina do carrinho.
   ========================================================================= */
.ff-social-proof{
  position:fixed;
  left:20px;
  top:120px;            /* no topo, com folga abaixo do cabecalho (evita o menu inferior no mobile) */
  z-index:120;
  display:flex;
  align-items:center;
  gap:12px;
  box-sizing:border-box;
  width:max-content;
  max-width:min(360px, calc(100vw - 40px));
  padding:13px 40px 13px 13px;
  background:#ffffff;
  color:#20263a;
  border:1px solid rgba(124,58,237,.14);
  border-radius:16px;
  box-shadow:0 18px 46px rgba(60,40,120,.18), 0 2px 6px rgba(60,40,120,.08);
  transform:translateX(-135%);
  opacity:0;
  transition:transform .55s cubic-bezier(.2,.85,.25,1), opacity .45s ease;
  font-family:inherit;
}
.ff-social-proof.is-visible{ transform:translateX(0); opacity:1; }

.ff-social-proof__icon{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#7c3aed,#ec4899);
  color:#fff;
  box-shadow:0 6px 16px rgba(124,58,237,.32);
}
.ff-social-proof__icon svg{ width:20px; height:20px; }

.ff-social-proof__text{
  margin:0;
  flex:1 1 auto;
  min-width:0;
  font-size:.9rem;
  line-height:1.35;
  font-weight:600;
  color:#242a3d;
}
.ff-social-proof__text b{
  color:#7c3aed;
  font-weight:800;
}

.ff-social-proof__close{
  position:absolute;
  top:8px;
  right:9px;
  width:24px;
  height:24px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#8a8fa6;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.ff-social-proof__close:hover{ background:rgba(20,10,50,.06); color:#4a4f66; }

@media (max-width:520px){
  .ff-social-proof{ left:12px; right:12px; top:112px; max-width:none; width:auto; }
}
@media (prefers-reduced-motion:reduce){
  .ff-social-proof{ transition:opacity .3s ease; transform:none; }
}