/**
 * Usatomania — Wizard Prenotazione Appuntamenti
 * Mobile-first, card-based, design token Usatomania.
 */

.usm-wizard {
	--wz-gap: var(--usm-space-md, 16px);
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(16px, 4vw, 28px);
	background: var(--usm-surface, #efeee8);
	border: 1px solid var(--usm-outline, #807660);
	border-radius: var(--usm-radius-lg, 18px);
	font-family: var(--usm-font-body, "Work Sans", system-ui, sans-serif);
	color: var(--usm-dark-alt, #1b1c19);
	box-shadow: var(--usm-shadow-md, 0 6px 24px rgba(0,0,0,.08));
}

/* ── Progress ──────────────────────────────────────────────── */
.usm-wizard__progress {
	display: flex;
	list-style: none;
	margin: 0 0 clamp(18px, 4vw, 26px);
	padding: 0;
}
.usm-wizard__dot {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	font-size: 11px;
	color: var(--usm-olive, #79806e);
	text-align: center;
}
.usm-wizard__dot::before {
	content: "";
	position: absolute;
	top: 15px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--usm-outline, #807660);
	opacity: .35;
	z-index: 0;
}
.usm-wizard__dot:first-child::before { display: none; }
.usm-wizard__dot span {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--usm-bg, #fbf9f3);
	border: 2px solid var(--usm-outline, #807660);
	font-weight: 700;
	font-size: 13px;
	transition: all .25s ease;
}
.usm-wizard__dot em { font-style: normal; letter-spacing: .02em; }
.usm-wizard__dot.is-active span {
	background: var(--usm-gold, #EBBD17);
	border-color: var(--usm-gold, #EBBD17);
	color: var(--usm-dark, #151616);
	box-shadow: 0 0 0 4px var(--usm-gold-muted, rgba(235,189,23,.25));
}
.usm-wizard__dot.is-active { color: var(--usm-dark-alt, #1b1c19); font-weight: 600; }
.usm-wizard__dot.is-done span {
	background: var(--usm-dark, #151616);
	border-color: var(--usm-dark, #151616);
	color: var(--usm-gold, #EBBD17);
}
.usm-wizard__dot.is-done::before,
.usm-wizard__dot.is-active::before { opacity: 1; background: var(--usm-gold, #EBBD17); }

/* ── Step ──────────────────────────────────────────────────── */
.usm-wizard__step { display: none; animation: usm-fade .3s ease; }
.usm-wizard__step.is-active { display: block; }
.usm-wizard__step--center { text-align: center; }
@keyframes usm-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.usm-wizard__title {
	font-family: var(--usm-font-headline, "Newsreader", serif);
	font-size: clamp(20px, 5vw, 26px);
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--usm-dark, #151616);
}
.usm-wizard__subtitle {
	font-family: var(--usm-font-headline, "Newsreader", serif);
	font-size: clamp(17px, 4vw, 20px);
	margin: 0 0 4px;
}
.usm-wizard__lead { margin: 0 0 var(--wz-gap); color: var(--usm-olive, #79806e); line-height: 1.5; }
.usm-wizard__lead--sm { font-size: 14px; margin-bottom: 12px; }
.usm-wizard__hint { font-size: 13px; color: var(--usm-olive, #79806e); margin: 10px 0 0; text-align: center; }
.usm-wizard__msg { text-align: center; color: var(--usm-olive, #79806e); padding: 20px; }
.usm-wizard__msg--empty { grid-column: 1 / -1; }

/* ── Campi form ────────────────────────────────────────────── */
.usm-field { margin-bottom: var(--wz-gap); }
.usm-field__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--usm-dark-alt, #1b1c19); }
.usm-field__opt { font-weight: 400; color: var(--usm-olive, #79806e); }
.usm-field__input {
	width: 100%;
	padding: 13px 14px;
	font-size: 16px; /* >=16px: evita zoom iOS */
	font-family: inherit;
	color: var(--usm-dark-alt, #1b1c19);
	background: var(--usm-bg, #fbf9f3);
	border: 1.5px solid var(--usm-outline, #807660);
	border-radius: var(--usm-radius-md, 12px);
	transition: border-color .2s ease, box-shadow .2s ease;
	box-sizing: border-box;
}
.usm-field__input:focus {
	outline: none;
	border-color: var(--usm-gold, #EBBD17);
	box-shadow: 0 0 0 3px var(--usm-gold-muted, rgba(235,189,23,.25));
}
.usm-cf-input, #usm-f-cf { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.usm-field--readonly .usm-field__input { background: var(--usm-surface-alt, #e9e8e2); color: var(--usm-olive, #79806e); cursor: not-allowed; }
.usm-field__error { color: var(--usm-error, #ba1a1a); font-size: 13px; margin: 6px 0 0; min-height: 1em; }
.usm-field__error--form { text-align: center; margin-top: 4px; }
textarea.usm-field__input { resize: vertical; min-height: 54px; }

.usm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--wz-gap); }
.usm-form .usm-field--full { grid-column: 1 / -1; }
@media (max-width: 480px) { .usm-form { grid-template-columns: 1fr; } }

/* ── Pulsanti ──────────────────────────────────────────────── */
.usm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 13px 22px;
	font-family: var(--usm-font-label, "Work Sans", sans-serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border: 1.5px solid transparent;
	border-radius: var(--usm-radius-pill, 999px);
	cursor: pointer;
	transition: transform .12s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.usm-btn:active { transform: translateY(1px); }
.usm-btn[disabled] { opacity: .5; cursor: not-allowed; }
.usm-btn--primary { background: var(--usm-gold, #EBBD17); color: var(--usm-dark, #151616); }
.usm-btn--primary:hover:not([disabled]) { background: var(--usm-gold-dark, #d9ad10); box-shadow: var(--usm-shadow-sm, 0 3px 12px rgba(0,0,0,.12)); }
.usm-btn--ghost { background: transparent; color: var(--usm-dark-alt, #1b1c19); border-color: var(--usm-outline, #807660); }
.usm-btn--ghost:hover { background: var(--usm-surface-alt, #e9e8e2); }
.usm-btn--danger { background: var(--usm-error, #ba1a1a); color: #fff; }
.usm-btn--danger:hover:not([disabled]) { filter: brightness(.94); }
.usm-btn--block { width: 100%; }

.usm-wizard__actions { margin-top: var(--wz-gap); }
.usm-wizard__actions--split { display: flex; justify-content: space-between; gap: 12px; }
.usm-wizard__actions--split .usm-btn { flex: 0 1 auto; }

/* ── Griglia card (giorni / slot) ──────────────────────────── */
.usm-monthnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.usm-monthnav__label { font-family: var(--usm-font-headline, "Newsreader", serif); font-size: 18px; font-weight: 600; text-transform: capitalize; }
.usm-monthnav__btn {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	background: var(--usm-bg, #fbf9f3);
	border: 1.5px solid var(--usm-outline, #807660);
	border-radius: 50%;
	cursor: pointer;
	transition: background .2s ease;
}
.usm-monthnav__btn:hover { background: var(--usm-surface-alt, #e9e8e2); }

.usm-cal-dow {
	display: grid; grid-template-columns: repeat(7, 1fr);
	gap: 6px; margin-bottom: 6px;
	font-size: 11px; font-weight: 600; text-align: center; color: var(--usm-olive, #79806e);
}
.usm-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.usm-daycard {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--usm-bg, #fbf9f3);
	border: 1.5px solid var(--usm-outline, #807660);
	border-radius: var(--usm-radius-md, 12px);
	cursor: pointer;
	font-family: inherit;
	transition: transform .12s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.usm-daycard:hover:not(.is-disabled) {
	transform: translateY(-2px);
	border-color: var(--usm-gold, #EBBD17);
	box-shadow: var(--usm-shadow-sm, 0 3px 12px rgba(0,0,0,.12));
}
.usm-daycard__num { font-size: 16px; font-weight: 700; color: var(--usm-dark, #151616); }
.usm-daycard__badge {
	margin-top: 2px;
	font-size: 10px; font-weight: 600;
	color: var(--usm-dark, #151616);
	background: var(--usm-gold, #EBBD17);
	border-radius: 999px;
	padding: 1px 7px;
}
.usm-daycard.is-disabled { background: var(--usm-surface-alt, #e9e8e2); border-color: transparent; cursor: not-allowed; opacity: .55; }
.usm-daycard.is-disabled .usm-daycard__num { color: var(--usm-olive, #79806e); font-weight: 500; }
.usm-daycard--empty { background: transparent; border: none; cursor: default; pointer-events: none; }

.usm-cardgrid--slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.usm-slotcard {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 14px 8px;
	background: var(--usm-bg, #fbf9f3);
	border: 1.5px solid var(--usm-outline, #807660);
	border-radius: var(--usm-radius-md, 12px);
	cursor: pointer; font-family: inherit;
	transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.usm-slotcard:hover { transform: translateY(-2px); border-color: var(--usm-gold, #EBBD17); box-shadow: var(--usm-shadow-sm, 0 3px 12px rgba(0,0,0,.12)); }
.usm-slotcard__time { font-size: 17px; font-weight: 700; color: var(--usm-dark, #151616); }
.usm-slotcard__dip { font-size: 11px; color: var(--usm-olive, #79806e); }

/* ── Card appuntamento / recap ─────────────────────────────── */
.usm-appt-card {
	background: var(--usm-bg, #fbf9f3);
	border: 1.5px solid var(--usm-outline, #807660);
	border-radius: var(--usm-radius-md, 12px);
	padding: 16px;
	margin: 14px 0;
}
.usm-appt-card--success { border-color: var(--usm-success, #2e7d32); text-align: left; display: inline-block; min-width: 260px; }
.usm-appt-card__row { display: flex; align-items: center; gap: 12px; }
.usm-appt-card__row .material-symbols-outlined { color: var(--usm-gold, #EBBD17); font-size: 28px; }
.usm-appt-card__row strong { display: block; font-size: 15px; }
.usm-appt-card__row span:not(.material-symbols-outlined) { display: block; font-size: 13px; color: var(--usm-olive, #79806e); }

.usm-recap {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	background: var(--usm-gold-muted, rgba(235,189,23,.18));
	border: 1px solid var(--usm-gold, #EBBD17);
	border-radius: var(--usm-radius-md, 12px);
	padding: 10px 14px; margin-bottom: var(--wz-gap);
	font-size: 14px;
}
.usm-recap .material-symbols-outlined { font-size: 20px; color: var(--usm-gold-dark, #d9ad10); }

/* ── Notice (blocco) ───────────────────────────────────────── */
.usm-notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--usm-radius-md, 12px); margin-bottom: 6px; }
.usm-notice--warn { background: var(--usm-gold-muted, rgba(235,189,23,.18)); border: 1px solid var(--usm-gold, #EBBD17); }
.usm-notice__icon { font-size: 26px; color: var(--usm-gold-dark, #d9ad10); }
.usm-notice__title { margin: 0 0 4px; font-size: 16px; }
.usm-notice p { margin: 0; font-size: 14px; line-height: 1.45; }

/* ── Successo ──────────────────────────────────────────────── */
.usm-success__icon { font-size: 64px; color: var(--usm-success, #2e7d32); }

/* ── Overlay / spinner ─────────────────────────────────────── */
.usm-wizard__overlay {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	background: rgba(251,249,243,.82);
	backdrop-filter: blur(2px);
	border-radius: inherit;
	z-index: 5;
}
.usm-wizard__overlay-text { font-size: 14px; color: var(--usm-dark-alt, #1b1c19); font-weight: 600; }
.usm-spinner {
	width: 34px; height: 34px;
	border: 3px solid var(--usm-gold-muted, rgba(235,189,23,.3));
	border-top-color: var(--usm-gold, #EBBD17);
	border-radius: 50%;
	animation: usm-spin .7s linear infinite;
}
@keyframes usm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.usm-wizard__step, .usm-btn, .usm-daycard, .usm-slotcard { animation: none; transition: none; }
}

/* =============================================================
   PAGINA "PRENOTA APPUNTAMENTO" — sezioni di contenuto
   =============================================================
   Il wizard qui sopra è il componente; queste regole vestono la pagina
   che lo ospita (widget HTML dentro i container Elementor della pagina 66).
   Classi tutte prefissate .usm-appt-* per non toccare nient'altro.
   ============================================================= */

/* ── Intestazione di sezione ─────────────────────────────────── */
.usm-appt-head {
	max-width: 720px;
	margin: 0 auto 36px;
	text-align: center;
}
.usm-appt-head__eyebrow {
	margin: 0 0 8px;
	font-family: var(--usm-font-accent, 'Caveat', cursive);
	font-size: 22px;
	color: var(--usm-gold-dark, #c9a110);
}
.usm-appt-head__title {
	margin: 0 0 12px;
	font-family: var(--usm-font-serif, 'Playfair Display', Georgia, serif);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--usm-dark, #151616);
}
.usm-appt-head__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--usm-text-muted, #79806e);
}

/* ── Come funziona: 4 passi ──────────────────────────────────── */
.usm-appt-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-bottom: 8px;
}
.usm-appt-step {
	position: relative;
	padding: 28px 22px 24px;
	background: #fff;
	border: 1px solid var(--usm-surface-alt, #e9e8e2);
	border-radius: var(--usm-radius, 12px);
	transition:
		border-color var(--usm-transition-md, 250ms ease),
		transform var(--usm-transition-md, 250ms ease);
}
.usm-appt-step:hover {
	border-color: var(--usm-gold, #EBBD17);
	transform: translateY(-3px);
}
/* Il numero è decorativo: sta in alto a destra, sbiadito, e non compete
   col titolo del passo. */
.usm-appt-step__num {
	position: absolute;
	top: 12px;
	right: 16px;
	font-family: var(--usm-font-serif, 'Playfair Display', Georgia, serif);
	font-size: 40px;
	line-height: 1;
	color: rgba(235, 189, 23, .35);
}
.usm-appt-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: rgba(235, 189, 23, .16);
	color: var(--usm-gold-dark, #c9a110);
	font-size: 24px;
}
.usm-appt-step__title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--usm-dark-alt, #1b1c19);
}
.usm-appt-step__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--usm-text-muted, #79806e);
}

/* ── Cosa ritiriamo / cosa no ────────────────────────────────── */
.usm-appt-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}
.usm-appt-col {
	padding: 26px 24px;
	background: #fff;
	border: 1px solid var(--usm-surface-alt, #e9e8e2);
	border-radius: var(--usm-radius, 12px);
}
.usm-appt-col__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--usm-surface, #efeee8);
	font-size: 16px;
	font-weight: 700;
	color: var(--usm-dark-alt, #1b1c19);
}
.usm-appt-col--si .usm-appt-col__title .material-symbols-outlined { color: #386a20; }
.usm-appt-col--no .usm-appt-col__title .material-symbols-outlined { color: var(--usm-error, #ba1a1a); }
.usm-appt-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.usm-appt-col li {
	position: relative;
	padding: 7px 0 7px 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--usm-text, #1b1c19);
}
.usm-appt-col li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 15px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--usm-gold, #EBBD17);
}
.usm-appt-col--no li::before { background: var(--usm-outline, #807660); }

/* Il contenuto è un paragrafo con testo, <strong> e un link: con display:flex
   ognuno di questi diventava un flex item a sé, affiancato agli altri, e le
   parole si accavallavano appena lo spazio si stringeva. Deve restare testo
   che scorre; l'icona si allinea all'inizio con un float. */
.usm-appt-note {
	display: flow-root;
	margin: 20px 0 0;
	padding: 16px 18px;
	background: rgba(235, 189, 23, .10);
	border: 1px solid rgba(235, 189, 23, .35);
	border-radius: var(--usm-radius, 12px);
	font-size: 14px;
	line-height: 1.6;
	color: var(--usm-text, #1b1c19);
}
.usm-appt-note .material-symbols-outlined {
	float: left;
	margin: 1px 8px 0 0;
	font-size: 20px;
	color: var(--usm-gold-dark, #c9a110);
}

/* ── FAQ (details/summary nativi: nessun JS) ─────────────────── */
.usm-appt-faq {
	max-width: 780px;
	margin: 0 auto;
}
.usm-appt-faq__item {
	background: #fff;
	border: 1px solid var(--usm-surface-alt, #e9e8e2);
	border-radius: var(--usm-radius, 12px);
	margin-bottom: 10px;
	overflow: hidden;
}
.usm-appt-faq__item[open] { border-color: var(--usm-gold, #EBBD17); }
.usm-appt-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--usm-dark-alt, #1b1c19);
	list-style: none;
}
.usm-appt-faq__q::-webkit-details-marker { display: none; }
/* Freccia disegnata col bordo: nessuna dipendenza da icon font. */
.usm-appt-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--usm-gold-dark, #c9a110);
	border-bottom: 2px solid var(--usm-gold-dark, #c9a110);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--usm-transition-md, 250ms ease);
}
.usm-appt-faq__item[open] .usm-appt-faq__q::after {
	transform: rotate(-135deg) translateY(-2px);
}
.usm-appt-faq__a {
	padding: 0 20px 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--usm-text-muted, #79806e);
}
.usm-appt-faq__a p { margin: 0; }

/* ── Dove siamo (sezione scura) ──────────────────────────────── */
.usm-appt-dove { color: #fff; }
.usm-appt-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 22px;
}
.usm-appt-info__item {
	display: grid;
	grid-template-columns: 42px 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 2px;
	align-items: start;
}
.usm-appt-info__item .material-symbols-outlined {
	grid-row: 1 / 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(235, 189, 23, .16);
	color: var(--usm-gold, #EBBD17);
	font-size: 22px;
}
.usm-appt-info__item strong {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}
.usm-appt-info__item span:not(.material-symbols-outlined) {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .7);
}
.usm-appt-info__item a { color: var(--usm-gold, #EBBD17); text-decoration: none; }
.usm-appt-info__item a:hover { text-decoration: underline; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.usm-appt-head { margin-bottom: 26px; }
	.usm-appt-step { padding: 22px 18px 20px; }
	.usm-appt-step__num { font-size: 32px; }
	.usm-appt-col { padding: 20px 18px; }
	.usm-appt-faq__q { padding: 14px 16px; font-size: 15px; }
	.usm-appt-faq__a { padding: 0 16px 16px; }

	/* La nota gialla era l'unico blocco senza adattamento sotto i 768px: il
	   padding da desktop la rendeva sproporzionata e il numero di telefono,
	   scritto con spazio unificatore, sfondava la riga. */
	.usm-appt-note {
		margin-top: 16px;
		padding: 14px;
		border-radius: 10px;
		font-size: 13.5px;
		line-height: 1.55;
		overflow-wrap: anywhere;
	}
	.usm-appt-note .material-symbols-outlined { font-size: 18px; }
}

/* ── Titolo di pagina ──────────────────────────────────────────────
   La pagina non aveva alcun H1: il tema nasconde l intestazione
   standard, e si partiva direttamente da un H2. */
.usm-appt-page-title {
    max-width: 720px;
    margin: 0 auto 8px;
    font-family: var(--usm-font-headline, "Newsreader", Georgia, serif);
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.12;
    text-align: center;
    color: var(--usm-text, #1b1c19);
}

@media (max-width: 767.98px) {
    .usm-appt-page-title { margin-bottom: 4px; }
}


/* =============================================================
   Pagina appuntamenti — versione a blocchi Elementor
   =============================================================
   I contenuti erano widget HTML e la redazione non poteva toccarli senza
   mettere le mani nel codice. Ora sono blocchi nativi, modificabili
   dall'editor come qualunque altra pagina.

   Le regole qui sotto riportano ai blocchi nativi esattamente lo stile che
   avevano i vecchi componenti: stessi caratteri, stesse misure, stessi
   colori, presi uno a uno dalle regole .usm-appt-* piu' su in questo file.
   Le classi (usm-appt-*) sono impostate sul widget dal pannello
   "Avanzate > Classi CSS" e restano anche se un blocco viene rifatto. */

/* ── Intestazioni: centrate, come nell'originale ──────────────*/
.usm-appt-titolo,
.usm-appt-occhiello,
.usm-appt-sottotitolo,
.usm-appt-introduzione {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.usm-appt-titolo .elementor-heading-title {
    margin: 0 0 8px;
    font-family: var(--usm-font-headline, "Newsreader", Georgia, serif);
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--usm-text, #1b1c19);
}

/* L'occhiello e' scritto a mano: e' il tocco che distingue questa pagina. */
.usm-appt-occhiello .elementor-heading-title {
    margin: 0 0 8px;
    font-family: var(--usm-font-accent, 'Caveat', cursive);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--usm-gold-dark, #c9a110);
}

.usm-appt-sottotitolo .elementor-heading-title {
    margin: 0 0 12px;
    font-family: var(--usm-font-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--usm-dark, #151616);
}

.usm-appt-introduzione {
    font-size: 16px;
    line-height: 1.6;
    color: var(--usm-text-muted, #79806e);
    margin-bottom: 36px;
}

.usm-appt-introduzione p { margin: 0; }

/* ── I quattro passaggi ───────────────────────────────────────*/
.e-con-full:has(> .usm-appt-passaggio),
.e-con:has(> .e-con-inner > .usm-appt-passaggio) {
    counter-reset: passaggio;
}

.usm-appt-passaggio {
    flex: 1 1 0 !important;
    min-width: 190px;
    position: relative;
    width: auto !important;
    padding: 28px 22px 24px;
    background: #fff;
    border: 1px solid var(--usm-surface-alt, #e9e8e2);
    border-radius: var(--usm-radius, 12px);
    transition:
        border-color var(--usm-transition-md, 250ms ease),
        transform var(--usm-transition-md, 250ms ease);
}

.usm-appt-passaggio:hover {
    border-color: var(--usm-gold, #EBBD17);
    transform: translateY(-3px);
}

/* Il numero e' decorativo: grande, sbiadito, in alto a destra, e non
   compete col titolo del passo. */
.usm-appt-passaggio::before {
    counter-increment: passaggio;
    content: counter(passaggio);
    position: absolute;
    top: 12px;
    right: 16px;
    font-family: var(--usm-font-serif, 'Playfair Display', Georgia, serif);
    font-size: 40px;
    line-height: 1;
    color: rgba(235, 189, 23, .35);
}

.usm-appt-passaggio .elementor-icon-box-wrapper,
.usm-appt-passaggio .elementor-icon-box-content {
    text-align: left;
}

.usm-appt-passaggio .elementor-icon-box-icon {
    margin: 0 0 14px;
    text-align: left;
}

/* L'icona torna nel suo tondo color miele. */
.usm-appt-passaggio .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(235, 189, 23, .16);
    color: var(--usm-gold-dark, #c9a110);
    font-size: 24px;
}

.usm-appt-passaggio .elementor-icon-box-title,
.usm-appt-passaggio .elementor-icon-box-title a {
    margin: 0 0 8px;
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--usm-dark-alt, #1b1c19);
}

.usm-appt-passaggio .elementor-icon-box-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--usm-text-muted, #79806e);
}

/* ── Cosa ritiriamo / cosa no: due riquadri affiancati ────────
   Elementor porta le classi personalizzate sui widget ma non sui
   contenitori (verificato: nel markup `usm-appt-colonna` non compare).
   I due riquadri si riconoscono quindi da cosa contengono: la colonna e'
   il contenitore che ha un elenco come figlio diretto, la riga e' quello
   che ce l'ha come nipote. */
.e-con-full:has(> .e-con-full > .usm-appt-elenco),
.e-con:has(> .e-con-inner > .e-con > .e-con-inner > .usm-appt-elenco) {
    gap: 20px;
    flex-wrap: wrap !important;
}

.e-con-full:has(> .usm-appt-elenco),
.e-con:has(> .e-con-inner > .usm-appt-elenco) {
    flex: 1 1 300px !important;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--usm-surface-alt, #e9e8e2);
    border-radius: var(--usm-radius, 12px);
}

.usm-appt-colonna__titolo .elementor-heading-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--usm-surface, #efeee8);
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--usm-dark-alt, #1b1c19);
}

/* Il segno di spunta e la crocetta prima del titolo, nei colori di prima. */
.usm-appt-colonna__titolo .elementor-heading-title::before {
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
    line-height: 1;
}

.usm-appt-colonna__titolo--si .elementor-heading-title::before {
    content: 'check_circle';
    color: #386a20;
}

.usm-appt-colonna__titolo--no .elementor-heading-title::before {
    content: 'cancel';
    color: var(--usm-error, #ba1a1a);
}

/* Gli elenchi tornano a pallini, non a spunte ripetute. */
.usm-appt-elenco .elementor-icon-list-items {
    display: block;
}

.usm-appt-elenco .elementor-icon-list-item {
    position: relative;
    /* Elementor azzera il padding delle voci: senza !important il pallino
       finisce sotto la prima parola. */
    padding: 7px 0 7px 20px !important;
    display: block !important;
}

.usm-appt-elenco .elementor-icon-list-icon,
.usm-appt-elenco .elementor-icon-list-icon svg,
.usm-appt-elenco .elementor-icon-list-icon i {
    display: none !important;
}

.usm-appt-elenco .elementor-icon-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--usm-gold, #EBBD17);
}

.usm-appt-elenco--no .elementor-icon-list-item::before {
    background: var(--usm-outline, #807660);
}

.usm-appt-elenco .elementor-icon-list-text {
    padding: 0 !important;
    font-size: 15px;
    line-height: 1.5;
    color: var(--usm-text, #1b1c19);
}

/* ── La nota sui mobili ───────────────────────────────────────*/
.usm-appt-nota-blocco {
    margin: 20px 0 0;
    padding: 16px 18px;
    background: rgba(235, 189, 23, .10);
    border: 1px solid rgba(235, 189, 23, .35);
    border-left: 1px solid rgba(235, 189, 23, .35);
    border-radius: var(--usm-radius, 12px);
    font-size: 14px;
    line-height: 1.6;
    color: var(--usm-text, #1b1c19);
}

.usm-appt-nota-blocco p { margin: 0; }

.usm-appt-nota-blocco p::before {
    content: 'info';
    float: left;
    margin: 1px 8px 0 0;
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1.2;
    color: var(--usm-gold-dark, #c9a110);
}

/* ── Domande frequenti ────────────────────────────────────────
   Nell'originale ogni domanda era un riquadro a sé, con il bordo che
   diventava oro su quella aperta. */
.usm-appt-domande {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.usm-appt-domande .elementor-toggle-item {
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--usm-surface-alt, #e9e8e2);
    border-radius: var(--usm-radius, 12px);
    overflow: hidden;
}

.usm-appt-domande .elementor-tab-title {
    padding: 16px 20px;
    border: 0;
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--usm-dark-alt, #1b1c19);
}

.usm-appt-domande .elementor-toggle-item:has(.elementor-active) {
    border-color: var(--usm-gold, #EBBD17);
}

.usm-appt-domande .elementor-tab-title.elementor-active {
    color: var(--usm-dark-alt, #1b1c19);
}

.usm-appt-domande .elementor-toggle-icon {
    color: var(--usm-gold-dark, #c9a110);
}

.usm-appt-domande .elementor-tab-content {
    padding: 0 20px 18px;
    border: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--usm-text-muted, #79806e);
}

.usm-appt-domande .elementor-tab-content p { margin: 0; }

/* ── I quattro riquadri su fondo scuro ────────────────────────
   Icona in un tondo a sinistra, testo accanto: nell'originale erano una
   griglia di 42 px piu' contenuto. */
.usm-appt-info-box {
    flex: 1 1 0 !important;
    min-width: 190px;
    width: auto !important;
}

.usm-appt-info-box .elementor-icon-box-wrapper {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 14px;
    row-gap: 2px;
    align-items: start;
    text-align: left;
}

.usm-appt-info-box .elementor-icon-box-icon {
    grid-row: 1 / 3;
    margin: 0;
}

.usm-appt-info-box .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(235, 189, 23, .16);
    color: var(--usm-gold, #EBBD17);
    font-size: 22px;
}

.usm-appt-info-box .elementor-icon-box-content {
    text-align: left;
}

.usm-appt-info-box .elementor-icon-box-title,
.usm-appt-info-box .elementor-icon-box-title a {
    margin: 0 0 2px;
    font-family: var(--usm-font-label, 'Work Sans', sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.usm-appt-info-box .elementor-icon-box-description {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .7);
}

.usm-appt-info-box .elementor-icon-box-description a {
    color: var(--usm-gold, #EBBD17);
    text-decoration: none;
}

.usm-appt-info-box .elementor-icon-box-description a:hover {
    text-decoration: underline;
}

/* ── Schermi stretti ──────────────────────────────────────────
   I riquadri stanno in un contenitore a riga: con `flex: 1 1 0` si dividono
   lo spazio in parti uguali, che su desktop e' giusto e su telefono no —
   quattro colonne da 40 px spezzano ogni parola su piu' righe. */
@media (max-width: 991.98px) {
    .e-con-full:has(> .usm-appt-passaggio),
    .e-con-full:has(> .usm-appt-info-box) {
        flex-wrap: wrap !important;
    }

    .usm-appt-passaggio,
    .usm-appt-info-box {
        flex: 1 1 calc(50% - 12px) !important;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .usm-appt-passaggio,
    .usm-appt-info-box {
        flex: 1 1 100% !important;
    }

    .usm-appt-passaggio {
        padding: 24px 18px 20px;
    }

    .usm-appt-colonna {
        padding: 22px 18px;
    }
}