/*
 * Humza Multiservizi — booking-skin.css v2.1.0
 *
 * 1) Re-skin del plugin "hamza-booking" (booking-frontend.css) sul design
 *    system del tema. Caricato DOPO il CSS del plugin (dipendenza dichiarata
 *    in functions.php): vince per ordine e per specificità. Ogni blocco cita
 *    la classe originale del plugin che sovrascrive. Nessuna logica: pelle.
 * 2) Classi delle due pagine di conversione di proprietà di questo file
 *    (template-booking.php e template-client-portal.php): .booking-shell,
 *    .booking-notes/.booking-note, .booking-talk, .booking-done, .tabs--auth,
 *    .auth-help. Sono prefissate e non toccano il design system in main.css.
 *
 * Contrasto verificato (WCAG 2.2 AA):
 * - arancio #E67E22 SOLO con testo navy #16213E (5.58:1), mai bianco (2.85:1);
 * - conferma finale verde #1E7A46 con bianco (5.36:1);
 * - giorni non disponibili #6E7C8A pieno su bianco = 4.27:1 (niente opacity:
 *   l'opacity del plugin scendeva sotto 3:1 e rendeva le date illeggibili).
 *
 * Il markup del widget appartiene al plugin: non possiamo aggiungere nodi.
 * Le poche stringhe generate via `content` stanno in variabili --hbk-txt-*
 * così da poter essere tradotte in futuro con un solo wp_add_inline_style().
 *
 * I token var(--c-*, --f-*, --fs-*, --radius-*, --shadow-*) arrivano da
 * main.css (:root); ogni var() ha un fallback esplicito per robustezza.
 */

/* ══════════════════════════════════════════════════════════════════════
   1. TOKEN — rimappa i --hb-* del plugin sui container REALI del widget
      (#hamza-booking-app.hamza-booking e .hamza-my-appointments: più
      vicini del :root del plugin, quindi vincono sempre, anche dove il
      plugin usa !important perché quel !important legge le nostre var).
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking,
.hamza-my-appointments {
	--hb-primary: var(--c-navy, #16213E);
	--hb-primary-light: var(--c-primary-soft, #FEF5EC);
	--hb-primary-hover: var(--c-navy-deep, #0D1730);
	--hb-accent: var(--c-success, #1E7A46); /* il plugin usa --hb-accent per "fatto"/successo */
	--hb-danger: var(--c-danger, #C0392B);
	--hb-warning: var(--c-primary-ink, #B54708);
	--hb-text: var(--c-ink, #22303F);
	--hb-text-light: var(--c-ink-soft, #5A6B7C);
	--hb-bg: var(--c-bg, #FFFFFF);
	--hb-border: var(--c-border, #E8E4DD);
	--hb-radius: var(--radius-sm, 8px);
	--hb-shadow: var(--shadow-sm, 0 2px 12px rgba(22, 33, 62, 0.05));

	/* Token locali del widget */
	--hbk-day-off: #6E7C8A;      /* giorno non disponibile: 4.27:1 su bianco */
	--hbk-day-min: 48px;         /* lato minimo cella calendario (>= 44px) */
	--hbk-hairline: #F1EEE8;     /* griglia calendario, più tenue del bordo */

	/* Testi generati (il markup del plugin non li espone come nodi) */
	--hbk-txt-step-prefix: "Passo\00a0";
	--hbk-txt-step-suffix: "\00a0di\00a04";
	--hbk-txt-loading-cal: "Carico il calendario\2026";
	--hbk-txt-loading-slots: "Carico gli orari disponibili\2026";
}

/* Il widget non deve mai debordare, nemmeno con testi tradotti lunghi. */
.hamza-booking,
.hamza-my-appointments {
	max-width: 640px;
	margin-inline: auto;
	overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════════════════════
   2. BARRA DI AVANZAMENTO — .hamza-progress
      Desktop: 4 passi con pallino + etichetta + connettori.
      Mobile (<640px): i pallini muti non dicono nulla → resta SOLO il
      passo attivo, scritto per esteso ("Passo 2 di 4 · Orario"), e i tre
      connettori diventano una barra a segmenti sotto al testo.
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-progress {
	margin-bottom: 2rem;
}

/* .hamza-progress__dot */
.hamza-booking .hamza-progress__dot {
	width: 40px;
	height: 40px;
	background: var(--c-paper, #FAF7F2);
	border: 2px solid var(--c-border, #E8E4DD);
	color: var(--c-ink, #22303F);
	font-family: var(--f-display, inherit);
	font-variant-numeric: tabular-nums;
	flex: none;
}
.hamza-booking .hamza-progress__step--active .hamza-progress__dot {
	background: var(--c-navy, #16213E);
	border-color: var(--c-navy, #16213E);
	color: #fff; /* 16:1 */
}
.hamza-booking .hamza-progress__step--done .hamza-progress__dot {
	background: var(--c-success, #1E7A46);
	border-color: var(--c-success, #1E7A46);
	color: #fff; /* 5.36:1 */
}

/* .hamza-progress__label — leggibile anche da inattivo */
.hamza-booking .hamza-progress__label {
	font-size: var(--fs-0, 13px);
	color: var(--c-ink-soft, #5A6B7C);
}
.hamza-booking .hamza-progress__step--active .hamza-progress__label {
	color: var(--c-navy, #16213E);
	font-weight: 700;
}

/* .hamza-progress__line / --done — connettore ricentrato sul dot da 40px */
.hamza-booking .hamza-progress__line {
	margin-bottom: 24px;
	background: var(--c-border, #E8E4DD);
}
.hamza-booking .hamza-progress__line--done {
	background: var(--c-success, #1E7A46);
}

@media (max-width: 639px) {
	.hamza-booking .hamza-progress {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: 0.7rem 0.35rem;
		margin-bottom: 1.6rem;
	}
	/* Solo il passo corrente resta a schermo: gli altri non informano. */
	.hamza-booking .hamza-progress__step {
		display: none;
	}
	.hamza-booking .hamza-progress__step--active {
		display: flex;
		order: 0;
		flex: 1 0 100%;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.6rem;
	}
	/* Il pallino diventa una pillola: "Passo 2 di 4". */
	.hamza-booking .hamza-progress__step--active .hamza-progress__dot {
		width: auto;
		height: auto;
		min-height: 32px;
		padding: 0.2rem 0.85rem;
		border-radius: 999px;
		font-size: var(--fs-1, 15px);
		white-space: nowrap;
	}
	.hamza-booking .hamza-progress__step--active .hamza-progress__dot::before {
		content: var(--hbk-txt-step-prefix);
	}
	.hamza-booking .hamza-progress__step--active .hamza-progress__dot::after {
		content: var(--hbk-txt-step-suffix);
	}
	/* Il plugin nasconde le label sotto 600px: qui l'attiva torna visibile. */
	.hamza-booking .hamza-progress__step--active .hamza-progress__label {
		display: block;
		max-width: none;
		font-size: var(--fs-2, 17px);
		text-align: start;
		white-space: normal;
	}
	/* I tre connettori diventano una barra di avanzamento a 3 segmenti. */
	.hamza-booking .hamza-progress__line {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
		height: 6px;
		margin: 0;
		border-radius: 999px;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   3. PASSI — .hamza-step
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-step__title {
	font-family: var(--f-display, inherit);
	font-size: var(--fs-5, 1.5rem);
	font-weight: 800;
	color: var(--c-navy, #16213E);
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
}
/* Il JS mette tabindex="-1" sul titolo e ci sposta il focus a ogni passo:
   niente anello "fantasma" al click, anello pieno solo da tastiera. */
.hamza-booking .hamza-step__title:focus {
	outline: none;
}
.hamza-booking .hamza-step__subtitle {
	font-size: var(--fs-2, 17px);
	color: var(--c-ink-soft, #5A6B7C);
	margin-bottom: 1.25rem;
}
/* .hamza-selected-date-label — la data scelta va letta a colpo d'occhio */
.hamza-booking .hamza-selected-date-label {
	font-weight: 600;
	color: var(--c-navy, #16213E);
}

/* .hamza-step__actions — Indietro a sinistra, azione principale a destra */
.hamza-booking .hamza-step__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
	margin-top: 1.75rem;
}
.hamza-booking .hamza-step__actions .hamza-back-btn {
	margin-inline-end: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   4. CALENDARIO — .hamza-calendar
      Regola d'oro: la griglia non deborda MAI (minmax(0, 1fr)) e la cella
      non scende MAI sotto 44px di lato reale, nemmeno su schermi da 360px.
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-calendar {
	border-color: var(--c-border, #E8E4DD);
	border-radius: var(--radius-md, 12px);
	box-shadow: var(--shadow-sm, 0 2px 12px rgba(22, 33, 62, 0.05));
	/* overflow:hidden resta (arrotonda testata e ultima riga): per questo
	   il focus dei giorni usa un anello INTERNO, che non viene tagliato. */
}

/* .hamza-calendar__nav — testata navy */
.hamza-booking .hamza-calendar__nav {
	background: var(--c-navy, #16213E);
	padding: 0.5rem 0.6rem;
	gap: 0.5rem;
}

/* .hamza-calendar__prev / __next — target tattile pieno 44x44 */
.hamza-booking .hamza-calendar__prev,
.hamza-booking .hamza-calendar__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: var(--radius-sm, 8px);
	font-size: 26px;
}
.hamza-booking .hamza-calendar__prev:disabled,
.hamza-booking .hamza-calendar__next:disabled {
	opacity: 0.45;
	cursor: progress;
}

/* .hamza-calendar__month-title */
.hamza-booking .hamza-calendar__month-title {
	font-family: var(--f-display, inherit);
	font-size: var(--fs-2, 17px);
	text-align: center;
}

/* .hamza-calendar__header / __header-day — "lun mar mer…" leggibili */
.hamza-booking .hamza-calendar__header {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	background: var(--c-paper, #FAF7F2);
	border-bottom-color: var(--c-border, #E8E4DD);
}
.hamza-booking .hamza-calendar__header-day {
	padding: 0.55rem 2px;
	font-family: var(--f-display, inherit);
	font-size: var(--fs-0, 13px);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--c-ink-soft, #5A6B7C); /* 4.6:1 */
	overflow: hidden;
	text-overflow: ellipsis;
}

/* .hamza-calendar__grid — 7 colonne che non possono debordare */
.hamza-booking .hamza-calendar__grid {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* .hamza-calendar__day — cella: lato minimo 48px (mai sotto 44) */
.hamza-booking .hamza-calendar__day {
	min-width: 0;
	min-height: var(--hbk-day-min);
	padding: 0;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	border-bottom-color: var(--hbk-hairline);
	border-right-color: var(--hbk-hairline);
	color: var(--c-ink, #22303F);
}

/* .hamza-calendar__day--available — navy in evidenza, hover caldo */
.hamza-booking .hamza-calendar__day--available {
	color: var(--c-navy, #16213E);
	font-weight: 700;
}
.hamza-booking .hamza-calendar__day--available:hover {
	background: var(--c-primary-soft, #FEF5EC);
}

/* .hamza-calendar__day--unavailable — il plugin usava opacity .35 (sotto
   3:1): qui colore pieno 4.27:1 su fondo carta, peso normale. Spento sì,
   illeggibile no. */
.hamza-booking .hamza-calendar__day--unavailable {
	opacity: 1;
	background: var(--c-paper, #FAF7F2);
	color: var(--hbk-day-off);
	font-weight: 400;
}

/* .hamza-calendar__day--empty — celle di riempimento, nessun fondo */
.hamza-booking .hamza-calendar__day--empty {
	background: transparent;
}

/* .hamza-calendar__day--today — anello arancio interno (non sposta nulla);
   sostituisce il pallino ::after del plugin */
.hamza-booking .hamza-calendar__day--today {
	box-shadow: inset 0 0 0 2px var(--c-primary, #E67E22);
	border-radius: var(--radius-sm, 8px);
}
.hamza-booking .hamza-calendar__day--today::after {
	display: none;
}

/* .hamza-calendar__day--selected — navy pieno, testo bianco (16:1).
   !important per pareggiare quelli del plugin. */
.hamza-booking .hamza-calendar__day--selected {
	background: var(--c-navy, #16213E) !important;
	color: #fff !important;
	font-weight: 700;
	border-radius: var(--radius-sm, 8px);
}
/* Se il giorno selezionato è anche oggi, l'anello arancio resta visibile. */
.hamza-booking .hamza-calendar__day--selected.hamza-calendar__day--today {
	box-shadow: inset 0 0 0 2px var(--c-primary, #E67E22);
}

/* .hamza-calendar__loading — non solo spinner: si dice cosa sta accadendo */
.hamza-booking .hamza-calendar__loading {
	flex-direction: column;
	gap: 0.6rem;
	background: rgba(255, 255, 255, 0.92);
	color: var(--c-ink-soft, #5A6B7C);
	font-size: var(--fs-1, 15px);
	text-align: center;
	padding: 1rem;
}
.hamza-booking .hamza-calendar__loading::after {
	content: var(--hbk-txt-loading-cal);
}

/* Sotto 600px la card guadagna qualche pixel debordando a metà gutter:
   così su 360px la cella resta ~49px di lato (e ~44px anche su 320px). */
@media (max-width: 599px) {
	.hamza-booking .hamza-calendar {
		margin-inline: -0.85rem;
		border-radius: var(--radius-sm, 8px);
	}
	.hamza-booking .hamza-calendar__day {
		--hbk-day-min: 46px;
		font-size: 14px;
	}
	.hamza-booking .hamza-calendar__header-day {
		font-size: 12px;
		letter-spacing: 0;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   5. FASCE ORARIE — .hamza-slots
   ══════════════════════════════════════════════════════════════════════ */
/* .hamza-slots__grid — auto-fit: si riempie da sola, non taglia mai gli orari */
.hamza-booking .hamza-slots__grid {
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 0.7rem;
}

/* .hamza-slot-btn — pillole con target 48px */
.hamza-booking .hamza-slot-btn {
	min-height: 48px;
	min-width: 0;
	padding: 0.6rem 0.5rem;
	border: 2px solid var(--c-border, #E8E4DD);
	border-radius: 999px;
	font-family: var(--f-display, inherit);
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--c-navy, #16213E);
	background: var(--c-bg, #FFFFFF);
}
.hamza-booking .hamza-slot-btn:hover {
	border-color: var(--c-navy, #16213E);
	background: var(--c-primary-soft, #FEF5EC);
	color: var(--c-navy, #16213E);
}
/* .hamza-slot-btn--selected — navy pieno: lo stato scelto non lascia dubbi */
.hamza-booking .hamza-slot-btn--selected {
	border-color: var(--c-navy, #16213E) !important;
	background: var(--c-navy, #16213E) !important;
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(22, 33, 62, 0.25);
}

/* .hamza-slots__loading — messaggio esplicito accanto allo spinner */
.hamza-booking .hamza-slots__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 1.75rem 0;
	color: var(--c-ink-soft, #5A6B7C);
	font-size: var(--fs-1, 15px);
	text-align: center;
}
.hamza-booking .hamza-slots__loading::after {
	content: var(--hbk-txt-loading-slots);
}

/* .hamza-slots__empty — "nessun orario" è un'informazione, non un errore */
.hamza-booking .hamza-slots__empty {
	margin: 0;
	padding: 1.25rem 1.1rem;
	border-radius: var(--radius-md, 12px);
	background: var(--c-paper, #FAF7F2);
	border: 1px dashed var(--c-border, #E8E4DD);
	color: var(--c-ink, #22303F);
	font-size: var(--fs-1, 15px);
}

/* ══════════════════════════════════════════════════════════════════════
   6. FORM — .hamza-form__group (allineato ai .field del tema)
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-form__group,
.hamza-my-appointments .hamza-form__group {
	margin-bottom: 1.1rem;
}
.hamza-booking .hamza-form__group label,
.hamza-my-appointments .hamza-form__group label {
	font-family: var(--f-display, inherit);
	font-size: var(--fs-1, 15px);
	font-weight: 600;
	color: var(--c-navy, #16213E);
	margin-bottom: 0.4rem;
}
.hamza-booking .hamza-form__group label .required,
.hamza-my-appointments .hamza-form__group label .required {
	color: var(--c-danger, #C0392B);
}

/* input/select/textarea — 16px: iOS non fa più zoom sul focus */
.hamza-booking .hamza-form__group input[type="text"],
.hamza-booking .hamza-form__group input[type="email"],
.hamza-booking .hamza-form__group input[type="tel"],
.hamza-booking .hamza-form__group input[type="number"],
.hamza-booking .hamza-form__group select,
.hamza-booking .hamza-form__group textarea,
.hamza-my-appointments .hamza-form__group input[type="text"],
.hamza-my-appointments .hamza-form__group input[type="email"],
.hamza-my-appointments .hamza-form__group input[type="tel"],
.hamza-my-appointments .hamza-form__group select {
	border: 1.5px solid var(--c-border, #E8E4DD);
	border-radius: var(--radius-sm, 8px);
	padding: 0.7rem 0.9rem;
	min-height: 48px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--c-ink, #22303F);
	background: var(--c-bg, #FFFFFF);
}
.hamza-booking .hamza-form__group textarea {
	min-height: 120px;
	resize: vertical;
}

/* .hamza-phone-wrap — prefisso + numero senza mai debordare */
.hamza-booking .hamza-form__group--phone .hamza-phone-wrap {
	gap: 0.6rem;
}
.hamza-booking .hamza-form__group--phone select {
	flex: 0 0 8.5rem;
	min-width: 0;
	width: auto;
}
.hamza-booking .hamza-form__group--phone input[type="tel"] {
	flex: 1 1 auto;
	min-width: 0;
}

/* :focus (anche col mouse) — bordo navy e alone morbido come i .field */
.hamza-booking .hamza-form__group input:focus,
.hamza-booking .hamza-form__group select:focus,
.hamza-booking .hamza-form__group textarea:focus,
.hamza-my-appointments .hamza-form__group input:focus,
.hamza-my-appointments .hamza-form__group select:focus {
	border-color: var(--c-navy, #16213E);
	box-shadow: 0 0 0 3px rgba(22, 33, 62, 0.15);
}

/* .hamza-form__group--checkbox — spunta con area di tocco vera */
.hamza-booking .hamza-form__group--checkbox label {
	gap: 0.65rem;
	font-size: var(--fs-1, 15px);
	font-weight: 400;
	color: var(--c-ink, #22303F);
	padding-block: 0.35rem;
	min-height: 44px;
	align-items: center;
}
.hamza-booking .hamza-form__group--checkbox input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin-top: 0;
	accent-color: var(--c-navy, #16213E);
}
.hamza-booking .hamza-form__group--checkbox a {
	color: var(--c-primary-ink, #B54708);
}

/* .hamza-form__error / .hamza-form__group--invalid — errori di campo */
.hamza-booking .hamza-form__error,
.hamza-my-appointments .hamza-form__error {
	font-size: var(--fs-1, 15px);
	color: var(--c-danger, #C0392B);
	margin-top: 0.35rem;
}
.hamza-booking .hamza-form__group--invalid input,
.hamza-booking .hamza-form__group--invalid select,
.hamza-booking .hamza-form__group--invalid textarea {
	border-color: var(--c-danger, #C0392B);
}

/* ══════════════════════════════════════════════════════════════════════
   7. RIEPILOGO — .hamza-summary
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-summary {
	background: var(--c-paper, #FAF7F2);
	border-color: var(--c-border, #E8E4DD);
	border-radius: var(--radius-md, 12px);
	padding: 0.5rem 1.25rem;
}
.hamza-booking .hamza-summary__row {
	gap: 0.5rem 1.5rem;
	padding: 0.85rem 0;
	border-bottom-color: var(--c-border, #E8E4DD);
}
.hamza-booking .hamza-summary__label {
	color: var(--c-ink-soft, #5A6B7C);
	font-size: var(--fs-1, 15px);
	flex: none;
}
.hamza-booking .hamza-summary__value {
	color: var(--c-navy, #16213E);
	font-family: var(--f-display, inherit);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: end;
}
@media (max-width: 599px) {
	.hamza-booking .hamza-summary__value {
		text-align: start;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   8. BOTTONI — .hamza-btn
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-btn,
.hamza-my-appointments .hamza-btn {
	min-height: 48px;
	padding: 0.7rem 1.5rem;
	border-radius: var(--radius-sm, 8px);
	font-family: var(--f-display, inherit);
	font-size: 16px;
	font-weight: 700;
}

/* .hamza-btn--primary — arancio brand con TESTO NAVY (5.58:1) */
.hamza-booking .hamza-btn--primary,
.hamza-my-appointments .hamza-btn--primary {
	background: var(--c-primary, #E67E22);
	border-color: var(--c-primary, #E67E22);
	color: var(--c-navy, #16213E);
}
.hamza-booking .hamza-btn--primary:hover,
.hamza-my-appointments .hamza-btn--primary:hover {
	background: #F5934B;
	border-color: #F5934B;
	color: var(--c-navy, #16213E);
}

/* #hamza-confirm-btn — conferma finale in verde vidimato (5.36:1 su bianco).
   L'id vince sulla regola --primary qui sopra. */
.hamza-booking #hamza-confirm-btn {
	background: var(--c-success, #1E7A46);
	border-color: var(--c-success, #1E7A46);
	color: #fff;
}
.hamza-booking #hamza-confirm-btn:hover {
	background: #166237;
	border-color: #166237;
	color: #fff;
}

/* .hamza-btn--outline — contorno navy come .btn--ghost del tema */
.hamza-booking .hamza-btn--outline,
.hamza-my-appointments .hamza-btn--outline {
	color: var(--c-navy, #16213E);
	border-color: var(--c-navy, #16213E);
	background: transparent;
}
.hamza-booking .hamza-btn--outline:hover,
.hamza-my-appointments .hamza-btn--outline:hover {
	background: var(--c-navy, #16213E);
	border-color: var(--c-navy, #16213E);
	color: #fff;
}

/* .hamza-btn--small (card appuntamenti) — comunque target >= 44px */
.hamza-my-appointments .hamza-btn--small {
	min-height: 44px;
	padding: 0.4rem 1rem;
	font-size: var(--fs-1, 15px);
}

/* .hamza-btn:disabled — mai "morto": si capisce che sta lavorando */
.hamza-booking .hamza-btn:disabled,
.hamza-my-appointments .hamza-btn:disabled {
	opacity: 0.6;
	cursor: progress;
}
.hamza-booking .hamza-btn[aria-busy="true"] {
	cursor: progress;
}

/* ══════════════════════════════════════════════════════════════════════
   9. SPINNER — .hamza-spinner
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-spinner,
.hamza-my-appointments .hamza-spinner {
	border-color: var(--c-border, #E8E4DD);
	border-top-color: var(--c-navy, #16213E);
	flex: none;
}
/* dentro il bottone verde di conferma: bianco su verde */
.hamza-booking #hamza-confirm-btn .hamza-spinner {
	border-color: rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
}
/* Senza animazioni lo spinner resta fermo: il testo accanto porta il senso. */
@media (prefers-reduced-motion: reduce) {
	.hamza-booking .hamza-spinner,
	.hamza-my-appointments .hamza-spinner {
		border-top-color: var(--c-primary, #E67E22);
	}
	.hamza-booking .hamza-step {
		animation: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   10. CONFERMA — .hamza-success
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-success {
	padding-top: 0.5rem;
}
.hamza-booking .hamza-success__title {
	font-family: var(--f-display, inherit);
	font-size: var(--fs-6, 2rem);
	font-weight: 800;
	color: var(--c-success, #1E7A46);
}
.hamza-booking .hamza-success__title:focus {
	outline: none;
}
/* .hamza-success__details — scheda leggibile, direzione logica (RTL ok) */
.hamza-booking .hamza-success__details {
	text-align: start;
	max-width: 420px;
	background: var(--c-success-tint, #E8F5EE);
	border: 1px solid rgba(30, 122, 70, 0.25);
	border-radius: var(--radius-md, 12px);
	padding: 0.5rem 1.25rem;
}
.hamza-booking .hamza-success__detail-row {
	gap: 0.35rem 1.25rem;
	padding: 0.6rem 0;
	font-size: var(--fs-1, 15px);
	border-bottom: 1px solid rgba(30, 122, 70, 0.18);
}
.hamza-booking .hamza-success__detail-row:last-child {
	border-bottom: 0;
}
.hamza-booking .hamza-success__detail-row span {
	color: var(--c-ink-soft, #5A6B7C);
}
.hamza-booking .hamza-success__detail-row strong {
	color: var(--c-navy, #16213E);
	font-variant-numeric: tabular-nums;
	text-align: end;
}
.hamza-booking .hamza-success__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.hamza-booking .hamza-success__login-hint {
	color: var(--c-ink-soft, #5A6B7C);
	font-size: var(--fs-1, 15px);
}

/* ══════════════════════════════════════════════════════════════════════
   11. ERRORI — .hamza-error-msg e blocco "Riprova" iniettato dal JS
       (.hamza-ajax-retry: il JS lo stila a specificità 0,1,0; qui si sale)
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-error-msg,
.hamza-my-appointments .hamza-error-msg {
	background: var(--c-danger-tint, #FDEEEC);
	border: 1px solid rgba(192, 57, 43, 0.3);
	border-radius: var(--radius-sm, 8px);
	padding: 0.9rem 1.1rem;
	color: var(--c-danger, #C0392B);
	font-size: var(--fs-1, 15px);
	margin-top: 1.25rem;
}
.hamza-booking .hamza-error-msg:focus {
	outline: none;
}

.hamza-booking .hamza-ajax-retry,
.hamza-my-appointments .hamza-ajax-retry {
	grid-column: 1 / -1;
	text-align: center;
	padding: 1.5rem 1rem;
	background: var(--c-paper, #FAF7F2);
	border: 1px dashed var(--c-border, #E8E4DD);
	border-radius: var(--radius-md, 12px);
}
.hamza-booking .hamza-ajax-retry p,
.hamza-my-appointments .hamza-ajax-retry p {
	margin: 0 0 0.9rem;
	color: var(--c-ink, #22303F);
	font-size: var(--fs-1, 15px);
}
.hamza-booking .hamza-ajax-retry button,
.hamza-my-appointments .hamza-ajax-retry button {
	min-height: 48px;
	padding: 0.6rem 1.6rem;
	border: 2px solid var(--c-navy, #16213E);
	border-radius: var(--radius-sm, 8px);
	background: var(--c-navy, #16213E);
	color: #fff;
	font-family: var(--f-display, inherit);
	font-size: 16px;
	font-weight: 700;
}
.hamza-booking .hamza-ajax-retry button:hover,
.hamza-my-appointments .hamza-ajax-retry button:hover {
	background: var(--c-navy-deep, #0D1730);
	border-color: var(--c-navy-deep, #0D1730);
	color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   12. BADGE STATO — .hamza-badge
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking .hamza-badge,
.hamza-my-appointments .hamza-badge {
	border-radius: 999px;
	padding: 0.2rem 0.75rem;
	font-size: var(--fs-0, 13px);
	font-weight: 700;
}
.hamza-booking .hamza-badge--green,
.hamza-my-appointments .hamza-badge--green {
	background: var(--c-success-tint, #E8F5EE);
	color: var(--c-success, #1E7A46);
}
.hamza-booking .hamza-badge--yellow,
.hamza-my-appointments .hamza-badge--yellow {
	background: var(--c-primary-soft, #FEF5EC);
	color: var(--c-primary-ink, #B54708);
}
.hamza-booking .hamza-badge--red,
.hamza-my-appointments .hamza-badge--red {
	background: var(--c-danger-tint, #FDEEEC);
	color: var(--c-danger, #C0392B);
}

/* ══════════════════════════════════════════════════════════════════════
   13. I MIEI APPUNTAMENTI — .hamza-my-appointments
   ══════════════════════════════════════════════════════════════════════ */
.hamza-my-appointments h3 {
	font-family: var(--f-display, inherit);
	font-size: var(--fs-4, 1.25rem);
	color: var(--c-navy, #16213E);
}
.hamza-my-appointments .hamza-lookup__form {
	max-width: 420px;
}
.hamza-my-appointments .hamza-appt-card {
	border-color: var(--c-border, #E8E4DD);
	border-radius: var(--radius-md, 12px);
	box-shadow: var(--shadow-sm, 0 2px 12px rgba(22, 33, 62, 0.05));
}
/* .hamza-appt-card--past — su carta a colore pieno, non sbiadita */
.hamza-my-appointments .hamza-appt-card--past {
	opacity: 1;
	background: var(--c-paper, #FAF7F2);
}
/* .hamza-appt-card__date — blocchetto data in tinta arancio, cifre navy */
.hamza-my-appointments .hamza-appt-card__date {
	background: var(--c-primary-tint, #FBE9D9);
	border-radius: var(--radius-sm, 8px);
}
.hamza-my-appointments .hamza-appt-card__day,
.hamza-my-appointments .hamza-appt-card__month {
	color: var(--c-navy, #16213E);
	font-family: var(--f-display, inherit);
}
.hamza-my-appointments .hamza-appt-card__info {
	min-width: 0;
	font-size: var(--fs-1, 15px);
}
.hamza-my-appointments .hamza-appt-card__info strong {
	color: var(--c-navy, #16213E);
}
.hamza-my-appointments .hamza-no-results {
	color: var(--c-ink-soft, #5A6B7C);
}

/* ══════════════════════════════════════════════════════════════════════
   14. FOCUS VISIBILE — doppio anello su TUTTI gli interattivi del widget.
       Il plugin azzera l'outline su input:focus (specificità 0,2,1):
       qui si sale a 0,3,1+ e si ripristina per chi naviga da tastiera.
   ══════════════════════════════════════════════════════════════════════ */
.hamza-booking a:focus-visible,
.hamza-booking button:focus-visible,
.hamza-booking [tabindex]:focus-visible,
.hamza-booking .hamza-form__group input:focus-visible,
.hamza-booking .hamza-form__group select:focus-visible,
.hamza-booking .hamza-form__group textarea:focus-visible,
.hamza-booking .hamza-form__group input[type="checkbox"]:focus-visible,
.hamza-my-appointments a:focus-visible,
.hamza-my-appointments button:focus-visible,
.hamza-my-appointments [tabindex]:focus-visible,
.hamza-my-appointments .hamza-form__group input:focus-visible,
.hamza-my-appointments .hamza-form__group select:focus-visible {
	outline: 2px solid var(--c-focus, #16213E);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--c-focus, #16213E);
}

/* Sulla testata navy l'anello scuro sparirebbe: qui diventa chiaro. */
.hamza-booking .hamza-calendar__nav button:focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 2px var(--c-navy, #16213E), 0 0 0 5px #fff;
}

/* I giorni vivono dentro un contenitore con overflow:hidden: anello
   INTERNO (navy fuori, bianco dentro) così non viene mai tagliato. */
.hamza-booking .hamza-calendar__day:focus-visible {
	outline: none;
	border-radius: var(--radius-sm, 8px);
	box-shadow: inset 0 0 0 3px var(--c-focus, #16213E), inset 0 0 0 6px #fff;
}
.hamza-booking .hamza-calendar__day--selected:focus-visible {
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--c-primary, #E67E22);
}
.hamza-booking .hamza-calendar__day--today:focus-visible {
	box-shadow: inset 0 0 0 3px var(--c-focus, #16213E), inset 0 0 0 6px #fff, inset 0 0 0 8px var(--c-primary, #E67E22);
}

/* Le pillole orario sono fuori da qualsiasi clip: anello esterno pieno. */
.hamza-booking .hamza-slot-btn:focus-visible {
	outline: 2px solid var(--c-focus, #16213E);
	outline-offset: 3px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--c-focus, #16213E);
}

/* ══════════════════════════════════════════════════════════════════════
   15. MOBILE <= 480px — azioni a tutta larghezza, avanti SOPRA
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	.hamza-booking .hamza-btn,
	.hamza-my-appointments .hamza-btn {
		width: 100%;
	}
	/* Il DOM è [Indietro, Avanti]: column-reverse porta l'azione
	   principale in alto, dove il pollice arriva prima. */
	.hamza-booking .hamza-step__actions {
		flex-direction: column-reverse;
		gap: 0.6rem;
	}
	.hamza-booking .hamza-step__actions .hamza-back-btn {
		margin-inline-end: 0;
	}
	.hamza-booking .hamza-success__actions {
		flex-direction: column;
	}
	.hamza-booking .hamza-form__group--phone select {
		flex: 0 0 7.5rem;
	}
	.hamza-my-appointments .hamza-appt-card__actions {
		width: 100%;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   16. PAGINA PRENOTA — classi del tema (template-booking.php)
   ══════════════════════════════════════════════════════════════════════ */

/* .booking-shell — contenitore del widget. Su mobile niente padding: ogni
   pixel va alle celle del calendario. Da 640px in su diventa una scheda. */
.booking-shell {
	position: relative;
	max-width: 720px;
	margin-inline: auto;
}
@media (min-width: 640px) {
	.booking-shell {
		background: var(--c-bg, #FFFFFF);
		border: 1px solid var(--c-border, #E8E4DD);
		border-radius: var(--radius-lg, 16px);
		box-shadow: var(--shadow-md, 0 6px 28px rgba(22, 33, 62, 0.08));
		padding: clamp(1.75rem, 3vw, 2.5rem);
	}
}

/* .booking-done — blocco del tema che compare SOLO a prenotazione
   confermata (il widget è del plugin: non possiamo iniettarci dentro).
   Senza :has() resta nascosto: la pagina ha comunque il box "Preferisci
   parlare?" con gli stessi contatti, quindi nulla va perso. */
.booking-done {
	display: none;
	margin-top: 1.75rem;
	padding: 1.35rem 1.25rem;
	border-radius: var(--radius-md, 12px);
	background: var(--c-success-tint, #E8F5EE);
	border: 1px solid rgba(30, 122, 70, 0.25);
	text-align: center;
}
.booking-shell:has(.hamza-step[data-step="success"].hamza-step--active) .booking-done {
	display: block;
}
.booking-done p {
	margin: 0 0 1rem;
	color: var(--c-ink, #22303F);
	font-size: var(--fs-1, 15px);
}
.booking-done__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
}

/* .booking-notes / .booking-note — "cosa serve sapere" sotto al widget.
   Schede informative: nessun hover, non sono cliccabili. */
.booking-notes {
	display: grid;
	gap: 1.1rem;
	margin-top: 0;
}
@media (min-width: 720px) {
	.booking-notes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.booking-note {
	background: var(--c-bg, #FFFFFF);
	border: 1px solid var(--c-border, #E8E4DD);
	border-radius: var(--radius-md, 12px);
	padding: 1.4rem;
	box-shadow: var(--shadow-sm, 0 2px 12px rgba(22, 33, 62, 0.05));
}
.booking-note__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 0.9rem;
	border-radius: var(--radius-sm, 8px);
	background: var(--c-primary-tint, #FBE9D9);
}
/* L'icona WhatsApp usa currentColor (le altre hanno fill propri). */
.booking-note__icon--wa {
	background: var(--c-success-tint, #E8F5EE);
	color: var(--c-wa, #1E7A46);
}
.booking-note h3 {
	font-size: var(--fs-4, 1.25rem);
	margin-bottom: 0.35em;
}
.booking-note p {
	margin: 0;
	color: var(--c-ink-soft, #5A6B7C);
	font-size: var(--fs-1, 15px);
}
.booking-note p + p {
	margin-top: 0.6rem;
}

/* .booking-talk — "Preferisci parlare?" per chi non compila moduli */
.booking-talk {
	background: var(--c-bg, #FFFFFF);
	border: 1px solid var(--c-border, #E8E4DD);
	border-radius: var(--radius-lg, 16px);
	box-shadow: var(--shadow-sm, 0 2px 12px rgba(22, 33, 62, 0.05));
	padding: clamp(1.5rem, 4vw, 2.25rem);
	text-align: center;
}
.booking-talk h2 {
	font-size: var(--fs-5, 1.5rem);
	margin-bottom: 0.4em;
}
.booking-talk p {
	color: var(--c-ink-soft, #5A6B7C);
	max-width: 46ch;
	margin-inline: auto;
}
/* Riga orari: informazione di servizio, non deve gridare */
.booking-talk__hours {
	font-size: var(--fs-1, 15px);
	font-variant-numeric: tabular-nums;
	margin-bottom: 1.4rem;
}

/* ══════════════════════════════════════════════════════════════════════
   17. AREA CLIENTI — classi del tema (template-client-portal.php)
   ══════════════════════════════════════════════════════════════════════ */

/* .tabs--auth — tre schede sempre intere: mai testo tagliato, mai scroll
   orizzontale. Sotto 400px vanno a capo su due righe. */
.tabs.tabs--auth {
	flex-wrap: wrap;
	gap: 0.2rem;
}
.tabs.tabs--auth .tab {
	flex: 1 1 auto;
	min-width: 6.5rem;
	padding-inline: 0.5rem;
	font-size: var(--fs-1, 15px);
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}
@media (max-width: 400px) {
	.tabs.tabs--auth .tab {
		flex: 1 1 45%;
		font-size: 14px;
	}
}

/* .auth-help — "non ricordi come accedere?" sotto le schede */
.auth-help {
	margin-top: 1.75rem;
	padding: 1.35rem 1.25rem;
	border-radius: var(--radius-md, 12px);
	background: var(--c-paper, #FAF7F2);
	border: 1px solid var(--c-border, #E8E4DD);
	text-align: center;
}
.auth-help h2,
.auth-help h3 {
	font-size: var(--fs-4, 1.25rem);
	margin-bottom: 0.35em;
}
.auth-help p {
	color: var(--c-ink-soft, #5A6B7C);
	font-size: var(--fs-1, 15px);
	max-width: 44ch;
	margin-inline: auto;
}
.auth-help p:last-of-type {
	margin-bottom: 1.1rem;
}

/* .auth-actions — con .btn--block-mobile i bottoni sono impilati e a tutta
   larghezza fino a 640px, poi si affiancano centrati (come .btn-row). */
.auth-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
}

/* .auth-intro — cosa fa davvero l'area clienti, prima delle schede */
.auth-intro {
	margin-bottom: 1.75rem;
}
.auth-intro h2 {
	font-size: var(--fs-5, 1.5rem);
}
.auth-intro .checklist {
	margin-top: 0.9rem;
}
.auth-intro .checklist li {
	font-size: var(--fs-1, 15px);
}

/* .auth-block — "i tuoi appuntamenti": contenitore dello shortcode del
   plugin messo dal cliente nel contenuto pagina */
.auth-block {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--c-border, #E8E4DD);
}
.auth-block > h2 {
	font-size: var(--fs-5, 1.5rem);
}

/* Il campo codice fiscale va scritto in maiuscolo (niente stile inline) */
.field input.input-upper {
	text-transform: uppercase;
}