/* ============================================================
   EUFORIA — Personalizzazioni form Klaviyo (popup iscrizione)
   File:   assets/css/klaviyo-euforia.css  ·  handle: euforia-klaviyo
   Server: wp-content/themes/hello-elementor-child/assets/css/klaviyo-euforia.css
   Carica su TUTTO il front-end (il popup può comparire ovunque).
   ------------------------------------------------------------
   COSA FA
   1) Toglie il badge "Created with Klaviyo" in basso.
   2) Tiene NASCOSTA la riga del consenso (la form-row che contiene la
      checkbox) finché l'utente non digita la 1ª lettera dell'email: allora
      il JS aggiunge .euf-consent-on al form e la riga si rivela in dissolvenza.
   Non usa display:none sulla checkbox → il campo resta nel DOM e la
   validazione "obbligatorio" di Klaviyo continua a funzionare.
   ============================================================ */

/* ---- 1) via il logo/badge Klaviyo (ancora + suo contenitore) ---- */
a[aria-label^="Created with Klaviyo"]{ display:none !important; }
div:has(> a[aria-label^="Created with Klaviyo"]){ display:none !important; }

/* ---- 2) riga consenso = form-row che contiene una checkbox ----
   Stato NASCOSTO di default (collassata, non cliccabile). Niente flash:
   la nasconde il CSS in modo strutturale, prima ancora che parta il JS. */
.klaviyo-form [data-testid="form-row"]:has(input[type="checkbox"]){
  opacity:0;
  max-height:0;
  margin-top:0;
  overflow:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .35s ease, max-height .45s ease,
             transform .35s ease, margin-top .45s ease;
}
/* Stato RIVELATO: il JS mette .euf-consent-on sul form alla 1ª lettera */
.klaviyo-form.euf-consent-on [data-testid="form-row"]:has(input[type="checkbox"]){
  opacity:1;
  max-height:260px;
  margin-top:14px;
  transform:none;
  pointer-events:auto;
}

/* ---- Rifinitura brand (opzionale, tocco leggero) ----
   accento oro sulla spunta, testo piccolo e sobrio, link fucsia.
   Scopato dentro la sola riga consenso: non tocca il resto del form. */
.klaviyo-form [data-testid="form-row"]:has(input[type="checkbox"]) input[type="checkbox"]{
  accent-color:#BE8F39;   /* --gold */
}
.klaviyo-form [data-testid="form-row"]:has(input[type="checkbox"]) p,
.klaviyo-form [data-testid="form-row"]:has(input[type="checkbox"]) label,
.klaviyo-form [data-testid="form-row"]:has(input[type="checkbox"]) span{
  font-size:12px;
  line-height:1.5;
  color:#6E6557;          /* --ink-soft */
}
.klaviyo-form [data-testid="form-row"]:has(input[type="checkbox"]) a{
  color:#C42C7B;          /* --fucsia */
  text-decoration:underline;
  text-underline-offset:2px;
}