/* Bingo Social Proof Widget — front end. No frameworks, no external requests. */

.bsp-toast,.bsp-toast *{box-sizing:border-box}

.bsp-toast{
  position:fixed;
  z-index:99990;
  width:330px;
  max-width:calc(100vw - 32px);
  background:#fff;
  border:1px solid #e6e9ef;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(20,28,45,.14);
  padding:13px 30px 13px 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  /* matches the site's body font (DM Sans, loaded by the theme) with safe fallbacks */
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .38s ease, transform .38s cubic-bezier(.2,.8,.3,1);
}
.bsp-toast.bsp-show{opacity:1;transform:translateY(0);pointer-events:auto}

/* steady mode: the card stays put, only its contents crossfade */
.bsp-toast .bsp-body,.bsp-toast .bsp-av{transition:opacity .25s ease}
.bsp-toast.bsp-swapping .bsp-body,.bsp-toast.bsp-swapping .bsp-av{opacity:0}

.bsp-bl{left:20px;bottom:20px}
.bsp-br{right:20px;bottom:20px}
.bsp-tr{right:20px;top:20px;transform:translateY(-14px)}
.bsp-tr.bsp-show{transform:translateY(0)}

.bsp-av{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;line-height:1;
  background:var(--bsp-accent,#FF7A45);
  color:#fff;
}
.bsp-body{flex:1;min-width:0}
.bsp-txt{
  margin:0 0 4px;
  font-size:13.5px;line-height:1.45;
  color:#1c2433;
}
.bsp-txt b{font-weight:700;color:var(--bsp-brand,#1F2A44)}
.bsp-meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#6b7585}
.bsp-dot{width:6px;height:6px;border-radius:50%;background:#2fb344;flex:0 0 6px}
.bsp-x{
  position:absolute;top:7px;right:8px;
  border:0;background:none;cursor:pointer;
  color:#b3bac6;font-size:16px;line-height:1;padding:4px;
  font-family:inherit;
}
.bsp-x:hover{color:#6b7585}

@media (max-width:600px){
  .bsp-bl,.bsp-br{left:12px;right:12px;width:auto;bottom:12px}
  .bsp-tr{left:12px;right:12px;width:auto;top:12px}
}

@media (prefers-reduced-motion:reduce){
  .bsp-toast{transition:opacity .2s linear}
  .bsp-toast,.bsp-tr{transform:none}
}