/* ============================================================
   Social Proof Popup — Frontend Styles v1.3.0
   Vanilla CSS, zero dependencies
   ============================================================ */

.spp-container,
#spp-container {
  position: fixed;
  z-index: 99999;
  padding: 16px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;

  --spp-avatar-size: 44px;
  --spp-progress-color: #4f46e5;
  --spp-radius: 12px;
  --spp-shadow: 0 4px 24px rgba(0,0,0,.13), 0 1.5px 6px rgba(0,0,0,.08);
  --spp-bg: #ffffff;
  --spp-text: #1a1a2e;
  --spp-sub: #6b7280;
  --spp-link: #4f46e5;
  --spp-close: #9ca3af;

  /* Typography defaults (v1.3.0) */
  --spp-font-size: 14px;
  --spp-font-weight: 500;
  --spp-line-height: 1.45;
  --spp-title-size: 14px;
  --spp-title-weight: 700;
}

@media (max-width: 768px) {
  .spp-container,
  #spp-container {
    --spp-font-size: 13px;
    --spp-font-weight: 500;
    --spp-line-height: 1.4;
    --spp-title-size: 13px;
    --spp-title-weight: 700;
  }
}

/* ── positions ── */
.spp-container.spp-pos-bottom-left,
#spp-container.spp-pos-bottom-left  { bottom: 0; left: 0; flex-direction: column-reverse; }
.spp-container.spp-pos-bottom-right,
#spp-container.spp-pos-bottom-right { bottom: 0; right: 0; flex-direction: column-reverse; }
.spp-container.spp-pos-top-left,
#spp-container.spp-pos-top-left     { top: 0; left: 0; }
.spp-container.spp-pos-top-right,
#spp-container.spp-pos-top-right    { top: 0; right: 0; }

/* ============================================================
   CARD BASE (hidden state — overridden per animation below)
   ============================================================ */
.spp-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 38px 14px 14px;
  background: var(--spp-bg);
  border-radius: var(--spp-radius);
  box-shadow: var(--spp-shadow);
  pointer-events: all;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
}

/* ── transition shared ── */
.spp-card { transition: opacity .32s ease, transform .32s cubic-bezier(.34,1.46,.64,1); }

/* ============================================================
   ANIMATION VARIANTS — enter state (hidden)
   ============================================================ */

/* slide-up (default) */
.spp-container.spp-anim-slide-up .spp-card,
#spp-container.spp-anim-slide-up .spp-card            { transform: translateY(20px) scale(.97); }
.spp-container.spp-anim-slide-up .spp-card.spp-visible,
#spp-container.spp-anim-slide-up .spp-card.spp-visible { transform: translateY(0) scale(1); opacity: 1; }

/* top-position slide-up: reverse direction */
.spp-container.spp-pos-top-left.spp-anim-slide-up  .spp-card,
.spp-container.spp-pos-top-right.spp-anim-slide-up .spp-card,
#spp-container.spp-pos-top-left.spp-anim-slide-up  .spp-card,
#spp-container.spp-pos-top-right.spp-anim-slide-up .spp-card            { transform: translateY(-20px) scale(.97); }
.spp-container.spp-pos-top-left.spp-anim-slide-up  .spp-card.spp-visible,
.spp-container.spp-pos-top-right.spp-anim-slide-up .spp-card.spp-visible,
#spp-container.spp-pos-top-left.spp-anim-slide-up  .spp-card.spp-visible,
#spp-container.spp-pos-top-right.spp-anim-slide-up .spp-card.spp-visible { transform: translateY(0) scale(1); opacity: 1; }

/* slide-left */
.spp-container.spp-anim-slide-left .spp-card,
#spp-container.spp-anim-slide-left .spp-card            { transform: translateX(-60px) scale(.97); }
.spp-container.spp-anim-slide-left .spp-card.spp-visible,
#spp-container.spp-anim-slide-left .spp-card.spp-visible { transform: translateX(0) scale(1); opacity: 1; }

/* slide-right */
.spp-container.spp-anim-slide-right .spp-card,
#spp-container.spp-anim-slide-right .spp-card            { transform: translateX(60px) scale(.97); }
.spp-container.spp-anim-slide-right .spp-card.spp-visible,
#spp-container.spp-anim-slide-right .spp-card.spp-visible { transform: translateX(0) scale(1); opacity: 1; }

/* bounce */
.spp-container.spp-anim-bounce .spp-card,
#spp-container.spp-anim-bounce .spp-card {
  transform: translateY(30px) scale(.9);
  transition: opacity .25s ease, transform .5s cubic-bezier(.22,.68,0,1.6);
}
.spp-container.spp-anim-bounce .spp-card.spp-visible,
#spp-container.spp-anim-bounce .spp-card.spp-visible { transform: translateY(0) scale(1); opacity: 1; }

/* fade */
.spp-container.spp-anim-fade .spp-card,
#spp-container.spp-anim-fade .spp-card            { transform: none; }
.spp-container.spp-anim-fade .spp-card.spp-visible,
#spp-container.spp-anim-fade .spp-card.spp-visible { opacity: 1; transform: none; }

/* zoom */
.spp-container.spp-anim-zoom .spp-card,
#spp-container.spp-anim-zoom .spp-card {
  transform: scale(.7);
  transition: opacity .28s ease, transform .35s cubic-bezier(.22,.68,0,1.4);
}
.spp-container.spp-anim-zoom .spp-card.spp-visible,
#spp-container.spp-anim-zoom .spp-card.spp-visible { transform: scale(1); opacity: 1; }

/* ── leave animation (shared for all) ── */
.spp-card.spp-leaving {
  animation: sppLeave .28s ease forwards;
}

@keyframes sppLeave {
  to {
    opacity: 0;
    transform: scale(.93) translateY(6px);
  }
}

/* ── avatar ── */
.spp-avatar {
  flex-shrink: 0;
  width: var(--spp-avatar-size);
  height: var(--spp-avatar-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--spp-avatar-size) * .38);
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: -.5px;
  overflow: hidden;
  user-select: none;
}

.spp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ── body ── */
.spp-body { flex: 1; min-width: 0; }

.spp-name {
  font-size: var(--spp-title-size, 14px);
  font-weight: var(--spp-title-weight, 700);
  color: var(--spp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.3;
  margin-bottom: 2px;
}

.spp-message {
  font-size: var(--spp-font-size, 14px);
  font-weight: var(--spp-font-weight, 500);
  color: var(--spp-sub);
  font-family: system-ui, -apple-system, sans-serif;
  line-height: var(--spp-line-height, 1.45);
  word-break: break-word;
}

.spp-card.spp-no-name .spp-message {
  color: var(--spp-text);
  font-size: var(--spp-font-size, 14px);
  font-weight: var(--spp-font-weight, 500);
  line-height: var(--spp-line-height, 1.45);
}

.spp-card.spp-no-avatar {
  padding-left: 18px;
}
.spp-card.spp-no-avatar .spp-body {
  padding-right: 6px;
}

.spp-link {
  display: inline-block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--spp-link);
  text-decoration: none;
  font-family: system-ui, -apple-system, sans-serif;
  transition: opacity .2s;
}
.spp-link:hover { opacity: .75; text-decoration: underline; }

/* ── close button ── */
.spp-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--spp-close);
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .2s, background .2s;
  font-family: system-ui, -apple-system, sans-serif;
}
.spp-close:hover { color: var(--spp-text); background: rgba(0,0,0,.06); }

/* ── progress bar ── */
.spp-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0,0,0,.07);
  border-radius: 0 0 var(--spp-radius) var(--spp-radius);
  overflow: hidden;
}

.spp-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--spp-progress-color);
  border-radius: 0 0 var(--spp-radius) var(--spp-radius);
}

/* ── responsive (card layout) ── */
@media (max-width: 480px) {
  .spp-container:not(.spp-layout-top-bar),
  #spp-container:not(.spp-layout-top-bar) {
    padding: 10px;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    display: flex;
    justify-content: center;
  }
  .spp-container:not(.spp-layout-top-bar).spp-pos-top-left,
  .spp-container:not(.spp-layout-top-bar).spp-pos-top-right,
  #spp-container:not(.spp-layout-top-bar).spp-pos-top-left,
  #spp-container:not(.spp-layout-top-bar).spp-pos-top-right { top: 0 !important; bottom: auto !important; }
  .spp-card { border-radius: 10px; }
}

/* ── dark mode (card layout) ── */
@media (prefers-color-scheme: dark) {
  .spp-container:not(.spp-layout-top-bar),
  #spp-container:not(.spp-layout-top-bar) {
    --spp-bg:     #1f2937;
    --spp-text:   #f9fafb;
    --spp-sub:    #9ca3af;
    --spp-close:  #6b7280;
    --spp-shadow: 0 4px 24px rgba(0,0,0,.4), 0 1.5px 6px rgba(0,0,0,.25);
  }
  .spp-container:not(.spp-layout-top-bar) .spp-progress,
  #spp-container:not(.spp-layout-top-bar) .spp-progress { background: rgba(255,255,255,.1); }
}

/* ============================================================
   TOP PROMO BAR LAYOUT (v1.0.8)
   ============================================================ */

.spp-container.spp-layout-top-bar,
#spp-container.spp-layout-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 99999;
  pointer-events: none;
  box-sizing: border-box;
  display: block !important;
  bottom: auto !important;
}

/* WP Admin bar offset */
body.admin-bar .spp-container.spp-layout-top-bar,
body.admin-bar #spp-container.spp-layout-top-bar {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .spp-container.spp-layout-top-bar,
  body.admin-bar #spp-container.spp-layout-top-bar {
    top: 46px !important;
  }
}

/* Above navigation menu placement (v1.1.1) */
.spp-container.spp-layout-top-bar.spp-above-nav,
#spp-container.spp-layout-top-bar.spp-above-nav {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 999999 !important;
}

body.admin-bar .spp-container.spp-layout-top-bar.spp-above-nav,
body.admin-bar #spp-container.spp-layout-top-bar.spp-above-nav {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .spp-container.spp-layout-top-bar.spp-above-nav,
  body.admin-bar #spp-container.spp-layout-top-bar.spp-above-nav {
    top: 46px !important;
  }
}

.spp-container.spp-layout-top-bar.spp-above-nav.spp-not-sticky,
#spp-container.spp-layout-top-bar.spp-above-nav.spp-not-sticky {
  position: relative !important;
  top: auto !important;
}

/* Sticky headers offset when Top Promo Bar is above navigation and sticky */
body.spp-has-above-nav .site-header.is-sticky,
body.spp-has-above-nav header.is-sticky,
body.spp-has-above-nav .is-sticky:not(.spp-container):not(#spp-container),
body.spp-has-above-nav .sticky-header,
body.spp-has-above-nav .header-sticky,
body.spp-has-above-nav .elementor-sticky--active,
body.spp-has-above-nav [data-elementor-sticky="true"].elementor-sticky--active {
  top: var(--spp-top-bar-height, 0px) !important;
  transition: top .25s ease;
}

body.admin-bar.spp-has-above-nav .site-header.is-sticky,
body.admin-bar.spp-has-above-nav header.is-sticky,
body.admin-bar.spp-has-above-nav .is-sticky:not(.spp-container):not(#spp-container),
body.admin-bar.spp-has-above-nav .sticky-header,
body.admin-bar.spp-has-above-nav .header-sticky,
body.admin-bar.spp-has-above-nav .elementor-sticky--active {
  top: calc(var(--spp-top-bar-height, 0px) + 32px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar.spp-has-above-nav .site-header.is-sticky,
  body.admin-bar.spp-has-above-nav header.is-sticky,
  body.admin-bar.spp-has-above-nav .is-sticky:not(.spp-container):not(#spp-container),
  body.admin-bar.spp-has-above-nav .sticky-header,
  body.admin-bar.spp-has-above-nav .header-sticky,
  body.admin-bar.spp-has-above-nav .elementor-sticky--active {
    top: calc(var(--spp-top-bar-height, 0px) + 46px) !important;
  }
}

/* Bar element */
.spp-top-bar {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: var(--spp-bar-bg-gradient, linear-gradient(90deg, #f97316 0%, #ea580c 100%));
  color: var(--spp-bar-text, #ffffff);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  pointer-events: all;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .35s ease, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

.spp-top-bar.spp-visible {
  opacity: 1;
  transform: translateY(0);
}

.spp-top-bar.spp-leaving {
  animation: sppBarLeave .3s ease forwards;
}

@keyframes sppBarLeave {
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* Inner content wrapper */
.spp-bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
}

/* Row top: on desktop acts as inline child */
.spp-bar-row-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Badge / Pill */
.spp-bar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: inherit;
  font-size: var(--spp-title-size, 12px);
  font-weight: var(--spp-title-weight, 700);
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}

.spp-bar-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

/* Promo Text */
.spp-bar-text {
  font-size: var(--spp-font-size, 14px);
  font-weight: var(--spp-font-weight, 500);
  line-height: var(--spp-line-height, 1.45);
  color: inherit;
  letter-spacing: .1px;
}

.spp-bar-text strong,
.spp-bar-text b {
  font-weight: 700;
  color: inherit;
}

/* Actions wrapper (CTA button + Close button) */
.spp-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* CTA Button */
.spp-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: var(--spp-bar-btn-bg, #25D366);
  color: var(--spp-bar-btn-color, #ffffff) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  line-height: 1.2;
}

.spp-bar-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}

.spp-bar-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Close button */
.spp-bar-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  color: inherit;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}

.spp-bar-close:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}

/* In desktop view, mobile close is hidden, desktop close is visible */
.spp-bar-close-mobile {
  display: none !important;
}
.spp-bar-close-desktop {
  display: inline-flex !important;
}

/* Progress bar on top bar */
.spp-bar-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.spp-bar-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--spp-progress-color, rgba(255, 255, 255, 0.8));
}

/* ── Mobile Layout (matches Top Promo Mobile.png) ── */
@media (max-width: 768px) {
  .spp-bar-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px 12px;
    gap: 7px;
  }

  /* Row 1: Pill badge on left, close on right */
  .spp-bar-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .spp-bar-close-mobile {
    display: inline-flex !important;
    margin-left: auto;
  }
  .spp-bar-close-desktop {
    display: none !important;
  }

  /* Row 2: Promo text full-width */
  .spp-bar-text {
    width: 100%;
    font-size: var(--spp-font-size, 13px);
    font-weight: var(--spp-font-weight, 500);
    line-height: var(--spp-line-height, 1.42);
    word-break: break-word;
    margin: 1px 0;
  }

  /* Row 3: CTA button left aligned */
  .spp-bar-actions {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }

  .spp-bar-btn {
    padding: 7px 18px;
    font-size: 13px;
  }
}