/* ============================================================
   Form HubSpot (embed v2, resa inline nel div #hubspot).
   I wrapper dei campi HubSpot hanno anche la classe "field",
   quindi ereditano label/input/select del vecchio form da
   style.css. Qui ci sono solo le regole specifiche HubSpot:
   override del foglio di default che HubSpot inietta via CSSOM
   (fieldset max-width:500px, colonne in float) + i tipi di
   campo che il vecchio form non aveva (telefono internazionale,
   textarea, gruppi checkbox, consensi legali).
   ============================================================ */

/* --- Reset del default HubSpot --- */
#hubspot fieldset {
	max-width: none;
	border: none;
	margin: 0;
	padding: 0;
}

#hubspot form ol, #hubspot form ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#hubspot .hs-form-field {
	float: none;
	width: 100%;
}

#hubspot .input {
	margin: 0;
}

#hubspot .hs-input:not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
}

/* Le label vuote (i campi usano il placeholder) non devono occupare spazio */
#hubspot .hs-form-field > label:not(:has(span:not(:empty))) {
	display: none;
}

/* La label del campo mail deve occupare spazio, almeno quando i campi sono affiancati */
@media (min-width: 821px) {
	.field label {line-height:20px;}
	#hubspot .hs-form-field.hs-email > label {
		display: block!important;
		height: 20px;
	}
}

/* --- Colonne: 2 su desktop, 1 su mobile (come il vecchio .field-grid) --- */
#hubspot fieldset.form-columns-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1.4rem;
	align-items: start;
}

/* --- Telefono internazionale: select prefisso + numero sulla stessa riga --- */
#hubspot .hs-fieldtype-intl-phone {
	display: flex;
	gap: 0.9rem;
	border: none;
	padding: 0;
}

#hubspot .hs-fieldtype-intl-phone select.hs-input {
	flex: 0 0 6.5rem;
	width: 6.5rem;
	min-width: 0;
}

#hubspot .hs-fieldtype-intl-phone input.hs-input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

/* Select con l'opzione placeholder selezionata: colore attenuato come i placeholder */
#hubspot select.hs-input.is-placeholder {
	color: var(--muted);
}

/* --- Textarea --- */
#hubspot textarea.hs-input {
	font-family: inherit;
	font-size: var(--text-base);
	padding: 0.6rem 0;
	border: none;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	resize: vertical;
	transition: border-color var(--d-fast) var(--ease-out);
}

#hubspot textarea.hs-input:focus {
	outline: none;
	border-bottom-color: var(--red);
}

/* solo l'elemento textarea: la stessa classe sta anche sul div wrapper */
#hubspot form textarea.hs-fieldtype-textarea { height: 75px; }

/* --- Checkbox (percorso di interesse, colloquio, consensi) --- */
#hubspot .inputs-list {
	display: grid;
	gap: 0.6rem;
}

label.hs-form-checkbox-display,
label.hs-form-booleancheckbox-display {
	display: flex;
	gap: 10px;
	flex-direction: row;
	align-items: flex-start;
	cursor: pointer;
	font-size: var(--text-xs);
	color: var(--ink-soft);
	line-height: 1.6;
}

#hubspot .hs-input[type="checkbox"] {
	accent-color: var(--red);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

#hubspot form .hs-form-booleancheckbox-display > span { margin-left: 0 !important; }

/* --- Consensi legali: testo piccolo come la vecchia .privacy --- */
#hubspot .legal-consent-container label.hs-form-booleancheckbox-display {
	font-size: var(--text-xs);
}

#hubspot .legal-consent-container p {
	margin: 0;
	font-size: inherit;
	color: inherit;
	line-height: inherit;
	max-width: none;
}

#hubspot .legal-consent-container a {
	text-decoration: underline;
}

#hubspot .hs-form-required { color: var(--red); }

/* Separatore del blocco richtext prima dei consensi */
#hubspot .hs-richtext hr {
	border: none;
	border-top: 1px solid var(--ink);
	margin: 0.5rem 0;
}

/* --- Errori di validazione HubSpot --- */
#hubspot .hs-error-msgs {
	margin-top: 0.35rem;
}

#hubspot .hs-error-msgs label {
	font-size: var(--text-xs);
	letter-spacing: normal;
	text-transform: none;
	color: var(--red);
}

#hubspot .hs-input.invalid.error {
	border-bottom-color: var(--red);
}

#hubspot .hs_error_rollup {
	margin: 0 0 1.1rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--red);
}

#hubspot .hs_error_rollup label {
	color: var(--ink);
	font-size: var(--text-sm);
}

/* --- Submit: stesso look del vecchio .btn-primary --- */
.hs-submit input {
	cursor: pointer;
	width: 100%;
	justify-content: center;
	background: var(--red);
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1.05rem 2.2rem;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	border: none;
	border-radius: 0;
	transition: transform var(--d-base) var(--ease-spring), background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}

.hs-submit input:hover {
	background: var(--red-dark);
	transform: translateY(-2px);
}

.hs-submit input:active {
	transform: translateY(0);
}

/* --- Messaggio di conferma dopo l'invio --- */
#hubspot .submitted-message {
	text-align: center;
	padding: 1.5rem 0;
	color: var(--ink-soft);
	font-size: var(--text-sm);
}

/* --- Mobile: colonne in stack, stesso breakpoint del vecchio form --- */
@media (max-width: 820px) {
	#hubspot fieldset.form-columns-2 {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}

/* Stili generali per i campi */
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.6rem; }
.field > label { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);}
.field input, .field select { font-family: inherit; font-size: var(--text-sm); padding: 0.6rem 0; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); transition: border-color var(--d-fast) var(--ease-out); height:45px; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--red); }
.field select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238c8a82' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; }

/* Placeholder come label */
#hubspot .field input::placeholder,
#hubspot .field textarea::placeholder,
#hubspot input.hs-input::placeholder,
#hubspot textarea.hs-input::placeholder {
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	opacity: 1;
}

#hubspot .field input::-webkit-input-placeholder,
#hubspot .field textarea::-webkit-input-placeholder,
#hubspot input.hs-input::-webkit-input-placeholder,
#hubspot textarea.hs-input::-webkit-input-placeholder {
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	opacity: 1;
}

/* Select quando mostra il placeholder */
#hubspot select.hs-input.is-placeholder {
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Select quando ha un valore selezionato 
#hubspot select.hs-input:not(.is-placeholder) {
	font-size: var(--text-base);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink);
}
*/

/* Captcha */
#hubspot .hs-recaptcha .grecaptcha-badge {visibility:hidden!important; height:1px!important; width:1px!important;}