/* ==========================================================================
   SIGMA SCANNER — float.css
   Persistent overlay · WhatsApp + phone, fixed to the viewport's
   right-centre on every screen, independent of scroll position.

   .ss-float itself already exists as a bare positioning primitive in
   style.css's "OVERLAY MOUNTS" block (@layer layout, bottom-right,
   originally an empty WhatsApp-float placeholder). That rule is
   deliberately left in place rather than edited — @layer components
   (this file) always wins over @layer layout regardless of source
   order, per the cascade order declared once in style.css, so
   overriding position here is safe without touching the shared
   primitive or its z-index token.
   ========================================================================== */

@layer components {

  .ss-float {
    position: fixed;
    inset-block-start: 50%;
    /* The shared primitive in style.css's layout layer sets
       inset-block-end: 88px. Layers only decide a winner for properties
       BOTH layers actually declare — inset-block-start and
       inset-block-end are different properties, so without this reset
       that 88px stayed live alongside our own inset-block-start: 50%,
       stretching this box from mid-viewport down to 88px-above-the-
       bottom instead of sizing to its own content. A flex column with
       no explicit height then packs its children at the START of that
       tall box — i.e. near vertical-centre, not bottom — which is what
       made the pair read as "not centred": they were centred on nothing,
       just the top edge of an invisible, much taller box. */
    inset-block-end: auto;
    inset-inline-end: var(--sp-4);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
  }

  /* Flat fill + the system's own shadow token — was a 3-stop radial
     gradient sphere with a colour-tinted glow shadow underneath. That
     "orb" treatment (gradient + matching glow) is the exact pattern
     06-DESIGN-SYSTEM.md bans under glassmorphism/decoration-over-depth,
     and it's the first thing that reads as templated at a glance. A
     confident flat circle with one restrained, ink-tinted shadow (same
     --shadow-md/--shadow-lg tokens as every other elevated surface on
     the page) says "button" without saying "look at my gradient". */
  .ss-float__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 54px;
    block-size: 54px;
    border-radius: 50%;
    color: #FFFFFF;
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-fast) var(--ease-out-quad),
                box-shadow var(--dur-fast) var(--ease-out-quad),
                background-color var(--dur-fast) var(--ease-out-quad);
  }
  .ss-float__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .ss-float__btn:active { transform: scale(.96); }
  .ss-float__btn .ss-icon { inline-size: 26px; block-size: 26px; }

  /* WhatsApp's own brand green — deliberately NOT --signal-600 (the
     product's brand green): this needs to read as WhatsApp specifically,
     the same reasoning as the Trustpilot mark using Trustpilot's own
     green rather than the site's. */
  .ss-float__btn--whatsapp { background: #25D366; }
  .ss-float__btn--whatsapp:hover { background: #1FBB59; }

  /* Phone/call is a first-party action, not a third-party mark — so
     unlike WhatsApp it uses this product's own primary-button colour
     (--signal-600/700, the exact pair .ss-btn--primary uses) rather than
     an arbitrary blue. The earlier blue (#2F6FED) was a colour with no
     token behind it — exactly what 01-CREATIVE-DIRECTION.md's colour
     system bans ("any colour that is not in the token set"). */
  .ss-float__btn--phone { background: var(--signal-600); }
  .ss-float__btn--phone:hover { background: var(--signal-700); }

  @media (min-width: 640px) {
    .ss-float { inset-inline-end: var(--sp-6); gap: var(--sp-5); }
    .ss-float__btn { inline-size: 60px; block-size: 60px; }
    .ss-float__btn .ss-icon { inline-size: 29px; block-size: 29px; }
  }

  /* Never competes with the mobile drawer, scrim or nav for the top of
     the stack — .ss-float already sits at --z-float (80), well under
     --z-overlay (200), so no extra rule is needed here; noting it since
     this is the one place on the page a fixed element could plausibly
     have been placed above them. */
}