/* =========================================================================
   LUNA MINIMAL — il modulo di contatto
   Sprint Mercatino porta un suo stile: colori, angoli tondi, aloni, badge
   posizionati fuori dal flusso. Qui viene rifatto per classe, senza toccare
   il plugin, così resta aggiornabile.

   Due scelte di fondo:
   1. Il modulo ha una SUPERFICIE PROPRIA — un grigio caldissimo, non il
      bianco della pagina. È il modo più diretto per far capire a colpo
      d'occhio che è una cosa a parte, restando dentro il bianco e nero.
   2. Tutto ciò che il plugin posiziona in assoluto o circonda di aloni
      torna nel flusso: erano quelli a sfondare le cornici.
   ========================================================================= */

.modulo {
	--f-superficie: #f4f4f2; /* la carta del modulo */
	--f-campo: #ffffff; /* i campi restano bianchi: si vede dove si scrive */
	--f-scelta-attiva: #e9e8e3; /* la scelta fatta: più scura, non nera */
	--f-linea: #dcdcd8;
	--f-linea-forte: #0e0e0e;
	--f-nota: #5f5f5f;

	margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* -------------------------------------------------------------- superficie */

.modulo .mm-form-wrapper {
	max-width: none;
	margin: 0;
	padding: 0;
	background: var(--f-superficie);
	border: 1px solid var(--f-linea);
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	font-family: var(--sans);
	color: var(--nero);
}

.modulo .mm-form {
	max-width: none;
	margin: 0;
	padding: clamp(1.25rem, 3.5vw, 2.5rem);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--sans);
	color: var(--nero);
}

/* Due moduli di fila (richiesta lunga + risposta veloce): si separano */
.modulo .mm-form-wrapper + .mm-form-wrapper {
	margin-top: 1.25rem;
}

/* --------------------------------------------------------------- testata */

/* La testata è una riga, non una fascia: fondo chiaro, un filo sotto, e
   dentro la domanda del passo, non un'etichetta generica. Il margine sotto
   dà aria al titolo del passo, che le stava incollato. */
.modulo .mm-form__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem clamp(1.25rem, 3.5vw, 2.5rem);
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	background: var(--f-campo);
	color: var(--nero);
	border: 0;
	border-bottom: 1px solid var(--f-linea);
	border-radius: 0;
}

.modulo .mm-form__icon {
	display: none;
}

/* La domanda sta qui, non sotto: era scritta due volte a due centimetri
   di distanza. Serif come i titoli del sito, non etichetta in maiuscolo. */
.modulo .mm-form__topbar .mm-form__title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--nero);
}

/* Il numero del passo è un'indicazione, non un annuncio: riquadro vuoto
   con un filo intorno. Pieno di nero faceva a pugni col bottone avanti.
   `box-shadow: none` non è pulizia: il plugin gli dà un'ombra di 14px
   che lo faceva sembrare un pezzo staccato, appoggiato sopra la testata. */
.modulo .mm-form__stepbadge {
	flex: 0 0 auto;
	padding: 4px 9px;
	background: none;
	border: 1px solid var(--f-linea);
	border-radius: 0;
	box-shadow: none;
	color: var(--f-nota);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Con la domanda spostata in testata il titolo del passo 1 resta vuoto:
   un <h3> vuoto occuperebbe comunque il suo margine. */
.modulo .mm-vstep__heading:empty {
	display: none;
}

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

.modulo .mm-form__step {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.modulo .mm-form__header {
	margin: 0 0 1.25rem;
	padding: 0;
	background: none;
	border: 0;
}

.modulo .mm-form__eyebrow {
	margin: 0 0 0.35rem;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--f-nota);
}

.modulo .mm-form__title,
.modulo .mm-vstep__heading {
	margin: 0 0 0.4rem;
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--nero);
}

.modulo .mm-form__header p,
.modulo .mm-val-intro {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--f-nota);
	max-width: 58ch;
}

/* ------------------------------------------------------------- le scelte */

.modulo .mm-vplan-hint {
	margin: 1.5rem 0 0.75rem;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--f-nota);
}

/* Tre schede staccate, non un blocco unico diviso da righe: ognuna ha la
   sua cornice e il suo spazio intorno. */
.modulo .mm-vplan-switch,
.modulo .mm-choice-grid,
.modulo .mm-plan-grid {
	display: grid;
	/* il plugin tiene tre colonne a qualunque larghezza: sul telefono
	   diventavano tre colonnine da 90px */
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	list-style: none;
	overflow: visible;
}

@media (min-width: 820px) {
	.modulo .mm-vplan-switch,
	.modulo .mm-choice-grid,
	.modulo .mm-plan-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.modulo .mm-vplan-chip,
.modulo .mm-choice,
.modulo .mm-plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0.95rem 1rem;
	background: var(--f-campo);
	border: 1px solid var(--f-linea);
	border-radius: 0;
	box-shadow: none;
	color: var(--nero);
	text-align: left;
	cursor: pointer;
	transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}

/* i colori gratis/a pagamento del plugin qui non hanno senso */
.modulo .mm-vplan-chip--free,
.modulo .mm-vplan-chip--paid,
.modulo .mm-plan-card--paid {
	background: var(--f-campo);
}

.modulo .mm-vplan-chip:hover,
.modulo .mm-choice:hover,
.modulo .mm-plan-card:hover {
	border-color: #b4b4ae;
}

.modulo .mm-vplan-chip input[type="radio"],
.modulo .mm-choice input[type="radio"],
.modulo .mm-plan-card input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Scelta fatta: bordo nero e fondo un poco più scuro. Il pieno nero
   pesava troppo su tre schede affiancate, e l'alone del plugin usciva
   dalla cornice. */
.modulo .mm-vplan-chip.is-active,
.modulo .mm-vplan-chip.is-selected,
.modulo .mm-choice.is-active,
.modulo .mm-vplan-chip:has(input:checked),
.modulo .mm-choice:has(input:checked),
.modulo .mm-plan-card:has(input:checked) {
	background-image: none;
	background-color: var(--f-scelta-attiva);
	border-color: var(--nero);
	box-shadow: inset 0 0 0 1px var(--nero);
	color: var(--nero);
}

.modulo .mm-vplan-chip:has(input:focus-visible),
.modulo .mm-choice:has(input:focus-visible) {
	outline: 2px solid var(--nero);
	outline-offset: -2px;
}

.modulo .mm-vplan-chip__name {
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
}

.modulo .mm-vplan-chip__time {
	font-family: var(--sans);
	font-size: var(--fs-small);
	line-height: 1.45;
	color: var(--f-nota);
	letter-spacing: 0;
	text-transform: none;
}

/* Il prezzo è zero e non serve dirlo tre volte */
.modulo .mm-vplan-chip__price {
	display: none;
}

/* Il badge del plugin sta in position:absolute centrato con una
   traslazione: usciva dal riquadro. Qui torna nel flusso, in cima. */
.modulo .mm-vplan-chip__flag {
	position: static;
	order: -1;
	align-self: flex-start;
	transform: none;
	left: auto;
	top: auto;
	margin: 0 0 0.5rem;
	padding: 3px 8px;
	background: none;
	border: 1px solid currentColor;
	border-radius: 0;
	color: var(--f-nota);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* «Seleziona» non serve: la scheda è cliccabile. Resta solo la conferma
   della scelta fatta, che è l'unica delle due a dire qualcosa. */
.modulo .mm-vplan-chip__pick-off {
	display: none;
}

/* Il plugin ne fa una pillola piena col gradiente del suo colore. Qui è
   una riga di testo: la scheda scelta si riconosce già dal bordo.
   Serve il selettore del plugin per intero, il suo pesa di più. */
.modulo .mm-vplan-chip__pick,
.modulo .mm-vplan-chip input:checked ~ .mm-vplan-chip__pick {
	align-self: flex-start;
	justify-content: flex-start;
	margin-top: auto;
	padding: 0.7rem 0 0;
	background: none;
	background-image: none;
	border: 0;
	border-radius: 0;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nero);
}

/* I vantaggi della scelta: un blocco a sé, staccato dalle schede */
.modulo .mm-vplan-details {
	margin: 1rem 0 0;
	padding: 1.25rem 1.4rem;
	background: var(--f-campo);
	border: 1px solid var(--f-linea);
	border-radius: 0;
}

.modulo .mm-vplan-detail {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.modulo .mm-vplan-detail ul,
.modulo .mm-val-benefits {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	color: var(--nero);
}

.modulo .mm-vplan-detail li,
.modulo .mm-val-benefits li {
	position: relative;
	padding-left: 1.15rem;
	margin-bottom: 0.6rem;
	line-height: 1.5;
}

.modulo .mm-vplan-detail li:last-child,
.modulo .mm-val-benefits li:last-child {
	margin-bottom: 0;
}

.modulo .mm-vplan-detail li::before,
.modulo .mm-val-benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 1px;
	background: var(--nero);
}

/* ---------------------------------------------------------------- campi */

.modulo .mm-form__grid {
	display: grid;
	column-gap: 1.5rem;
	row-gap: 1.35rem;
	margin-top: 1.5rem;
}

@media (min-width: 700px) {
	.modulo .mm-form__grid {
		grid-template-columns: 1fr 1fr;
	}

	.modulo .mm-field--images,
	.modulo .mm-field--privacy,
	.modulo .mm-field:has(textarea) {
		grid-column: 1 / -1;
	}
}

.modulo .mm-field {
	margin: 0;
}

.modulo label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--f-nota);
}

.modulo input[type="text"],
.modulo input[type="email"],
.modulo input[type="tel"],
.modulo input[type="url"],
.modulo input[type="number"],
.modulo select,
.modulo textarea {
	width: 100%;
	min-height: 50px;
	padding: 0.8rem 0.95rem;
	background: var(--f-campo);
	border: 1px solid var(--f-linea);
	border-radius: 0;
	box-shadow: none;
	color: var(--nero);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 200ms var(--ease);
}

.modulo textarea {
	min-height: 120px;
	resize: vertical;
}

.modulo input:focus,
.modulo select:focus,
.modulo textarea:focus {
	outline: none;
	border-color: var(--f-linea-forte);
}

.modulo input::placeholder,
.modulo textarea::placeholder {
	color: #a3a3a0;
}

.modulo .mm-field-error {
	margin-top: 0.3rem;
	font-family: var(--sans);
	font-size: var(--fs-small);
	letter-spacing: 0;
	text-transform: none;
	color: var(--nero);
}

.modulo .mm-country__toggle,
.modulo .mm-country__current,
.modulo .mm-country__select {
	border-radius: 0;
	border-color: var(--f-linea);
	background: var(--f-campo);
	color: var(--nero);
	font-family: var(--sans);
}

/* ------------------------------------------------------------- le foto */

.modulo .mm-dropzone {
	padding: 0;
	margin-block: 0.5rem 0.75rem;
	background: none;
	border: 0;
	border-radius: 0;
}

.modulo .mm-dropzone__inner {
	padding: clamp(1.75rem, 4vw, 2.75rem) 1.25rem;
	background: var(--f-campo);
	border: 1px dashed var(--f-linea);
	border-radius: 0;
	text-align: center;
	font-size: var(--fs-small);
	color: var(--f-nota);
	transition: border-color 200ms var(--ease);
}

.modulo .mm-dropzone:hover .mm-dropzone__inner,
.modulo .mm-dropzone.is-dragover .mm-dropzone__inner {
	border-color: var(--f-linea-forte);
}

.modulo .mm-images-preview img {
	border: 1px solid var(--f-linea);
	border-radius: 0;
}

/* ------------------------------------------------------------ consenso */

.modulo .mm-field--privacy {
	margin-top: 0.35rem;
	padding: 1rem 1.15rem;
	background: var(--f-campo);
	border: 1px solid var(--f-linea);
}

.modulo .mm-field--privacy label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-family: var(--sans);
	font-size: var(--fs-small);
	letter-spacing: 0;
	text-transform: none;
	color: var(--nero);
}

.modulo input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 1px 0 0;
	accent-color: var(--nero);
	flex: 0 0 auto;
}

/* -------------------------------------------------------------- bottoni */

.modulo .mm-form__actions,
.modulo .mm-form--valutazione .mm-vstep > .mm-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--f-linea);
	justify-content: flex-end;
}

/* Indietro a sinistra, avanti a destra: la direzione del gesto segue
   quella della lettura. Il plugin li impila in colonna e li allarga a
   tutta riga — due barre nere sovrapposte. */
.modulo .mm-form__actions--split,
.modulo .mm-form--valutazione .mm-form__actions--split,
.modulo .mm-form--valutazione .mm-vstep > .mm-form__actions--split {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

/* Il bottone è l'unico pieno scuro rimasto, e non è nero pieno: un grigio
   molto scuro pesa meno senza uscire dal bianco e nero (bianco su #2E2E2E
   sta a 13:1, ben sopra la soglia). 38px col mouse, 44 col dito. */
.modulo .mm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* il plugin dà «flex: 1» ai bottoni: diventavano due barre affiancate */
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	min-height: 38px;
	padding: 0.55rem 1.1rem;
	background-image: none;
	background-color: #2e2e2e;
	border: 1px solid #2e2e2e;
	border-radius: 0;
	box-shadow: none;
	color: var(--bianco);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 200ms var(--ease), color 200ms var(--ease),
		border-color 200ms var(--ease);
}

@media (pointer: coarse) {
	.modulo .mm-button {
		min-height: 44px;
	}
}

/* Il bottone «avanti» ha una regola sua nel plugin — `min-width: 210px;
   padding: 14px 30px` — che lo faceva restare un blocco anche dopo aver
   rimpicciolito tutti gli altri. */
.modulo .mm-form--valutazione .mm-button[data-mm-vnext] {
	min-width: 0;
	padding: 0.55rem 1.1rem;
	gap: 0.5rem;
}

/* Nei passi 2 e 3 il plugin scrive «width: 100%» con un selettore più
   specifico del mio: due barre impilate a tutta larghezza. Qui si pareggia
   la specificità, senza toccare il plugin. */
.modulo .mm-form--valutazione .mm-form__actions--split .mm-button {
	width: auto;
	display: inline-flex;
	/* nell'ultimo passo il plugin porta «invia» in cima con order: -1,
	   che in riga lo sposta a sinistra: indietro e avanti si scambiavano
	   di posto fra un passo e l'altro. */
	order: 0;
}

.modulo .mm-button:hover {
	background-image: none;
	background-color: var(--nero);
	border-color: var(--nero);
	color: var(--bianco);
}

.modulo .mm-button--secondary {
	background-image: none;
	background-color: transparent;
	border-color: var(--f-linea);
	color: var(--f-nota);
}

.modulo .mm-button--secondary:hover {
	background-image: none;
	background-color: transparent;
	border-color: var(--nero);
	color: var(--nero);
}

/* Sotto i 380px si impilano, ma col principale sopra */
@media (max-width: 379px) {
	.modulo .mm-form__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.modulo .mm-button {
		width: 100%;
	}
}

/* ------------------------------------------------------------- messaggi */

.modulo .mm-form-message {
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.25rem;
	background: var(--f-campo);
	border: 1px solid var(--nero);
	border-left-width: 3px;
	border-radius: 0;
	font-size: var(--fs-small);
	color: var(--nero);
}

/* --------------------------------------------- dentro la scheda gioiello */

.gioiello .modulo {
	margin-top: 1.5rem;
}

.gioiello .modulo .mm-form {
	padding: clamp(1rem, 3vw, 1.5rem);
}

.gioiello .modulo .mm-form__topbar {
	padding: 0.7rem clamp(1rem, 3vw, 1.5rem);
}

.gioiello .modulo .mm-form__grid,
.gioiello .modulo .mm-vplan-switch {
	grid-template-columns: 1fr;
}

/* ------------------------------------------------------------ movimento */

/* Il passo che entra: ogni volta che il plugin sposta mm-vstep--active,
   l'animazione riparte da sé — è il vantaggio delle animazioni sui cambi
   di classe. Lo stato base resta pieno: se questa non parte, il passo è
   comunque lì. Il contenuto sale, la testata sta ferma. */
@media (prefers-reduced-motion: no-preference) {
	.modulo .mm-form--valutazione .mm-vstep--active {
		animation: mm-passo-entra 440ms cubic-bezier(0.16, 1, 0.3, 1);
	}
}

@keyframes mm-passo-entra {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

/* Le schede delle strade rispondono al mouse col movimento: hanno aria
   vera fra loro (niente fessure da 1px da coprire), quindi possono
   alzarsi. Al dito rispondono con la pressione. */
.modulo .mm-vplan-chip,
.modulo .mm-choice,
.modulo .mm-plan-card {
	transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
		transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

@media (hover: hover) {
	.modulo .mm-vplan-chip:hover,
	.modulo .mm-choice:hover {
		transform: translateY(-2px);
	}
}

.modulo .mm-vplan-chip:active,
.modulo .mm-choice:active {
	transform: translateY(0) scale(0.995);
	transition-duration: 90ms;
}

/* I bottoni parlano la lingua del sito: il velo chiaro che sale da sotto,
   il piccolo stacco, la pressione. Il velo sta sotto il testo. */
.modulo .mm-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 200ms var(--ease), border-color 200ms var(--ease),
		transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.modulo .mm-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bianco);
	transform: scaleY(0);
	transform-origin: 50% 100%;
	transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Il «indietro» è già chiaro: il suo velo è scuro, così l'hover inverte */
.modulo .mm-button--secondary::before {
	background: var(--nero);
}

@media (hover: hover) {
	.modulo .mm-button:hover {
		background-color: #2e2e2e; /* il fondo resta: è il velo a coprirlo */
		color: var(--nero);
		transform: translateY(-2px);
	}

	.modulo .mm-button--secondary:hover {
		background-color: transparent;
		border-color: var(--nero);
		color: var(--bianco);
	}

	.modulo .mm-button:hover::before {
		transform: scaleY(1);
	}
}

.modulo .mm-button:active {
	transform: translateY(0) scale(0.985);
	transition-duration: 90ms;
}

/* Il trascinamento delle foto risponde anche col movimento, non solo col
   bordo: la zona si solleva appena mentre il file le sta sopra. */
.modulo .mm-dropzone__inner {
	transition: border-color 200ms var(--ease), transform 240ms var(--ease);
}

.modulo .mm-dropzone.is-dragover .mm-dropzone__inner {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.modulo .mm-vstep--active {
		animation: none !important;
	}

	.modulo .mm-button::before {
		transition: none;
	}

	.modulo .mm-vplan-chip,
	.modulo .mm-choice,
	.modulo .mm-button,
	.modulo .mm-dropzone__inner {
		transition: none;
	}
}