/**
 * Stile del form pubblico [generatore_manifesti]. Tutto scoped sotto
 * .mpdf-form-wrapper (custom properties incluse) per non entrare in
 * conflitto con lo stile del tema ospitante.
 */

/**
 * L'allargamento oltre la colonna di contenuto stretta è demandato alla
 * classe "alignwide" applicata a .mpdf-shortcode-root nel template PHP: sui
 * temi a blocchi (FSE) e sui temi classici con support per gli allineamenti
 * larghi, WordPress core applica da solo la regola
 * ":where(.is-layout-constrained) > .alignwide { max-width: ... }" a
 * qualunque figlio diretto del contenitore di layout — non serve (anzi, è
 * sconsigliato) reinventare un breakout via CSS custom: quello del tema
 * rispetta la larghezza "wide" scelta dal tema stesso e si comporta bene ovunque.
 * Su temi che non supportano affatto gli allineamenti larghi, la classe è
 * semplicemente ignorata e il widget resta alla larghezza normale del tema
 * (nessuna regressione). .mpdf-form-wrapper mantiene comunque il proprio
 * max-width come ulteriore tetto di sicurezza.
 */
.mpdf-shortcode-root {
	box-sizing: border-box;
}

.mpdf-form-wrapper {
	--mpdf-surface: #ffffff;
	--mpdf-surface-muted: #f7f5f1;
	--mpdf-border: #e4dfd4;
	--mpdf-text: #2f2c28;
	--mpdf-text-muted: #78736b;
	--mpdf-placeholder: #a9a49c;
	--mpdf-accent: #5c6b4f;
	--mpdf-accent-hover: #4a5740;
	--mpdf-accent-soft: #eaeee4;
	--mpdf-btn-text: #b8a369;
	--mpdf-btn-bg: #231f20;
	--mpdf-btn-bg-hover: #332d2e;
	--mpdf-success-bg: #eef3ea;
	--mpdf-success-text: #3f5732;
	--mpdf-error-bg: #fbeceb;
	--mpdf-error-text: #9a3b34;
	--mpdf-radius: 12px;
	--mpdf-radius-sm: 8px;
	--mpdf-shadow: 0 1px 2px rgba(40, 35, 25, 0.04), 0 8px 24px rgba(40, 35, 25, 0.08);
	--mpdf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	max-width: 1600px;
	margin: 0 auto;
	padding: 28px;
	font-family: var(--mpdf-font);
	color: var(--mpdf-text);
	background: var(--mpdf-surface);
	border: 1px solid var(--mpdf-border);
	border-radius: var(--mpdf-radius);
	box-shadow: var(--mpdf-shadow);
}

.mpdf-form-wrapper *,
.mpdf-form-wrapper *::before,
.mpdf-form-wrapper *::after {
	box-sizing: border-box;
}

/* --- Selettore template a scorrimento orizzontale --- */

.mpdf-template-picker {
	margin-bottom: 28px;
}

.mpdf-picker-label {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mpdf-text-muted);
}

.mpdf-picker-row {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Un flex item si rifiuta di restringersi oltre il proprio contenuto a
	   meno di min-width:0 esplicito: senza, la corsia sottostante (che ha
	   overflow interno apposta per scorrere) trascinerebbe questa riga — e a
	   cascata l'intera card — oltre la larghezza dello schermo su mobile. */
	min-width: 0;
}

.mpdf-picker-track {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 2px 8px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mpdf-picker-track::-webkit-scrollbar {
	display: none;
}

.mpdf-picker-thumb {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 136px;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
	scroll-snap-align: start;
}

.mpdf-picker-thumb-image {
	width: 136px;
	height: 100px;
	overflow: hidden;
	background: var(--mpdf-surface-muted);
	border: 2px solid var(--mpdf-border);
	border-radius: var(--mpdf-radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.mpdf-picker-thumb-image img {
	display: block;
	width: 100%;
	height: 100%;
	/* "contain", non "cover": l'immagine intera del template deve restare
	   visibile (vedi anche 'medium' invece di 'thumbnail' in PHP), non
	   ritagliata per riempire il box — eventuale spazio vuoto ai lati/sopra-
	   sotto mostra semplicemente lo sfondo del box. */
	object-fit: contain;
}

.mpdf-picker-thumb:hover .mpdf-picker-thumb-image {
	border-color: var(--mpdf-accent);
	transform: translateY(-1px);
}

.mpdf-picker-thumb:focus-visible .mpdf-picker-thumb-image {
	outline: 2px solid var(--mpdf-accent);
	outline-offset: 2px;
}

.mpdf-picker-thumb.is-selected .mpdf-picker-thumb-image {
	border-color: var(--mpdf-accent);
	box-shadow: 0 0 0 3px var(--mpdf-accent-soft);
}

.mpdf-picker-arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--mpdf-text);
	background: var(--mpdf-surface);
	border: 1px solid var(--mpdf-border);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.mpdf-picker-arrow:hover:not(:disabled) {
	background: var(--mpdf-surface-muted);
	border-color: var(--mpdf-accent);
}

.mpdf-picker-arrow:disabled {
	cursor: default;
	opacity: 0.35;
}

.mpdf-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip: rect(0, 0, 0, 0);
}

/* --- Riga a due colonne: form + anteprima ---
   Sempre affiancate finché non si scende sotto la soglia "mobile" qui sotto:
   niente flex-wrap organico (andrebbero a capo anche su viewport larghi se il
   tema ospitante limita la larghezza del contenuto), il passaggio a colonna
   singola è deciso solo dalla media query mobile. */

.mpdf-columns {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
}

.mpdf-form-column {
	/* Larghezza base leggibile per i campi di testo, non un rapporto sul
	   totale: non ha senso che gli input si allarghino insieme al container.
	   Lo spazio che si libera su schermi larghi va tutto all'anteprima. */
	flex: 0 1 420px;
	min-width: 200px;
}

.mpdf-preview-column {
	flex: 1 1 0;
	min-width: 240px;
}

.mpdf-section-heading {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mpdf-text-muted);
}

.mpdf-section-heading:not(:first-child) {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--mpdf-border);
}

/* Sezione "I tuoi dati": vive fuori da .mpdf-form-column (sopra il selettore
   template, non più nella colonna del form), quindi la regola generica
   ":not(:first-child)" qui sopra non le si applicherebbe comunque — questa
   classe esplicita evita che dipenda dalla posizione nel DOM se in futuro
   cambiasse. */
.mpdf-section-heading-first {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Nome richiedente e Riferimento telefonico affiancati su desktop, impilati
   su mobile (stesso breakpoint di .mpdf-columns, vedi sezione Responsive). */
.mpdf-contact-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	margin-bottom: 12px;
}

.mpdf-contact-row .mpdf-field {
	flex: 1 1 0;
	min-width: 0;
}

.mpdf-divider {
	margin: 24px 0;
	border: none;
	border-top: 1px solid var(--mpdf-border);
}

.mpdf-field {
	margin-bottom: 16px;
}

.mpdf-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mpdf-text);
}

.mpdf-field input[type="text"],
.mpdf-field input[type="date"],
.mpdf-field input[type="email"],
.mpdf-field input[type="tel"],
.mpdf-field select,
.mpdf-field textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: var(--mpdf-text);
	background: var(--mpdf-surface);
	border: 1px solid var(--mpdf-border);
	border-radius: var(--mpdf-radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mpdf-field textarea {
	min-height: 110px;
	line-height: 1.5;
	resize: vertical;
}

.mpdf-field input::placeholder,
.mpdf-field textarea::placeholder {
	color: var(--mpdf-placeholder);
}

.mpdf-field input:focus,
.mpdf-field select:focus,
.mpdf-field textarea:focus {
	border-color: var(--mpdf-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--mpdf-accent-soft);
}

/* --- Errore di validazione direttamente sul campo (non solo nel messaggio
   generico sotto il pulsante di invio) --- */

.mpdf-field.has-error input,
.mpdf-field.has-error select,
.mpdf-field.has-error textarea {
	border-color: var(--mpdf-error-text);
}

.mpdf-field.has-error input:focus,
.mpdf-field.has-error select:focus,
.mpdf-field.has-error textarea:focus {
	box-shadow: 0 0 0 3px var(--mpdf-error-bg);
}

.mpdf-field-error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--mpdf-error-text);
}

.mpdf-field-error[hidden] {
	display: none;
}

.mpdf-hp-wrap {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/* --- Pulsante di invio --- */

.mpdf-submit-row {
	margin-top: 22px;
	margin-bottom: 0;
}

.mpdf-submit-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 10px;
	padding: 13px 24px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--mpdf-btn-text);
	background: var(--mpdf-btn-bg);
	border: none;
	border-radius: var(--mpdf-radius-sm);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}

.mpdf-submit-btn:hover:not(:disabled) {
	background: var(--mpdf-btn-bg-hover);
}

.mpdf-submit-btn:active:not(:disabled) {
	transform: translateY(1px);
}

.mpdf-submit-btn:disabled {
	cursor: default;
	opacity: 0.7;
}

.mpdf-submit-btn-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(184, 163, 105, 0.4);
	border-top-color: var(--mpdf-btn-text);
	border-radius: 50%;
	animation: mpdf-spin 0.7s linear infinite;
}

.mpdf-submit-btn.is-loading .mpdf-submit-btn-spinner {
	display: inline-block;
}

@keyframes mpdf-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Messaggi di esito --- */

.mpdf-message {
	padding: 12px 14px;
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: var(--mpdf-radius-sm);
}

.mpdf-message[hidden] {
	display: none;
}

.mpdf-message-success {
	color: var(--mpdf-success-text);
	background: var(--mpdf-success-bg);
}

.mpdf-message-error {
	color: var(--mpdf-error-text);
	background: var(--mpdf-error-bg);
}

/* --- Toast di errore validazione (fixed: indipendente dalla posizione del
   widget nella pagina) --- */

.mpdf-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	z-index: 9999;
	max-width: calc(100vw - 32px);
	padding: 14px 20px;
	color: var(--mpdf-error-text);
	background: var(--mpdf-error-bg);
	border: 1px solid var(--mpdf-error-text);
	border-radius: var(--mpdf-radius-sm);
	box-shadow: var(--mpdf-shadow);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	transform: translate(-50%, 12px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.mpdf-toast[hidden] {
	display: none;
}

.mpdf-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* --- Vista di conferma (dopo invio riuscito) --- */

[data-mpdf="form-view"][hidden],
.mpdf-success-view[hidden] {
	display: none;
}

.mpdf-success-view {
	padding: 32px 16px 8px;
	text-align: center;
}

.mpdf-success-message {
	margin: 0 0 24px;
	font-size: 18px;
	font-weight: 600;
	color: var(--mpdf-text);
}

.mpdf-success-preview {
	max-width: 480px;
	margin: 0 auto 28px;
}

.mpdf-success-preview img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mpdf-radius);
	box-shadow: var(--mpdf-shadow);
}

.mpdf-back-btn {
	width: auto;
	min-width: 160px;
	margin: 0 auto;
}

/* --- Colonna anteprima --- */

.mpdf-preview-caption {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mpdf-text-muted);
}

/* .mpdf-preview-stage/.mpdf-preview-status sono condivisi con l'admin "Modifica
   e Rigenera" (public.css è accodato anche lì, vedi class-mpdf-admin.php),
   che però non ha l'elemento .mpdf-form-wrapper che definisce le custom
   property qui sopra. Con var() senza fallback, su quella pagina la shorthand
   "border"/"box-shadow" risulterebbe invalida a runtime e collasserebbe ai
   valori iniziali (bordo/ombra invisibili): ogni var() qui sotto porta quindi
   un fallback esplicito, identico al valore impostato su .mpdf-form-wrapper,
   così il componente resta coerente in entrambi i contesti. */
.mpdf-preview-stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--mpdf-surface-muted, #f7f5f1);
	border: 1px solid var(--mpdf-border, #e4dfd4);
	border-radius: var(--mpdf-radius, 12px);
	box-shadow: var(--mpdf-shadow, 0 1px 2px rgba(40, 35, 25, 0.04), 0 8px 24px rgba(40, 35, 25, 0.08));
}

.mpdf-preview-stage img[data-mpdf="preview-image"] {
	display: block;
	width: 100%;
	height: auto;
}

.mpdf-preview-box {
	position: absolute;
	overflow: hidden;
	line-height: 1.25;
	color: #000;
	white-space: pre-wrap;
}

.mpdf-preview-box[data-mpdf-box="testo"],
.mpdf-preview-box[data-mpdf-box="nome"] {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.mpdf-preview-status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-size: 14px;
	color: var(--mpdf-error-text, #9a3b34);
	text-align: center;
}

/* --- Responsive --- */

@media (max-width: 640px) {
	.mpdf-form-wrapper {
		padding: 18px;
	}

	.mpdf-columns {
		flex-direction: column;
	}

	.mpdf-contact-row {
		flex-direction: column;
		gap: 0;
	}

	/* In colonna il flex-basis:0 pensato per la ripartizione orizzontale non
	   serve più (e con un container senza altezza fissa non farebbe nulla di
	   utile): torniamo ad auto perché ciascun blocco assuma la propria
	   altezza naturale, form sopra e anteprima sotto (ordine nel DOM). */
	.mpdf-form-column,
	.mpdf-preview-column {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mpdf-picker-thumb,
	.mpdf-picker-thumb-image {
		width: 112px;
	}

	.mpdf-picker-thumb-image {
		height: 82px;
	}
}