/* ==========================================================================
   FONDOPRO — STICKY-ACTIONS.CSS
   Contenitore condiviso per il CTA "Aderisci ora" (barra -> bottone tondo)
   e il pulsante "torna su".

   Posizionamento: position:fixed rispetto alla finestra del browser, come
   da specifica. Restano sempre in primo piano (z-index sopra al footer),
   e possono sovrapporsi liberamente a .fp-footer__brand/.fp-footer__info,
   MA non a .fp-footer__legal: la variabile CSS --fp-avoid-legal (di
   default 0px) viene aggiornata in tempo reale da sticky-actions.js in
   base a quanti pixel della banda legale sono entrati in viewport, e
   sommata al normale offset "bottom" dei pulsanti — quando la banda
   legale compare, i pulsanti vengono spinti su della stessa quantità,
   restando sempre appena sopra di essa.
   ========================================================================== */

.fp-sticky-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0; /* il contenitore stesso non occupa spazio: sono i figli, in
                posizione assoluta rispetto a lui, a rendersi visibili */
  z-index: 1025; /* sopra al footer (stacking di default), sotto all'header (1030) */
  pointer-events: none; /* riattivato singolarmente sui figli interattivi */
  --fp-avoid-legal: 0px;
}

/* --------------------------------------------------------------------------
   CTA "ADERISCI ORA" — barra a piè di schermo -> bottone tondo
   Implementazione a due elementi in crossfade (anziché un morph geometrico
   di un solo elemento): più robusta cross-browser di un'animazione che
   dovrebbe interpolare left/width tra "100%" e "auto", valori che i CSS
   Transitions non sanno animare in modo affidabile. Il risultato percepito
   è comunque una trasformazione fluida da barra a bottone.
   -------------------------------------------------------------------------- */

/* -- Stato "barra", visibile all'apertura della pagina -- */
.fp-cta-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--fp-avoid-legal);
  display: flex;
  /* Tornato a striscia rettangolare piena, testo centrato: la curvatura
     (maschera + testo ancorato in basso) è stata rimossa su richiesta,
     non convinceva più. */
  align-items: center;
  justify-content: center;
  min-height: 68px;
  background-color: var(--color-blue-primary);
  color: #ffffff;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: 1.5rem; /* aumentato leggermente su richiesta (era 1.375rem) */
  letter-spacing: 0.02em;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.fp-cta-bar:hover,
.fp-cta-bar:focus-visible {
  background-color: var(--color-blue-primary-dark);
  color: #ffffff;
  text-decoration: none;
}
/* La barra è a filo del bordo inferiore dello schermo: un anello esterno
   verrebbe tagliato in basso. Qui lo disegniamo DENTRO la barra, bianco
   su blu scuro (11,6:1). */
.fp-cta-bar:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -7px;
  box-shadow: none;
  border-radius: 0;
}

/* Quando il JS aggiunge .fp-cta--compact al contenitore, la barra
   scompare verso il basso... */
.fp-sticky-actions.fp-cta--compact .fp-cta-bar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
}

/* -- Stato "bottone tondo", nascosto all'apertura --
   Dimensione aumentata su richiesta: SOLO questo elemento (non la barra
   full-width né il bottone della Hero) diventa più grande, per maggiore
   visibilità dopo lo scroll. */
.fp-cta-fab {
  position: absolute;
  right: var(--space-4);
  bottom: calc(var(--space-4) + var(--fp-avoid-legal));
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-blue-primary);
  color: #ffffff;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: 1.05rem; /* aumentato leggermente su richiesta (era 0.95rem) */
  line-height: 1.15;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.85);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background-color var(--transition-fast), bottom var(--transition-fast);
}
.fp-cta-fab:hover,
.fp-cta-fab:focus-visible {
  background-color: var(--color-blue-primary-dark);
  color: #ffffff;
}

/* ...e al suo posto compare, con un fade + leggero scale-in, il bottone */
.fp-sticky-actions.fp-cta--compact .fp-cta-fab {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   TORNA SU — animazione di comparsa sobria e calma
   Easing "ease-out" pronunciato (decelerazione morbida, senza rimbalzi né
   scatti) e una durata leggermente più lunga del resto dell'interfaccia,
   per una comparsa più quieta e meno "a scatto" rispetto a un semplice
   fade lineare.
   -------------------------------------------------------------------------- */
.fp-back-to-top {
  position: absolute;
  right: var(--space-4);
  bottom: calc(var(--space-4) + 128px + var(--fp-avoid-legal)); /* 128px = altezza fab (116px) + 12px di distacco */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-blue-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 450ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color var(--transition-fast),
              bottom var(--transition-fast);
  cursor: pointer;
}
.fp-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.fp-back-to-top:hover,
.fp-back-to-top:focus-visible {
  background-color: var(--color-blue-primary-dark);
}
.fp-back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .fp-cta-bar,
  .fp-cta-fab,
  .fp-back-to-top {
    transition: opacity var(--transition-fast), bottom var(--transition-fast);
  }
  .fp-sticky-actions.fp-cta--compact .fp-cta-bar,
  .fp-cta-fab,
  .fp-back-to-top {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Testo più grande su mobile, come richiesto: sia la barra che il
     bottone tondo devono restare ben leggibili anche da vicino/in
     movimento (contesto d'uso tipico dello smartphone). */
  .fp-cta-bar {
    font-size: 1.625rem; /* aumentato leggermente su richiesta (era 1.5rem) */
  }
  .fp-cta-fab {
    width: 116px;
    height: 116px;
    font-size: 1.05rem; /* aumentato leggermente su richiesta (era 0.95rem) */
  }
  .fp-back-to-top {
    right: var(--space-3);
    bottom: calc(var(--space-3) + 128px + var(--fp-avoid-legal));
  }
}