/*
 * Persistent SocialProofFeed sticky-banner styles (owner directive 2026-06-18 §3 OVERRIDE — "SOCIAL
 * PROOF — LOCALISED & PERSISTENT"). Shipped portal-wide via the global-bundle slot in
 * resources/views/layouts/document.php (same slot as invite-launcher.css), so the banner — which
 * rides the authenticated shell on every page — is styled everywhere it can appear.
 *
 * The banner is bottom-fixed (above the mobile tab bar), full-width on phones, and re-appears on
 * scroll-away via the social-proof.js module (which toggles .is-hidden). NO figure literal here —
 * the comparator line is rendered server-side from config. Token-driven, theme-safe.
 */
.social-proof-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  /* Sit above the mobile tab bar where present. */
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #fff6ec 0%, #fffaf4 100%);
  border-top: 1px solid #f0d9bf;
  box-shadow: 0 -2px 12px rgba(26, 34, 48, 0.10);
  transform: translateY(0);
  transition: transform 220ms ease, opacity 220ms ease;
}
/* Hidden state (toggled by social-proof.js on dismiss / scroll-away). Slides out of view. */
.social-proof-banner.is-hidden {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}
.social-proof-banner__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full, 999px);
  background: #c2410c;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}
.social-proof-banner__text {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink, #1a2230);
}
.social-proof-banner__dismiss {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: #8a6d4f;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  border-radius: var(--radius, 8px);
}
.social-proof-banner__dismiss:hover,
.social-proof-banner__dismiss:focus-visible {
  background: rgba(194, 65, 12, 0.10);
  color: #6b3a14;
}
/* On wider viewports, dock the banner to a centred pill rather than full-bleed. */
@media (min-width: 620px) {
  .social-proof-banner {
    left: 50%;
    right: auto;
    bottom: 1rem;
    transform: translateX(-50%);
    max-width: 36rem;
    border: 1px solid #f0d9bf;
    border-radius: var(--radius, 12px);
    box-shadow: 0 6px 20px rgba(26, 34, 48, 0.14);
  }
  .social-proof-banner.is-hidden {
    transform: translate(-50%, 160%);
  }
}
/* Reduced-motion: drop the slide transition (the show/hide is instant). */
@media (prefers-reduced-motion: reduce) {
  .social-proof-banner {
    transition: none;
  }
}