/*
 * Stile FluentForm allineato al design system del tema.
 * Scope: .fc-form-contatti (sezione "Form contatti") .fluentform
 * FluentForm genera markup proprio (classi ff-el-*): qui si sovrascrivono
 * solo aspetto/colori/spaziature, senza toccare la logica del plugin.
 */

.fc-form-contatti .fluentform,
.fc-form-contatti .frm-fluent-form {
	max-width: 640px;
	margin: 0 auto;
	font-family: var(--sans);
}

/* Wrapper di ogni campo */
.fc-form-contatti .ff-el-group {
	margin-bottom: 22px;
}

/* Label */
.fc-form-contatti .ff-el-input--label label,
.fc-form-contatti .ff-el-group > label {
	display: block;
	margin-bottom: 8px;
	font: 700 var(--fs-16, 16px)/1 var(--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}
.fc-form-contatti .ff-el-input--label label .ff_asterik {
	color: var(--accent);
}

/* Input / textarea / select */
.fc-form-contatti .ff-el-form-control,
.fc-form-contatti input[type="text"],
.fc-form-contatti input[type="email"],
.fc-form-contatti input[type="tel"],
.fc-form-contatti input[type="number"],
.fc-form-contatti input[type="url"],
.fc-form-contatti input[type="date"],
.fc-form-contatti textarea,
.fc-form-contatti select {
	width: 100%;
	padding: 13px 16px;
	font: 400 var(--fs-15, 15px)/1.5 var(--sans);
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	transition: border-color 0.15s ease;
}
.fc-form-contatti textarea {
	min-height: 140px;
	resize: vertical;
}
.fc-form-contatti .ff-el-form-control:focus,
.fc-form-contatti input:focus,
.fc-form-contatti textarea:focus,
.fc-form-contatti select:focus {
	outline: none;
	border-color: var(--accent);
}
.fc-form-contatti .ff-el-form-control::placeholder,
.fc-form-contatti input::placeholder,
.fc-form-contatti textarea::placeholder {
	color: var(--ink-soft);
	opacity: 0.7;
}

/* Checkbox / radio */
.fc-form-contatti .ff-el-form-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
.fc-form-contatti .ff-el-form-check-input {
	margin-top: 3px;
	accent-color: var(--accent);
}
.fc-form-contatti .ff-el-form-check-label {
	font: 400 var(--fs-16, 16px)/1.5 var(--sans);
	color: var(--ink-soft);
}

/* Testo di aiuto / errore */
.fc-form-contatti .ff-el-help-text {
	margin-top: 6px;
	font: 400 var(--fs-16, 16px)/1.4 var(--sans);
	color: var(--ink-soft);
}
.fc-form-contatti .error,
.fc-form-contatti .text-danger,
.fc-form-contatti .ff-el-is-error .ff-el-form-control {
	color: var(--fc-error);
}
.fc-form-contatti .ff-el-is-error .ff-el-form-control {
	border-color: var(--fc-error);
}
.fc-form-contatti .error {
	display: block;
	margin-top: 6px;
	font: 400 var(--fs-16, 16px)/1.4 var(--sans);
}

/* Bottone invio */
.fc-form-contatti .ff-btn,
.fc-form-contatti .ff-btn-submit,
.fc-form-contatti button[type="submit"],
.fc-form-contatti input[type="submit"] {
	display: inline-block;
	padding: 15px 32px;
	font: 700 var(--fs-15, 15px) var(--sans);
	color: var(--bg);
	background: var(--ink);
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.fc-form-contatti .ff-btn:hover,
.fc-form-contatti .ff-btn-submit:hover,
.fc-form-contatti button[type="submit"]:hover,
.fc-form-contatti input[type="submit"]:hover {
	background: var(--accent-deep);
}

/* Messaggi di esito */
.fc-form-contatti .ff-message-success,
.fc-form-contatti .ff_msg_success {
	padding: 16px 20px;
	font: 500 var(--fs-15, 15px)/1.5 var(--sans);
	color: var(--ink);
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 3px;
}
.fc-form-contatti .ff-message-error,
.fc-form-contatti .ff_msg_error {
	padding: 16px 20px;
	font: 500 var(--fs-15, 15px)/1.5 var(--sans);
	color: var(--fc-error);
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent-deep);
	border-radius: 3px;
}

/* Griglia campi affiancati (colonne generate da FluentForm, es. Nome/Cognome) */
.fc-form-contatti .ff-row .ff-col {
	padding-left: 8px;
	padding-right: 8px;
}

/*
 * Circle Forms (plugin form del sito) allineato al design system.
 * Si adattano le variabili --cf-* del plugin dentro lo scope .fc-form-contatti
 * e si ritoccano solo label, scelte e pulsante.
 */
.fc-form-contatti .cf-form-wrap {
	--cf-primary: var(--accent);
	--cf-primary-hover: var(--accent-deep);
	--cf-error: var(--fc-error);
	--cf-success: var(--ink);
	--cf-text: var(--ink);
	--cf-text-muted: var(--ink-soft);
	--cf-border: var(--line);
	--cf-border-focus: var(--accent);
	--cf-bg: var(--bg);
	--cf-bg-alt: var(--bg-2);
	--cf-radius: 3px;
	--cf-input-h: 48px;
	--cf-font: var(--sans);
	--cf-shadow-focus: none;
	--cf-file-accent: var(--accent);
	max-width: 640px;
	margin: 0 auto;
	font-family: var(--sans);
}
.fc-form-contatti .cf-field__label {
	margin-bottom: 8px;
	font: 700 var(--fs-16, 16px)/1.2 var(--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}
.fc-form-contatti .cf-section-title {
	font: 700 var(--fs-16, 16px)/1.2 var(--mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	border-bottom-color: var(--line);
}
.fc-form-contatti .cf-input,
.fc-form-contatti .cf-textarea,
.fc-form-contatti .cf-select {
	font: 400 var(--fs-15, 15px)/1.5 var(--sans);
}
.fc-form-contatti .cf-radio-group {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}
.fc-form-contatti .cf-radio-label {
	padding: 11px 16px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font: 400 var(--fs-16, 16px)/1.3 var(--sans);
}
.fc-form-contatti .cf-radio-label:has(input:checked) {
	border-color: var(--accent);
}
.fc-form-contatti .cf-field__help {
	font: 400 var(--fs-14, 14px)/1.4 var(--sans);
}
.fc-form-contatti .cf-btn--submit {
	width: auto;
	height: auto;
	padding: 15px 32px;
	font: 700 var(--fs-15, 15px) var(--sans);
	text-transform: none;
	letter-spacing: 0;
	color: var(--bg);
	background: var(--ink);
	border: 0;
	border-radius: 3px;
}
.fc-form-contatti .cf-btn--submit:hover:not(:disabled) {
	background: var(--accent-deep);
	color: var(--bg);
}
.fc-form-contatti .cf-form__feedback {
	background: var(--bg);
	color: var(--ink);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 3px;
}