/* MaltaQuotes theme styles — local, no remote dependencies. */

:root {
	/* Palette ispirata a Malta e Gozo: pietra calcarea, mare mediterraneo, luzzu. */
	--mq-color-limestone: #f6efdd;
	--mq-color-limestone-deep: #ebdfc0;
	--mq-color-sea: #0e4f5c;
	--mq-color-sea-dark: #082f38;
	--mq-color-petrol: #0b4566;
	--mq-color-petrol-dark: #062c44;
	--mq-color-terracotta: #c1502e;
	--mq-color-terracotta-dark: #96391f;
	--mq-color-gold: #d9a441;
	--mq-color-gold-dark: #a97a25;
	--mq-color-ink: #1c2321;
	--mq-color-ink-muted: #4c5a56;
	--mq-color-bg: #fffdf8;
	--mq-color-bg-alt: var(--mq-color-limestone);
	--mq-color-border: #ddd0ab;
	/* Primario = blu petrolio; secondario = stesso blu, solo bordato. Terracotta resta piccolo accento (eyebrow, focus, badge). */
	--mq-color-primary: var(--mq-color-petrol);
	--mq-color-primary-dark: var(--mq-color-petrol-dark);

	/*
	 * Token semantici (Fase Design): stessi valori esadecimali già in uso
	 * sparsi in .notice/.status-badge da Fase 1 a Fase 6, ora nominati una
	 * volta sola così ogni nuovo componente li riusa invece di ricopiarli.
	 */
	--mq-color-success: #275c31;
	--mq-color-success-bg: #e9f4ea;
	--mq-color-success-border: #bfe0c4;
	--mq-color-warning: #8a6c1d;
	--mq-color-warning-bg: #fdf3d9;
	--mq-color-warning-border: #f2dfa3;
	--mq-color-danger: #8a2c1c;
	--mq-color-danger-bg: #fdecea;
	--mq-color-danger-border: #f3c3ba;
	--mq-color-info: #0e4f5c;
	--mq-color-info-bg: #e4eef6;
	--mq-color-info-border: #c9dcec;

	/* Scala di spaziatura: sostituisce i valori px sparsi con incrementi coerenti. */
	--mq-space-1: 4px;
	--mq-space-2: 8px;
	--mq-space-3: 12px;
	--mq-space-4: 16px;
	--mq-space-5: 20px;
	--mq-space-6: 24px;
	--mq-space-7: 32px;
	--mq-space-8: 48px;
	--mq-space-9: 64px;
	--mq-space-10: 96px;

	/* Raggi ed elevazioni: --mq-radius resta il raggio "standard" già usato ovunque. */
	--mq-radius-sm: 8px;
	--mq-radius: 12px;
	--mq-radius-lg: 20px;
	--mq-radius-arch: 50% 50% 8px 8px;
	--mq-shadow-sm: 0 1px 3px rgba(8, 47, 56, 0.08);
	--mq-shadow: 0 4px 18px rgba(8, 47, 56, 0.1);
	--mq-shadow-lg: 0 16px 40px rgba(8, 47, 56, 0.16);

	--mq-max-width: 1160px;
	--mq-max-width-wide: 1360px;
	--mq-font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
	--mq-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Scala tipografica: base 16px, rapporto ~1.2 (minor third), clamp per i titoli più grandi. */
	--mq-text-xs: 0.8rem;
	--mq-text-sm: 0.9rem;
	--mq-text-base: 1rem;
	--mq-text-md: 1.15rem;
	--mq-text-lg: 1.35rem;
	--mq-text-xl: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
	--mq-text-2xl: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
	--mq-text-3xl: clamp(2.3rem, 1.7rem + 3vw, 3.6rem);

	--mq-transition-fast: 150ms ease;
	--mq-transition: 200ms ease;
	--mq-transition-slow: 320ms ease;
	--mq-touch-target: 44px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--mq-transition-fast: 0ms;
		--mq-transition: 0ms;
		--mq-transition-slow: 0ms;
	}
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--mq-font-base);
	color: var(--mq-color-ink);
	background: var(--mq-color-bg);
	line-height: 1.55;
}

/*
 * Titoli di base: copre ogni h1-h6 che non ha già una classe dedicata
 * (.hero__title, .section-title, .catalog-hero h1, ...). Prima di questa
 * regola i titoli "nudi" delle schermate applicative (wizard, aree
 * cliente/professionista, crediti, chat, recensioni — Fasi 2-6) cadevano
 * sul serif di default del browser, scollegati dal resto del sito: le
 * classi più specifiche già esistenti continuano a vincere sulla cascata.
 */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mq-font-display);
	color: var(--mq-color-sea-dark);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--mq-space-4);
}

h1 {
	font-size: var(--mq-text-3xl);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

h2 {
	font-size: var(--mq-text-2xl);
	line-height: 1.15;
}

h3 {
	font-size: var(--mq-text-xl);
	margin-top: var(--mq-space-7);
}

h4 {
	font-size: var(--mq-text-md);
}

h5, h6 {
	font-family: var(--mq-font-base);
	font-size: var(--mq-text-base);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mq-color-ink-muted);
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child {
	margin-top: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--mq-color-sea);
}

a:hover,
a:focus {
	color: var(--mq-color-sea-dark);
}

:focus-visible {
	outline: 3px solid var(--mq-color-terracotta);
	outline-offset: 2px;
}

.container {
	max-width: var(--mq-max-width);
	margin-inline: auto;
	padding-inline: 20px;
}

#servizi-popolari,
#come-funziona,
#diventa-professionista {
	scroll-margin-top: 88px;
}

/* Screen-reader / skip link utilities */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	background: var(--mq-color-sea);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}

.skip-link:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	clip: auto;
	border-radius: var(--mq-radius);
}

/* Eyebrow label */
.eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mq-color-terracotta);
	margin: 0 0 14px;
}

.eyebrow--center {
	text-align: center;
}

.eyebrow--on-dark {
	color: var(--mq-color-gold);
}

/* Header */
.site-header {
	border-bottom: 1px solid var(--mq-color-border);
	background: var(--mq-color-bg);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header__inner {
	max-width: var(--mq-max-width);
	margin-inline: auto;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.site-branding {
	margin: 0;
}

.site-branding__link {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--mq-color-sea-dark);
}

.site-branding__mark {
	color: var(--mq-color-sea);
}

.site-branding__logo {
	font-family: var(--mq-font-display);
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--mq-color-sea-dark);
	letter-spacing: -0.01em;
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.primary-menu,
.footer-menu {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.primary-menu a,
.footer-menu a {
	text-decoration: none;
	color: var(--mq-color-ink);
	font-weight: 600;
	font-size: 1.02rem;
}

.primary-menu a:hover,
.footer-menu a:hover {
	color: var(--mq-color-sea);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	background: transparent;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	height: 2px;
	margin-inline: 10px;
	background: var(--mq-color-ink);
	border-radius: 2px;
}

/* Buttons */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mq-touch-target);
	padding: 12px 22px;
	border-radius: var(--mq-radius);
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	font-size: 0.98rem;
	cursor: pointer;
	transition: background-color var(--mq-transition-fast), color var(--mq-transition-fast), border-color var(--mq-transition-fast), transform var(--mq-transition-fast), box-shadow var(--mq-transition-fast);
}

.button:active {
	transform: translateY(0) scale(0.98);
}

/* Il target di tocco resta 44px anche in versione "small": si riduce solo il
   padding visivo, l'area cliccabile minima non scende mai sotto la soglia
   di accessibilità (ui-ux-pro-max: touch target 44x44px). */
.button--small {
	min-height: var(--mq-touch-target);
	padding: 8px 16px;
	font-size: 0.92rem;
}

.button--large {
	min-height: 52px;
	padding: 16px 32px;
	font-size: 1.08rem;
}

.button--primary {
	background: var(--mq-color-primary);
	color: #fff9f0;
	box-shadow: var(--mq-shadow-sm);
}

.button--primary:hover,
.button--primary:focus {
	background: var(--mq-color-primary-dark);
	color: #fff9f0;
	transform: translateY(-1px);
	box-shadow: var(--mq-shadow);
}

.button--secondary {
	background: transparent;
	color: var(--mq-color-primary);
	border-color: var(--mq-color-primary);
}

.button--secondary:hover,
.button--secondary:focus {
	background: var(--mq-color-primary);
	color: #fff;
}

.button--ghost {
	background: transparent;
	color: var(--mq-color-primary);
	border-color: var(--mq-color-border);
}

.button--ghost:hover,
.button--ghost:focus {
	border-color: var(--mq-color-primary);
	color: var(--mq-color-primary);
}

.button--ghost.button--on-dark {
	color: #f6efdd;
	border-color: rgba(246, 239, 221, 0.4);
}

/*
 * Azione irreversibile ("Elimina richiesta"). Modificatore, non un pulsante a
 * sé: la forma e l'ingombro restano quelli dei vicini, cambia soltanto il
 * colore. Un pulsante distruttivo che fosse anche più grande o più pieno degli
 * altri attirerebbe il clic invece di scoraggiarlo — resta un fantasma come
 * "Nascondi", e a fare la differenza sono il colore e la conferma esplicita.
 *
 * Il rosso è quello dei token semantici già in uso nei messaggi d'errore, e sul
 * fondo chiaro del sito supera 4.5:1: il colore è un rinforzo, non l'unico
 * segnale — l'etichetta dice già "Elimina".
 */
.button--danger {
	color: var(--mq-color-danger);
	border-color: var(--mq-color-danger-border);
}

.button--danger:hover,
.button--danger:focus {
	color: var(--mq-color-danger);
	border-color: var(--mq-color-danger);
	background: var(--mq-color-danger-bg);
}

/* Badge numerico di notifiche non lette accanto ai link dell'header. */
.nav-unread-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 6px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--mq-color-terracotta);
	color: #fff9f0;
	font-size: 0.72rem;
	font-weight: 800;
	vertical-align: middle;
}

.button--ghost.button--on-dark:hover,
.button--ghost.button--on-dark:focus {
	border-color: #f6efdd;
	color: #fff;
}

/* Hero */
.hero {
	position: relative;
	width: 100%;
	background: linear-gradient(180deg, var(--mq-color-limestone) 0%, var(--mq-color-bg) 100%);
	padding: 56px 0 68px;
	text-align: center;
	overflow: hidden;
}

.hero__inner {
	position: relative;
	z-index: 1;
}

.hero__content {
	max-width: 720px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.hero__media {
	position: relative;
	max-width: 480px;
	margin: 40px auto 0;
}

.hero__media-img {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow);
}

.hero__title {
	font-family: var(--mq-font-display);
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	line-height: 1.1;
	margin: 0 0 18px;
	color: var(--mq-color-sea-dark);
	letter-spacing: -0.01em;
}

.hero__subtitle {
	max-width: 620px;
	margin: 0 auto 34px;
	color: var(--mq-color-ink-muted);
	font-size: clamp(1.12rem, 1.4vw, 1.24rem);
}

.hero__search {
	display: flex;
	max-width: 580px;
	margin: 0 auto 34px;
	gap: 8px;
	background: #fff;
	padding: 8px;
	border-radius: var(--mq-radius);
	border: 1px solid var(--mq-color-border);
	box-shadow: var(--mq-shadow);
}

.hero__search-input {
	flex: 1;
	border: none;
	padding: 14px 16px;
	font-size: 1.02rem;
	border-radius: 6px;
	background: transparent;
	font-family: inherit;
}

.hero__search-input:disabled,
.hero__search-button:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.hero__search-button {
	border: none;
	background: var(--mq-color-primary);
	color: #fff;
	font-weight: 700;
	padding: 14px 26px;
	border-radius: 6px;
	font-size: 1rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-bottom: 22px;
}

.hero__trust {
	font-size: 0.9rem;
	color: var(--mq-color-ink-muted);
	max-width: 480px;
	margin: 0 auto;
}

.hero__divider {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 44px;
	color: var(--mq-color-bg);
	fill: currentColor;
}

@media (min-width: 992px) {
	.hero {
		text-align: left;
		padding: 0;
		display: flex;
		align-items: center;
		min-height: 660px;
	}

	.hero__inner {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: center;
		gap: 48px;
	}

	.hero__content {
		margin-inline: 0;
		max-width: 580px;
	}

	.hero__subtitle {
		margin-inline: 0;
	}

	.hero__search {
		margin-inline: 0;
		max-width: 620px;
	}

	.hero__actions {
		justify-content: flex-start;
	}

	.hero__trust {
		margin-inline: 0;
	}

	.hero__media {
		width: min(680px, 48vw);
		max-width: none;
		margin: 0;
		justify-self: end;
	}

	.hero__media-img {
		height: auto;
		max-height: none;
		object-fit: contain;
	}
}

@media (min-width: 1400px) {
	:root {
		--mq-max-width: var(--mq-max-width-wide);
	}
}

/* Sections */
.section-title {
	font-family: var(--mq-font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	text-align: center;
	margin: 0 0 8px;
	color: var(--mq-color-sea-dark);
}

.section-title--on-dark {
	color: #fff;
}

.section-subtitle {
	text-align: center;
	color: var(--mq-color-ink-muted);
	margin: 0 auto 40px;
	max-width: 560px;
}

.services {
	padding: 72px 0;
}

.services__grid {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.service-card {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.service-card__link {
	display: flex;
	align-items: center;
	gap: 16px;
	color: inherit;
	text-decoration: none;
}

.service-card__link:focus-visible {
	outline: 2px solid var(--mq-color-primary);
	outline-offset: 4px;
	border-radius: 4px;
}

.service-card:hover,
.service-card:focus-within {
	border-color: var(--mq-color-primary);
	box-shadow: var(--mq-shadow);
	transform: translateY(-3px);
}

/* Badge ad arco: richiama le finestre e i portali in pietra calcarea maltesi. */
.service-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 50% 50% 8px 8px;
	background: var(--mq-color-limestone);
	color: var(--mq-color-primary);
	box-shadow: inset 0 0 0 1px rgba(11, 69, 102, 0.08);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.service-card:hover .service-card__icon,
.service-card:focus-within .service-card__icon {
	background: var(--mq-color-primary);
	color: #fff9f0;
}

.service-card__name {
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.3;
}

.services__empty {
	padding: 40px;
	text-align: center;
	background: var(--mq-color-limestone);
	border-radius: var(--mq-radius);
	margin: 0 0 40px;
}

.services__footer {
	text-align: center;
}

/* Blocco pubblico "Proponi un servizio" (in fondo al catalogo servizi della
 * homepage, prima delle fasce scure successive): volutamente chiaro e
 * discreto, per restare distinto dalle CTA scure ("Non sai cosa scegliere?"
 * nel catalogo completo, "Diventa professionista" più sotto in homepage). */
.propose-service {
	padding: 48px 0;
}

.propose-service__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	background: var(--mq-color-limestone);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	padding: 32px 36px;
}

.propose-service__text .eyebrow {
	margin-bottom: 6px;
}

.propose-service__title {
	margin: 0 0 8px;
	font-size: 1.3rem;
	color: var(--mq-color-sea-dark);
}

.propose-service__text p:last-child {
	margin: 0;
	color: var(--mq-color-ink-muted);
	max-width: 560px;
}

.propose-service__inner .button {
	flex-shrink: 0;
}

.propose-service__notice {
	margin: 16px 0 0;
	padding: 14px 18px;
	border-radius: var(--mq-radius);
	font-size: 0.95rem;
}

.propose-service__notice--success {
	background: var(--mq-color-success-bg);
	border: 1px solid var(--mq-color-success-border);
	color: var(--mq-color-success);
}

.propose-service__notice--error {
	background: var(--mq-color-danger-bg);
	border: 1px solid var(--mq-color-danger-border);
	color: var(--mq-color-danger);
}

/* Campo trappola anti-spam: invisibile e non raggiungibile da tastiera per
 * un visitatore umano, ma presente nel markup per i bot che compilano tutti
 * i campi di un form (vedi MQ_Service_Proposals::submit()). */
.propose-service__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 720px) {
	.propose-service__inner {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.propose-service__inner .button {
		width: 100%;
	}
}

/* Modale "Proponi un servizio": <dialog> nativo, nessuna libreria esterna. */
.modal {
	width: min(560px, calc(100vw - 32px));
	max-height: min(720px, calc(100vh - 48px));
	overflow-y: auto;
	border: none;
	border-radius: var(--mq-radius);
	padding: 32px;
	box-shadow: 0 24px 60px rgba(28, 35, 33, 0.28);
}

.modal::backdrop {
	background: rgba(28, 35, 33, 0.55);
}

.modal__form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.modal h2 {
	margin: 0 0 8px;
	color: var(--mq-color-sea-dark);
	padding-right: 32px;
}

.modal__intro {
	margin: 0 0 12px;
	color: var(--mq-color-ink-muted);
}

.modal__close {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--mq-color-ink-muted);
	cursor: pointer;
}

.modal__close:hover,
.modal__close:focus {
	color: var(--mq-color-terracotta);
}

.how-it-works {
	padding: 72px 0;
	background: var(--mq-color-bg-alt);
}

.how-it-works__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	counter-reset: step;
}

.how-it-works__step {
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	padding: 30px 22px;
	text-align: center;
}

.how-it-works__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mq-color-sea);
	color: #fff;
	font-weight: 800;
	font-size: 1.1rem;
	margin-bottom: 16px;
}

.how-it-works__title {
	margin: 0 0 8px;
	font-size: 1.15rem;
	color: var(--mq-color-sea-dark);
}

/* CTA fornitori */
.cta-professional {
	padding: 76px 0;
	text-align: center;
	background: var(--mq-color-sea-dark);
	background-image:
		radial-gradient(circle at 18% 24%, rgba(217, 164, 65, 0.16), transparent 40%),
		radial-gradient(circle at 82% 76%, rgba(217, 164, 65, 0.12), transparent 42%);
	color: #f6efdd;
}

.cta-professional__mark {
	display: inline-flex;
	color: var(--mq-color-gold);
	margin-bottom: 18px;
}

.cta-professional__inner p {
	color: #d7e2df;
	max-width: 540px;
	margin: 0 auto 28px;
	font-size: 1.05rem;
}

.cta-professional__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* Fallback post loop (index.php) */
.site-main {
	min-height: 40vh;
}

/* Catalogo completo dei servizi */
.catalog-hero {
	padding: 68px 0 72px;
	background: var(--mq-color-limestone);
	background-image: radial-gradient(circle at 88% 20%, rgba(217, 164, 65, 0.22), transparent 28%);
	border-bottom: 1px solid var(--mq-color-border);
}

.catalog-hero__inner {
	max-width: 800px;
	text-align: center;
}

.catalog-hero h1 {
	margin: 0;
	font-family: var(--mq-font-display);
	font-size: clamp(2.4rem, 6vw, 4.4rem);
	line-height: 1.05;
	color: var(--mq-color-sea-dark);
}

.catalog-hero p:not(.eyebrow) {
	margin: 18px auto 28px;
	max-width: 620px;
	font-size: 1.12rem;
	color: var(--mq-color-ink-muted);
}

.catalog-search {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 650px;
	margin: 0 auto;
	padding: 6px 8px 6px 18px;
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: 999px;
	box-shadow: var(--mq-shadow);
	color: var(--mq-color-sea);
}

.catalog-search input {
	width: 100%;
	padding: 12px 8px;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	color: var(--mq-color-ink);
}

.catalog-content {
	padding: 72px 0 82px;
}

.catalog-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 30px;
}

.catalog-heading h2,
.catalog-cta h2 {
	margin: 0;
	font-family: var(--mq-font-display);
	color: var(--mq-color-sea-dark);
}

.catalog-heading h2 {
	font-size: clamp(2rem, 4vw, 3rem);
}

.catalog-heading > p {
	margin: 0 0 8px;
	color: var(--mq-color-ink-muted);
}

.catalog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.catalog-card {
	padding: 26px;
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: 0 2px 12px rgba(8, 47, 56, 0.06);
}

.catalog-card[hidden] {
	display: none;
}

.catalog-card__header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 16px;
}

.catalog-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	border-radius: 50% 50% 7px 7px;
	background: var(--mq-color-limestone);
	color: var(--mq-color-terracotta-dark);
	font-weight: 800;
}

.catalog-card h3 {
	margin: 3px 0 0;
	font-family: var(--mq-font-display);
	font-size: 1.28rem;
	line-height: 1.25;
}

.catalog-card h3 a {
	color: var(--mq-color-sea-dark);
	text-decoration: none;
}

.catalog-card ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 56px;
}

.catalog-card li + li {
	margin-top: 7px;
}

.catalog-card li::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 9px 2px 0;
	border-radius: 50%;
	background: var(--mq-color-gold);
}

.catalog-card li a {
	color: var(--mq-color-ink-muted);
	text-decoration: none;
}

.catalog-card li a:hover {
	color: var(--mq-color-sea);
	text-decoration: underline;
}

.catalog-empty {
	padding: 40px;
	text-align: center;
	background: var(--mq-color-limestone);
	border-radius: var(--mq-radius);
}

.catalog-cta {
	padding: 58px 0;
	background: var(--mq-color-sea-dark);
	color: #fff;
}

.catalog-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.catalog-cta h2 {
	max-width: 720px;
	font-size: clamp(1.65rem, 3vw, 2.5rem);
	color: #fff;
}

/* The catalog already ends with a dark CTA: avoid stacking the footer spacing
 * into what looks like a large empty green block, especially on phones. */
.catalog-page + .site-footer {
	margin-top: 0;
}

.post-preview {
	padding: 24px 0;
	border-bottom: 1px solid var(--mq-color-border);
}

.post-preview__title {
	margin: 0 0 8px;
}

/* Footer */
.site-footer {
	background: var(--mq-color-sea-dark);
	color: #d7e6e1;
	padding: 48px 0 24px;
	margin-top: 40px;
}

.site-footer__inner {
	max-width: var(--mq-max-width);
	margin-inline: auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.site-footer .site-branding__logo {
	color: #fff;
}

.site-footer__tagline {
	color: #a9c2bb;
	margin: 6px 0 0;
}

.site-footer__nav .footer-menu a {
	color: #d7e6e1;
}

.site-footer__copy {
	color: #7f9891;
	font-size: 0.85rem;
	margin: 12px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 16px;
}

/* Responsive */
@media (max-width: 782px) {
	.nav-toggle {
		display: inline-flex;
	}

	.site-header__menu {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	/*
	 * Nel pre-lancio il Fondatore usa un'intestazione ridotta, e anche il suo
	 * menu deve comportarsi come un vero menu mobile: chiuso finché non lo si
	 * apre, e apribile dal pulsante.
	 *
	 * **Il selettore è scritto così per una ragione precisa.** Più in basso in
	 * questo stesso foglio (sezione «Intestazione ridotta») vive
	 * `.site-header--prelancio .site-header__menu--prelancio { display: flex }`,
	 * che ha due classi. Un `.site-header__menu--founder { display: none }` ne
	 * ha una sola: perde per specificità, e perdeva **in silenzio** — il menu
	 * restava aperto a schermo chiuso, con lingua e «Esci» impilati sotto il
	 * marchio, cioè esattamente il difetto che questa regola doveva togliere,
	 * mentre il pulsante sembrava non fare niente.
	 *
	 * Con l'antenato e il `:not()` la regola vale tre classi e non dipende più
	 * dall'ordine dei blocchi nel file: quando `.is-open` c'è la regola smette
	 * di applicarsi da sé e riemerge il `display: flex` di base. Una regola
	 * sola, e nessuna coppia da tenere allineata.
	 */
	.site-header--prelancio .site-header__menu--founder:not(.is-open) {
		display: none;
	}

	.site-header__menu--founder .site-header__actions {
		/* Le voci del menu partono da sinistra: allineate al centro
		   sembravano un blocco staccato. */
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	/*
	 * Ogni destinazione occupa la sua riga (2026-08-24).
	 *
	 * Nel sito aperto i pulsanti di questa barra sono `flex: 1 1 auto` e vanno
	 * a capo insieme, perché sono etichette brevi. Qui la più lunga è «La mia
	 * area professionista»: a 320px, divisa in due colonne, si spezzava in
	 * quattro righe dentro un bordo alto il doppio del suo vicino. Una riga
	 * ciascuno costa una scorrevolata in più su un menu di tre voci e rende
	 * ogni bersaglio largo quanto lo schermo.
	 */
	.site-header__menu--founder .site-header__actions .button {
		flex: 1 0 100%;
		/*
		 * E il testo resta centrato **anche quando va a capo**. `.button`
		 * centra con `justify-content`, che allinea le righe come blocco ma non
		 * il testo dentro di esse: su un'etichetta di due righe — «Iż-żona
		 * tiegħi tal-professjonist» in maltese — la seconda riga tornava a
		 * sinistra e il pulsante sembrava disallineato accanto ai vicini a una
		 * riga. È lo stesso rimedio che `.mq-founder-panel .button` usa già per
		 * lo stesso motivo.
		 */
		text-align: center;
	}

	.mq-founder-panel .status-badge {
		max-width: 100%;
		white-space: normal;
	}

	/*
	 * L'invito all'azione a tutta larghezza: su telefono un pulsante largo
	 * quanto il suo testo è un bersaglio che si manca, e qui è l'unica cosa
	 * che il Fondatore deve fare.
	 */
	.mq-founder-panel .button {
		width: 100%;
		white-space: normal;
		text-align: center;
	}

	.primary-navigation {
		display: none;
		width: 100%;
		order: 1;
	}

	.primary-navigation.is-open {
		display: block;
	}

	.primary-menu {
		flex-direction: column;
		gap: 4px;
		padding: 8px 0 4px;
	}

	/*
	 * Le voci del menu aperto sono **bersagli**, non testo (2026-08-24).
	 *
	 * A riposo erano alte 19 pixel: sotto il minimo di 24 delle linee guida e
	 * lontanissime dai 44 che questo stesso tema si è dato in
	 * `--mq-touch-target` e che i pulsanti rispettano già.
	 *
	 * Riguarda il menu del **sito aperto**: l'intestazione ridotta del
	 * Fondatore non usa più queste voci, perché le sue destinazioni sono
	 * diventate pulsanti (vedi `header.php`, 2026-08-24).
	 *
	 * Il collegamento diventa la riga intera: si prende con il pollice senza
	 * mirare, e chi arriva da tastiera vede un contorno di fuoco che segue un
	 * rettangolo, non tre parole.
	 */
	.primary-menu a {
		display: flex;
		align-items: center;
		min-height: var(--mq-touch-target);
		padding-inline: var(--mq-space-2);
		margin-inline: calc( var(--mq-space-2) * -1 );
		border-radius: var(--mq-radius);
	}

	.site-header__actions {
		order: 2;
		width: 100%;
		/*
		 * La riga va a capo (correzione 2026-08-18).
		 *
		 * Questa regola era stata scritta quando in quella riga c'erano due
		 * pulsanti. Oggi, con la sessione aperta, ce ne sono tre — «Le mie
		 * richieste», l'area professionista quando c'è, «Esci» — e davanti a
		 * loro il selettore della lingua. Su uno schermo da 390px la somma fa
		 * 454px in una riga da 350, e con `nowrap` non c'è modo di starci:
		 * misurato in collaudo, la pagina sfondava di 84px e «Esci» finiva
		 * fuori dallo schermo. Chi entrava dal telefono non riusciva a uscire.
		 *
		 * `flex: 1` da solo non basta: un elemento flessibile non si stringe
		 * sotto la larghezza del proprio contenuto finché `min-width` resta
		 * `auto`, ed è il motivo per cui la regola sembrava già corretta.
		 */
		flex-wrap: wrap;
	}

	.site-header__actions .button {
		flex: 1 1 auto;
		min-width: 0;
	}

	.site-header__actions .language-switcher {
		flex: 1 0 100%;
	}

	.services__grid {
		grid-template-columns: 1fr;
	}

	.how-it-works__steps {
		grid-template-columns: 1fr;
	}

	.hero {
		padding: 56px 0 70px;
	}

	.hero__search {
		flex-direction: column;
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .button {
		width: 100%;
	}

	.cta-professional__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cta-professional__actions .button {
		width: 100%;
	}

	.catalog-hero {
		padding: 48px 0 52px;
	}

	.catalog-content {
		padding: 52px 0 60px;
	}

	.catalog-heading,
	.catalog-cta__inner {
		align-items: stretch;
		flex-direction: column;
	}

	.catalog-grid {
		grid-template-columns: 1fr;
	}

	.catalog-card {
		padding: 22px 18px;
	}

	.catalog-card ul {
		padding-left: 0;
	}

	.catalog-cta {
		padding: 42px 0;
	}

	.catalog-page + .site-footer {
		padding-top: 32px;
	}
}

@media (min-width: 783px) {
	.primary-navigation {
		display: block !important;
	}

	.site-header__menu {
		display: flex !important;
	}
}

@media (min-width: 620px) and (max-width: 980px) {
	.services__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 981px) {
	.services__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1400px) {
	.services__grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ==========================================================================
   Wizard richiesta e area cliente (Fase 2)
   ========================================================================== */

.wizard-steps {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 22px 0 0;
	padding: 0;
	justify-content: center;
}

.wizard-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--mq-color-ink-muted);
}

.wizard-steps .wizard-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--mq-radius-arch);
	background: #fff;
	border: 1px solid var(--mq-color-border);
	font-size: 0.85rem;
	transition: background-color var(--mq-transition), border-color var(--mq-transition), color var(--mq-transition);
}

.wizard-steps li.is-current {
	color: var(--mq-color-sea-dark);
}

.wizard-steps li.is-current .wizard-steps__number {
	background: var(--mq-color-primary);
	border-color: var(--mq-color-primary);
	color: #fff9f0;
}

.wizard-steps li.is-done {
	color: var(--mq-color-ink-muted);
}

.wizard-steps li.is-done .wizard-steps__number {
	background: var(--mq-color-limestone-deep);
	border-color: var(--mq-color-border);
	font-size: 0;
}

.wizard-steps li.is-done .wizard-steps__number::after {
	content: "✓";
	font-size: 0.9rem;
	color: var(--mq-color-sea-dark);
}

.draft-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px;
	margin-bottom: 32px;
	background: #fff;
	border: 1px solid var(--mq-color-limestone-deep);
	border-left: 4px solid var(--mq-color-gold);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
}

.draft-banner p {
	margin: 0;
	color: var(--mq-color-ink-muted);
}

.draft-banner strong {
	color: var(--mq-color-sea-dark);
}

/*
 * L'avviso è un **blocco**, non una riga di colonne (correzione 2026-08-24).
 *
 * Per un giro `.notice` è stato `display: flex`, e finché dentro c'era una sola
 * frase la differenza non si vedeva. Ma un avviso con più paragrafi — il
 * pannello del Fondatore ne ha quattro, la scheda «stato della pratica» due —
 * trasforma ogni paragrafo in una **colonna affiancata**: su telefono ognuna
 * finiva larga cinquanta pixel e il testo si incolonnava una lettera per riga.
 * Non era un difetto del pannello, era il difetto di tutti gli avvisi lunghi
 * del sito, e su ogni larghezza: a 1280px le quattro colonne c'erano lo stesso,
 * solo abbastanza larghe da sembrare una scelta.
 *
 * C'era anche un secondo effetto, più insidioso: dentro un contenitore flessibile
 * anche un `<strong>` in mezzo a una frase diventa un elemento a sé, quindi la
 * forma `<p class="notice">Testo <strong>in rilievo</strong> altro</p>` — che nel
 * tema è la più diffusa — era già a un carattere di distanza dal rompersi.
 *
 * Qui l'icona esce dal flusso e va nel margine, che è l'unica cosa per cui
 * serviva il contenitore flessibile. Tutto il resto torna a impaginarsi come
 * testo normale: i paragrafi si impilano, le frasi restano frasi.
 */
.notice {
	position: relative;
	padding: var(--mq-space-4) var(--mq-space-5);
	/* Lo spazio dell'icona più la distanza dal testo: il rientro vale per ogni
	   riga di ogni paragrafo, non solo per la prima. */
	padding-inline-start: calc( var(--mq-space-5) + 20px + var(--mq-space-3) );
	border-radius: var(--mq-radius);
	margin-bottom: var(--mq-space-6);
	font-size: var(--mq-text-sm);
	line-height: 1.5;
}

.notice::before {
	content: "";
	position: absolute;
	inset-block-start: calc( var(--mq-space-4) + 1px );
	inset-inline-start: var(--mq-space-5);
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--mq-notice-icon) center / contain no-repeat;
	mask: var(--mq-notice-icon) center / contain no-repeat;
}

/*
 * I margini dei paragrafi restano fra un paragrafo e l'altro, ma non ai bordi:
 * lì c'è già il padding dell'avviso, e sommarli faceva sembrare l'icona
 * scollata dalla prima riga.
 */
.notice > :first-child {
	margin-top: 0;
}

.notice > :last-child {
	margin-bottom: 0;
}

/*
 * Il pannello del Fondatore: titolo e pastiglia di stato sulla stessa riga
 * finché ci stanno, incolonnati quando non ci stanno. La riga vale a **ogni**
 * larghezza e non solo su telefono, perché la pastiglia può essere lunga
 * («Profilo da completare» in maltese lo è) e mandare a capo un elemento in
 * mezzo a una frase inline lo spezzerebbe male comunque.
 */
.mq-founder-panel__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mq-space-2);
}

.notice--error {
	background: var(--mq-color-danger-bg);
	color: var(--mq-color-danger);
	border: 1px solid var(--mq-color-danger-border);
	--mq-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01' stroke-linecap='round'/%3E%3C/svg%3E");
}

.notice--success {
	background: var(--mq-color-success-bg);
	color: var(--mq-color-success);
	border: 1px solid var(--mq-color-success-border);
	--mq-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m4 12 6 6L20 6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.notice--warning {
	background: var(--mq-color-warning-bg);
	color: var(--mq-color-warning);
	border: 1px solid var(--mq-color-warning-border);
	--mq-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3 2 20h20Z' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4M12 17h.01' stroke-linecap='round'/%3E%3C/svg%3E");
}

.notice--info {
	background: var(--mq-color-info-bg);
	color: var(--mq-color-info);
	border: 1px solid var(--mq-color-info-border);
	--mq-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01' stroke-linecap='round'/%3E%3C/svg%3E");
}

.option-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.option-card {
	display: block;
	min-height: var(--mq-touch-target);
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
	color: var(--mq-color-ink);
	text-decoration: none;
	font-weight: 600;
	transition: border-color var(--mq-transition-fast), transform var(--mq-transition-fast), box-shadow var(--mq-transition-fast);
}

.option-card:hover,
.option-card:focus-visible {
	border-color: var(--mq-color-primary);
	box-shadow: var(--mq-shadow);
	transform: translateY(-2px);
	color: var(--mq-color-primary);
}

.wizard-back {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--mq-color-ink-muted);
	text-decoration: none;
	font-size: 0.92rem;
}

.wizard-back:hover {
	color: var(--mq-color-primary);
}

.mq-form {
	max-width: 640px;
}

.mq-form + .mq-form {
	margin-top: 28px;
}

.form-field {
	margin-bottom: 20px;
}

.form-field label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--mq-color-sea-dark);
}

/*
 * Le note esplicative (2026-08-14). La regola era scritta come
 * `.form-field .form-hint`, quindi valeva solo dentro un campo di modulo:
 * gli stessi `.form-hint` usati come nota sotto un elenco — nelle due aree
 * personali ce n'erano già diversi — restavano della dimensione del testo
 * normale e pesavano quanto il contenuto che dovevano commentare. La classe
 * dice "hint": vale ovunque la si usi.
 */
.form-hint {
	display: block;
	font-weight: 400;
	font-size: 0.86rem;
	color: var(--mq-color-ink-muted);
	margin-top: 6px;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="search"],
.form-field textarea,
.form-field select {
	width: 100%;
	min-height: var(--mq-touch-target);
	padding: 12px 14px;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	font: inherit;
	color: var(--mq-color-ink);
	background: #fff;
	transition: border-color var(--mq-transition-fast), box-shadow var(--mq-transition-fast);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
	outline: none;
	border-color: var(--mq-color-primary);
	box-shadow: 0 0 0 3px rgba(11, 69, 102, 0.15);
}

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

/* Campo telefono con selettore di Paese (template-parts/phone-field.php).

   Su schermo stretto il selettore prende una riga tutta sua e prefisso e
   numero stanno insieme sotto: i nomi lunghi ("Bosnia ed Erzegovina")
   affiancati al numero su un telefono si comprimerebbero fino a diventare
   illeggibili. Da 480px in su sta tutto su una riga sola. */
.phone-input {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"country country"
		"dial    number";
	gap: 8px;
	align-items: center;
}

.phone-country {
	grid-area: country;
	position: relative;
}

.phone-input__dial {
	grid-area: dial;
}

.phone-input__number {
	grid-area: number;
}

@media (min-width: 480px) {
	.phone-input {
		grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr);
		grid-template-areas: "country dial number";
	}
}

/* Il `<select>` nativo resta il campo vero — è lui che viene inviato — ma
   quando main.js costruisce il selettore con le bandiere diventa `hidden`, e
   in vista resta il pulsante. Senza JavaScript succede l'opposto: il pulsante
   nasce `hidden` e si usa la tendina nativa, che funziona identica a prima
   (solo senza bandiere: un `<option>` non può contenere un'immagine). */
.form-field .phone-country__select {
	width: 100%;
}

.phone-country__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: var(--mq-touch-target);
	padding: 8px 12px;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	background: #fff;
	font: inherit;
	color: var(--mq-color-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--mq-transition-fast), box-shadow var(--mq-transition-fast);
}

/* `display: flex` qui sopra vincerebbe sulla regola del browser che nasconde
   gli elementi con l'attributo `hidden`, e senza JavaScript si vedrebbero
   **due** selettori uno sopra l'altro: la tendina nativa e un pulsante che non
   si apre. Vale anche per l'elenco, che nasce chiuso. */
.phone-country__trigger[hidden],
.phone-country__list[hidden] {
	display: none;
}

.phone-country__trigger:hover {
	border-color: var(--mq-color-primary);
}

/* Stesso anello di fuoco degli altri campi del modulo: chi si muove con il
   Tab deve vedere il selettore come vede il campo del numero, non come un
   elemento di un'altra famiglia. */
.phone-country__trigger:focus-visible {
	outline: none;
	border-color: var(--mq-color-primary);
	box-shadow: 0 0 0 3px rgba(11, 69, 102, 0.15);
}

.phone-country__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La freccetta dice "questo si apre": è il segnale che il `<select>` nativo
   dava da solo e che qui va disegnato. */
.phone-country__caret {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--mq-color-ink-muted);
	border-bottom: 2px solid var(--mq-color-ink-muted);
	transform: translateY(-2px) rotate(45deg);
}

.phone-country__trigger[aria-expanded="true"] .phone-country__caret {
	transform: translateY(2px) rotate(-135deg);
}

/* Tutte le bandiere occupano lo stesso riquadro, sempre: una colonna di
   bandiere di larghezze diverse si legge male, e il nome del Paese accanto
   partirebbe ogni volta da un punto diverso.

   Il riquadro è 26x19 e l'immagine lo riempie con `cover`. I file sono
   disegnati su una tela quadrata di 36 con la bandiera al centro, alta 26: il
   ritaglio a queste proporzioni toglie esattamente il margine trasparente
   sopra e sotto, quindi il bordo del riquadro segue la bandiera invece di
   starle larga intorno.

   Il bordo interno sottilissimo serve alle bandiere che hanno il bianco sul
   bordo (Malta, Giappone, Polonia): senza, sul fondo chiaro del modulo
   sembrano ritagliate male. */
.phone-country__flag {
	flex: 0 0 auto;
	display: block;
	width: 26px;
	height: 19px;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(28, 35, 33, 0.14);
	overflow: hidden;
}

.phone-country__flag-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bandiera che non si carica **e** ripiego che non si carica: si toglie di
   mezzo l'immagine rotta e resta il riquadro vuoto, con nome e prefisso
   accanto. Quello che non compare mai è il codice ISO al posto della
   bandiera. */
.phone-country__flag-img.is-missing {
	visibility: hidden;
}

/* L'elenco lo costruisce main.js e vive dentro .phone-country (che è
   position: relative): resta agganciato al pulsante anche quando la pagina
   scorre. */
.phone-country__list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	width: max(100%, 260px);
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow);
}

.phone-country__option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--mq-touch-target);
	padding: 6px 10px;
	border-radius: var(--mq-radius-sm);
	cursor: pointer;
}

/* Una sola evidenziazione, quella "attiva": è la voce che aria-activedescendant
   sta annunciando allo screen reader, ed è la stessa che si sposta con le
   frecce e con il mouse. Due evidenziazioni diverse (mouse e tastiera) sono il
   modo più semplice per non capire più quale voce sceglierà l'Invio. */
.phone-country__option:hover,
.phone-country__option.is-active {
	background: var(--mq-color-limestone);
}

.phone-country__option[aria-selected="true"] {
	font-weight: 700;
}

.phone-country__option-name {
	flex: 1 1 auto;
}

.phone-country__option-dial {
	flex: 0 0 auto;
	color: var(--mq-color-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* Il prefisso in chiaro accanto al campo: il selettore da chiuso mostra il
   nome del Paese, e mentre si digita serve avere davanti il prefisso che verrà
   applicato al numero. aria-hidden perché è una ripetizione: chi usa uno
   screen reader lo ha già sentito annunciare dal selettore.

   Visibile **anche sul telefono** (correzione 2026-08-13): era nascosto sotto
   i 480px, cioè esattamente dove il selettore occupa una riga a sé. Chi
   compilava il modulo da telefono non aveva in nessun momento il prefisso e il
   numero davanti insieme. */
.phone-input__dial {
	font-variant-numeric: tabular-nums;
	color: var(--mq-color-ink-muted);
	font-weight: 700;
	white-space: nowrap;
}

.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mq-space-2);
}

.radio-option {
	display: inline-flex;
	align-items: center;
	min-height: var(--mq-touch-target);
	gap: 8px;
	padding: 8px 18px;
	border: 1px solid var(--mq-color-border);
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
	background: #fff;
	transition: border-color var(--mq-transition-fast), background-color var(--mq-transition-fast);
}

.radio-option:hover {
	border-color: var(--mq-color-primary);
}

.radio-option input {
	accent-color: var(--mq-color-primary);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.radio-option:has(input:checked) {
	border-color: var(--mq-color-primary);
	background: var(--mq-color-limestone);
}

.radio-option:has(input:focus-visible) {
	outline: 3px solid var(--mq-color-terracotta);
	outline-offset: 2px;
}

.otp-code-input {
	letter-spacing: 0.4em;
	font-size: 1.3rem;
	text-align: center;
	font-weight: 700;
}

.form-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.wizard-summary {
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
	padding: 24px 26px;
	margin-bottom: 32px;
	max-width: 640px;
}

.wizard-summary dt {
	font-weight: 700;
	color: var(--mq-color-ink-muted);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-top: 14px;
}

.wizard-summary dt:first-child {
	margin-top: 0;
}

.wizard-summary dd {
	margin: 4px 0 0;
}

.wizard-panel {
	max-width: 640px;
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
	padding: 24px 26px;
	margin-bottom: 24px;
}

.wizard-panel h3 {
	margin-top: 0;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: var(--mq-text-xs);
	font-weight: 700;
	background: var(--mq-color-limestone);
	color: var(--mq-color-ink-muted);
}

.status-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.status-badge--draft {
	background: var(--mq-color-warning-bg);
	color: var(--mq-color-warning);
}

.status-badge--open {
	background: var(--mq-color-success-bg);
	color: var(--mq-color-success);
}

.status-badge--awaiting_quotes {
	background: var(--mq-color-info-bg);
	color: var(--mq-color-info);
}

.status-badge--closed {
	background: #ece9e4;
	color: #5a5750;
}

/*
 * Stati decisi dall'amministrazione (centro operativo "Richieste"):
 * "sospesa" riusa il rosso già definito più avanti per gli stati critici
 * dell'onboarding professionista, "annullata" è volutamente più neutra e
 * definitiva — la pratica non torna da sola.
 */
.status-badge--cancelled {
	background: #3c434a;
	color: #fff;
}

/*
 * Annullata dal cliente (2026-09-01): la sola fine di corsa che decide lui.
 *
 * Non riusa il nero di "annullata dall'amministrazione" — quello segnala una
 * decisione presa da fuori, e su una richiesta propria sarebbe un allarme per
 * una scelta voluta — né il grigio di "chiusa", che nella catena dei round è
 * uno stato di passaggio. Sta in mezzo: definitiva senza essere severa.
 */
.status-badge--customer_cancelled {
	background: #e2ddd6;
	color: #4a463f;
}

/*
 * Completata (2026-09-02): la ricerca è finita da sé, senza che nessuno abbia
 * deciso niente. Non riusa il verde di "aperta" — che significa "sta
 * succedendo qualcosa" e su una richiesta ferma sarebbe un invito a tornare —
 * né il grigio di "chiusa", che nella catena dei round è uno stato di
 * passaggio. Un verde spento: conclusa bene, e conclusa davvero.
 */
.status-badge--completed {
	background: #e4ece6;
	color: #3f5b48;
}

/*
 * Richiesta eliminata dal cliente: non compare nelle sue liste, ma lo stato
 * esiste (cancellazione morbida) e l'amministrazione lo vede. Colore spento
 * di proposito — è una pratica archiviata, non un problema da notare.
 */
.status-badge--deleted {
	background: #ece9e4;
	color: #8a857c;
}

.request-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.request-card {
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
	padding: var(--mq-space-5) var(--mq-space-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mq-space-3);
	transition: box-shadow var(--mq-transition-fast), border-color var(--mq-transition-fast);
}

.request-card:hover {
	box-shadow: var(--mq-shadow);
	border-color: var(--mq-color-limestone-deep);
}

/* Avviso amministrativo non ancora letto (area cliente/professionista). */
.request-card--unread {
	border-left: 3px solid var(--mq-color-warning);
}

.request-card__main h3 {
	margin: 0 0 6px;
	font-size: 1.05rem;
}

.request-card__meta {
	margin: 0;
	color: var(--mq-color-ink-muted);
	font-size: 0.9rem;
}

.request-card__actions {
	display: flex;
	gap: var(--mq-space-2);
	flex-wrap: wrap;
}

.request-card__actions form {
	margin: 0;
}

/*
 * Azioni di fine corsa sul dettaglio richiesta (ripresenta / elimina).
 * Stanno insieme in un riquadro sobrio: sono le due decisioni che il cliente
 * prende quando la finestra si è chiusa, e vanno lette una accanto all'altra
 * invece di comparire sparse nella pagina.
 */
.request-lifecycle-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mq-space-4);
	margin: var(--mq-space-5) 0;
	padding: var(--mq-space-4) var(--mq-space-5);
	background: var(--mq-color-limestone);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
}

.request-lifecycle-actions form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mq-space-2);
	margin: 0;
}

.request-lifecycle-actions .form-hint {
	flex: 1 1 260px;
}

/* Pannello dei round (2026-08-29).

   Occupa **tutta** la riga dentro `.request-lifecycle-actions`, che è un flex:
   senza `flex-basis: 100%` il pannello finirebbe accanto al pulsante «Elimina
   richiesta», e il modulo per aprire un round — che è alto e ha tre campi —
   verrebbe schiacciato in una colonna stretta su desktop e illeggibile su
   telefono. È la decisione di impaginazione che conta di più qui. */
.round-panel {
	flex: 1 1 100%;
	margin: 0;
}

.round-panel__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mq-space-2);
	margin: 0 0 var(--mq-space-3);
	color: var(--mq-color-ink-muted);
	font-size: 0.92rem;
}

/* Il riepilogo è il comando: gli si dà l'aspetto di un pulsante e si toglie
   il triangolino nativo, che accanto a un pulsante sembra un difetto. */
.round-panel__open > summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	margin-bottom: var(--mq-space-3);
}

.round-panel__open > summary::-webkit-details-marker {
	display: none;
}

/* Il fuoco da tastiera resta visibile: è un comando a tutti gli effetti, e
   senza questa riga chi naviga con il Tab non saprebbe dove si trova. */
.round-panel__open > summary:focus-visible {
	outline: 3px solid var(--mq-color-gold);
	outline-offset: 2px;
}

.round-panel__open .mq-form {
	max-width: 640px;
}

/* Le integrazioni sono facoltative e stanno chiuse: si presentano come una
   sezione secondaria, non come tre campi da compilare. */
.round-panel__fields {
	margin: var(--mq-space-4) 0;
	padding: var(--mq-space-3) var(--mq-space-4);
	background: var(--mq-color-bg);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
}

.round-panel__fields > summary {
	cursor: pointer;
	font-weight: 600;
}

.round-panel__fields > summary:focus-visible {
	outline: 3px solid var(--mq-color-gold);
	outline-offset: 2px;
}

/* Le condizioni del credito: un elenco vero, non un paragrafo con dei trattini.
   Chi usa uno screen reader sente «elenco di quattro voci», che è esattamente
   ciò che deve sapere prima di impegnare un credito. */
.round-panel__terms {
	margin: 0 0 var(--mq-space-4);
	padding-left: var(--mq-space-5);
	color: var(--mq-color-ink-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

.round-panel__terms li + li {
	margin-top: 4px;
}

/* Cicli precedenti della stessa richiesta: visibilmente secondari rispetto
   al ciclo in corso, ma sempre raggiungibili. */
.request-list--history .request-card {
	background: var(--mq-color-limestone);
	box-shadow: none;
}

.request-list--history .request-card__main h4 {
	margin: 0 0 6px;
	font-size: 1rem;
}

.dashboard-empty {
	padding: var(--mq-space-8) var(--mq-space-5);
	text-align: center;
	background: var(--mq-color-limestone);
	border-radius: var(--mq-radius);
	color: var(--mq-color-ink-muted);
}

/* Tabelle dati sul frontend pubblico (storico movimenti crediti, ecc.):
   classe propria del tema, non le classi "widefat/striped" di wp-admin che
   non hanno alcuna regola sul sito pubblico. */
.data-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-size: var(--mq-text-sm);
}

.data-table th,
.data-table td {
	padding: var(--mq-space-3) var(--mq-space-4);
	text-align: left;
	border-bottom: 1px solid var(--mq-color-border);
	white-space: nowrap;
}

.data-table thead th {
	background: var(--mq-color-limestone);
	color: var(--mq-color-sea-dark);
	font-size: var(--mq-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.data-table tbody tr:last-child td {
	border-bottom: none;
}

.data-table tbody tr:hover {
	background: var(--mq-color-bg-alt);
}

/* La rassicurazione accanto a un ordine ancora in attesa ("Nessun importo è
   stato addebitato"): va a capo sotto lo stato invece di allargare la colonna,
   perché le celle della tabella sono `nowrap` e una frase intera su una riga
   sola spingerebbe fuori schermo tutte le altre colonne. */
.data-table .order-note {
	display: block;
	margin-top: 2px;
	white-space: normal;
	font-size: var(--mq-text-xs);
	color: var(--mq-color-ink-muted);
}

/* Il modulo del pulsante d'azione non deve aggiungere spazio proprio: la cella
   ha già il suo, e un margine qui disallineerebbe la riga rispetto alle altre. */
.data-table td form {
	margin: 0;
}

/* Su un ordine in attesa i comandi sono due — concludere il pagamento e
   annullarlo — e sono l'uno il contrario dell'altro: vanno affiancati con uno
   spazio vero fra loro, non incollati. Il `flex-wrap` serve alla vista a card
   sotto i 620px, dove la colonna si stringe e i due pulsanti vanno a capo
   invece di uscire dallo schermo. */
.data-table .order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mq-space-2);
	align-items: center;
}

@media (max-width: 620px) {
	.draft-banner,
	.request-card {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Sotto i 480px la tabella diventa un elenco di card impilate invece di
	   scorrere in orizzontale: più leggibile su schermo stretto. */
	.data-table-scroll {
		overflow-x: visible;
		border: none;
		box-shadow: none;
	}

	.data-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

	.data-table,
	.data-table tbody,
	.data-table tr,
	.data-table td {
		display: block;
		width: 100%;
	}

	.data-table tr {
		margin-bottom: var(--mq-space-3);
		border: 1px solid var(--mq-color-border);
		border-radius: var(--mq-radius);
		box-shadow: var(--mq-shadow-sm);
		overflow: hidden;
	}

	.data-table td {
		display: flex;
		justify-content: space-between;
		gap: var(--mq-space-3);
		white-space: normal;
		text-align: right;
	}

	.data-table td::before {
		content: attr(data-label);
		font-weight: 700;
		color: var(--mq-color-sea-dark);
		text-align: left;
	}

	/* Nella vista a card la cella è un flex a due voci (etichetta e valore):
	   senza questo, la rassicurazione "Nessun importo è stato addebitato" si
	   infila come terza colonna accanto allo stato e strizza entrambi in due
	   colonnine di testo. Va sotto, su tutta la larghezza, come si legge. */
	.data-table td {
		flex-wrap: wrap;
	}

	.data-table .order-note {
		flex-basis: 100%;
		margin-top: 4px;
		text-align: right;
	}

	/* Nella vista a card il valore della cella sta a destra: i due comandi si
	   allineano con gli altri valori invece di restare appesi al centro. */
	.data-table .order-actions {
		justify-content: flex-end;
	}
}

/* ==========================================================================
   Onboarding professionista e verifica (Fase 3)
   ========================================================================== */

.status-badge--in_review {
	background: var(--mq-color-warning-bg);
	color: var(--mq-color-warning);
}

.status-badge--approved {
	background: var(--mq-color-success-bg);
	color: var(--mq-color-success);
}

.status-badge--rejected,
.status-badge--suspended {
	background: var(--mq-color-danger-bg);
	color: var(--mq-color-danger);
}

.service-select-group {
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	padding: 16px 20px;
	margin-bottom: 16px;
}

.service-select-group legend {
	font-weight: 700;
	color: var(--mq-color-sea-dark);
	padding: 0 6px;
}

.checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px 20px;
}

.checkbox-option {
	display: flex;
	align-items: center;
	min-height: 36px;
	gap: 10px;
	font-size: 0.95rem;
	padding: 6px 8px;
	border-radius: var(--mq-radius-sm);
	transition: background-color var(--mq-transition-fast);
}

.checkbox-option:hover {
	background: var(--mq-color-limestone);
}

.checkbox-option:has(input:focus-visible) {
	outline: 3px solid var(--mq-color-terracotta);
	outline-offset: 1px;
}

.checkbox-option input {
	accent-color: var(--mq-color-primary);
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.risk-tag {
	display: inline-flex;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--mq-color-limestone-deep);
	color: var(--mq-color-sea-dark);
	font-size: 0.72rem;
	font-weight: 700;
}

.radio-group--stacked {
	flex-direction: column;
	align-items: flex-start;
}

.form-field input[type="file"] {
	display: block;
	padding: 10px 0;
}

.quiz-panel h3 {
	margin-top: 4px;
	font-size: 1.2rem;
}

.quiz-timer-display {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--mq-color-terracotta);
	color: #fff9f0;
	font-weight: 700;
	font-size: 0.85rem;
}

.quiz-timer-display.is-urgent {
	background: #8a2c1c;
}

/* ==========================================================================
   Preventivi e matching (Fase 4)
   ========================================================================== */

.quote-price-group {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.quote-price-group input[type="number"] {
	width: 130px;
	padding: 10px 12px;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	font: inherit;
}

.quote-card {
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
	padding: var(--mq-space-5) var(--mq-space-6);
	margin-bottom: var(--mq-space-4);
}

.quote-card__fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px 24px;
	margin: 14px 0;
	padding: 0;
	list-style: none;
}

.quote-card__fields dt {
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--mq-color-ink-muted);
	margin: 0;
}

.quote-card__fields dd {
	margin: 2px 0 0;
}

.quote-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0;
}

.quote-card__unlock {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--mq-color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.button--disabled,
.button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   Crediti, sblocco e prezzi (Fase 5)
   ========================================================================== */

.credit-balance-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	padding: 8px 18px;
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: 999px;
	box-shadow: var(--mq-shadow-sm);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--mq-color-sea-dark);
}

.credit-balance-pill a {
	color: var(--mq-color-primary);
	text-decoration: underline;
	font-weight: 600;
}

.quote-card__unlock--revealed {
	background: var(--mq-color-limestone);
	border-left: 3px solid var(--mq-color-gold);
	border-radius: 0 var(--mq-radius) var(--mq-radius) 0;
	padding: var(--mq-space-4) var(--mq-space-5);
	margin-top: var(--mq-space-4);
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin: 32px 0;
}

/* Riepilogo di un solo pacchetto (checkout): niente griglia a più colonne,
   una card sola e ben leggibile invece di un confronto con altri prezzi. */
.pricing-grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 320px;
}

.pricing-card {
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
	padding: var(--mq-space-7) var(--mq-space-6);
	text-align: center;
	transition: transform var(--mq-transition), box-shadow var(--mq-transition);
}

.pricing-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--mq-shadow);
}

.pricing-card--featured {
	border-color: var(--mq-color-primary);
	box-shadow: var(--mq-shadow);
	position: relative;
}

.pricing-card__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--mq-color-primary);
	color: #fff9f0;
	font-size: var(--mq-text-xs);
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.pricing-card__credits {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	border-radius: var(--mq-radius-arch);
	background: var(--mq-color-limestone);
	font-family: var(--mq-font-display);
	font-size: 2rem;
	color: var(--mq-color-sea-dark);
}

.pricing-card__price {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--mq-color-primary);
	margin: var(--mq-space-4) 0 var(--mq-space-5);
}

/* Offerta a tempo su un pacchetto (wp-admin -> Crediti e pagamenti). */
.pricing-card__offer-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: var(--mq-space-2) 0 0;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--mq-color-terracotta);
	color: #fff9f0;
	font-size: var(--mq-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.pricing-card__price-original {
	display: inline-block;
	margin-right: 8px;
	color: var(--mq-color-ink-muted);
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: line-through;
}

.pricing-card__price-promo {
	color: var(--mq-color-terracotta);
}

.free-unlock-banner {
	background: var(--mq-color-sea-dark);
	background-image: radial-gradient(circle at 12% 20%, rgba(217, 164, 65, 0.18), transparent 40%);
	color: #fff9f0;
	border-radius: var(--mq-radius);
	padding: var(--mq-space-6) var(--mq-space-7);
	margin: var(--mq-space-7) 0;
}

/* Il titolo del riquadro è passato da h3 a h2 per la gerarchia (OSS-23):
   la regola vale su entrambi, così l'aspetto non cambia e un eventuale
   ritorno indietro non lascia il riquadro senza stile. La dimensione resta
   quella di un sottotitolo perché è ciò che è, dentro il riquadro. */
.free-unlock-banner h2,
.free-unlock-banner h3 {
	margin-top: 0;
	font-size: 1.15rem;
	color: #fff9f0;
}

/* Chat, recensioni e moderazione (Fase 6) */

.chat-panel {
	max-width: 640px;
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
	padding: var(--mq-space-6);
	margin: var(--mq-space-6) 0;
}

.chat-panel h4 {
	margin-top: 0;
}

.chat-panel textarea {
	min-height: 90px;
}

.chat-thread {
	list-style: none;
	margin: 0 0 var(--mq-space-5);
	padding: var(--mq-space-2);
	background: var(--mq-color-bg-alt);
	border-radius: var(--mq-radius);
	display: flex;
	flex-direction: column;
	gap: var(--mq-space-2);
	max-height: 420px;
	overflow-y: auto;
}

.chat-message {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: var(--mq-radius) var(--mq-radius) var(--mq-radius) 4px;
	background: #fff;
	box-shadow: var(--mq-shadow-sm);
}

.chat-message--mine {
	align-self: flex-end;
	background: var(--mq-color-primary);
	color: #fff9f0;
	border-radius: var(--mq-radius) var(--mq-radius) 4px var(--mq-radius);
}

.chat-message--theirs {
	align-self: flex-start;
}

.chat-message__meta {
	margin: 0 0 4px;
	font-size: 0.78rem;
	color: var(--mq-color-ink-muted);
}

.chat-message--mine .chat-message__meta {
	color: rgba(255, 249, 240, 0.75);
}

.chat-message__text {
	margin: 0;
	overflow-wrap: break-word;
}

.chat-message__report {
	margin-top: 6px;
}

.chat-message__report summary {
	cursor: pointer;
	font-size: 0.78rem;
	color: var(--mq-color-ink-muted);
}

.chat-message__report form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.chat-message__report input[type="text"] {
	flex: 1;
	min-width: 160px;
}

.review-panel {
	max-width: 640px;
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
	padding: var(--mq-space-6);
	margin: var(--mq-space-6) 0;
}

.review-panel h4 {
	margin-top: 0;
}

.review-block {
	background: #fff;
}

.review-block__header {
	display: flex;
	align-items: center;
	gap: var(--mq-space-3);
	margin-bottom: var(--mq-space-2);
}

.review-block__rating {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 32px;
	padding: 0 10px;
	border-radius: var(--mq-radius-arch);
	background: var(--mq-color-gold);
	color: var(--mq-color-sea-dark);
	font-weight: 800;
	font-size: 0.95rem;
}

.review-block__date {
	color: var(--mq-color-ink-muted);
	font-size: 0.85rem;
}

.review-reply {
	background: var(--mq-color-limestone);
	border-left: 3px solid var(--mq-color-primary);
	border-radius: 0 var(--mq-radius) var(--mq-radius) 0;
	padding: var(--mq-space-3) var(--mq-space-4);
	margin-top: var(--mq-space-3);
}

.review-reply strong {
	display: block;
	margin-bottom: 4px;
	font-size: 0.85rem;
	color: var(--mq-color-sea-dark);
}
.mq-request-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	margin: 16px 0 24px;
}

.mq-request-images figure { margin: 0; }
.mq-request-images img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.mq-request-images figcaption { margin-top: 5px; font-size: .85rem; color: var(--color-text-muted, #5f6670); word-break: break-word; }
.mq-request-images form { margin-top: 6px; }

/* Avviso della guardia JS sul peso delle foto (vedi main.js). */
.form-field .form-error {
	margin: 8px 0 0;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--mq-color-danger-bg);
	border: 1px solid var(--mq-color-danger-border);
	color: var(--mq-color-danger);
	font-size: 0.9rem;
}

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

/* -------------------------------------------------------------------------
 * Aree personali a fisarmonica (correzione 2026-08-13)
 *
 * Le dashboard erano un rotolo unico: su un telefono la sola sezione
 * "Notifiche" occupava tre schermate, e le cose che contavano finivano sotto
 * a roba già letta. Qui c'è solo la presentazione — quali sezioni esistono,
 * cosa conta come novità e cosa viene segnato come visto sta nel plugin
 * (MQ_User_UI_State).
 *
 * La regola che tiene in piedi il ripiego senza JavaScript: i pannelli
 * chiusi si nascondono **solo** dentro `.mq-accordion--enhanced`, classe che
 * mette lo script all'avvio. Se lo script non parte, la pagina resta lunga
 * ma completamente leggibile invece di diventare una fila di intestazioni
 * che non si aprono.
 * ---------------------------------------------------------------------- */

.mq-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--mq-space-3, 12px);
	margin: 0 0 var(--mq-space-6, 32px);
}

.mq-accordion__item {
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius, 10px);
	background: var(--mq-color-bg);
	/* Il salto da un link di notifica non deve finire sotto l'intestazione. */
	scroll-margin-top: 96px;
	/*
	 * La reazione al puntatore vive **sulla scheda**, non sull'intestazione
	 * (correzione 2026-08-13): bordo, ombra e un sollevamento di un pixel. Vedi
	 * la nota estesa su .mq-accordion__trigger:hover.
	 *
	 * Nessuna delle tre proprietà anima una misura: il bordo c'è già ed è
	 * sempre 1px, l'ombra si disegna fuori dal flusso e `transform` non
	 * ridispone niente. Il pannello sotto non si sposta di un pixel quando il
	 * mouse passa sopra l'intestazione.
	 */
	transition:
		border-color var(--mq-transition-fast),
		box-shadow var(--mq-transition-fast),
		transform var(--mq-transition-fast);
}

/*
 * Solo dove esiste davvero un puntatore. Su un touch screen `:hover` resta
 * appiccicato all'ultimo elemento toccato — la scheda resterebbe sollevata
 * dopo il tocco, indicando un elemento che l'utente non sta più puntando.
 */
@media (hover: hover) and (pointer: fine) {
	.mq-accordion__item:hover {
		border-color: var(--mq-color-primary);
		box-shadow: var(--mq-shadow-sm);
		transform: translateY(-1px);
	}
}

/*
 * Tastiera: la stessa evidenziazione della scheda vale quando il fuoco è
 * dentro. È in più rispetto all'anello di focus del pulsante, non al suo
 * posto — l'anello dice *quale controllo*, questa dice *quale sezione*.
 */
.mq-accordion__item:focus-within {
	border-color: var(--mq-color-primary);
	box-shadow: var(--mq-shadow-sm);
}

.mq-accordion__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.mq-accordion__trigger {
	display: flex;
	align-items: center;
	gap: var(--mq-space-3, 12px);
	width: 100%;
	/* 48px: bersaglio comodo per un dito, non solo per un mouse. */
	min-height: 48px;
	padding: 14px 18px;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: var(--mq-color-ink);
	font: inherit;
	font-family: var(--mq-font-display, Georgia, serif);
	font-size: 1.15rem;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

/*
 * Nessun riempimento al passaggio del mouse (correzione 2026-08-13).
 *
 * ## Il problema
 *
 * L'intestazione si colorava di `--mq-color-bg-alt`, che è **lo stesso colore**
 * usato dai pannelli interni delle sezioni (`.wizard-panel`, le schede, le
 * barre di azione). Passando il mouse, l'intestazione smetteva di sembrare
 * un'intestazione e diventava indistinguibile da un blocco di contenuto: la
 * gerarchia della pagina si scompaginava proprio nel momento in cui l'utente
 * stava cercando di capire dove cliccare. Peggio con una sezione aperta, dove
 * la fascia colorata dell'intestazione si saldava visivamente al primo pannello
 * del contenuto.
 *
 * ## Il rimedio
 *
 * Lo stato "sto puntando qui" si dice **sulla scheda** (bordo che si accende,
 * ombra corta, un pixel di sollevamento: vedi .mq-accordion__item) e sul
 * **testo** dell'intestazione, che vira al colore primario. Il fondo resta
 * quello che è. Sono segnali che non entrano in competizione con nessun
 * riempimento esistente, perché nessun altro elemento della pagina usa il
 * bordo colorato + ombra come stato transitorio.
 *
 * Niente `background` significa anche niente contrasto da rincorrere: il testo
 * resta su `--mq-color-bg` in ogni stato.
 */
@media (hover: hover) and (pointer: fine) {
	.mq-accordion__trigger:hover {
		color: var(--mq-color-primary);
	}
}

/*
 * Focus visibile e spesso: la fisarmonica si usa anche solo con la tastiera.
 * `outline-offset` negativo tiene l'anello **dentro** il bordo arrotondato
 * della scheda, quindi non ne allarga l'ingombro: nessuno spostamento del
 * contenuto quando il fuoco entra o esce.
 */
.mq-accordion__trigger:focus-visible {
	outline: 3px solid var(--mq-color-terracotta);
	outline-offset: -3px;
}

.mq-accordion__title {
	flex: 1 1 auto;
	min-width: 0;
}

/* Contatore delle **sole** novità non ancora viste: se è zero non esiste
 * proprio, invece di mostrare uno zero che non chiede nulla a nessuno. */
.mq-accordion__count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	border-radius: 12px;
	background: var(--mq-color-terracotta);
	color: #fff;
	font-family: var(--mq-font-body, system-ui, sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
}

.mq-accordion__chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.15s ease;
}

.mq-accordion__item.is-open .mq-accordion__chevron {
	transform: rotate(-135deg);
}

.mq-accordion__panel {
	padding: 0 18px 18px;
}

/* Senza lo script i pannelli restano visibili: vedi la nota in testa. */
.mq-accordion--enhanced .mq-accordion__panel[hidden] {
	display: none;
}

.mq-accordion__panel > h3:first-child,
.mq-accordion__panel > p:first-child {
	margin-top: 0;
}

/* Barra delle azioni di sezione ("Segna tutte come lette", "Nascondi tutte"). */
.mq-section-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mq-space-2, 8px);
	margin: 0 0 var(--mq-space-4, 16px);
}

.mq-section-actions form {
	margin: 0;
}

/* Riga di elenco con la X di chiusura in alto a destra. */
.request-card--dismissable {
	position: relative;
	padding-right: 46px;
}

.mq-dismiss {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Anche qui la misura è dettata dal dito, non dall'icona. */
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--mq-color-ink-muted);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
}

.mq-dismiss:hover {
	border-color: var(--mq-color-border);
	background: var(--mq-color-bg-alt);
	color: var(--mq-color-ink);
}

.mq-dismiss:focus-visible {
	outline: 3px solid var(--mq-color-terracotta);
	outline-offset: 1px;
}

.mq-dismiss-form {
	/* Il form è solo il veicolo del POST: a posizionarsi è il pulsante. */
	display: contents;
	margin: 0;
}

/* Scheda raggiunta da un link di notifica: si segnala e poi si toglie di
 * mezzo. L'evidenziazione serve a dire "è questa", non a restare addosso. */
.is-highlighted {
	animation: mq-highlight 4s ease-out 1;
}

@keyframes mq-highlight {
	0%, 55% {
		box-shadow: 0 0 0 3px var(--mq-color-gold);
		background: var(--mq-color-warning-bg);
	}
	100% {
		box-shadow: 0 0 0 3px transparent;
		background: transparent;
	}
}

/* Chi ha chiesto di ridurre le animazioni riceve l'evidenziazione statica:
 * il punto era mostrare quale scheda, non far lampeggiare qualcosa. */
@media (prefers-reduced-motion: reduce) {
	.mq-accordion__chevron { transition: none; }
	/*
	 * Il sollevamento sparisce del tutto: con il movimento ridotto un pixel di
	 * traslazione è comunque movimento. Bordo e ombra restano, quindi lo stato
	 * "sto puntando qui" continua a essere visibile — non si perde
	 * l'informazione, si toglie solo l'animazione.
	 */
	.mq-accordion__item,
	.mq-accordion__item:hover {
		transition: none;
		transform: none;
	}
	.is-highlighted {
		animation: none;
		box-shadow: 0 0 0 3px var(--mq-color-gold);
	}
}

/* Stato dell'indirizzo email nell'area personale. */
/* -------------------------------------------------------------------------
 * Stato account e avvisi archiviabili (correzione 2026-08-13)
 *
 * Sostituiscono il vecchio riquadro `.mq-email-status`, che era un cartello
 * fisso in cima all'area personale. Ora sono due cose separate: un avviso che
 * si può archiviare (`.mq-status-alert`) e una scheda da consultare dentro la
 * fisarmonica (`.mq-account-status`).
 * ---------------------------------------------------------------------- */

/* L'avviso riprende in tutto `.notice--success`: cambia solo il fatto che deve
   fare posto alla X, che sta a destra e non deve mai finire sopra al testo. */
.mq-status-alert {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--mq-space-3, 12px);
	padding-right: 52px;
}

.mq-status-alert__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.mq-account-status {
	display: flex;
	flex-direction: column;
	gap: var(--mq-space-3, 12px);
}

.mq-account-status__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mq-space-2, 8px);
	margin: 0;
}

.mq-account-status__value {
	font-weight: 600;
	word-break: break-word;
}

/*
 * Il dettaglio a richiesta (indirizzo completo, modulo di cambio numero).
 * `<details>` nativo: si apre da tastiera, è annunciato correttamente e non
 * dipende da una riga di JavaScript. Lo stile serve solo a far sembrare il
 * riassunto quello che è — un comando — invece del triangolino di sistema
 * lasciato a sé.
 */
.mq-account-status__reveal > summary {
	display: inline-block;
	min-height: var(--mq-touch-target);
	padding: 10px 0;
	color: var(--mq-color-primary);
	font-weight: 600;
	cursor: pointer;
}

.mq-account-status__reveal > summary:focus-visible {
	outline: 3px solid var(--mq-color-terracotta);
	outline-offset: 2px;
}

.mq-account-status__reveal .mq-form {
	max-width: 420px;
	margin: 0;
}

/* Esito della conferma email: compare in cima a qualunque pagina. */
.mq-email-flash {
	margin-top: var(--mq-space-4, 16px);
}

.mq-email-flash .notice {
	flex-wrap: wrap;
	margin-bottom: 0;
}

.mq-email-flash__action form {
	margin: 0;
}

/* Motivazione del rifiuto: si legge dentro la scheda, non altrove. */
.mq-reason {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-left: 4px solid var(--mq-color-danger);
	border-radius: 0 6px 6px 0;
	background: var(--mq-color-danger-bg);
	color: var(--mq-color-danger);
	font-size: 0.95rem;
	line-height: 1.5;
}

.mq-reason strong {
	display: block;
	margin-bottom: 2px;
}

.mq-activity-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mq-space-2, 8px);
	margin-top: 10px;
}

.mq-activity-actions form {
	margin: 0;
}

@media (max-width: 600px) {
	.mq-accordion__trigger { font-size: 1.05rem; padding: 12px 14px; }
	.mq-accordion__panel { padding: 0 14px 14px; }
}

/* -------------------------------------------------------------------------
 * Paginazione delle liste cumulative (2026-08-17)
 *
 * La barra sta **dentro** il riquadro della sua lista e subito sotto di essa:
 * è l'unico posto in cui significa qualcosa. Con più liste paginate nella
 * stessa pagina — nell'area cliente sono tre — una barra staccata dal proprio
 * elenco non direbbe a quale si riferisce.
 * ---------------------------------------------------------------------- */

/*
 * Il contenitore riceve il fuoco da script dopo un cambio pagina
 * (tabindex="-1"). Il contorno resta, perché serve a chi naviga da tastiera
 * per capire dove è atterrato, ma senza spostare di un pixel il contenuto.
 */
.mq-paged {
	outline-offset: 4px;
}

.mq-paged[aria-busy="true"] {
	opacity: 0.6;
	transition: opacity var(--mq-transition-fast);
}

.mq-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mq-space-2, 8px);
	margin-top: var(--mq-space-4, 16px);
	padding-top: var(--mq-space-3, 12px);
	border-top: 1px solid var(--mq-color-border);
}

.mq-pagination__status {
	margin: 0;
	color: var(--mq-color-ink-muted);
	font-size: 0.9rem;
}

.mq-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mq-space-1, 4px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 44px per lato: la misura minima di un bersaglio che si tocca con un dito.
 * Una barra di numeri è il posto in cui sbagliare bersaglio costa di più —
 * si finisce su una pagina che non si voleva e si perde il segno.
 */
.mq-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius-sm, 8px);
	background: var(--mq-color-bg);
	color: var(--mq-color-primary);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.mq-pagination__link:hover {
		border-color: var(--mq-color-primary);
		background: var(--mq-color-bg-alt);
	}
}

/*
 * La pagina corrente resta un link (aria-current="page" dice qual è): premerla
 * ricarica la stessa pagina, che è innocuo, mentre toglierla dall'ordine di
 * tabulazione creerebbe un buco proprio nel punto in cui ci si orienta.
 */
.mq-pagination__link.is-current {
	border-color: var(--mq-color-primary);
	background: var(--mq-color-primary);
	color: #fff;
	cursor: default;
}

.mq-pagination__gap {
	padding: 0 4px;
	color: var(--mq-color-ink-muted);
}

@media (max-width: 600px) {
	/*
	 * Su schermo stretto la frase va sopra e i numeri sotto, a tutta
	 * larghezza: affiancati, i numeri finirebbero schiacciati contro il bordo
	 * e "Precedente"/"Successiva" andrebbero a capo dentro il proprio
	 * pulsante.
	 */
	.mq-pagination {
		flex-direction: column;
		align-items: flex-start;
	}

	.mq-pagination__list {
		width: 100%;
	}
}

/*
 * Durata della garanzia: il blocco che compare solo dopo un "sì".
 *
 * La regola su [hidden] non è ridondante: dando un `display` a un elemento si
 * annulla la regola predefinita del browser per [hidden], e il campo resterebbe
 * visibile pur essendo dichiarato nascosto.
 */
.quote-warranty-duration {
	display: block;
	margin-top: var(--mq-space-2, 8px);
}

.quote-warranty-duration[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
 * Consensi legali e documenti nel footer (2026-08-17)
 *
 * Il testo di una casella di consenso è quasi sempre più lungo della casella:
 * `align-items: flex-start` evita che una riga che va a capo faccia scivolare
 * la casella a metà del paragrafo. `.checkbox-option` di base allinea al
 * centro, che va bene per "Malta / Gozo" ma non per una frase con dentro un
 * collegamento.
 * ---------------------------------------------------------------------- */

.form-field--consent .checkbox-option {
	align-items: flex-start;
	gap: 12px;
	line-height: 1.5;
}

.form-field--consent .checkbox-option input[type="checkbox"] {
	/* Il bersaglio tattile minimo è 24px reali: sotto, su un telefono si manca
	   la casella e si finisce sul collegamento che apre un'altra pagina. */
	width: 24px;
	height: 24px;
	min-width: 24px;
	margin-top: 1px;
	flex: 0 0 auto;
}

.form-field--consent a {
	text-decoration: underline;
}

.form-required {
	color: var(--mq-color-danger);
	margin-left: 2px;
}

.site-footer__legal {
	margin-top: 12px;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

.footer-legal a {
	/* 44px di altezza per il tocco: sono collegamenti brevi, e su un telefono
	   finiscono uno accanto all'altro. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * Contrasto dei collegamenti legali sul fondo scuro del footer.
 *
 * Senza queste regole i link ereditavano `a { color: var(--mq-color-sea) }`
 * (#0e4f5c) sopra `--mq-color-sea-dark` (#082f38): 1,55:1, cioè testo blu
 * scuro su blu scuro, praticamente illeggibile. Il passaggio del mouse era
 * anche peggio, perché `a:hover` porta a `--mq-color-sea-dark`, lo stesso
 * identico colore dello sfondo: il collegamento spariva proprio quando lo si
 * stava puntando. Su un'informativa privacy questo non è un dettaglio
 * estetico — un documento che non si vede non è pubblicato.
 *
 * Crema (#f6efdd, la stessa pietra calcarea della palette) = 12,4:1;
 * bianco su hover/focus = 14,3:1. Entrambi ben oltre il 4,5:1 di AA.
 * La sottolineatura è sempre presente: il colore da solo non deve essere
 * l'unico segnale che una parola è un collegamento.
 *
 * Regole limitate a `.site-footer .footer-legal`: il menu del footer, il
 * copyright e il resto del sito non vengono toccati.
 */
.site-footer .footer-legal a {
	color: var(--mq-color-limestone);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--mq-transition-fast), text-decoration-color var(--mq-transition-fast);
}

.site-footer .footer-legal a:hover,
.site-footer .footer-legal a:focus,
.site-footer .footer-legal a:active {
	color: #fff;
	text-decoration-thickness: 2px;
}

/* Il contorno terracotta globale (#c1502e) su questo fondo sta a 3,0:1, cioè
   sul filo del minimo: qui si usa lo stesso crema del testo (12,4:1), che
   sullo scuro si vede senza incertezze. */
.site-footer .footer-legal a:focus-visible {
	outline: 3px solid var(--mq-color-limestone);
	outline-offset: 3px;
	border-radius: var(--mq-radius-sm);
}

/* Pagine di solo testo (documenti legali e qualsiasi pagina informativa).
   Una riga larga quanto il contenitore, su uno schermo grande, costringe
   l'occhio a cercare l'inizio della riga successiva: per un testo che si legge
   davvero la misura va limitata. */
.page-doc__body {
	max-width: 72ch;
}

.page-doc__body > * + * {
	margin-top: 1em;
}

.page-doc__body h2 {
	margin-top: 2em;
}

.page-doc__body h3 {
	margin-top: 1.6em;
}

.page-doc__body ul,
.page-doc__body ol {
	padding-left: 1.4em;
}

.page-doc__body li + li {
	margin-top: 0.4em;
}

.page-doc__body code {
	/* I segnaposto [DA COMPLETARE] devono saltare all'occhio di chi rileggerà
	   la bozza, non mimetizzarsi nel testo. */
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--mq-color-bg-alt);
	border: 1px solid var(--mq-color-border);
	font-size: 0.92em;
}

/* Una tabella non deve mai allargare la pagina: su un telefono da 390px la
   tabella dei cookie sforava di quasi duecento pixel e trascinava tutto il
   corpo del testo di lato. Scorre lei, dentro il suo riquadro. */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.page-doc__body table {
	border-collapse: collapse;
	min-width: 32rem;
}

.page-doc__body th,
.page-doc__body td {
	padding: 8px 12px;
	border: 1px solid var(--mq-color-border);
	text-align: left;
	vertical-align: top;
}

.page-doc__body th {
	background: var(--mq-color-bg-alt);
}

/* Difesa per una tabella scritta a mano senza il contenitore: perde un po' di
   semantica, ma non rompe l'impaginazione di chi legge dal telefono. */
.page-doc__body > table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Accesso e recupero password.

   Una scheda stretta e centrata: la pagina ha un compito solo, e allargarla
   quanto il resto del sito farebbe vagare l'occhio proprio dove serve invece
   una direzione sola. Nessun elemento estraneo, nessun marchio che non sia
   quello del sito.
   ------------------------------------------------------------------------ */
.auth-page {
	padding: 48px 0 72px;
	background: var(--mq-color-bg-alt);
}

.auth-card {
	max-width: 460px;
	margin-inline: auto;
	padding: 32px;
	background: var(--mq-color-bg);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius-lg);
	box-shadow: var(--mq-shadow);
}

.auth-card__title {
	margin: 0 0 8px;
	font-size: 1.65rem;
}

.auth-card__intro {
	margin: 0 0 24px;
	color: var(--mq-color-ink-muted);
}

.auth-card .mq-form {
	max-width: none;
}

.auth-card .form-actions .button {
	width: 100%;
	justify-content: center;
}

.auth-card__link {
	margin: 20px 0 0;
	text-align: center;
}

/* Un collegamento che sta da solo su una riga è un comando, non una parola
   dentro una frase: deve avere un bersaglio da toccare. «Hai dimenticato la
   password?» misurava 19px di altezza, ed è proprio il collegamento che si
   cerca con il pollice quando si è già di fretta e infastiditi. */
.auth-card__link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mq-touch-target);
	padding: 0 8px;
}

.auth-card__alt {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--mq-color-border);
}

.auth-card__alt h2 {
	margin: 0 0 6px;
	font-size: 1.05rem;
}

.auth-card__alt p {
	margin: 0 0 16px;
	color: var(--mq-color-ink-muted);
	font-size: 0.92rem;
}

.auth-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.auth-card__actions .button {
	flex: 1 1 auto;
	justify-content: center;
}

.form-field--inline {
	margin-bottom: 24px;
}

/* Campo password con il pulsante «Mostra».
   Il pulsante sta dentro il campo, ma il campo gli lascia lo spazio con il
   padding: sovrapporlo al testo renderebbe illeggibile proprio la password che
   si è chiesto di poter rileggere. */
.password-field {
	position: relative;
}

.password-field input {
	padding-right: 84px;
}

.password-field__toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--mq-radius-sm);
	background: transparent;
	color: var(--mq-color-primary);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 700;
	cursor: pointer;
}

.password-field__toggle:hover {
	background: var(--mq-color-bg-alt);
}

@media (max-width: 480px) {
	.auth-card {
		padding: 24px 20px;
	}

	.auth-card__actions .button {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Pagina "Contattaci" (2026-08-18)
   ========================================================================== */

/*
 * Due colonne su schermo largo — modulo a sinistra, contesto a destra — e una
 * sola colonna sotto i 900px, con il **modulo per primo**: chi apre questa
 * pagina da telefono ci arriva per scrivere, non per leggere le premesse, e
 * costringerlo a scorrere tre paragrafi prima del primo campo è il modo più
 * sicuro di perderlo. L'ordine del DOM è già quello giusto, quindi non serve
 * alcun riordino con `order:` — che disallineerebbe lettura visiva e ordine di
 * tabulazione, cioè romperebbe la pagina proprio per chi naviga da tastiera.
 */
.contact-page__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/*
 * `scroll-margin-top` sull'ancora del modulo: il redirect dopo l'invio torna
 * su `#modulo-contatti`, e senza questo margine il titolo finirebbe incollato
 * al bordo superiore della finestra, con l'avviso di esito appena fuori campo.
 */
.contact-page__form {
	min-width: 0;
	scroll-margin-top: 24px;
}

.contact-page__result {
	margin-bottom: 24px;
}

/*
 * L'avviso riceve il fuoco dopo il redirect (`tabindex="-1"`), così uno screen
 * reader legge l'esito invece di ripartire dall'inizio della pagina. Il
 * contorno del fuoco però non serve: nessuno ci è arrivato con il Tab, e un
 * riquadro attorno a un messaggio di conferma sembra un errore.
 */
.contact-page__result:focus {
	outline: none;
}

/*
 * `.notice` è `display: flex` con l'icona come primo elemento: due `<p>`
 * fratelli finirebbero affiancati. Il contenitore li raccoglie in un solo
 * elemento flessibile, che al suo interno torna a impilare. Tutti gli altri
 * usi di `.notice` nel sito hanno un solo paragrafo, ed è per questo che il
 * difetto è comparso solo qui — trovato in una verifica visiva, non da un
 * test verde.
 */
.contact-page__result-text {
	min-width: 0;
}

.contact-page__result p {
	margin: 0;
}

.contact-page__result p + p {
	margin-top: 8px;
}

.contact-page__aside {
	background: var(--mq-color-limestone);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	padding: 24px;
}

.contact-page__aside h2 {
	font-size: 1.1rem;
	margin-top: 0;
}

.contact-page__aside h2 + p,
.contact-page__aside h2 + ul,
.contact-page__aside h2 + ol {
	margin-top: 8px;
}

.contact-page__aside > * + h2 {
	margin-top: 24px;
}

.contact-page__links,
.contact-page__steps {
	margin: 0;
	padding-left: 0;
	list-style-position: inside;
}

.contact-page__links {
	list-style: none;
}

.contact-page__links li + li,
.contact-page__steps li + li {
	margin-top: 12px;
}

/* Il suggerimento sotto un collegamento è una riga a sé: in linea sembrerebbe
   parte del testo cliccabile. */
.contact-page__links .form-hint {
	display: block;
	margin-top: 2px;
}

/*
 * Le sei categorie. Elenco senza pallini, ogni voce è un bersaglio unico che
 * comprende etichetta e descrizione: cliccare sulla spiegazione seleziona la
 * voce, che è quello che una persona si aspetta quando è la spiegazione ad
 * averla convinta.
 */
.contact-form__categories {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

/*
 * Il selettore è `.form-field .contact-form__category` e non
 * `.contact-form__category`, e non è una scelta stilistica: senza il primo
 * pezzo la regola **perde la cascata**.
 *
 * Le sei voci vivono dentro un `<fieldset class="form-field ...">`, quindi
 * `.form-field label { display: block }` (specificità 0,1,1) vince su
 * `.checkbox-option { display: flex }` (0,1,0). Il risultato, trovato in una
 * verifica visiva del 2026-08-18 e non da alcun test verde, era che il pallino
 * finiva **sopra** la sua etichetta invece che accanto: sei voci in cui non si
 * capiva quale pallino appartenesse a quale testo, cioè un modulo in cui non si
 * capisce cosa si sta scegliendo.
 *
 * Stesso rimedio già usato da `.form-field--consent .checkbox-option` poche
 * righe più sotto, e per la stessa identica ragione.
 *
 * `align-items: flex-start` e non `center`: la voce è alta due righe, e un
 * radio centrato verticalmente su due righe di testo sembra scollegato da
 * entrambe. `.checkbox-option` di base allinea al centro, che è giusto per le
 * voci a riga singola di tutto il resto del sito.
 */
.form-field .contact-form__category {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding: 10px 8px;
	font-weight: 400;
	margin-bottom: 0;
}

.form-field .contact-form__category input {
	/* Allineato alla prima riga di testo, non al blocco. */
	margin-top: 3px;
}

/* Il `<span>` che raccoglie etichetta e descrizione occupa lo spazio che
   resta: senza, una descrizione lunga spingerebbe la colonna oltre il campo. */
.form-field .contact-form__category > span {
	min-width: 0;
}

.contact-form__category-label {
	display: block;
	font-weight: 600;
	color: var(--mq-color-sea-dark);
}

.contact-form__category .form-hint {
	display: block;
	margin-top: 2px;
}

/*
 * `<fieldset>` senza cornice: la cornice nativa del browser non c'entra nulla
 * con il resto dei campi, ma il `<fieldset>` va tenuto — è ciò che lega la
 * domanda ("Di cosa si tratta?") alle sei risposte per chi usa uno screen
 * reader. Toglierlo per ragioni estetiche significherebbe leggere sei voci
 * senza sapere di che domanda sono la risposta.
 */
.form-field--group {
	border: 0;
	padding: 0;
	margin-inline: 0;
}

.form-field--group legend {
	padding: 0;
	font-weight: 600;
	margin-bottom: 6px;
}

/* Campo trappola: invisibile e fuori dal percorso di tabulazione, stessa
   tecnica già usata da "Proponi un servizio". Non `display: none`, che alcuni
   programmi riconoscono e saltano: qui il campo esiste davvero, è solo fuori
   dallo schermo. */
.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 900px) {
	.contact-page__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/*
 * Il collegamento "Contattaci" nel footer riusa `.footer-legal`, e non è
 * pigrizia: è quella classe a portare le regole di contrasto sul fondo scuro
 * (crema 12,4:1, bianco su hover) verificate da
 * tests/unit/test-footer-legal-contrast.php. Una classe nuova avrebbe
 * ereditato di nuovo `a { color: var(--mq-color-sea) }`, cioè blu scuro su blu
 * scuro — esattamente il difetto che quel test esiste per non far tornare.
 */
.site-footer__support {
	margin-top: 12px;
}

/* ==========================================================================
   Selettore della lingua (2026-08-18)
   ========================================================================== */

.language-switcher {
	display: flex;
	align-items: center;
}

.language-switcher__list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 2px;
	list-style: none;
	border: 1px solid var(--mq-color-border);
	border-radius: 999px;
	background: var(--mq-color-bg-alt, #fff);
}

.language-switcher__item {
	margin: 0;
}

/*
 * 44px di lato: è la misura minima di un bersaglio di tocco, e questi tre
 * stanno uno accanto all'altro su uno schermo di telefono. Sotto quella
 * misura, tre bersagli adiacenti diventano una lotteria.
 */
.language-switcher__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 36px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mq-color-ink-muted);
	text-decoration: none;
	transition: background-color var(--mq-transition-fast), color var(--mq-transition-fast);
}

.language-switcher__link:hover,
.language-switcher__link:focus-visible {
	background: var(--mq-color-limestone);
	color: var(--mq-color-sea-dark);
	text-decoration: none;
}

/*
 * La lingua corrente si riconosce da **due** segnali, non da uno: il fondo
 * pieno e il peso del testo. Il solo colore non è un'informazione — chi non
 * distingue i colori vedrebbe tre voci identiche e non saprebbe quale sta
 * guardando. `aria-current="true"` dice la stessa cosa a chi usa uno screen
 * reader.
 */
.language-switcher__link.is-current {
	background: var(--mq-color-primary);
	color: #fff;
	cursor: default;
}

.language-switcher__link.is-current:hover,
.language-switcher__link.is-current:focus-visible {
	background: var(--mq-color-primary);
	color: #fff;
}

.language-switcher__code {
	line-height: 1;
}

@media (max-width: 782px) {
	/* Dentro il menu richiudibile il selettore prende una riga sua, allineato
	   a sinistra come tutto il resto del pannello. */
	.language-switcher {
		width: 100%;
		margin-bottom: 8px;
	}

	.language-switcher__list {
		width: auto;
	}
}

/* =====================================================================
 * Pagina di lancio del pre-lancio (2026-08-20)
 *
 * Riusa i token del sistema — palette, scala di spaziatura, raggi, ombre —
 * invece di introdurne di nuovi: è la stessa marca, e una pagina di lancio che
 * sembra di un altro sito è una pagina di lancio che non prepara a niente.
 *
 * Due scelte strutturali vale la pena dirle:
 *
 * 1. **Il modulo sta accanto al testo, non sotto**, su schermi larghi. Chi
 *    arriva già convinto non deve scorrere per trovarlo, chi vuole leggere ha
 *    il testo a sinistra. Sotto i 900px la colonna si scioglie e il modulo
 *    passa **dopo** il testo: su telefono la sequenza «leggo, poi decido» è
 *    l'unica possibile, e mettere il modulo prima significherebbe chiedere a
 *    qualcuno di iscriversi prima di sapere a cosa.
 * 2. **Nessuna animazione d'ingresso.** Il contenuto è già tutto lì, e un
 *    contenuto che appare in ritardo è un contenuto che chi legge con lo
 *    zoom, con una connessione lenta o con il movimento ridotto vede peggio.
 * ================================================================== */

/* --- Intestazione ridotta ------------------------------------------- */

.site-header--prelancio .site-header__menu--prelancio {
	display: flex;
	align-items: center;
	gap: var(--mq-space-3);
}

/* --- Esito dell'invio ------------------------------------------------ */

.wl-flash {
	background: var(--mq-color-success-bg);
	border-bottom: 1px solid var(--mq-color-success-border);
	padding: var(--mq-space-5) 0;
}

.wl-flash__inner {
	max-width: 760px;
}

.wl-flash__title {
	margin: 0 0 var(--mq-space-2);
	font-family: var(--mq-font-display);
	font-size: var(--mq-text-lg);
	font-weight: 700;
	color: var(--mq-color-success);
}

.wl-flash__text {
	margin: 0 0 var(--mq-space-2);
	color: var(--mq-color-ink);
}

.wl-flash__hint {
	margin: 0;
	font-size: var(--mq-text-sm);
	color: var(--mq-color-ink-muted);
}

/* --- Hero ------------------------------------------------------------ */

.wl-hero {
	padding: var(--mq-space-9) 0 var(--mq-space-8);
	background: var(--mq-color-limestone);
	background-image:
		radial-gradient(circle at 12% 18%, rgba(11, 69, 102, 0.10), transparent 34%),
		radial-gradient(circle at 88% 8%, rgba(217, 164, 65, 0.24), transparent 32%);
	border-bottom: 1px solid var(--mq-color-border);
}

.wl-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--mq-space-8);
	align-items: start;
}

/* --- Parole lunghe e schermi stretti ---------------------------------

   Il maltese compone parole che l'italiano e l'inglese non hanno:
   «kwotazzjonijiet» sta in un titolo da 280px come un mattone in una tasca.
   Misurato su staging a 320px di larghezza: il titolo della hero sporgeva di
   35px e trascinava con se' l'intera pagina in scorrimento orizzontale (15px
   sul documento).

   `overflow-wrap: break-word` interviene **solo** quando la parola non ci sta
   in nessun modo: nei casi normali non cambia una virgola di come il testo va
   a capo. È per questo che si puo' applicare a tutti i titoli senza doverli
   guardare uno per uno — e che vale anche per le lingue che oggi non danno
   problemi, ma che domani potrebbero riceverne di piu' lunghe. */

.wl-hero__title,
.wl-section__title,
.wl-card__title,
.wl-bivio__title,
.wl-column__title,
.catalog-hero h1 {
	overflow-wrap: break-word;
}

.wl-hero__title {
	margin: 0 0 var(--mq-space-4);
	font-size: var(--mq-text-3xl);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--mq-color-sea-dark);
	/* `balance` evita la riga finale con una parola sola nei titoli lunghi;
	   dove non è supportato non cambia nulla. */
	text-wrap: balance;
}

.wl-hero__subtitle {
	margin: 0 0 var(--mq-space-6);
	font-size: var(--mq-text-md);
	line-height: 1.6;
	color: var(--mq-color-ink-muted);
	max-width: 46ch;
}

.wl-hero__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mq-space-3);
}

.wl-hero__points li {
	position: relative;
	padding-left: var(--mq-space-7);
	color: var(--mq-color-ink);
	line-height: 1.5;
}

/* Il segno di spunta è decorativo e non entra nel testo letto ad alta voce:
   è disegnato dal CSS, non scritto nel markup. */
.wl-hero__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 18px;
	height: 10px;
	border-left: 2.5px solid var(--mq-color-terracotta);
	border-bottom: 2.5px solid var(--mq-color-terracotta);
	transform: rotate(-45deg);
}

/* --- Il riquadro del modulo ----------------------------------------- */

.wl-card {
	background: var(--mq-color-bg);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius-lg);
	box-shadow: var(--mq-shadow-lg);
	padding: var(--mq-space-7);
	/* Resta agganciato mentre si scorre il testo accanto, ma solo dove c'è
	   spazio: su schermi bassi diventerebbe una trappola. */
	position: sticky;
	top: 96px;
}

@media (max-height: 780px) {
	.wl-card {
		position: static;
	}
}

.wl-card--wide {
	max-width: 640px;
	margin-inline: auto;
	position: static;
	text-align: left;
}

.wl-card__eyebrow {
	margin: 0 0 var(--mq-space-2);
	font-size: var(--mq-text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mq-color-terracotta);
}

.wl-card__title {
	margin: 0 0 var(--mq-space-2);
	font-size: var(--mq-text-xl);
	color: var(--mq-color-sea-dark);
}

.wl-card__text {
	margin: 0 0 var(--mq-space-5);
	color: var(--mq-color-ink-muted);
	font-size: var(--mq-text-sm);
	line-height: 1.6;
}

/* --- Il modulo ------------------------------------------------------- */

.wl-form {
	display: grid;
	gap: var(--mq-space-5);
}

/* Il campo trappola: fuori dallo schermo, non `display:none`. Alcuni
   programmi di compilazione automatica saltano i campi nascosti con
   `display:none` proprio perché è la trappola più nota. */
.wl-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wl-form__error {
	margin: 0;
	padding: var(--mq-space-3) var(--mq-space-4);
	background: var(--mq-color-danger-bg);
	border: 1px solid var(--mq-color-danger-border);
	border-radius: var(--mq-radius-sm);
	color: var(--mq-color-danger);
	font-size: var(--mq-text-sm);
	line-height: 1.5;
}

.wl-form__field {
	display: grid;
	gap: var(--mq-space-2);
}

.wl-form__label {
	font-weight: 700;
	color: var(--mq-color-sea-dark);
	font-size: var(--mq-text-sm);
	padding: 0;
}

.wl-form__hint {
	margin: 0 0 var(--mq-space-3);
	font-size: var(--mq-text-xs);
	line-height: 1.5;
	color: var(--mq-color-ink-muted);
}

.wl-form__input {
	width: 100%;
	min-height: var(--mq-touch-target);
	padding: var(--mq-space-3) var(--mq-space-4);
	font-size: var(--mq-text-base);
	font-family: inherit;
	color: var(--mq-color-ink);
	background: #fff;
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius-sm);
	transition: border-color var(--mq-transition-fast), box-shadow var(--mq-transition-fast);
}

.wl-form__input:focus {
	outline: none;
	border-color: var(--mq-color-primary);
	box-shadow: 0 0 0 3px rgba(11, 69, 102, 0.18);
}

.wl-form__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.wl-form__choices {
	display: grid;
	gap: var(--mq-space-2);
}

.wl-choice {
	display: flex;
	gap: var(--mq-space-3);
	align-items: flex-start;
	padding: var(--mq-space-3) var(--mq-space-4);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius-sm);
	background: #fff;
	cursor: pointer;
	transition: border-color var(--mq-transition-fast), background var(--mq-transition-fast);
}

.wl-choice:hover {
	border-color: var(--mq-color-primary);
}

/* `:has()` colora la scheda scelta; dove non c'è, resta il pallino del radio,
   che è comunque l'indicatore vero. Nessuna informazione affidata al solo
   colore. */
.wl-choice:has(input:checked) {
	border-color: var(--mq-color-primary);
	background: var(--mq-color-info-bg);
}

.wl-choice:focus-within {
	outline: 2px solid var(--mq-color-primary);
	outline-offset: 2px;
}

.wl-choice input {
	margin-top: 0.25em;
	width: 18px;
	height: 18px;
	accent-color: var(--mq-color-primary);
	flex: 0 0 auto;
}

.wl-choice__body {
	display: grid;
	gap: 2px;
}

.wl-choice__label {
	font-weight: 600;
	color: var(--mq-color-ink);
	line-height: 1.35;
}

.wl-choice__desc {
	font-size: var(--mq-text-xs);
	color: var(--mq-color-ink-muted);
	line-height: 1.45;
}

.wl-form__consents {
	display: grid;
	gap: var(--mq-space-3);
}

.wl-consent {
	display: flex;
	gap: var(--mq-space-3);
	align-items: flex-start;
	font-size: var(--mq-text-sm);
	line-height: 1.5;
	color: var(--mq-color-ink-muted);
	cursor: pointer;
}

.wl-consent input {
	margin-top: 0.2em;
	width: 18px;
	height: 18px;
	accent-color: var(--mq-color-primary);
	flex: 0 0 auto;
}

.wl-consent a {
	color: var(--mq-color-primary);
}

.wl-form__submit {
	width: 100%;
	justify-content: center;
}

.wl-form__fineprint {
	margin: 0;
	font-size: var(--mq-text-xs);
	line-height: 1.5;
	color: var(--mq-color-ink-muted);
}

/* --- Raccolta sospesa ------------------------------------------------ */

.wl-form--closed {
	padding: var(--mq-space-5);
	background: var(--mq-color-warning-bg);
	border: 1px solid var(--mq-color-warning-border);
	border-radius: var(--mq-radius-sm);
	gap: var(--mq-space-2);
}

.wl-form__closed-title {
	margin: 0;
	font-weight: 700;
	color: var(--mq-color-warning);
}

.wl-form__closed-text {
	margin: 0;
	font-size: var(--mq-text-sm);
	color: var(--mq-color-ink-muted);
	line-height: 1.5;
}

/* --- Sezioni --------------------------------------------------------- */

.wl-section {
	padding: var(--mq-space-9) 0;
	scroll-margin-top: 88px;
}

.wl-section--alt {
	background: var(--mq-color-limestone);
	border-block: 1px solid var(--mq-color-border);
}

.wl-section--closing {
	background: var(--mq-color-bg-alt);
	background-image: radial-gradient(circle at 50% 0%, rgba(11, 69, 102, 0.10), transparent 46%);
	border-top: 1px solid var(--mq-color-border);
}

.wl-section__title {
	margin: 0 0 var(--mq-space-3);
	font-size: var(--mq-text-2xl);
	color: var(--mq-color-sea-dark);
	text-wrap: balance;
}

.wl-section__lead {
	margin: 0 0 var(--mq-space-7);
	font-size: var(--mq-text-md);
	line-height: 1.6;
	color: var(--mq-color-ink-muted);
	max-width: 62ch;
}

.wl-section__note {
	margin: var(--mq-space-5) 0 0;
}

.wl-section__note a {
	color: var(--mq-color-primary);
	font-weight: 600;
}

/* --- Due colonne: cliente e professionista --------------------------- */

.wl-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mq-space-8);
}

.wl-column {
	background: var(--mq-color-bg);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius);
	box-shadow: var(--mq-shadow-sm);
	padding: var(--mq-space-6);
}

.wl-column__title {
	margin: 0 0 var(--mq-space-5);
	font-size: var(--mq-text-lg);
	color: var(--mq-color-sea-dark);
}

.wl-steps {
	counter-reset: wl-step;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mq-space-5);
}

.wl-steps li {
	counter-increment: wl-step;
	position: relative;
	padding-left: 46px;
	display: grid;
	gap: 4px;
}

/* Il numero è generato dal contatore: la lista è già un `<ol>`, quindi
   l'ordine è nel markup e questo è solo il modo in cui si vede. */
.wl-steps li::before {
	content: counter(wl-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--mq-color-primary);
	color: #fff;
	font-weight: 700;
	font-size: var(--mq-text-sm);
	font-family: var(--mq-font-base);
}

.wl-steps__label {
	font-weight: 700;
	color: var(--mq-color-ink);
	line-height: 1.35;
}

.wl-steps__text {
	color: var(--mq-color-ink-muted);
	font-size: var(--mq-text-sm);
	line-height: 1.55;
}

/* --- Il bivio: due pubblici, due strade -------------------------------

   Le due carte hanno **lo stesso peso visivo** di proposito: stesso fondo,
   stesso bordo, stesso pulsante. La pagina non deve suggerire che uno dei due
   pubblici valga meno dell'altro — e la variante `--pro` cambia solo la
   striscia in alto, che serve a distinguerle a colpo d'occhio, non a
   gerarchizzarle.

   Su schermo stretto diventano una sopra l'altra, nell'ordine del markup:
   prima chi cerca, poi chi offre. È l'ordine di frequenza, non di importanza. */

.wl-bivio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--mq-space-6);
	margin-top: var(--mq-space-6);
}

.wl-bivio__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--mq-space-3);
	padding: var(--mq-space-8) var(--mq-space-6) var(--mq-space-6);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius-lg, 20px);
	background: #fff;
}

/* La striscia che distingue le due carte senza gerarchizzarle. */
.wl-bivio__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	border-radius: var(--mq-radius-lg, 20px) var(--mq-radius-lg, 20px) 0 0;
	background: var(--mq-color-gold);
}

.wl-bivio__card--pro::before {
	background: var(--mq-color-ink);
}

.wl-bivio__eyebrow {
	margin: 0;
	font-size: var(--mq-text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mq-color-ink-muted);
}

.wl-bivio__title {
	margin: 0;
	line-height: 1.2;
}

.wl-bivio__text {
	margin: 0;
	color: var(--mq-color-ink-muted);
	line-height: 1.55;
}

.wl-bivio__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mq-space-2);
}

.wl-bivio__points li {
	position: relative;
	padding-left: var(--mq-space-5);
	font-size: var(--mq-text-sm);
	color: var(--mq-color-ink);
	line-height: 1.5;
}

.wl-bivio__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mq-color-gold);
}

/* Il pulsante va in fondo alla carta, cosi' le due carte hanno i pulsanti
   allineati anche quando i testi hanno lunghezze diverse. */
.wl-bivio__card .button {
	margin-top: auto;
	align-self: flex-start;
}

.wl-bivio__closed {
	margin: 0;
	font-size: var(--mq-text-sm);
	color: var(--mq-color-ink-muted);
}

/* Elenco dei passi a piena larghezza, da quando «Come funziona» risponde a un
   pubblico solo e non ha piu' due colonne affiancate. */
.wl-steps--wide {
	max-width: 46rem;
}

/* Telefono con prefisso fisso: il +356 e' un'etichetta, non un campo. Chi usa
   uno screen reader non lo sente (aria-hidden nel markup) perche' l'aiuto sotto
   al campo dice gia' «numero maltese, senza prefisso». */

.phone-fixed {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.phone-fixed__prefix {
	display: flex;
	align-items: center;
	padding: 0 var(--mq-space-3);
	border: 1px solid var(--mq-color-border);
	border-right: 0;
	/* 12px, non 8px: e' il raggio che il tema da' agli input. Un raggio diverso
	   fra le due meta' le fa leggere come due controlli invece che come uno. */
	border-radius: 12px 0 0 12px;
	background: var(--mq-color-surface-alt, rgba(0, 0, 0, 0.03));
	color: var(--mq-color-ink-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Specificita' allineata a `.form-field input[type="tel"]` del tema (0,2,1):
   con un solo `.phone-fixed input` la regola perdeva e il campo teneva i suoi
   12px su tutti e quattro gli angoli — misurato nel browser, non dedotto. */
.form-field .phone-fixed input[type="tel"] {
	flex: 1 1 auto;
	min-width: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Le caselle delle categorie nella candidatura: una griglia che si adatta,
   perche' venti voci in colonna sono uno scroll inutile. */
.mq-categorie {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--mq-space-2) var(--mq-space-4);
	margin-top: var(--mq-space-2);
}

/* La casella e il testo su due colonne, invece che in linea: cosi' una
   categoria che va a capo a 320px allinea la seconda riga **sotto il testo** e
   non sotto la casella. Con `display:flex` sull'etichetta il testo diventa un
   blocco a se', e il rientro viene da solo — senza padding inventati che
   cambierebbero con la dimensione del carattere. */
.mq-categorie .checkbox-option {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--mq-space-2);
}

.mq-categorie .checkbox-option input[type="checkbox"] {
	flex: 0 0 auto;
	/* Allineata alla prima riga di testo, non al centro del blocco. */
	margin-top: 0.15em;
}

.mq-categorie .checkbox-option span {
	flex: 1 1 auto;
	min-width: 0;
}

/* «Altro servizio non presente» chiude l'elenco su tutta la larghezza: e' una
   via d'uscita, non la ventunesima categoria, e occupare una colonna sola la
   farebbe leggere come tale. */
.mq-categorie__altro {
	grid-column: 1 / -1;
	margin-top: var(--mq-space-2);
	padding-top: var(--mq-space-2);
	border-top: 1px dashed var(--mq-color-border);
}

.mq-altro-campo {
	margin-top: var(--mq-space-3);
}

/* `hidden` deve vincere su `display:flex`/`grid` degli stili di modulo:
   senza questa riga l'attributo non nasconderebbe niente. */
[hidden] {
	display: none !important;
}

/* --- Il bonus -------------------------------------------------------- */

.wl-bonus {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--mq-space-8);
	align-items: center;
}

.wl-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mq-space-3);
}

.wl-facts li {
	position: relative;
	padding-left: var(--mq-space-6);
	color: var(--mq-color-ink);
	line-height: 1.55;
}

.wl-facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mq-color-gold);
}

/* Il disco dei crediti è puramente decorativo (`aria-hidden` nel markup): il
   numero è già scritto nel titolo accanto, e ripeterlo a chi ascolta sarebbe
   solo rumore. */
.wl-bonus__badge {
	width: 180px;
	height: 180px;
	display: grid;
	place-content: center;
	text-align: center;
	border-radius: 50%;
	background: var(--mq-color-petrol);
	color: #fff;
	box-shadow: var(--mq-shadow-lg);
}

.wl-bonus__number {
	display: block;
	font-family: var(--mq-font-display);
	font-size: 4rem;
	line-height: 1;
	font-weight: 700;
	color: var(--mq-color-gold);
}

.wl-bonus__unit {
	display: block;
	margin-top: var(--mq-space-2);
	font-size: var(--mq-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Domande --------------------------------------------------------- */

.wl-faq {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mq-space-6);
}

.wl-faq__item h3 {
	margin: 0 0 var(--mq-space-2);
	font-size: var(--mq-text-md);
	color: var(--mq-color-sea-dark);
}

.wl-faq__item p {
	margin: 0;
	color: var(--mq-color-ink-muted);
	line-height: 1.6;
}

/* --- Chiusura -------------------------------------------------------- */

.wl-closing {
	text-align: center;
}

.wl-closing .wl-section__lead {
	margin-inline: auto;
}

/* --- Adattamento ------------------------------------------------------ */

@media (max-width: 900px) {
	.wl-hero__inner,
	.wl-columns,
	.wl-bonus,
	.wl-faq {
		grid-template-columns: minmax(0, 1fr);
	}

	.wl-card {
		position: static;
	}

	.wl-bonus__badge {
		justify-self: center;
	}

	.wl-hero {
		padding: var(--mq-space-7) 0 var(--mq-space-8);
	}

	.wl-section {
		padding: var(--mq-space-8) 0;
	}
}

@media (max-width: 600px) {
	.wl-card {
		padding: var(--mq-space-5);
		border-radius: var(--mq-radius);
	}

	.wl-column {
		padding: var(--mq-space-5);
	}

	.wl-bonus__badge {
		width: 150px;
		height: 150px;
	}

	.wl-bonus__number {
		font-size: 3.2rem;
	}
}

/* =====================================================================
 * Avviso «nessun professionista disponibile» (2026-08-21)
 *
 * Non è un errore di compilazione e non deve sembrarlo: chi lo legge non ha
 * sbagliato niente. Riusa il riquadro d'avviso già esistente e aggiunge solo
 * la gerarchia fra titolo e spiegazione, più una misura di riga leggibile —
 * il testo è un paragrafo, non una frase, e a piena larghezza si legge male.
 * ================================================================== */

.mq-no-pro {
	display: grid;
	gap: var(--mq-space-2);
}

.mq-no-pro__title {
	margin: 0;
	font-size: var(--mq-text-md);
	line-height: 1.35;
}

.mq-no-pro__text {
	margin: 0;
	max-width: 68ch;
	line-height: 1.6;
}

/* Il fuoco ci arriva da `tabindex="-1"` dopo il redirect: senza contorno
   visibile, chi naviga da tastiera non saprebbe dove si trova. */
.mq-no-pro:focus-visible {
	outline: 2px solid var(--mq-color-primary);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Video della pagina di lancio

   Il riquadro tiene il rapporto 16:9 con `aspect-ratio`, così il posto è già
   occupato prima che la copertina arrivi e la pagina non sobbalza quando
   arriva (e non sobbalza nemmeno al clic, perché l'iframe eredita lo stesso
   riquadro del pulsante che sostituisce).
   -------------------------------------------------------------------------- */
.wl-video {
	max-width: 860px;
	margin: 0 auto;
}

.wl-video__avvio,
.wl-video__player {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--mq-radius-lg);
	box-shadow: var(--mq-shadow);
}

/* Il pulsante non deve somigliare a un pulsante di modulo: è una copertina su
   cui si clicca. Ma resta un <button>, con tutto ciò che ne consegue per la
   tastiera. */
.wl-video__avvio {
	position: relative;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: var(--mq-color-sea-dark);
	color: #fff;
	text-align: left;
	font: inherit;
}

.wl-video__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Leggermente scurita: sopra ci vanno testo bianco e simbolo, e su una
	   copertina chiara sparirebbero entrambi. */
	filter: brightness(0.82);
	transition: filter var(--mq-transition-fast), transform var(--mq-transition-fast);
}

.wl-video__avvio:hover .wl-video__poster,
.wl-video__avvio:focus-visible .wl-video__poster {
	filter: brightness(0.7);
	transform: scale(1.02);
}

.wl-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.wl-video__play-sfondo {
	fill: rgba(28, 35, 33, 0.8);
	transition: fill var(--mq-transition-fast);
}

.wl-video__play-triangolo {
	fill: #fff;
}

.wl-video__avvio:hover .wl-video__play-sfondo,
.wl-video__avvio:focus-visible .wl-video__play-sfondo {
	fill: var(--mq-color-terracotta);
}

.wl-video__etichetta {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 56px 20px 16px;
	background: linear-gradient(to top, rgba(8, 47, 56, 0.92) 0%, rgba(8, 47, 56, 0.75) 45%, rgba(8, 47, 56, 0) 100%);
	pointer-events: none;
}

.wl-video__etichetta-titolo {
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
}

.wl-video__etichetta-nota {
	font-size: 0.85rem;
	opacity: 0.85;
}

/* Il fuoco da tastiera deve vedersi *fuori* dal riquadro: dentro finirebbe
   sopra la copertina scura e sarebbe illeggibile. */
.wl-video__avvio:focus-visible {
	outline: 3px solid var(--mq-color-gold);
	outline-offset: 3px;
}

.wl-video__privacy {
	margin: 12px 0 0;
	color: var(--mq-color-ink-muted);
	font-size: 0.85rem;
	text-align: center;
}

@media (max-width: 600px) {
	.wl-video__avvio,
	.wl-video__player {
		border-radius: var(--mq-radius);
	}

	.wl-video__etichetta {
		padding: 28px 14px 10px;
	}

	/* Il titolo dentro la copertina sparisce: su un riquadro alto meno di 220px
	   finiva sopra le scritte dell'immagine, illeggibile sopra illeggibile. Non
	   si perde niente — la stessa frase e' l'intestazione appena sopra, e
	   ripeterla due volte a mezzo centimetro di distanza non serviva a nessuno.
	   Resta la durata, che l'intestazione non dice. */
	.wl-video__etichetta-titolo {
		display: none;
	}

	.wl-video__etichetta-nota {
		font-size: 0.8rem;
	}
}

/* Chi ha chiesto meno movimento non deve subire l'ingrandimento della
   copertina: resta il cambio di luminosità, che informa senza muovere. */
@media (prefers-reduced-motion: reduce) {
	.wl-video__poster {
		transition: filter var(--mq-transition-fast);
	}

	.wl-video__avvio:hover .wl-video__poster,
	.wl-video__avvio:focus-visible .wl-video__poster {
		transform: none;
	}
}

/* =====================================================================
   App installabile e notifiche sul dispositivo (2026-08-27)
   ===================================================================== */

/* --- L'invito a installare ------------------------------------------- */

/* Sta in basso e non in alto: in cima c'è l'intestazione, e un invito che la
   copre nasconde proprio i pulsanti con cui si va da qualche parte. In basso è
   anche dove arriva il pollice su un telefono, che è il dispositivo su cui
   questo invito ha senso. */
.mq-install {
	position: fixed;
	left: 50%;
	bottom: 0;
	z-index: 60;
	width: min(560px, calc(100% - 2 * var(--mq-space-4)));
	/* `env()` con ripiego a zero: su iOS in modalità app la barra di sistema in
	   basso mangerebbe il pulsante di chiusura. */
	margin-bottom: calc(var(--mq-space-4) + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, calc(100% + var(--mq-space-6)));
	opacity: 0;
	transition: transform var(--mq-transition-slow), opacity var(--mq-transition-slow);
}

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

.mq-install__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--mq-space-3) var(--mq-space-4);
	align-items: start;
	padding: var(--mq-space-4) var(--mq-space-6) var(--mq-space-4) var(--mq-space-4);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius-lg);
	background: var(--mq-color-bg);
	box-shadow: var(--mq-shadow-lg);
}

.mq-install__mark {
	display: block;
	color: var(--mq-color-sea);
	line-height: 0;
}

.mq-install__title {
	margin: 0 0 var(--mq-space-1);
	font-family: var(--mq-font-display);
	font-size: var(--mq-text-md);
	color: var(--mq-color-sea-dark);
}

.mq-install__lead {
	margin: 0;
	font-size: var(--mq-text-sm);
	color: var(--mq-color-ink-muted);
}

.mq-install__actions {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mq-space-3);
}

/* «Non mostrare più» è una scelta definitiva e sta più in basso nella
   gerarchia: ha la forma di un collegamento, non di un pulsante. Resta però un
   `<button>` nel markup, perché non porta da nessuna parte. */
.mq-install__never {
	padding: 0;
	border: 0;
	background: none;
	color: var(--mq-color-ink-muted);
	font-family: inherit;
	font-size: var(--mq-text-xs);
	text-decoration: underline;
	cursor: pointer;
}

.mq-install__never:hover,
.mq-install__never:focus-visible {
	color: var(--mq-color-sea);
}

/* La X ha un'area di tocco di 44px anche se il segno è piccolo: sotto quella
   misura, su un telefono, si sbaglia bersaglio e si finisce per toccare
   «Installa». */
.mq-install__close {
	position: absolute;
	top: var(--mq-space-1);
	right: var(--mq-space-1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--mq-color-ink-muted);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.mq-install__close:hover,
.mq-install__close:focus-visible {
	background: var(--mq-color-limestone);
	color: var(--mq-color-ink);
}

@media (max-width: 600px) {
	.mq-install__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.mq-install__mark {
		display: none;
	}

	.mq-install__actions {
		grid-column: 1;
	}
}

/* Chi ha chiesto meno movimento riceve l'invito già al suo posto: compare e
   basta, senza scivolare da sotto. */
@media (prefers-reduced-motion: reduce) {
	.mq-install {
		transition: opacity var(--mq-transition-fast);
		transform: translate(-50%, 0);
	}
}

/* --- Notifiche sul dispositivo --------------------------------------- */

.mq-push {
	margin-top: var(--mq-space-4);
	padding-top: var(--mq-space-4);
	border-top: 1px solid var(--mq-color-border);
}

.mq-push__message:empty {
	display: none;
}

.mq-push__devices {
	margin-top: var(--mq-space-3);
}

.mq-push__list {
	margin: var(--mq-space-2) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--mq-space-2);
}

.mq-push__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mq-space-2);
	padding: var(--mq-space-2) var(--mq-space-3);
	border: 1px solid var(--mq-color-border);
	border-radius: var(--mq-radius-sm);
	background: var(--mq-color-bg);
}

.mq-push__device {
	font-weight: 700;
	color: var(--mq-color-sea-dark);
}

/* Il pulsante «Togli» si allontana dal nome: su una riga sola finirebbe
   attaccato alla data e si toccherebbe per sbaglio. */
.mq-push__list li .button {
	margin-left: auto;
}

/* --- «Notifiche sul dispositivo»: sezione propria (2026-08-27) ---------- */

/* Il pannello non è più una riga in coda a «Stato account»: ha una sezione
   sua, quindi non serve più il filetto che lo staccava da ciò che aveva
   sopra. */
.mq-push {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mq-push__intro {
	margin: 0 0 var(--mq-space-2);
	color: var(--mq-color-ink);
}

.mq-push__pannello {
	margin-top: var(--mq-space-4);
}

/* La nota che sostituisce i pulsanti dove non si può fare niente (iPhone
   prima dell'installazione, browser senza Push API): deve leggersi come
   un'informazione, non come un errore. */
.mq-push__nota:empty {
	display: none;
}

.mq-push__nota {
	margin-top: var(--mq-space-3);
	padding: var(--mq-space-3);
	border-radius: var(--mq-radius-sm);
	background: var(--mq-color-info-bg);
	color: var(--mq-color-info);
}

/* Il rimando in cima a «Notifiche»: corregge la svolta sbagliata di chi cerca
   l'interruttore dove sta la posta. Piccolo di proposito — è un cartello
   stradale, non un invito. */
.mq-push__rimando {
	margin: 0 0 var(--mq-space-3);
	font-size: var(--mq-text-sm);
}

.mq-push__stato {
	margin: 0 0 var(--mq-space-3);
}