/* Sundrata Social Proof popup */
.ssp-pop {
  --ssp-ink: #2a2622;
  --ssp-muted: #7a7068;
  --ssp-accent: #a8865a;
  --ssp-accent-soft: #f3ece2;
  --ssp-surface: #ffffff;
  --ssp-line: #ebe4da;

  position: fixed;
  bottom: 20px;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: min(360px, calc(100vw - 24px));
  padding: 14px 40px 14px 14px;
  box-sizing: border-box;
  background: var(--ssp-surface);
  border: 1px solid var(--ssp-line);
  border-radius: 14px;
  box-shadow: 0 12px 32px -12px rgba(42, 38, 34, .28);
  font-family: inherit;
  color: var(--ssp-ink);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.ssp-bottom-left  { left: 20px; }
.ssp-bottom-right { right: 20px; }
.ssp-pop.ssp-in { opacity: 1; transform: none; pointer-events: auto; }

.ssp-icon {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ssp-accent-soft);
  display: grid;
  place-items: center;
}
.ssp-icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--ssp-accent);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.ssp-body p { margin: 0; line-height: 1.35; }
.ssp-who { font-size: 15px; }
.ssp-who strong { font-weight: 600; }
.ssp-who span { color: var(--ssp-muted); }
.ssp-what { font-size: 14px; margin-top: 2px !important; }
.ssp-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px !important;
  font-size: 12px; color: var(--ssp-muted);
}
.ssp-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.ssp-pop .ssp-close,
.ssp-pop .ssp-close:visited {
  all: unset;
  box-sizing: border-box;
  position: absolute !important;
  top: 8px !important; right: 8px !important;
  width: 26px !important; height: 26px !important;
  padding: 0 !important; margin: 0 !important;
  display: grid !important; place-items: center;
  border-radius: 50% !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ssp-muted) !important;
  cursor: pointer;
  opacity: .7;
  transition: background-color .18s, color .18s, opacity .18s;
}
.ssp-pop:hover .ssp-close { opacity: 1; }
.ssp-pop .ssp-close:hover,
.ssp-pop .ssp-close:focus {
  background: var(--ssp-accent-soft) !important;
  background: color-mix(in srgb, var(--ssp-accent) 12%, transparent) !important;
  color: var(--ssp-accent) !important;
  border: 0 !important;
  opacity: 1;
}
.ssp-pop .ssp-close:focus-visible { outline: 2px solid var(--ssp-accent) !important; outline-offset: 1px; }
.ssp-pop .ssp-close svg { width: 14px; height: 14px; display: block; }
/* Keep theme typography rules off the popup text */
.ssp-pop p { margin: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: normal !important; }

@media (max-width: 600px) {
  .ssp-pop { bottom: 12px; left: 12px; right: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ssp-pop { transition: opacity .2s linear; transform: none; }
}

/* Sit above the cookie-preferences button when it shares the corner */
body:has(.sc-float.sc-pos-bottom-left:not([hidden])) .ssp-pop.ssp-bottom-left,
body:has(.sc-float.sc-pos-bottom-right:not([hidden])) .ssp-pop.ssp-bottom-right,
body:has(.sc-float.sc-pos-bottom-center:not([hidden])) .ssp-pop.ssp-bottom-right { bottom: 80px; }
@media (max-width: 600px) {
  body:has(.sc-float:not([hidden])) .ssp-pop { bottom: 68px; }
}