/* SocialProof X — Frontend CSS v4.2.0
   Professional popup design + mobile-first announcement bar
*/

/* ══════════════════════════════════════════════════════════════════════════
   POPUP — Root container
══════════════════════════════════════════════════════════════════════════ */
#spx-root{position:fixed;z-index:2147483635;pointer-events:none}
#spx-root.spx-br{right:20px;bottom:24px}
#spx-root.spx-bl{left:20px;bottom:24px}
#spx-root.spx-tr{right:20px;top:24px}
#spx-root.spx-tl{left:20px;top:24px}

/* ══════════════════════════════════════════════════════════════════════════
   POPUP — Toast card
══════════════════════════════════════════════════════════════════════════ */
.spx-toast{
  --spx-accent:#6366f1;
  --spx-bg:#ffffff;
  --spx-title:#0f172a;
  --spx-sub:#475569;
  --spx-meta:#94a3b8;
  --spx-radius:18px;
  position:relative;
  width:340px;
  max-width:calc(100vw - 32px);
  background:var(--spx-bg);
  border-radius:var(--spx-radius);
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","Helvetica Neue",Arial,sans-serif;
  pointer-events:auto;
  /* Layered shadow for depth */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.055),
    0 1px 2px rgba(0,0,0,.04),
    0 6px 16px rgba(0,0,0,.07),
    0 24px 48px rgba(0,0,0,.09);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Coloured accent stripe at top */
.spx-toast::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--spx-accent);
  z-index:2;
}

/* ── Layout row ──────────────────────────────────────────────────────────── */
.spx-row{
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px 44px 12px 16px;
}

/* ── Product thumbnail ───────────────────────────────────────────────────── */
.spx-img{
  width:54px;
  height:54px;
  border-radius:12px;
  object-fit:cover;
  background:#f1f5f9;
  flex-shrink:0;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}

/* ── Main text block ─────────────────────────────────────────────────────── */
.spx-main{flex:1;min-width:0}

/* Live indicator */
.spx-live{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--spx-accent);
  margin-bottom:4px;
  line-height:1;
}
.spx-live::before{
  content:"";
  flex-shrink:0;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--spx-accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--spx-accent) 40%,transparent);
  animation:spxLivePing 2s ease-in-out infinite;
}
@keyframes spxLivePing{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--spx-accent) 40%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--spx-accent) 0%,transparent)}
}

/* Title */
.spx-title{
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;
  color:var(--spx-title);
  margin:0 0 3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-.01em;
}

/* Subtitle / product */
.spx-sub{
  font-size:12px;
  font-weight:500;
  color:var(--spx-sub);
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.9;
}

/* ── Star ratings ────────────────────────────────────────────────────────── */
.spx-stars{
  font-size:12px;
  color:#f59e0b;
  letter-spacing:1.5px;
  margin:3px 0 2px;
  line-height:1;
}

/* ── Campaign elements ───────────────────────────────────────────────────── */
.spx-campaign-toast .spx-live{color:#ea580c}
.spx-campaign-toast .spx-live::before{background:#ea580c}
.spx-campaign-toast::before{background:linear-gradient(90deg,#ea580c,#f97316)}

.spx-campaign-cta{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:9px;
  padding:7px 15px;
  border-radius:9px;
  font-size:12px;
  font-weight:700;
  background:var(--spx-accent);
  color:#fff;
  text-decoration:none;
  letter-spacing:.01em;
  transition:opacity .15s,transform .12s;
  box-shadow:0 2px 8px color-mix(in srgb,var(--spx-accent) 40%,transparent);
}
.spx-campaign-cta:hover{opacity:.9;color:#fff;transform:translateY(-1px)}
.spx-campaign-countdown{
  font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--spx-accent);
  margin-top:4px;
  letter-spacing:.02em;
}

/* ── Close button ────────────────────────────────────────────────────────── */
.spx-close{
  position:absolute;
  top:10px;right:10px;
  width:26px;height:26px;
  border:0;
  background:rgba(15,23,42,.06);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  color:var(--spx-meta);
  transition:background .15s,color .15s;
  padding:0;
  z-index:3;
}
.spx-close:hover{background:rgba(15,23,42,.11);color:var(--spx-title)}

/* ── Meta footer ─────────────────────────────────────────────────────────── */
.spx-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 16px 14px;
  font-size:11px;
  color:var(--spx-meta);
}
.spx-meta-left{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.spx-meta-type{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 9px;border-radius:99px;
  font-size:9.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  background:color-mix(in srgb,var(--spx-accent) 10%,transparent);
  color:var(--spx-accent);
}
.spx-meta-time{font-size:10.5px;opacity:.75;font-style:italic}

/* ── Sample badge ────────────────────────────────────────────────────────── */
.spx-badge-sample{
  display:inline-block;font-size:8px;padding:1px 6px;
  border-radius:99px;background:rgba(0,0,0,.06);color:currentColor;
  margin-left:6px;vertical-align:middle;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.spx-progress{height:3px;background:rgba(0,0,0,.05);overflow:hidden}
.spx-progress>i{
  display:block;height:100%;width:100%;
  transform-origin:left;transform:scaleX(1);
  background:var(--spx-accent);
}

/* ── Branding ────────────────────────────────────────────────────────────── */
.spx-brand{
  position:absolute;bottom:5px;right:10px;
  font-size:8px;color:var(--spx-meta);
  text-decoration:none;opacity:.38;
  letter-spacing:.02em;
  transition:opacity .15s;
}
.spx-brand:hover{opacity:.65}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════════════════════════ */
.spx-anim-slide-in{animation:spxSlideIn .36s cubic-bezier(.16,1,.3,1) both}
.spx-anim-slide-out{animation:spxSlideOut .22s ease forwards}
@keyframes spxSlideIn{
  from{transform:translateY(22px) scale(.95);opacity:0}
  to{transform:none;opacity:1}
}
@keyframes spxSlideOut{to{transform:translateY(16px) scale(.95);opacity:0}}

.spx-anim-fade-in{animation:spxFadeIn .3s ease both}
.spx-anim-fade-out{animation:spxFadeOut .22s ease forwards}
@keyframes spxFadeIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes spxFadeOut{to{opacity:0;transform:scale(.96)}}

.spx-anim-zoom-in{animation:spxZoomIn .34s cubic-bezier(.16,1,.3,1) both}
.spx-anim-zoom-out{animation:spxZoomOut .22s ease forwards}
@keyframes spxZoomIn{from{transform:scale(.84);opacity:0}to{transform:none;opacity:1}}
@keyframes spxZoomOut{to{transform:scale(.88);opacity:0}}

/* ══════════════════════════════════════════════════════════════════════════
   THEMES
══════════════════════════════════════════════════════════════════════════ */

/* ── Modern (default) ─ clean white ──────────────────────────────────────── */
.spx-theme-modern{}

/* ── Dark ─ premium near-black ───────────────────────────────────────────── */
.spx-theme-dark{
  --spx-bg:#0d1117;
  --spx-title:#e2e8f0;
  --spx-sub:#94a3b8;
  --spx-meta:#475569;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 4px 12px rgba(0,0,0,.5),
    0 24px 56px rgba(0,0,0,.65);
}
.spx-theme-dark .spx-close{background:rgba(255,255,255,.07);color:#64748b}
.spx-theme-dark .spx-close:hover{background:rgba(255,255,255,.13);color:#e2e8f0}
.spx-theme-dark .spx-img{border-color:rgba(255,255,255,.07);background:#1e293b}
.spx-theme-dark .spx-progress{background:rgba(255,255,255,.05)}
.spx-theme-dark .spx-meta-type{background:rgba(99,102,241,.2)}

/* ── Glass ─ frosted backdrop ────────────────────────────────────────────── */
.spx-theme-glass{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3),
    0 8px 32px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.05);
}

/* ── Gradient ─ vivid accent ─────────────────────────────────────────────── */
.spx-theme-gradient{
  --spx-title:#fff;
  --spx-sub:rgba(255,255,255,.85);
  --spx-meta:rgba(255,255,255,.6);
  background:linear-gradient(140deg,
    var(--spx-accent) 0%,
    color-mix(in srgb,var(--spx-accent) 60%,#8b5cf6) 100%
  );
  border:none;
  box-shadow:
    0 4px 16px color-mix(in srgb,var(--spx-accent) 50%,transparent),
    0 16px 40px rgba(0,0,0,.2);
}
.spx-theme-gradient::before{background:rgba(255,255,255,.2)}
.spx-theme-gradient .spx-close{background:rgba(255,255,255,.18);color:rgba(255,255,255,.8)}
.spx-theme-gradient .spx-close:hover{background:rgba(255,255,255,.28);color:#fff}
.spx-theme-gradient .spx-progress{background:rgba(255,255,255,.18)}
.spx-theme-gradient .spx-progress>i{background:rgba(255,255,255,.85)}
.spx-theme-gradient .spx-live::before{background:#fff}
.spx-theme-gradient .spx-live{color:rgba(255,255,255,.9)}
.spx-theme-gradient .spx-meta-type{background:rgba(255,255,255,.2);color:#fff}
.spx-theme-gradient .spx-img{border-color:rgba(255,255,255,.2)}
.spx-theme-gradient .spx-stars{color:#fde68a}

/* ── Neon ─ glowing border ───────────────────────────────────────────────── */
.spx-theme-neon{
  border:1.5px solid var(--spx-accent);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.04),
    0 0 20px color-mix(in srgb,var(--spx-accent) 25%,transparent),
    0 8px 24px rgba(0,0,0,.1);
}

/* ── Compact ─ smaller footprint ─────────────────────────────────────────── */
.spx-theme-compact{width:290px}
.spx-theme-compact .spx-row{padding:13px 40px 10px 13px;gap:10px}
.spx-theme-compact .spx-img{width:44px;height:44px;border-radius:10px}
.spx-theme-compact .spx-meta{padding:0 13px 11px}
.spx-theme-compact .spx-title{font-size:13px}

/* ── Bubble ─ pill shape ─────────────────────────────────────────────────── */
.spx-theme-bubble{--spx-radius:999px}
.spx-theme-bubble .spx-row{padding:11px 44px 11px 11px;gap:10px}
.spx-theme-bubble .spx-img{border-radius:50%;width:46px;height:46px}
.spx-theme-bubble .spx-meta{display:none}
.spx-theme-bubble::before{border-radius:999px 999px 0 0}

/* ── Bar ─────────────────────────────────────────────────────────────────── */
.spx-theme-bar{width:380px;--spx-radius:12px}
.spx-theme-bar .spx-row{padding:12px 44px 10px 14px}

/* ── Minimal Pro ─────────────────────────────────────────────────────────── */
.spx-theme-minimalpro{width:300px;--spx-radius:14px}
.spx-theme-minimalpro .spx-row{padding:14px 40px 11px 14px;gap:11px}
.spx-theme-minimalpro .spx-img{width:44px;height:44px;border-radius:10px}
.spx-theme-minimalpro .spx-title{font-size:13px}
.spx-theme-minimalpro .spx-meta{padding:0 14px 12px}

/* ── custom bg override ──────────────────────────────────────────────────── */
.spx-toast.spx-has-custom-bg{background:var(--spx-bg)!important}
.spx-toast.minimal{width:290px;--spx-radius:12px}

/* ══════════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — Mobile-first
══════════════════════════════════════════════════════════════════════════ */
.spx-announcement-bar{
  position:fixed;
  width:100%;left:0;right:0; /* KEY FIX: right:0 ensures full width on all mobile devices */
  z-index:2147483637;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.spx-announcement-bar.spx-bar-top{top:0}
.spx-announcement-bar.spx-bar-bottom{bottom:0}

.spx-bar-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 14px;
  padding:11px 52px 11px 16px;
  min-height:46px;
  position:relative;
  width:100%;
  box-sizing:border-box;
}

.spx-bar-msg{
  font-size:14px;
  font-weight:600;
  text-align:center;
  line-height:1.4;
  flex:1 1 auto;
  min-width:0;
}

.spx-bar-cta{
  display:inline-flex;
  align-items:center;
  padding:6px 16px;
  border-radius:7px;
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,.2);
  text-decoration:none;
  border:1.5px solid rgba(255,255,255,.45);
  white-space:nowrap;
  flex-shrink:0;
  transition:background .15s;
}
.spx-bar-cta:hover{background:rgba(255,255,255,.32)}

.spx-bar-countdown{
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.18);
  border-radius:6px;
  padding:4px 12px;
  letter-spacing:.06em;
  flex-shrink:0;
  white-space:nowrap;
}

.spx-bar-close{
  position:absolute;
  right:12px;top:50%;transform:translateY(-50%);
  background:transparent;border:none;
  opacity:.65;font-size:22px;line-height:1;
  cursor:pointer;padding:4px 8px;
  transition:opacity .15s;
  flex-shrink:0;
}
.spx-bar-close:hover{opacity:1}

/* ── Below-bar branding (free tier only) — sits under the bar, not inside it ── */
.spx-bar-credit{
  position:fixed;
  left:0;right:0;
  width:100%;
  text-align:center;
  font-size:9px;
  line-height:1;
  padding:2px 0;
  opacity:.55;
  pointer-events:auto;
  z-index:2147483633;
  box-sizing:border-box;
}
.spx-bar-credit.spx-credit-top{
  top:var(--spx-bar-height,46px);
}
.spx-bar-credit.spx-credit-bottom{
  bottom:var(--spx-bar-bottom-height,46px);
}
.spx-bar-credit a{text-decoration:none;font-weight:600;}
.spx-bar-credit a:hover{text-decoration:underline;}
body.spx-has-top-bar{
  padding-top:calc(var(--spx-bar-height,46px) + 14px)!important;
}

/* ── Ticker ──────────────────────────────────────────────────────────────── */
.spx-ticker-wrap{overflow:hidden;width:100%}
.spx-ticker-track{
  display:flex;
  width:max-content;
  animation:spxTicker 30s linear infinite;
}
.spx-ticker-track:hover{animation-play-state:paused}
.spx-ticker-item{white-space:nowrap;padding:0 48px;font-size:14px;font-weight:600}
@keyframes spxTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Gradient shimmer ────────────────────────────────────────────────────── */
.spx-bar-gradient .spx-bar-inner{
  background-size:200% 100%!important;
  animation:spxBarShimmer 4s linear infinite;
}
@keyframes spxBarShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Bar — mobile ────────────────────────────────────────────────────────── */
@media (max-width:600px){
  .spx-bar-inner{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:8px 36px 8px 12px;
    gap:6px;
    min-height:auto;
  }
  .spx-bar-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    width:100%;
  }
  .spx-bar-msg{
    font-size:12.5px;
    text-align:center;
    width:100%;
    flex:1 1 100%;
    order:1;
    white-space:normal!important;
  }
  .spx-bar-actions-row{
    order:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
  }
  /* Countdown: always white on dark pill so it stands out on any bar colour */
  .spx-bar-countdown{
    font-size:12px;
    padding:3px 9px;
    color:#ffffff!important;
    background:rgba(0,0,0,.45)!important;
    order:2;
  }
  .spx-bar-cta{
    font-size:12px;
    padding:5px 13px;
    order:3;
  }
  .spx-bar-close{
    right:8px;
    font-size:20px;
    padding:3px 6px;
  }
  /* Ticker on mobile — slow it down slightly */
  .spx-ticker-track{animation-duration:20s}
  .spx-ticker-item{font-size:13px;padding:0 32px}
}

@media (max-width:380px){
  .spx-bar-msg{font-size:12px}
  .spx-bar-cta{padding:4px 11px;font-size:11.5px}
  .spx-bar-countdown{font-size:11.5px;padding:3px 8px}
}

/* ══════════════════════════════════════════════════════════════════════════
   INLINE WIDGETS (product page social proof bar)
══════════════════════════════════════════════════════════════════════════ */
/* These are rendered by class-spx-widgets.php via wp_head inline styles */

/* ══════════════════════════════════════════════════════════════════════════
   SHORTCODE COMPONENTS
══════════════════════════════════════════════════════════════════════════ */
.spx-badge{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(0,0,0,.08);border-radius:99px;
  padding:9px 20px;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.spx-badge-text{font-weight:700;font-size:13px;color:#111827}
.spx-badge-rating{font-size:12px;color:#6b7280}

.spx-testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.spx-t-card{
  border:1px solid rgba(0,0,0,.07);border-radius:14px;
  background:#fff;padding:18px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  transition:box-shadow .2s,transform .2s;
}
.spx-t-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.1);transform:translateY(-2px)}
.spx-t-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.spx-t-author{font-weight:700;font-size:13px;color:#111827}
.spx-t-rating{color:#f59e0b;font-size:14px;letter-spacing:1px}
.spx-t-body{font-size:13px;color:#374151;margin-bottom:11px;line-height:1.6}
.spx-t-product{font-size:12px;text-decoration:none;color:#6b7280;font-weight:600}
.spx-t-product:hover{color:#6366f1}

/* ══════════════════════════════════════════════════════════════════════════
   POPUP — Responsive
══════════════════════════════════════════════════════════════════════════ */
@media (max-width:480px){
  .spx-toast{width:calc(100vw - 24px)!important;max-width:340px}
  #spx-root.spx-br{right:12px;bottom:16px}
  #spx-root.spx-bl{left:12px;bottom:16px}
  #spx-root.spx-tr{right:12px;top:16px}
  #spx-root.spx-tl{left:12px;top:16px}
  .spx-row{padding:14px 40px 11px 14px;gap:11px}
  .spx-img{width:46px;height:46px}
  .spx-title{font-size:13px}
  .spx-meta{padding:0 14px 12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .spx-toast,.spx-progress>i,.spx-t-card,
  .spx-ticker-track,.spx-bar-gradient .spx-bar-inner{
    animation:none!important;transition:none!important;
  }
  .spx-live::before{animation:none!important}
}