/* =====================================================================
   InformaImpresa – Newsletter WPForms (Elementor)
   Colori/spaziature di default APPROSSIMATI dallo screenshot fornito;
   tutti sovrascrivibili dai controlli Elementor (Stile) senza toccare
   questo file.
   ===================================================================== */

.iielnl-card {
	--iielnl-field-border: #E2E8F0;
	--iielnl-field-text: #2A3448;
	--iielnl-field-radius: 10px;
	--iielnl-btn-bg: #3B6FE0;
	--iielnl-btn-bg-hover: #2E5BC4;
	--iielnl-btn-text: #FFFFFF;
	--iielnl-btn-radius: 12px;

	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(20, 30, 60, 0.12);
	padding: 24px 26px;
	max-width: 420px;
	box-sizing: border-box;
}

.iielnl-card * {
	box-sizing: border-box;
}

/* ---- Modalità compatta: riduce padding e spaziature ---- */
.iielnl-card.iielnl-compact {
	padding: 16px 18px;
}

/* ---- Header: icona + titolo ---- */
.iielnl-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.iielnl-compact .iielnl-header {
	margin-bottom: 10px;
}

.iielnl-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	border-radius: 50%;
	background: #EAF2FF;
	color: #3B6FE0;
	font-size: 16px;
}

.iielnl-compact .iielnl-icon {
	width: 32px;
	height: 32px;
	min-width: 32px;
	font-size: 14px;
}

.iielnl-title {
	font-size: 17px;
	font-weight: 700;
	color: #1B2A4A;
	line-height: 1.3;
}

.iielnl-compact .iielnl-title {
	font-size: 15px;
}

.iielnl-placeholder {
	font-size: 13px;
	color: #8A93A6;
	font-style: italic;
	margin: 0;
}

/* =====================================================================
   OVERRIDE CAMPI WPFORMS
   Nota: alcuni selettori usano !important perché nell'installazione
   InformaImpresa il tema attivo applica !important agli stessi elementi
   (bottoni/campi), come già riscontrato sul widget "Hero/Ricerca".
   ===================================================================== */

.iielnl-form-wrap .wpforms-container {
	margin: 0 !important;
}

.iielnl-form-wrap .wpforms-form {
	margin: 0 !important;
}

.iielnl-form-wrap .wpforms-field {
	padding: 0 0 12px !important;
	margin: 0 !important;
}

.iielnl-compact .iielnl-form-wrap .wpforms-field {
	padding: 0 0 8px !important;
}

/* Etichette dei campi: nascoste per un look condensato, il testo del
   campo email resta leggibile tramite il placeholder impostato in WPForms. */
.iielnl-form-wrap .wpforms-field-label {
	display: none;
}

.iielnl-form-wrap input[type="text"],
.iielnl-form-wrap input[type="email"],
.iielnl-form-wrap input[type="tel"] {
	width: 100%;
	border: 1px solid var(--iielnl-field-border) !important;
	border-radius: var(--iielnl-field-radius) !important;
	padding: 11px 14px !important;
	font-size: 14px !important;
	color: var(--iielnl-field-text) !important;
	background: #FFFFFF !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	height: auto !important;
}

.iielnl-compact .iielnl-form-wrap input[type="text"],
.iielnl-compact .iielnl-form-wrap input[type="email"],
.iielnl-compact .iielnl-form-wrap input[type="tel"] {
	padding: 9px 12px !important;
	font-size: 13.5px !important;
}

.iielnl-card.iielnl-glow .iielnl-form-wrap input:focus {
	border-color: var(--iielnl-btn-bg) !important;
	box-shadow: 0 0 0 3px rgba(59, 111, 224, 0.15);
	outline: none;
}

/* Checkbox di consenso */
.iielnl-form-wrap .wpforms-field-checkbox ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.iielnl-form-wrap .wpforms-field-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 10px !important;
}

.iielnl-form-wrap .wpforms-field-checkbox label {
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	color: #4B5568 !important;
	font-weight: 400 !important;
}

.iielnl-form-wrap .wpforms-field-checkbox input[type="checkbox"] {
	margin-top: 2px !important;
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0;
}

/* Pulsante di invio */
.iielnl-form-wrap .wpforms-submit-container {
	margin: 4px 0 0 !important;
}

.iielnl-form-wrap button[type="submit"],
.iielnl-form-wrap .wpforms-submit {
	width: 100% !important;
	background: var(--iielnl-btn-bg) !important;
	color: var(--iielnl-btn-text) !important;
	border: none !important;
	border-radius: var(--iielnl-btn-radius) !important;
	padding: 12px 20px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	box-shadow: 0 8px 20px rgba(59, 111, 224, 0.35);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.iielnl-compact .iielnl-form-wrap button[type="submit"],
.iielnl-compact .iielnl-form-wrap .wpforms-submit {
	padding: 10px 18px !important;
	font-size: 14px !important;
}

.iielnl-card.iielnl-btn-hover .iielnl-form-wrap button[type="submit"]:hover,
.iielnl-card.iielnl-btn-hover .iielnl-form-wrap .wpforms-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(59, 111, 224, 0.45);
	background: var(--iielnl-btn-bg-hover) !important;
}

/* Messaggi di errore/successo WPForms: restano leggibili sopra la card bianca */
.iielnl-form-wrap .wpforms-error,
.iielnl-form-wrap .wpforms-field-description {
	font-size: 12px !important;
}

/* =====================================================================
   ANIMAZIONE DI ENTRATA (fade + slide up al primo ingresso in viewport)
   Attivata via JS (assets/js/newsletter-wpforms.js) con IntersectionObserver.
   ===================================================================== */
/* Di default la card è SEMPRE visibile: lo stato "nascosto prima dell'entrata"
   viene applicato via JS (classe .iielnl-animate-ready) solo se lo script
   carica correttamente. Così, se JS è bloccato/disabilitato, la card non
   resta mai invisibile. */
.iielnl-card.iielnl-animate.iielnl-animate-ready {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.iielnl-card.iielnl-animate.iielnl-in-view {
	opacity: 1;
	transform: translateY(0);
}