/* =========================================================================
   Alzati e Fattura — sezione 14b FORM RICHIESTA INFORMAZIONI
   Desktop 1440×1072 · mobile 390×799. Valori dal frame "Sezione Form".

   La scheda bianca è nostra; quello che ci va dentro può essere il modulo
   HubSpot. Per questo le regole del form sono scritte in modo da valere sia
   sulla nostra bozza sia sui campi generati da HubSpot.
   ========================================================================= */

.aef-form,
.aef-form *,
.aef-form *::before,
.aef-form *::after { box-sizing: border-box; }

.aef-form {
  --ink: #030F0F;
  --green-bright: #00E27B;
  --muted: #C7D2CC;
  --dim: #7A8A82;
  --orange: #FF5C1F;
  --campo: #F2F5F3;
  --bordo: #D8E2DC;

  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  padding: 96px max(120px, (100% - 1200px) / 2);
  background: var(--ink);
  overflow: hidden;
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/*
 * Il reticolo verde del marchio, identico a quello della Garanzia e del
 * blocco finale: righe **e** colonne, passo 64, opacità 0,10.
 *
 * Fino al 12 agosto qui c'era solo la sfumatura a 90 gradi, quindi si
 * vedevano righe verticali parallele e basta. Il cliente l'ha segnalato:
 * fuori identità di marca. Le due sfumature vanno sempre in coppia.
 */
.aef-form::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 63px,
      rgba(0, 226, 123, 0.10) 63px 64px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 63px,
      rgba(0, 226, 123, 0.10) 63px 64px
    );
  pointer-events: none;
}

/* L'alone verde dietro la scheda: nel Figma è un cerchio di 900×540 */
.aef-form::after {
  content: '';
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: -1;
  width: 900px;
  height: 540px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--green-bright);
  opacity: .16;
  filter: blur(120px);
  pointer-events: none;
}

.aef-form__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 820px;
  text-align: center;
}

.aef-form__eyebrow {
  margin: 0;
  color: var(--green-bright);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 2.5px;
}

.aef-form__title {
  margin: 0;
  color: #FFFFFF;
  font-size: 42px;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

/* ---------- La scheda ---------- */
.aef-form__card {
  width: 100%;
  max-width: 660px;
  margin-top: 12px;
  border-radius: 14px;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  text-align: left;
}

.aef-form__banner {
  margin: 0;
  padding: 18px 28px;
  background: var(--green-bright);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .3px;
  text-align: center;
  text-transform: uppercase;
}

.aef-form__body { padding: 28px 32px 26px; }

/* ---------- Campi ----------
   Valgono sia per la bozza sia per il markup di HubSpot: i selettori
   .hs-form-field e simili sono quelli che genera il loro script. */
.aef-form__fake,
.aef-form .hs-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aef-form__row {
  display: flex;
  gap: 16px;
}

.aef-form__row > * { flex: 1 1 0; min-width: 0; }

.aef-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aef-form__label,
.aef-form .hs-form-field > label {
  color: #22312B;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.aef-form__label i,
.aef-form .hs-form-required { color: #F04F4F; font-style: normal; }

.aef-form__input,
.aef-form .hs-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--campo);
  color: #7A8A82;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
}

.aef-form__cell { display: flex; gap: 12px; }
.aef-form__input--prefix { flex: 0 0 132px; gap: 6px; }

/* ---------- Spunta GDPR ---------- */
.aef-form__gdpr,
.aef-form .hs-form-booleancheckbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 0;
  color: #22312B;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.aef-form__check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--bordo);
  border-radius: 4px;
  background: var(--campo);
}

.aef-form__gdpr a,
.aef-form__pp {
  color: #00A05C;
  text-decoration: underline;
}

.aef-form__gdpr i { color: #F04F4F; font-style: normal; }

/* ---------- Bottone ---------- */
.aef-form__btn,
.aef-form .hs-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 61px;
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  background: var(--orange);
  color: var(--ink);
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 0 18px 1px rgba(255, 92, 31, .5);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* ---------- Hover del pulsante ----------
   I valori sono quelli del componente «Button / CTA» del Figma, che lo stato
   Hover ce l'ha dichiarato: sfondo #FF5C1F → #FF7A45, bordo bianco dal 40 al
   55%, i due aloni più ampi, luce interna dal 28 al 40%. Prima qui c'era un
   generico `brightness(1.05)`.

   Il colore del testo **non cambia in hover: resta nero**. Chiuso così il
   2026-08-12 dal cliente. Il 10 agosto era stato messo il blu notte #333366,
   letto dallo screenshot del designer; era un equivoco, e le due fonti che
   dicevano il contrario avevano ragione — la didascalia dello screenshot
   («hover dei pulsanti non deve essere blue») e il componente «Button / CTA»
   del Figma, che nello stato Hover ha il testo nero come nello stato normale.

   Il colore va comunque **dichiarato in ogni stato**: senza, quello che si
   vedeva era il #333366 di Elementor per i link, cioè lo stesso colore ma per
   caso e non per scelta — e su :visited restava anche a mouse fermo. */
.aef-form .hs-button,
.aef-form .hs-button:link,
.aef-form .hs-button:visited { color: #030F0F; }

.aef-form .hs-button:hover,
.aef-form .hs-button:focus,
.aef-form .hs-button:active {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.55);
  background: #FF7A45;
  color: #030F0F;
  box-shadow:
    0 0 26px 3px rgba(255, 122, 69, 0.75),
    0 0 60px 10px rgba(255, 122, 69, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* ---------- Note ---------- */
.aef-form__note {
  margin: 16px 0 0;
  color: #22312B;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* Si vede solo finché al posto del form c'è la bozza */
.aef-form__avviso {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #FFF0E9;
  color: #8A3A12;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ---------- Comparsa ---------- */
.aef-anima .aef-form .aef-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.aef-form .aef-reveal.is-in { opacity: 1; transform: none; }
.aef-form__card { transition-delay: .1s }

body.elementor-editor-active .aef-form .aef-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .aef-form { padding: 72px 40px; }
  .aef-form__title { font-size: 34px; line-height: 40px; }
}

/* =========================================================================
   MOBILE — frame 390×799: i due campi del nome si impilano
   ========================================================================= */
@media (max-width: 767px) {
  .aef-form { padding: 56px 24px; }

  .aef-form__eyebrow {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px;
  }

  .aef-form__title { font-size: 28px; line-height: 34px; }

  .aef-form__banner {
    padding: 14px 18px;
    font-size: 12px;
    line-height: 17px;
  }

  .aef-form__body { padding: 20px 20px 22px; }

  .aef-form__row { flex-direction: column; gap: 16px; }

  .aef-form__input,
  .aef-form .hs-input { height: 48px; font-size: 15px; }

  .aef-form__btn,
  .aef-form .hs-button { height: 52px; font-size: 17px; }

  .aef-form::after { width: 360px; height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .aef-form .aef-reveal { opacity: 1; transform: none; transition: none; }
  .aef-form .hs-button { transition: none; }
}

/* =========================================================================
   Il modulo di HubSpot, ora che lo raggiungiamo davvero
   Fino al 2026-09-01 la chiamata non passava `css:""` e il modulo stava dentro
   un iframe: nessuna regola di questo foglio arrivava. Sistemato quello, sono
   venuti fuori due difetti che erano sempre stati lì, semplicemente invisibili.
   ========================================================================= */

/* HubSpot mette il consenso dentro un elenco puntato: senza questa riga resta
   un pallino appeso davanti alla casella. */
.aef-form .inputs-list,
.aef-form ul.no-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La casella sta **accanto** al testo, non sopra, e non si allarga a tutta
   riga: senza, usciva un quadrato grande quanto un pulsante. */
.aef-form .hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}

.aef-form .hs-form-booleancheckbox-display input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: #00B865;
}

.aef-form .hs-form-booleancheckbox-display > span { flex: 1 1 auto; }