/* ============================================================
   social-proof.css — recent-purchase notifications
   Created 2026-08-13.

   WHY A NEW FILE, AND A NEW CLASS NAME
   ------------------------------------
   The original notifications used class `.toast`, which collides with
   Bootstrap 5.3 (loaded from the CDN on every funnel page). Bootstrap ships
   `.toast:not(.show){display:none}` — more specific than a bare `.toast` rule —
   so every notification was created in the DOM and never rendered. Renaming to
   `.sp-*` removes the collision permanently rather than fighting it with
   `.show`, which a future Bootstrap bump could break again.

   NEW FILENAME ON PURPOSE. Cloudflare serves this directory with
   max-age=315360000 (10 years) and cf-cache-status: HIT. Editing site-pro.css
   in place would never reach a returning visitor, and would risk new markup
   meeting old styles. A new URL has no cache entry anywhere.
   Never edit this in place either — publish social-proof-2.css and re-point
   the <link>.

   FAIL-SAFE: the container carries inline `style="display:none"` in the HTML
   and is re-shown here with `!important`. If this stylesheet ever fails to
   load, the notifications collapse to nothing instead of rendering as unstyled
   text over the page. The `hidden` attribute cannot be used for this — the
   Bootstrap reboot already ships `[hidden]{display:none!important}`.
   ============================================================ */

.sp-stack {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 90;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

@media (max-width: 980px) {
  .sp-stack {
    bottom: 80px;
    left: 12px;
    right: 12px;
  }
}

.sp-toast {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  padding: 12px 16px 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  box-shadow: 0 12px 36px rgba(15, 16, 32, 0.18);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 320ms ease,
    transform 320ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
  pointer-events: auto;
  position: relative;
}
.sp-toast.in {
  opacity: 1;
  transform: translateX(0);
}
.sp-toast.out {
  opacity: 0;
  transform: translateX(-20px);
}

.sp-toast .sp-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gradient, linear-gradient(135deg, #ffcb1d 0%, #f0a32c 50%, #ff7d00 100%));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.sp-toast .sp-av::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  background: var(--success, #10b981);
  border: 2px solid #fff;
  border-radius: 50%;
}

.sp-toast .sp-body {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2, #2a2c3e);
}
.sp-toast .sp-body strong {
  color: var(--ink, #0f1020);
  font-weight: 700;
}

.sp-toast .sp-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-mute, #7e8195);
}
.sp-toast .sp-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success, #10b981);
  animation: sp-pulse 1.4s ease-in-out infinite;
}

@keyframes sp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

.sp-toast .sp-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: 0;
  color: var(--ink-mute, #7e8195);
  cursor: pointer;
  font-size: 14px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 150ms ease;
}
.sp-toast .sp-close:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sp-toast,
  .sp-toast.in,
  .sp-toast.out {
    transition: none;
    transform: none;
  }
  .sp-toast .sp-meta::before {
    animation: none;
  }
}