@charset "utf-8";

/*
	Blocco "Newsletter" (ricostruito da zero dal bundle React di produzione, docs/dom/homepage.htm +
	.newlayout/assets/index-hyXwmGwt.css, hash modulo "12x3v" + "1iha5"). Include comune:
	custom/frontend/layout/html/common/blocco-newsletter.htm. Titolo/sottotitolo riusano
	.FdoFeatureTitle/.FdoFeatureSubtitle già definiti in global.css.
*/

	.FdoNewsletter {
		min-height: min(70vh, 720px);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: var(--space-4) var(--space-4) var(--space-10);
	}
	@media (min-width: 1025px) {
		.FdoNewsletter { min-height: min(80vh, 880px); padding: var(--space-5) var(--space-6) var(--space-10); }
	}

	.FdoNewsletterContent { width: 100%; max-width: 48ch; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }

	.FdoNewsletterLogo { display: block; width: min(229px, 100%); aspect-ratio: 229 / 80; height: auto; margin-inline: auto; object-fit: contain; }

	.FdoNewsletterPanel { width: 100%; max-width: 520px; margin: 0 auto; padding: 10px; border-radius: var(--radius); background-color: #052e5a; }

	.FdoNewsletterForm { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%; }

	.FdoNewsletterLabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

	.FdoNewsletterRow { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); width: 100%; }

	.FdoNewsletterInput {
		flex: 1;
		min-width: 0;
		width: auto;
		padding: var(--space-3) var(--space-4);
		border: none;
		border-radius: var(--radius);
		background-color: transparent;
		color: var(--color-body);
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		line-height: var(--text-body-line);
	}
	.FdoNewsletterInput::placeholder { color: var(--color-body); font-weight: var(--text-body-bold-weight); opacity: .6; }

	.FdoNewsletterSubmit {
		flex-shrink: 0;
		padding: var(--space-3) var(--space-4);
		border: none;
		border-radius: var(--radius);
		background-color: var(--color-button-secondary-bg);
		color: var(--color-button-secondary-text);
		font-size: var(--text-button-size);
		line-height: var(--text-button-line);
		font-weight: var(--text-button-weight);
		transition: background-color .15s ease, transform .15s ease;
	}
	.FdoNewsletterSubmit:hover { background-color: var(--color-button-secondary-bg-hover); transform: translateY(-1px); }

	/*	Consenso privacy + captcha: non presenti nella sorgente React (form li' e' solo email+submit),
		mantenuti dalla versione precedente per punto 9 della richiesta (double opt-in anti-spam gia'
		funzionante). Stanno in UN solo box semitrasparente sotto il pannello dell'email, che compare
		quando si comincia a scrivere l'indirizzo (vedi lo script nel blocco). */
	.FdoNewsletterConsenso {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		width: 100%;
		max-width: 520px;
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius);
		background-color: rgba(5, 46, 90, 0.85);
		text-align: left;
	}
	.FdoNewsletterConsenso[hidden] { display: none; }

	.FdoNewsletterPrivacy {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		gap: var(--space-2);
		width: 100%;
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-line);
		color: var(--color-body);
	}
	/*	Misura fissata: serve a calcolare il rientro del captcha (sotto), che deve partire in colonna
		col TESTO del consenso, non con la casella. */
	.FdoNewsletterPrivacy input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0 0; }
	.FdoNewsletterPrivacy a { text-decoration: underline; color: var(--color-gold); }

	.FdoNewsletterCaptcha {
		display: flex;
		justify-content: flex-start;
		margin-left: calc(16px + var(--space-2));
	}
	/*	Il riquadro del captcha è largo 304px fissi: sugli schermi stretti il rientro lo farebbe
		debordare, quindi lì torna a filo del box. */
	@media (max-width: 420px) {
		.FdoNewsletterCaptcha { margin-left: 0; }
	}