/* =============================================================================
   FACTS Transcripts — social proof component
   v1.1.0 · 2026-08-25   (v1.0.0 remains at /css/facts-proof.css)
   -----------------------------------------------------------------------------
   Component-scoped only. Every selector starts with .fx-toast.
   No global selectors, no resets, no page-level overflow rules.
   Completely independent of /css/blog-corporate.css.
   ========================================================================== */

.fx-toast{
  position: fixed;
  z-index: 99990;                 /* below #ft-trigger (99999) and #ft-chat-window (99998):
                                     a marketing toast must never win over a support control */
  display: flex;
  align-items: center;
  gap: 11px;
  box-sizing: border-box;
  background: #FFFFFF;
  color: #0F1D30;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,29,48,.06), 0 8px 24px -12px rgba(15,29,48,.22);
  padding: 11px 12px 11px 14px;
  font-size: 15px;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .32s cubic-bezier(.2,.7,.3,1),
              transform .32s cubic-bezier(.2,.7,.3,1),
              visibility 0s linear .32s;
  pointer-events: none;
}
.fx-toast.is-in{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

/* Explicit width/height are also set as SVG attributes in the engine.
   Belt and braces: a dimensionless inline SVG is what produced the 1214px
   green blob on /services/. It will not recur. */
.fx-toast .fx-seal{
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: block;
}

.fx-toast .fx-txt{ flex: 1 1 auto; min-width: 0; }

.fx-toast .fx-cta{
  color: #1D4E89;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.fx-toast .fx-cta:hover{ text-decoration: underline; }
.fx-toast .fx-cta:focus-visible{ outline: 2px solid #1D4E89; outline-offset: 2px; border-radius: 3px; }

.fx-toast .fx-x{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 8px;                    /* keeps the touch target comfortable */
  margin: -2px -2px -2px 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5C6E85;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 0;
}
.fx-toast .fx-x:hover{ background: #EEF2F7; color: #0F1D30; }
.fx-toast .fx-x:focus-visible{ outline: 2px solid #1D4E89; outline-offset: 2px; }

/* ---- Desktop, wide: bottom-centre clears both float stacks -------------- */
@media (min-width: 1180px){
  .fx-toast{
    left: 50%;
    bottom: 24px;
    width: min(680px, calc(100vw - 48px));
    transform: translate(-50%, 8px);
  }
  .fx-toast.is-in{ transform: translate(-50%, 0); }
}

/* ---- Mid widths: same position, raised above the 68px-tall chat trigger -- */
@media (min-width: 768px) and (max-width: 1179px){
  .fx-toast{
    left: 50%;
    bottom: 88px;
    width: min(620px, calc(100vw - 48px));
    transform: translate(-50%, 8px);
  }
  .fx-toast.is-in{ transform: translate(-50%, 0); }
}

/* ---- Mobile: anchored TOP, under the 80px sticky header -----------------
   Both bottom corners are occupied at phone widths — WhatsApp float 182x89
   on the homepage, chat trigger 184x44 elsewhere — so a bottom-anchored
   toast would cover a support control. Top placement avoids that entirely
   and makes safe-area-inset-bottom irrelevant. */
@media (max-width: 767px){
  .fx-toast{
    /* --fx-toast-anchor is set by the engine to the live visible bottom of
       the sticky <header>, floored at 80px. Absent engine, this falls back
       to the v1.0 value of 80px, so the rule is safe standalone. */
    top: calc(
      var(--fx-toast-anchor, 80px)
      + 8px
      + env(safe-area-inset-top, 0px)
    );
    left: 12px;
    right: 12px;
    font-size: 14.5px;
    border-radius: 12px;
    transform: translateY(-8px);
  }
  .fx-toast.is-in{ transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .fx-toast{ transition: opacity .01ms, visibility 0s; transform: none !important; }
  .fx-toast.is-in{ transform: none !important; }
}