.social-proof{
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999999;
  font-family: Arial, sans-serif;
}

.sp-card{
  width: 340px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  border-left: 4px solid #742ea3;
  animation: popIn .4s ease;
  position: relative;
}

@keyframes popIn{
  from {transform: translateY(20px); opacity:0;}
  to {transform: translateY(0); opacity:1;}
}

/* LEFT */
.sp-left{
  position: relative;
}

.sp-left img{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.sp-flag{
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* TEXT */
.sp-text{
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

/* META */
.sp-meta{
  font-size: 11px;
  color: #777;
  margin-top: 2px;
}

.sp-meta strong{
  color: #742ea3;
}

/* LIVE DOT */
.sp-live{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #22c55e;
  font-weight: 700;
}

.dot{
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  position: relative;
}

.dot::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 1.5s infinite;
  opacity: 0.6;
}

@keyframes pulse{
  0% {transform: scale(1); opacity: 0.6;}
  70% {transform: scale(2.2); opacity: 0;}
  100% {opacity: 0;}
}

/* CLOSE */
.sp-close{
  position: absolute;
  top: 6px;
  right: 8px;
  cursor: pointer;
  opacity: .4;
}

.sp-close:hover{
  opacity: 1;
}