/*
 * Form "Lavora con noi": tre passi.
 *
 * Colori e tipografia dal tema: lime #C7C903 (lo stesso bordo dei campi
 * .gdlr-core-bottom-border), grigio #2A3236, rosso errore #dc3232 come gli
 * avvisi di Contact Form 7, Figtree.
 *
 * Lo stile dei campi NON viene riscritto: quello lo da' il tema. Qui si
 * aggiungono soltanto stato focus, stato errore e i controlli che il tema non
 * ha (indicatore, pill dei checkbox, campo file).
 *
 * Mobile first: le regole base valgono sullo schermo stretto.
 */

/*
 * Le regole si agganciano al form, che il JavaScript marca con
 * .mb-lavora-form. Non a .mb-lavora: il plugin CF7 Multi-Step lascia quel div
 * intorno al solo primo passo, quindi gli altri due non erediterebbero nulla.
 */
.mb-lavora-form {
	--mb-lavora-accent: #C7C903;
	--mb-lavora-ink: #2A3236;
	--mb-lavora-error: #dc3232;
	--mb-lavora-line: rgba(199, 201, 3, 0.35);

	font-family: "Figtree", sans-serif;
}

.mb-lavora-form [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------- i passi */

.mb-lavora-form .mb-step {
	display: none;
}

.mb-lavora-form .mb-step.is-active {
	display: block;
}

/*
 * Finche' il JavaScript non ha preso in carico il form, tutti i passi sono
 * visibili: senza questo, con JS disattivato o in errore, resterebbe una
 * pagina vuota e il form sarebbe inutilizzabile.
 */
.mb-lavora-form:not(.is-ready) .mb-step {
	display: block;
}

/*
 * La griglia resta quella del tema, a float. Convertirla in flex allinea si'
 * i campi fra loro, ma sfascia le larghezze e la spaziatura di tutte le altre
 * righe: il rimedio costa piu' del problema.
 *
 * Il disallineamento delle colonne con etichetta si risolve altrove, dando
 * alle colonne accanto uno spaziatore della stessa altezza (lo inserisce il
 * JavaScript).
 */
/*
 * La barra dei pulsanti e' figlia diretta dello step, non di una colonna del
 * tema: non riceve il padding laterale che le colonne hanno per compensare i
 * margini negativi del wrapper.
 *
 * Il wrapper .gdlr-core-input-wrap.gdlr-core-bottom-border ha margin -20px per
 * lato: il padding qui deve valere esattamente quello, altrimenti i pulsanti
 * restano fuori registro e il bordo sinistro finisce oltre il bordo visibile.
 */
.mb-lavora-form .mb-step-nav {
	margin-top: 26px;
	clear: both;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/*
 * I bottoni stanno dentro un <p>, separati da un <br>: e' il <p> a dover
 * diventare la riga flex, e il <br> va tolto o creerebbe un a capo in mezzo.
 */
.mb-lavora-form .mb-step-nav p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.mb-lavora-form .mb-step-nav br {
	display: none;
}

.mb-lavora-form .mb-step-nav .mb-prev {
	margin-right: auto;
}

/*
 * I bottoni di navigazione non hanno lo span interno che il tema si aspetta
 * per il trattamento skew, quindi .gdlr-core-button da solo produce una forma
 * sbilenca. Si ridisegnano qui, con gli stessi colori del tema, azzerando
 * raggi e pseudo elementi che il tema aggiunge.
 */
.mb-lavora-form .mb-step-nav .mb-prev,
.mb-lavora-form .mb-step-nav .mb-next,
.mb-lavora-form .mb-step-nav input[type="submit"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 32px;
	/*
	 * Bordo su tutti e quattro i lati, con !important: il wrapper
	 * .gdlr-core-bottom-border del tema impone ai suoi discendenti il solo
	 * bordo inferiore, e sui pulsanti quello lascia i lati scoperti.
	 */
	border: 1.5px solid var(--mb-lavora-accent) !important;
	border-radius: 0 !important;
	background-color: var(--mb-lavora-accent);
	background-image: none;
	color: var(--mb-lavora-ink);
	font-family: "Figtree", sans-serif;
	font-size: 15px;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	transform: none;
	cursor: pointer;
	/* Le etichette non vanno mai a capo dentro il bottone. */
	white-space: nowrap;
	width: auto;
	max-width: 100%;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mb-lavora-form .mb-step-nav .mb-prev::before,
.mb-lavora-form .mb-step-nav .mb-prev::after,
.mb-lavora-form .mb-step-nav .mb-next::before,
.mb-lavora-form .mb-step-nav .mb-next::after,
.mb-lavora-form .mb-step-nav input[type="submit"]::before,
.mb-lavora-form .mb-step-nav input[type="submit"]::after {
	display: none !important;
	content: none !important;
}

/*
 * I bottoni erano tagliati ai lati: il ritaglio arriva dai contenitori del
 * tema, che con lo skew dei pulsanti nascondono l'eccedenza. Qui non c'e'
 * skew, quindi il ritaglio toglie solo pezzi di bottone.
 */
.mb-lavora-form .mb-step-nav,
.mb-lavora-form .mb-step-nav p,
.mb-lavora-form .mb-step-nav .wpcf7-form-control-wrap {
	overflow: visible !important;
}



/* Indietro e' l'azione secondaria: contorno, non riempimento. */
.mb-lavora-form .mb-step-nav .mb-prev {
	background-color: transparent;
	color: inherit;
}

.mb-lavora-form .mb-step-nav .mb-prev:hover,
.mb-lavora-form .mb-step-nav .mb-prev:focus-visible {
	background-color: var(--mb-lavora-accent);
	color: var(--mb-lavora-ink);
}

.mb-lavora-form .mb-step-nav .mb-next:hover,
.mb-lavora-form .mb-step-nav .mb-next:focus-visible,
.mb-lavora-form .mb-step-nav input[type="submit"]:hover:not([disabled]),
.mb-lavora-form .mb-step-nav input[type="submit"]:focus-visible {
	background-color: transparent;
	color: inherit;
}

.mb-lavora-form .mb-step-nav .mb-prev:focus-visible,
.mb-lavora-form .mb-step-nav .mb-next:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ------------------------------------------------------- indicatore */

.mb-lavora__progress {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	counter-reset: none;
}

.mb-lavora__progress-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
	padding-top: 10px;
	border-top: 3px solid var(--mb-lavora-line);
	color: currentColor;
	font-size: 12px;
	text-align: center;
	opacity: 0.6;
	transition: opacity 0.25s ease, border-color 0.25s ease;
}

.mb-lavora__progress-item.is-current,
.mb-lavora__progress-item.is-done {
	border-top-color: var(--mb-lavora-accent);
	opacity: 1;
}

.mb-lavora__progress-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid var(--mb-lavora-accent);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 800;
	font-style: italic;
	line-height: 1;
}

.mb-lavora__progress-item.is-current .mb-lavora__progress-num,
.mb-lavora__progress-item.is-done .mb-lavora__progress-num {
	background-color: var(--mb-lavora-accent);
	color: var(--mb-lavora-ink);
}

.mb-lavora__progress-label {
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------- etichette */

/*
 * I campi con placeholder si spiegano da soli; checkbox, date e file no.
 * Queste etichette riprendono corpo e stile dei placeholder del tema, cosi'
 * la colonna di sinistra resta visivamente omogenea.
 */
.mb-lavora-form .mb-field-label {
	display: block;
	margin-bottom: 6px;
	color: inherit;
	font-family: inherit;
	font-size: 14px;
	font-style: italic;
	opacity: 0.85;
}

/*
 * Nel markup l'etichetta e' seguita da un <br>, che serviva quando lo span era
 * in linea. Resa l'etichetta un blocco, quel <br> aggiunge una riga vuota di
 * troppo fra l'etichetta e il campo: da qui lo stacco eccessivo.
 *
 * Vale anche per lo spaziatore, che ne inserisce uno identico: nascondendoli
 * entrambi le due colonne restano della stessa altezza.
 */
.mb-lavora-form .mb-field-label + br {
	display: none;
}

/*
 * Spaziatore inserito dal JavaScript nelle colonne senza etichetta che stanno
 * in una riga dove qualcun altro ce l'ha: occupa lo stesso spazio, cosi' i
 * campi tornano in linea senza toccare la griglia del tema.
 */
.mb-lavora-form .mb-field-label--spacer {
	visibility: hidden;
}

@media only screen and (max-width: 767px) {
	/* A colonna unica non c'e' niente da allineare: lo spazio e' solo vuoto. */
	.mb-lavora-form .mb-field-label--spacer {
		display: none;
	}
}

/* ------------------------------------------------------- focus ed errore */

.mb-lavora-form .gdlr-core-input-wrap input:focus,
.mb-lavora-form .gdlr-core-input-wrap textarea:focus,
.mb-lavora-form .gdlr-core-input-wrap select:focus,
.mb-lavora-form input:focus,
.mb-lavora-form textarea:focus,
.mb-lavora-form select:focus {
	outline: 2px solid var(--mb-lavora-accent);
	outline-offset: 2px;
}

.mb-lavora-form [aria-invalid="true"] {
	border-color: var(--mb-lavora-error) !important;
}

.mb-lavora__error {
	display: block;
	margin-top: 6px;
	color: var(--mb-lavora-error);
	font-size: 14px;
	font-style: normal;
	line-height: 1.35;
}

/* --------------------------------------------------- checkbox come pill */

/*
 * I gruppi si agganciano da data-name: Contact Form 7 scrive li' il nome del
 * campo, e le classi mb-giorni / mb-orari nel markup non ci sono.
 */

.mb-lavora-form [data-name="mb-giorni"] .wpcf7-list-item,
.mb-lavora-form [data-name="mb-orari"] .wpcf7-list-item {
	display: inline-flex;
	margin: 0;
}

.mb-lavora-form [data-name="mb-giorni"] .wpcf7-checkbox,
.mb-lavora-form [data-name="mb-orari"] .wpcf7-checkbox,
.mb-lavora-form [data-name="mb-giorni"] .wpcf7-form-control,
.mb-lavora-form [data-name="mb-orari"] .wpcf7-form-control {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mb-lavora-form [data-name="mb-giorni"] .wpcf7-list-item label,
.mb-lavora-form [data-name="mb-orari"] .wpcf7-list-item label {
	position: relative;
	display: flex;
	align-items: center;
	/* Area di tocco: 44px pieni, come chiede una mano su un telefono. */
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid var(--mb-lavora-accent);
	background: transparent;
	color: inherit;
	font-size: 15px;
	font-style: italic;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * Il tema disegna la casella con gli pseudo elementi: dentro le pill non
 * serve, e' la pill stessa a mostrare lo stato.
 */
.mb-lavora-form [data-name="mb-giorni"] .wpcf7-list-item label > input[type="checkbox"] ~ :before,
.mb-lavora-form [data-name="mb-giorni"] .wpcf7-list-item label > input[type="checkbox"] ~ :after,
.mb-lavora-form [data-name="mb-orari"] .wpcf7-list-item label > input[type="checkbox"] ~ :before,
.mb-lavora-form [data-name="mb-orari"] .wpcf7-list-item label > input[type="checkbox"] ~ :after {
	display: none !important;
}

.mb-lavora-form [data-name="mb-giorni"] .wpcf7-list-item-label,
.mb-lavora-form [data-name="mb-orari"] .wpcf7-list-item-label {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* La classe la mette il JavaScript; :has() resta come rinforzo dove c'e'. */
.mb-lavora-form [data-name="mb-giorni"] .wpcf7-list-item label.is-checked,
.mb-lavora-form [data-name="mb-orari"] .wpcf7-list-item label.is-checked,
.mb-lavora-form [data-name="mb-giorni"] .wpcf7-list-item label:has(input:checked),
.mb-lavora-form [data-name="mb-orari"] .wpcf7-list-item label:has(input:checked) {
	background-color: var(--mb-lavora-accent);
	color: var(--mb-lavora-ink);
	font-weight: 700;
}

.mb-lavora-form [data-name="mb-giorni"] .wpcf7-list-item label:has(input:focus-visible),
.mb-lavora-form [data-name="mb-orari"] .wpcf7-list-item label:has(input:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mb-lavora-form [data-name="mb-giorni"].mb-lavora--has-error label,
.mb-lavora-form [data-name="mb-orari"].mb-lavora--has-error label {
	border-color: var(--mb-lavora-error);
}

/* ------------------------------------------------------------- file */

.mb-lavora__file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/*
 * L'input resta nel documento e resta focusabile: nasconderlo con
 * display:none lo toglierebbe dalla tabulazione e dalle etichette lette
 * dagli screen reader. Il focus lo si rende visibile sul bottone.
 */
.mb-lavora-form .mb-lavora__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.mb-lavora-form .mb-lavora__file-button {
	display: inline-block;
	min-height: 44px;
	padding: 12px 24px;
	border: 1.5px solid var(--mb-lavora-accent);
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 15px;
	font-style: italic;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mb-lavora-form .mb-lavora__file-button:hover,
.mb-lavora-form .mb-lavora__file-button.is-focused,
.mb-lavora-form .mb-lavora__file-button:focus-visible {
	background-color: var(--mb-lavora-accent);
	color: var(--mb-lavora-ink);
}

.mb-lavora-form .mb-lavora__file-button.is-focused,
.mb-lavora-form .mb-lavora__file-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.mb-lavora__file-info {
	font-size: 14px;
	font-style: italic;
	opacity: 0.85;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- date */

/*
 * Su Safari desktop l'input date non ha picker nativo e viene reso come un
 * campo di testo piu' basso degli altri: si pareggiano altezza e allineamento
 * senza toccare bordi e colori, che restano quelli del tema.
 */
.mb-lavora-form input[type="date"] {
	min-height: 48px;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}

.mb-lavora-form input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
}

.mb-lavora-form input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	filter: invert(1);
	opacity: 0.7;
}

/* -------------------------------------------------------- responsive */

@media only screen and (max-width: 767px) {
	/* Le colonne del tema vanno a piena larghezza. */
	.mb-lavora-form [class*="gdlr-core-column-"] {
		width: 100% !important;
		float: none !important;
	}

	/*
	 * A colonna unica la coppia margine negativo / padding non serve piu' a
	 * niente: serviva a far combaciare due colonne affiancate. Lasciandola, il
	 * form sborda di 20px per lato e sembra fuori asse rispetto al resto della
	 * pagina. Si azzerano entrambi insieme, non uno solo.
	 */
	.mb-lavora-form .mb-lavora {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.mb-lavora-form [class*="gdlr-core-column-"],
	.mb-lavora-form .mb-step-nav {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.mb-lavora-form .mb-step-nav p {
		gap: 10px;
	}

	.mb-lavora-form .mb-step-nav .mb-prev,
	.mb-lavora-form .mb-step-nav .mb-next,
	.mb-lavora-form .mb-step-nav input[type="submit"] {
		flex: 1 1 100%;
		margin-right: 0;
		padding-left: 18px;
		padding-right: 18px;
	}

	.mb-lavora__progress-label {
		font-size: 11px;
	}
}

@media only screen and (min-width: 768px) {
	.mb-lavora__progress {
		gap: 14px;
		margin-bottom: 34px;
	}

	.mb-lavora__progress-item {
		flex-direction: row;
		gap: 10px;
		font-size: 14px;
	}

	.mb-lavora__progress-label {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-lavora-form *,
	.mb-lavora-form *::before,
	.mb-lavora-form *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------- convivenza con cf7mls */

/*
 * Il plugin CF7 Multi-Step e' attivo su questo form e mostra un fieldset per
 * volta, nascondendo gli altri via JavaScript. Con due sistemi di stepping
 * sovrapposti vincerebbe il suo, e i passi 2 e 3 resterebbero irraggiungibili
 * qualunque classe metta il nostro codice.
 *
 * Qui i suoi fieldset tornano tutti visibili e i suoi controlli spariscono:
 * la visibilita' la governano le .mb-step. L'!important serve perche' il
 * plugin scrive display:none inline sugli elementi.
 *
 * Resta una soluzione di convivenza: la via pulita e' togliere i marcatori
 * multi step dal template del form, cosi' il plugin non entra in gioco.
 */
.mb-lavora-form .fieldset-cf7mls,
.mb-lavora-form .fieldset-cf7mls-wrapper {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
}

.mb-lavora-form .cf7mls-btns,
.mb-lavora-form .cf7mls_next,
.mb-lavora-form .cf7mls_back {
	display: none !important;
}

/*
 * Il contatore "Step: 1 | 3" gia' presente nel form duplicherebbe la barra
 * generata dal JavaScript. Resta nel DOM e viene tenuto aggiornato: per usare
 * quello al posto della barra basta invertire queste due regole.
 */
.mb-lavora-form .mb-form-step {
	display: none;
}

/* Submit spento fino all'ultimo passo: va detto anche a occhio. */
.mb-lavora-form input[type="submit"][disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ------------------------------------------------------------ larghezza */

/*
 * Il wrapper .mb-lavora e' un gdlr-core-with-column: GoodLayers gli mette
 * margini negativi laterali, compensati dal padding delle colonne. Spostando
 * gli step 2 e 3 dentro questo wrapper hanno ereditato quel trattamento, e
 * quello che sporge oltre i bordi veniva ritagliato.
 *
 * overflow visibile risolve il taglio senza toccare i margini del tema, che
 * servono all'allineamento delle colonne.
 */
.mb-lavora-form .mb-lavora,
.mb-lavora-form .mb-step {
	width: 100%;
	max-width: none;
	overflow: visible !important;
}