/*
 * SSQ ESG Form styles
 * ------------------------------------------------------------
 * Guida rapida personalizzazione:
 * 1) Cambia i colori nelle variabili dentro .ssq-esg-form-wrap
 * 2) Regola spaziature principali: padding card, gap grid, min-height input
 * 3) Punto di break desktop in fondo al file (@media min-width)
 */

.ssq-esg-form-wrap {
	/* Colori base del form (card su sfondo esterno, anche scuro) */
	--ssq-bg-card: #ffffff;
	--ssq-text: #0f172a;
	--ssq-muted: #475569;
	--ssq-border: #94a3b8;
	--ssq-focus: #0ea5a4;

	/* Callout errore: ottimizzato per contrasto su sfondo verde scuro */
	--ssq-error-bg: #fff1f2;
	--ssq-error-border: #e11d48;
	--ssq-error-text: #881337;

	/* Callout successo */
	--ssq-success-bg: #ecfdf5;
	--ssq-success-border: #10b981;
	--ssq-success-text: #065f46;

	color: var(--ssq-text);
}

.ssq-esg-form {
	/* Card principale */
	background: var(--ssq-bg-card);
	border: 1px solid #e2e8f0 !important;
	border-radius: 5px !important;
	padding: 16px;
	box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

.ssq-grid {
	/* Mobile first: 1 colonna */
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.ssq-field {
	margin: 0;
}

.ssq-label {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ssq-text);
	margin-bottom: 6px;
}

.ssq-esg-form .ssq-input,
.ssq-esg-form .ssq-textarea {
	width: 100%;
	border: 1.5px solid var(--ssq-border) !important;
	border-radius: 5px !important;
	padding: 10px 12px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ssq-text);
	background: #fff !important;
	box-sizing: border-box;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Placeholder leggibile su box bianco */
.ssq-esg-form .ssq-input::placeholder,
.ssq-esg-form .ssq-textarea::placeholder {
	color: #94a3b8;
}

.ssq-esg-form .ssq-input {
	/* Altezza touch-friendly */
	min-height: 44px;
}

.ssq-esg-form .ssq-textarea {
	min-height: 110px;
	resize: vertical;
}

/* Focus accessibile */
.ssq-esg-form .ssq-input:focus,
.ssq-esg-form .ssq-textarea:focus {
	outline: none;
	border-color: var(--ssq-focus);
	box-shadow: 0 0 0 3px rgba(14, 165, 164, 0.2);
}

.ssq-submit-wrap {
	margin-top: 14px;
}

.ssq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	border: 0;
	border-radius: 5px !important;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	background: #0f766e;
	color: #fff;
	transition: transform .05s ease, opacity .15s ease;
}

.ssq-btn:hover {
	opacity: .92;
}

.ssq-btn:active {
	transform: translateY(1px);
}

/* Honeypot nascosto ma presente nel DOM */
.ssq-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Messaggi di stato */
.ssq-callout {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 5px !important;
	border: 1px solid transparent;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 600;
}

.ssq-callout--error {
	background: var(--ssq-error-bg);
	border-color: var(--ssq-error-border);
	color: var(--ssq-error-text);
}

.ssq-callout--success {
	background: var(--ssq-success-bg);
	border-color: var(--ssq-success-border);
	color: var(--ssq-success-text);
}

/* ------------------------------------------------------------
 * Desktop (>= 768px)
 * - Passa da 1 a 2 colonne
 * - I campi con .ssq-col-2 occupano tutta la larghezza
 * ------------------------------------------------------------ */
@media (min-width: 768px) {
	.ssq-esg-form {
		padding: 20px;
	}

	.ssq-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.ssq-col-2 {
		grid-column: span 2;
	}
}