/* ============================================================================
   LANDING STUDIO — stile degli elementi aggiunti alle landing
   Tutte le classi iniziano con "lpx-" per non toccare lo stile del design.
   ============================================================================ */

:root { --lpx-colore: #4338ca; }

/* --- banner cookie ---------------------------------------------------------- */
.lpx-banner, .lpx-banner * {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
.lpx-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
  padding: 12px;
  font-size: 14px; line-height: 1.5; color: #1f2937;
}
.lpx-banner__corpo {
  position: relative;
  max-width: 980px; margin: 0 auto;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  box-shadow: 0 10px 40px rgba(17, 24, 39, .18);
  /* a destra resta libero lo spazio della "X": nessun comando ci finisce sotto */
  padding: 16px 46px 16px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
}
.lpx-banner__testo { flex: 1 1 420px; min-width: 0; }
.lpx-banner__testo strong { display: block; font-size: 15px; color: #111827; margin: 0 0 2px; }
.lpx-banner__testo p { margin: 0; color: #4b5563; }
.lpx-banner__testo a { color: var(--lpx-colore); text-decoration: underline; }
.lpx-banner__scelte { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.lpx-banner__scelte[hidden] { display: none; }
.lpx-banner__scelte label { display: inline-flex; align-items: center; gap: 6px; color: #111827; cursor: pointer; }
.lpx-banner__scelte em { font-style: normal; color: #6b7280; font-size: 12px; }
.lpx-banner__scelte input { width: 16px; height: 16px; margin: 0; accent-color: var(--lpx-colore); }
.lpx-banner__azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.lpx-btn {
  appearance: none; border-radius: 9px; padding: 10px 16px; margin: 0;
  font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
  border: 1px solid #d1d5db; background: #fff; color: #111827;
}
.lpx-btn:hover { background: #f3f4f6; }
.lpx-btn--pieno { background: #111827; border-color: #111827; color: #fff; }
.lpx-btn--pieno:hover { background: #1f2937; }
.lpx-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--lpx-colore) 45%, transparent); outline-offset: 2px; }

/* "X": alla prima comparsa chiude rifiutando, sul banner riaperto chiude senza cambiare.
   Deve vedersi quanto gli altri comandi (linee guida del Garante, 10/06/2021). */
.lpx-banner__chiudi {
  position: absolute; top: 4px; right: 6px; width: 34px; height: 34px; margin: 0; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #111827;
  font: 400 26px/34px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: center; cursor: pointer;
}
.lpx-banner__chiudi:hover { background: #f3f4f6; }
.lpx-banner__chiudi:focus-visible { outline: 3px solid color-mix(in srgb, var(--lpx-colore) 45%, transparent); outline-offset: 1px; }

@media (max-width: 600px) {
  .lpx-banner { padding: 8px; }
  .lpx-banner__azioni { width: 100%; }
  .lpx-banner__azioni .lpx-btn { flex: 1 1 auto; }
}

/* --- bottone "Preferenze cookie" (dopo la scelta) --------------------------- */
.lpx-preferenze, .lpx-preferenze * { box-sizing: border-box; }
.lpx-preferenze {
  position: fixed; left: 14px; bottom: 14px; z-index: 2147482999;
  display: inline-flex; align-items: center; gap: 0; height: 40px; min-width: 40px; margin: 0; padding: 0 10px;
  border: 1px solid #e5e7eb; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #374151;
  box-shadow: 0 4px 16px rgba(17, 24, 39, .14); cursor: pointer; opacity: .82;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: normal; text-transform: none;
  transition: opacity .15s, gap .15s;
}
.lpx-preferenze[hidden] { display: none !important; }
.lpx-preferenze svg { display: block; flex: none; width: 20px; height: 20px; }
.lpx-preferenze__testo { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .2s; }
.lpx-preferenze:hover, .lpx-preferenze:focus-visible { opacity: 1; gap: 8px; }
.lpx-preferenze:hover .lpx-preferenze__testo, .lpx-preferenze:focus-visible .lpx-preferenze__testo { max-width: 160px; }
.lpx-preferenze:focus-visible { outline: 3px solid color-mix(in srgb, var(--lpx-colore) 45%, transparent); outline-offset: 2px; }
@media print { .lpx-preferenze, .lpx-banner { display: none !important; } }

/* --- caselle del consenso nei form del design -------------------------------
   I design spesso hanno regole generiche su label, span e input (colonne,
   maiuscolo, larghezza 100%...). Qui le neutralizzo, altrimenti le caselle
   verrebbero stravolte. Colore e font invece restano quelli del design.      */
.lpx-consensi {
  display: grid !important; gap: 10px !important; margin: 16px 0 4px !important; padding: 0 !important;
  grid-column: 1 / -1 !important; text-align: left !important; width: 100%;
}
.lpx-consensi .lpx-consenso {
  display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px !important;
  grid-column: 1 / -1 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  font-size: 13.5px !important; line-height: 1.45 !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: normal !important; text-align: left !important; cursor: pointer;
}
.lpx-consensi .lpx-consenso > span {
  display: block !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;
  text-transform: none !important; letter-spacing: normal !important; color: inherit !important; margin: 0 !important; opacity: .88;
}
.lpx-consensi .lpx-consenso input[type="checkbox"] {
  display: inline-block !important; position: static !important; flex: none !important; opacity: 1 !important;
  width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 1px 0 0 !important; padding: 0 !important;
  appearance: auto !important; -webkit-appearance: checkbox !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 3px !important;
  accent-color: var(--lpx-colore); cursor: pointer;
}
.lpx-consensi .lpx-consenso a { color: inherit !important; text-decoration: underline !important; font: inherit !important; }
.lpx-consensi .lpx-informativa {
  display: block !important; grid-column: 1 / -1 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; color: inherit !important;
  font-size: 13px !important; line-height: 1.45 !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: normal !important; text-align: left !important; opacity: .82;
}
.lpx-consensi .lpx-informativa a { color: inherit !important; text-decoration: underline !important; font: inherit !important; }

/* --- anteprima dei contenuti di altri siti (video, mappe, calendari) --------
   Prende il posto dell'iframe finche' il visitatore non accetta i cookie o non
   clicca. Eredita classi e stile dell'iframe, quindi qui niente !important:
   i valori del design devono poter vincere.                                  */
.lpx-esterno {
  display: grid; place-items: center; box-sizing: border-box;
  width: 100%; min-height: 170px;   /* altezza vera messa da runtime.js; qui solo il minimo */
  padding: 18px;
  border: 1px dashed #d1d5db; border-radius: 12px; background: #f7f7f8; color: #374151;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.45; text-align: center; text-transform: none; letter-spacing: normal;
  cursor: pointer;
}
.lpx-esterno * { box-sizing: border-box; }
.lpx-esterno__dentro { display: grid; justify-items: center; gap: 6px; max-width: 420px; }
.lpx-esterno__icona { display: block; color: #6b7280; }
.lpx-esterno__icona svg { display: block; width: 34px; height: 34px; }
.lpx-esterno__titolo { font-size: 15px; font-weight: 700; color: #111827; }
.lpx-esterno__nota { color: #6b7280; font-size: 12.5px; }
.lpx-esterno__btn {
  appearance: none; margin-top: 8px; padding: 9px 16px; border: 0; border-radius: 9px;
  background: var(--lpx-colore); color: #fff; font: inherit; font-size: 14px; font-weight: 600;
  line-height: 1.2; cursor: pointer;
}
.lpx-esterno__btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--lpx-colore) 45%, transparent); outline-offset: 2px; }
/* cornice a misura fissa (il design la tiene di una certa altezza): qui
   l'anteprima non puo' allungarsi, quindi il testo che avanza va nascosto */
.lpx-esterno--fissa { overflow: hidden; min-height: 0; }
/* cornice fissa e piccola: restano titolo e bottone, e la frase su cosa
   comporta il clic resta nel titolo del bottone */
.lpx-esterno--piccola { padding: 10px; }
.lpx-esterno--piccola .lpx-esterno__icona, .lpx-esterno--piccola .lpx-esterno__nota { display: none; }
.lpx-esterno--piccola .lpx-esterno__titolo { font-size: 14px; }
.lpx-esterno--piccola .lpx-esterno__btn { margin-top: 4px; padding: 7px 13px; }

.lpx-errore-form {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
  font-size: 14px; line-height: 1.4; text-align: left;
}

/* campo trappola per i bot: invisibile alle persone */
.lpx-trappola { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* --- form generato dalla piattaforma --------------------------------------- */
.lpx-form { display: block; width: 100%; text-align: left; }
.lpx-form * { box-sizing: border-box; }
.lpx-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lpx-campo { display: flex; flex-direction: column; gap: 5px; grid-column: 1 / -1; }
.lpx-campo--meta { grid-column: span 1; }
.lpx-campo > label { font-size: 14px; font-weight: 600; }
.lpx-req { color: #dc2626; }
.lpx-form input:not([type="checkbox"]), .lpx-form select, .lpx-form textarea {
  width: 100%; font: inherit; font-size: 16px; color: #111827; background: #fff;
  padding: 11px 13px; border: 1px solid #d1d5db; border-radius: 9px;
}
.lpx-form input:focus, .lpx-form select:focus, .lpx-form textarea:focus {
  outline: none; border-color: var(--lpx-colore);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lpx-colore) 20%, transparent);
}
.lpx-invia {
  width: 100%; margin-top: 6px; padding: 14px 20px; border: 0; border-radius: 10px;
  background: var(--lpx-colore); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.lpx-invia:disabled { opacity: .65; cursor: wait; }
@media (max-width: 560px) {
  .lpx-griglia { grid-template-columns: 1fr; }
  .lpx-campo--meta { grid-column: 1 / -1; }
}

/* --- etichetta anteprima --------------------------------------------------- */
.lpx-anteprima {
  position: fixed; top: 10px; left: 10px; z-index: 2147483001;
  background: #111827; color: #fff; padding: 6px 11px; border-radius: 999px;
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; opacity: .92;
}