/*
 * Widget di prenotazione, parte pubblica (ADR-0029). CSS di base del plugin, senza build.
 *
 * - Classi hbk-*, nessuna utility; regole fuori dai layer e con specificità bassa (una classe).
 * - Ogni valore che un tema può voler cambiare passa da una variabile --hbk-*, letta con un valore di riserva
 *   neutro: il plugin non dichiara mai le variabili, quindi il tema le imposta dove vuole, con i propri token,
 *   senza conflitti di cascata.
 * - Handle hbk-widget, registrato su init. Il filtro hbk_enqueue_default_styles toglie questo file a un tema
 *   che vuole scrivere tutto da sé.
 * - Disposizione con le container query sul contenitore .hbk-widget: calendario e orari affiancati quando il
 *   widget è largo almeno 44rem, uno sotto l'altro sotto quella misura, qualunque sia la pagina.
 * - Peso: al più 10 KB compressi (ADR-0029). A ogni modifica: gzip -6 -c widget.css | wc -c, e il valore nella
 *   documentazione del progetto. I commenti contano: le spiegazioni lunghe stanno nella documentazione.
 *
 * Markup di riferimento, stati e variabili: styleguide del tema del progetto e la sua documentazione del
 * design system, sezione "Prenotazione".
 */

/* ==========================================================================
 * Contenitore
 * ========================================================================== */
.hbk-widget {
    container: hbk-widget / inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--hbk-gap-section, 2.5rem);
    width: 100%;
    max-width: var(--hbk-max-width, 58rem);
    margin-inline: auto;
    color: var(--hbk-color-text, #1f2328);
    font-family: var(--hbk-font, inherit);
    font-size: var(--hbk-text-size, 1rem);
    line-height: var(--hbk-text-line, 1.5);
    text-align: start;
}

.hbk-widget *,
.hbk-widget ::before,
.hbk-widget ::after {
    box-sizing: border-box;
}

.hbk-widget [hidden] {
    display: none !important;
}

.hbk-widget :focus-visible {
    outline: 3px solid var(--hbk-color-focus, #1f2328);
    outline-offset: 2px;
}

.hbk-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Honeypot (ADR-0029): mai visibile, nemmeno ai lettori di schermo (aria-hidden e tabindex="-1" nel markup). */
.hbk-hp {
    display: none !important;
}

/* Un blocco del percorso (prestazioni, data e orario, modulo). */
.hbk-step {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Titoli dei passi: "Seleziona il servizio", "Seleziona la data", "Seleziona l'orario" (Figma H4, 9:4045). */
.hbk-step-title {
    margin: 0;
    color: var(--hbk-color-heading, currentColor);
    font-family: var(--hbk-heading-font, inherit);
    font-size: var(--hbk-step-size, 1.5rem);
    line-height: var(--hbk-step-line, 1.33);
    font-weight: 700;
}

/* ==========================================================================
 * Icone (maschere CSS nel colore del testo): <span class="hbk-icon hbk-icon--plus" aria-hidden="true"></span>
 * ========================================================================== */
.hbk-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    vertical-align: middle;
    mask: var(--hbk-icon-image) center / contain no-repeat;
}

.hbk-icon--plus { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.hbk-icon--x { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13'/%3E%3C/svg%3E"); }
.hbk-icon--check { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.hbk-icon--info { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.75v.01' stroke-width='2.2'/%3E%3C/svg%3E"); }
.hbk-icon--alert { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.25v.01' stroke-width='2.2'/%3E%3C/svg%3E"); }
.hbk-icon--calendar { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); }
.hbk-icon--clock { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
.hbk-icon--refresh { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12a7.5 7.5 0 0 1 13-5.1L20 9.5M20 4.5v5h-5M19.5 12a7.5 7.5 0 0 1-13 5.1L4 14.5M4 19.5v-5h5'/%3E%3C/svg%3E"); }
.hbk-icon--chevron-left { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 4.6 8 12l7.4 7.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hbk-icon--chevron-right { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 4.6 16 12l-7.4 7.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hbk-icon--phone { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.hbk-icon--whatsapp { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.23 8.23 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.22-8.23 8.22zm4.51-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.43-.06-.13-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.29z'/%3E%3C/svg%3E"); }
.hbk-icon--download { --hbk-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }

/* ==========================================================================
 * Campi: stesso aspetto dei campi del sito (Figma "Forms" 9:6945), con le variabili --hbk-field-*.
 * ========================================================================== */
.hbk-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.hbk-label {
    display: block;
    padding: 0;
    color: var(--hbk-color-label, currentColor);
    font-size: var(--hbk-label-size, 1.125rem);
    line-height: var(--hbk-label-line, 1.55);
    font-weight: 700;
}

.hbk-required {
    color: inherit;
    font-weight: 700;
}

.hbk-help {
    margin: 0;
    color: var(--hbk-color-label, currentColor);
    font-size: var(--hbk-small-size, 0.9375rem);
    line-height: var(--hbk-small-line, 1.47);
    font-style: italic;
}

.hbk-error {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    color: var(--hbk-color-error, #b42318);
    font-size: var(--hbk-small-size, 0.9375rem);
    line-height: var(--hbk-small-line, 1.47);
    font-weight: 600;
}

.hbk-input,
.hbk-select,
.hbk-textarea {
    display: block;
    width: 100%;
    min-height: var(--hbk-field-height, 3rem);
    margin: 0;
    padding: var(--hbk-field-padding-y, 0.6875rem) var(--hbk-field-padding-x, 1rem);
    border: 1px solid var(--hbk-field-border, #6e7781);
    border-radius: var(--hbk-radius, 0.5rem);
    background-color: var(--hbk-field-bg, #ffffff);
    color: var(--hbk-field-color, #1f2328);
    font: inherit;
    font-size: var(--hbk-field-size, 1rem);
    line-height: var(--hbk-field-line, 1.5);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hbk-input::placeholder,
.hbk-textarea::placeholder {
    color: var(--hbk-field-placeholder, #57606a);
    opacity: 1;
}

.hbk-select {
    appearance: none;
    padding-right: 3.5rem;
    background-image: var(--hbk-select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.5115 8.13105'%3E%3Cpath d='M0 1.37528L6.75577 8.13105L13.5115 1.37528L12.1604 0.0241278L7.72087 4.4395L6.75577 5.40461L5.79066 4.4395L1.35115 0L0 1.37528Z' fill='%2357606a'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 0.875rem auto;
    cursor: pointer;
}

.hbk-textarea {
    height: 8rem;
    min-height: 6rem;
    resize: vertical;
}

.hbk-input:hover,
.hbk-select:hover,
.hbk-textarea:hover {
    border-color: var(--hbk-field-border-hover, #1f2328);
}

.hbk-input:focus-visible,
.hbk-select:focus-visible,
.hbk-textarea:focus-visible {
    border-color: var(--hbk-field-border-hover, #1f2328);
    outline: 3px solid var(--hbk-color-focus, #1f2328);
    outline-offset: 1px;
}

.hbk-input[aria-invalid="true"],
.hbk-select[aria-invalid="true"],
.hbk-textarea[aria-invalid="true"] {
    border-color: var(--hbk-color-error-strong, #b42318);
    box-shadow: inset 0 0 0 1px var(--hbk-color-error-strong, #b42318);
}

.hbk-input:disabled,
.hbk-select:disabled,
.hbk-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Riga con il campo e un pulsante accanto (es. seconda prestazione e "Togli"). */
.hbk-field__row {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.hbk-field__row > .hbk-select,
.hbk-field__row > .hbk-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Casella di spunta con il testo accanto (consenso privacy, consenso ai dati sanitari). */
.hbk-choice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: var(--hbk-color-label, currentColor);
    font-size: var(--hbk-small-size, 0.9375rem);
    line-height: var(--hbk-small-line, 1.47);
}

.hbk-choice a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.hbk-check {
    appearance: none;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.125rem 0 0;
    border: 1px solid var(--hbk-check-border, #1f2328);
    border-radius: var(--hbk-radius-sm, 0.25rem);
    background: var(--hbk-field-bg, #ffffff) no-repeat center / 100% 100%;
    cursor: pointer;
}

.hbk-check:checked {
    border-color: var(--hbk-check-bg, #1f2328);
    background-color: var(--hbk-check-bg, #1f2328);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M15 5L7.4375 13L4 9.36364' fill='none' stroke='white' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hbk-check:focus-visible {
    outline: 3px solid var(--hbk-color-focus, #1f2328);
    outline-offset: 2px;
}

.hbk-check[aria-invalid="true"] {
    border-color: var(--hbk-color-error-strong, #b42318);
    box-shadow: 0 0 0 1px var(--hbk-color-error-strong, #b42318);
}

.hbk-choice label {
    cursor: pointer;
}

/* ==========================================================================
 * Pulsanti: stesso aspetto del pulsante del sito (Figma CTA 9:6525), con le variabili --hbk-button-*.
 * ========================================================================== */
.hbk-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: var(--hbk-button-height, 3rem);
    margin: 0;
    padding: 0.5rem var(--hbk-button-padding-x, 1.5rem);
    border: 0;
    border-radius: var(--hbk-radius, 0.5rem);
    background-color: var(--hbk-color-primary, #1a7f37);
    color: var(--hbk-color-on-primary, #ffffff);
    font: inherit;
    font-family: var(--hbk-heading-font, inherit);
    font-size: var(--hbk-button-size, 1rem);
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.hbk-button:hover {
    background-color: var(--hbk-button-hover-bg, #116329);
    color: var(--hbk-button-hover-fg, #ffffff);
}

.hbk-button:active {
    transform: translateY(1px);
}

.hbk-button:focus-visible {
    outline: 3px solid var(--hbk-color-focus, #1f2328);
    outline-offset: 3px;
}

.hbk-button--secondary {
    background-color: var(--hbk-button-secondary-bg, #ffffff);
    color: var(--hbk-button-secondary-fg, #1f2328);
}

.hbk-button--large {
    min-height: var(--hbk-button-height-lg, 3.625rem);
    padding-inline: var(--hbk-button-padding-x-lg, 2rem);
    font-size: var(--hbk-button-size-lg, 1.125rem);
}

.hbk-button:disabled,
.hbk-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Invio in corso: aria-busy="true" con aria-disabled="true" e il testo "Invio in corso…". Testo a pieno contrasto,
   non attenuato come un pulsante disattivato, e l'anello che gira prima del testo (fermo con il movimento ridotto). */
.hbk-button[aria-busy="true"] {
    opacity: 1;
    cursor: progress;
    pointer-events: none;
}

.hbk-button[aria-busy="true"]::before {
    content: "";
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hbk-spin 0.8s linear infinite;
}

.hbk-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ==========================================================================
 * Prestazioni: scelta, "Aggiungi un'altra prestazione", nota per il paziente, prestazione fissa
 * ========================================================================== */
.hbk-services {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* "Aggiungi un'altra prestazione": come il collegamento con freccia del sito (9:6545), con il "+". */
.hbk-add {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 1rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hbk-color-text, #1f2328);
    font: inherit;
    font-family: var(--hbk-heading-font, inherit);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

.hbk-add__box {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: var(--hbk-radius-sm, 0.25rem);
    background-color: var(--hbk-color-primary, #1a7f37);
    color: var(--hbk-color-on-primary, #ffffff);
    transition: background-color 0.2s;
}

.hbk-add:hover .hbk-add__box {
    background-color: var(--hbk-color-selected, #116329);
}

.hbk-add:hover .hbk-add__text {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Pulsante quadrato con sola icona, alto quanto il campo (es. "Togli la seconda prestazione"). */
.hbk-icon-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--hbk-field-height, 3rem);
    min-height: var(--hbk-field-height, 3rem);
    margin: 0;
    padding: 0;
    border: 1px solid var(--hbk-field-border, #6e7781);
    border-radius: var(--hbk-radius, 0.5rem);
    background-color: var(--hbk-field-bg, #ffffff);
    color: var(--hbk-field-color, #1f2328);
    cursor: pointer;
}

.hbk-icon-button:hover {
    border-color: var(--hbk-field-border-hover, #1f2328);
    background-color: var(--hbk-icon-button-hover, #f6f8fa);
}

/* Nota per il paziente (ADR-0024): sotto la scelta e nel riepilogo. */
.hbk-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem 1.25rem;
    border-left: 4px solid var(--hbk-color-accent, #1a7f37);
    border-radius: var(--hbk-radius-sm, 0.25rem);
    background-color: var(--hbk-color-surface, #ffffff);
    color: var(--hbk-color-panel-strong, #1f2328);
    font-size: var(--hbk-note-size, 1rem);
    line-height: var(--hbk-note-line, 1.6);
}

.hbk-note > .hbk-icon {
    margin-top: 0.1875rem;
    color: var(--hbk-color-heading-on-panel, #1f2328);
}

.hbk-note strong {
    font-weight: 700;
}

/* Istruzioni e note: testo semplice con gli a capo, inserito con textContent (ADR-0029). */
.hbk-pre {
    white-space: pre-line;
}

/* Prestazione già scelta e non modificabile (sezione limitata a una prestazione, giornate evento, ADR-0030). */
.hbk-service-fixed {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px dashed var(--hbk-color-summary-border, #6e7781);
    border-radius: var(--hbk-radius, 0.5rem);
    background-color: var(--hbk-color-summary-bg, #ffffff);
    color: var(--hbk-color-panel-strong, #1f2328);
}

.hbk-service-fixed__label {
    margin: 0;
    color: var(--hbk-color-summary-label, #1f2328);
    font-size: var(--hbk-small-size, 0.9375rem);
    line-height: var(--hbk-small-line, 1.47);
    font-weight: 700;
}

.hbk-service-fixed__name {
    margin: 0;
    font-size: var(--hbk-summary-size, 1.125rem);
    line-height: var(--hbk-summary-line, 1.5);
    font-weight: 700;
}

.hbk-service-fixed__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0;
    color: var(--hbk-color-panel-text, #57606a);
}

/* ==========================================================================
 * Data e orario: due riquadri bianchi affiancati da 44rem di larghezza del widget (Figma 9:4049, gap 48)
 * ========================================================================== */
.hbk-schedule {
    display: grid;
    gap: var(--hbk-gap-lg, 2rem);
}

@container hbk-widget (width >= 44rem) {
    .hbk-schedule {
        grid-template-columns: auto minmax(0, var(--hbk-slots-width, 21.875rem));
        justify-content: center;
    }

    /* Altezza minima solo affiancati; impilati, i riquadri sono alti quanto il contenuto. */
    .hbk-panel {
        min-height: var(--hbk-panel-min-height, 21.75rem);
    }
}

.hbk-schedule__col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* Riquadro bianco del calendario e degli orari (come il calendario del sito: bordo, ombra, raggio 8). */
.hbk-panel {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0.75rem 0.5rem 0.5rem;
    border: 1px solid var(--hbk-color-border, #d0d7de);
    border-radius: var(--hbk-radius, 0.5rem);
    background-color: var(--hbk-color-surface, #ffffff);
    box-shadow: var(--hbk-shadow, 0 8px 16px rgb(0 0 0 / 0.15));
    color: var(--hbk-color-panel-text, #57606a);
    font-size: 0.875rem;
    line-height: 1.5;
}

/*
 * Caricamento sopra un contenuto già presente (es. cambio di mese): il contenuto resta leggibile ma non si
 * tocca, e al centro gira l'indicatore su un disco bianco con l'ombra. Niente velature: il testo sotto
 * perderebbe il contrasto. Il frontend disattiva anche i pulsanti e annuncia il caricamento (aria-live).
 */
.hbk-panel[aria-busy="true"] > :not(.hbk-state) {
    pointer-events: none;
}

.hbk-panel[aria-busy="true"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    margin: -2rem 0 0 -2rem;
    border-radius: 50%;
    background-color: var(--hbk-color-surface, #ffffff);
    box-shadow: var(--hbk-shadow, 0 8px 16px rgb(0 0 0 / 0.15));
}

.hbk-panel[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 3px solid var(--hbk-color-primary, #1a7f37);
    border-right-color: transparent;
    border-radius: 50%;
    animation: hbk-spin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
 * Calendario: stessa grafica del campo data di Gravity Forms del sito (forms.css, Figma 9:7028, 9:7005,
 * 9:7024): celle di --hbk-cell-size, fascia dei giorni della settimana, oggi con il punto, giorno scelto pieno.
 * -------------------------------------------------------------------------- */
.hbk-calendar {
    --hbk-cell: var(--hbk-cell-size, 2.75rem);

    display: flex;
    flex-direction: column;
    align-items: center;
}

@container hbk-widget (width >= 44rem) {
    .hbk-calendar {
        --hbk-cell: var(--hbk-cell-size-lg, 2.5rem);
    }
}

.hbk-calendar__header {
    display: grid;
    grid-template-columns: var(--hbk-cell) 1fr var(--hbk-cell);
    align-items: center;
    width: calc(7 * var(--hbk-cell));
    max-width: 100%;
    margin-bottom: 0.25rem;
}

.hbk-calendar__title {
    margin: 0;
    color: var(--hbk-color-selected, #116329);
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
}

.hbk-calendar__title strong {
    font-weight: 700;
}

.hbk-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hbk-cell);
    height: var(--hbk-cell);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--hbk-radius, 0.5rem);
    background: transparent;
    color: var(--hbk-color-panel-strong, #1f2328);
    cursor: pointer;
}

.hbk-calendar__nav .hbk-icon {
    width: 1.3125rem;
    height: 1.3125rem;
}

.hbk-calendar__nav:hover {
    background-color: var(--hbk-color-band-hover, #eaeef2);
}

.hbk-calendar__nav:disabled,
.hbk-calendar__nav[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Tabella resa come griglia di 7 colonne; la semantica di griglia (role, aria) la dà il markup. */
.hbk-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, var(--hbk-cell)));
    max-width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

.hbk-calendar__grid thead,
.hbk-calendar__grid tbody,
.hbk-calendar__grid tr {
    display: contents;
}

.hbk-calendar__grid th,
.hbk-calendar__grid td {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
}

.hbk-calendar__weekday {
    height: 2.5rem;
    background-color: var(--hbk-color-band, #f6f8fa);
    color: var(--hbk-color-panel-text, #57606a);
    font-weight: 400;
}

.hbk-calendar__weekday:first-child {
    border-radius: var(--hbk-radius-sm, 0.25rem) 0 0 var(--hbk-radius-sm, 0.25rem);
}

.hbk-calendar__weekday:last-child {
    border-radius: 0 var(--hbk-radius-sm, 0.25rem) var(--hbk-radius-sm, 0.25rem) 0;
}

.hbk-calendar__weekday abbr {
    text-decoration: none;
}

.hbk-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hbk-cell);
    max-width: 100%;
    height: var(--hbk-cell);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--hbk-radius, 0.5rem);
    background: transparent;
    color: var(--hbk-color-panel-text, #57606a);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

/* Giorni del mese prima e dopo: non si mostrano (cella vuota). Nel Figma (9:7028) sono grigio chiaro, ma non
   si scelgono: più scuri sembrerebbero disponibili, più chiari non avrebbero il contrasto AA. Se il markup li
   stampa con questa classe, restano invisibili e la griglia non si sposta. */
.hbk-day--outside {
    visibility: hidden;
}

/* Oggi: numero in grassetto e punto sotto (nel Figma il numero è verde chiaro, corretto per il contrasto). */
.hbk-day.is-today,
.hbk-day[aria-current="date"] {
    color: var(--hbk-color-today, #1a7f37);
    font-weight: 700;
}

.hbk-day.is-today::after,
.hbk-day[aria-current="date"]::after {
    content: "";
    position: absolute;
    bottom: 0.3125rem;
    left: 50%;
    width: 0.25rem;
    height: 0.25rem;
    margin-left: -0.125rem;
    border-radius: 50%;
    background-color: var(--hbk-color-today-dot, #1a7f37);
}

.hbk-day:not(.hbk-day--outside, :disabled, [aria-disabled="true"]):hover {
    background-color: var(--hbk-day-hover-bg, #116329);
    color: var(--hbk-day-hover-fg, #ffffff);
}

/* Giorno scelto: pieno, come il pulsante primario. */
.hbk-day.is-selected,
.hbk-day[aria-pressed="true"],
.hbk-day[aria-selected="true"] {
    background-color: var(--hbk-color-primary, #1a7f37);
    color: var(--hbk-color-on-primary, #ffffff);
    font-weight: 700;
}

.hbk-day.is-selected:hover,
.hbk-day[aria-pressed="true"]:hover,
.hbk-day[aria-selected="true"]:hover {
    background-color: var(--hbk-color-primary, #1a7f37);
    color: var(--hbk-color-on-primary, #ffffff);
}

.hbk-day:hover::after,
.hbk-day.is-selected::after,
.hbk-day[aria-pressed="true"]::after,
.hbk-day[aria-selected="true"]::after {
    background-color: currentColor;
}

.hbk-day:focus-visible {
    outline-offset: 1px;
}

/* Senza posti, chiuso o festivo: grigio e barrato; resta raggiungibile da tastiera e si annuncia "non disponibile". */
.hbk-day:disabled,
.hbk-day[aria-disabled="true"] {
    color: var(--hbk-color-disabled, #8c959f);
    text-decoration: line-through;
    cursor: default;
}

/* Legenda sotto il calendario. */
.hbk-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1rem;
    margin: auto 0 0;
    padding: 0.5rem 0.25rem 0.25rem;
    color: var(--hbk-color-panel-text, #57606a);
    font-size: 0.8125rem;
    line-height: 1.4;
    list-style: none;
}

.hbk-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.hbk-legend__today {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--hbk-color-today-dot, #1a7f37);
}

/* Campione del giorno non disponibile: decorativo (il testo accanto dice cosa significa), quindi in ::before. */
.hbk-legend__off::before {
    content: "12";
    color: var(--hbk-color-disabled, #8c959f);
    text-decoration: line-through;
}

/* --------------------------------------------------------------------------
 * Orari: gruppo di radio nativi in una griglia di 4 colonne (Figma 9:4066, celle 80 x 41, spazio 6).
 * Disponibile pieno verde; scelto verde scuro con la spunta (non solo il colore); non disponibile grigio barrato.
 * -------------------------------------------------------------------------- */
.hbk-slots {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    padding: 0 0.25rem;
    border: 0;
}

.hbk-slots__title {
    display: block;
    width: 100%;
    min-height: var(--hbk-cell-size-lg, 2.5rem);
    margin: 0;
    padding: 0.5rem 0 0;
    color: var(--hbk-color-selected, #116329);
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
}

.hbk-slots__title strong {
    font-weight: 700;
}

.hbk-slots__group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hbk-slots__group-title {
    margin: 0;
    color: var(--hbk-color-panel-text, #57606a);
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 600;
}

.hbk-slots__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hbk-slot {
    position: relative;
    display: flex;
    margin: 0;
}

/* Il radio copre la cella: si sceglie toccando ovunque, e il focus da tastiera resta sul radio nativo. */
.hbk-slot__input {
    appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: var(--hbk-radius-sm, 0.25rem);
    background: transparent;
    cursor: pointer;
}

.hbk-slot__text {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: var(--hbk-cell-size, 2.75rem);
    border-radius: var(--hbk-radius-sm, 0.25rem);
    background-color: var(--hbk-color-primary, #1a7f37);
    color: var(--hbk-color-on-primary, #ffffff);
    font-size: 0.875rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: background-color 0.2s, color 0.2s;
}

@container hbk-widget (width >= 44rem) {
    .hbk-slot__text {
        min-height: var(--hbk-cell-size-lg, 2.5rem);
    }
}

.hbk-slot__input:hover + .hbk-slot__text {
    background-color: var(--hbk-slot-hover-bg, #116329);
    color: var(--hbk-slot-hover-fg, #ffffff);
}

.hbk-slot__input:checked + .hbk-slot__text {
    background-color: var(--hbk-color-selected, #0d4a20);
    color: var(--hbk-color-on-selected, #ffffff);
    font-weight: 700;
}

.hbk-slot__input:checked + .hbk-slot__text::before {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    margin-left: -0.25rem;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hbk-slot__input:focus-visible {
    outline: none;
}

.hbk-slot__input:focus-visible + .hbk-slot__text {
    outline: 3px solid var(--hbk-color-focus, #1f2328);
    outline-offset: 2px;
}

.hbk-slot__input:disabled {
    cursor: default;
}

.hbk-slot__input:disabled + .hbk-slot__text {
    background-color: var(--hbk-color-unavailable-bg, #f6f8fa);
    color: var(--hbk-color-unavailable, #57606a);
    text-decoration: line-through;
}

/* --------------------------------------------------------------------------
 * Stati dentro i riquadri: nessuna data scelta, caricamento, nessun orario, errore (non nel Figma).
 * -------------------------------------------------------------------------- */
.hbk-state {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    color: var(--hbk-color-panel-text, #57606a);
    font-size: 0.9375rem;
    line-height: 1.47;
    text-align: center;
}

.hbk-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    background-color: var(--hbk-color-band, #f6f8fa);
    color: var(--hbk-color-selected, #116329);
}

.hbk-state__title {
    margin: 0;
    color: var(--hbk-color-panel-strong, #1f2328);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
}

.hbk-state__text {
    max-width: 18rem;
    margin: 0;
}

.hbk-state__text a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.hbk-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hbk-state--error .hbk-state__icon {
    background-color: var(--hbk-color-error-bg, #fef3f2);
    color: var(--hbk-color-error-strong, #b42318);
}

/* Indicatore di caricamento: anello che gira (fermo con il movimento ridotto, resta il testo). */
.hbk-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--hbk-color-primary, #1a7f37);
    border-right-color: transparent;
    border-radius: 50%;
    animation: hbk-spin 0.8s linear infinite;
}

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

/* Pulsante piccolo dentro i riquadri (es. "Riprova", "Mese successivo"): secondario, con il bordo. */
.hbk-link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.375rem 1rem;
    border: 1px solid var(--hbk-field-border, #6e7781);
    border-radius: var(--hbk-radius, 0.5rem);
    background-color: var(--hbk-color-surface, #ffffff);
    color: var(--hbk-color-panel-strong, #1f2328);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.hbk-link-button:hover {
    border-color: var(--hbk-color-panel-strong, #1f2328);
    background-color: var(--hbk-color-band, #f6f8fa);
}

/* ==========================================================================
 * Riepilogo e modulo (Figma 9:4108, 9:4110, 9:4115)
 * ========================================================================== */
.hbk-form {
    display: flex;
    flex-direction: column;
    gap: var(--hbk-gap-lg, 2rem);
    margin: 0;
}

.hbk-form__title {
    margin: 0;
    color: var(--hbk-color-heading, currentColor);
    font-family: var(--hbk-heading-font, inherit);
    font-size: var(--hbk-title-size, 1.875rem);
    line-height: var(--hbk-title-line, 1.22);
    font-weight: 700;
    text-align: center;
    text-wrap: balance;
}

.hbk-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--hbk-gap, 1.5rem);
}

.hbk-form__grid {
    display: grid;
    gap: var(--hbk-gap, 1.5rem);
}

@container hbk-widget (width >= 40rem) {
    .hbk-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hbk-form__grid > .hbk-field--full {
        grid-column: 1 / -1;
    }
}

.hbk-consents {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: calc(1rem - var(--hbk-gap, 1.5rem));
}

.hbk-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Riepilogo: riquadro con bordo tratteggiato, etichette verdi e valori in grassetto (Figma 9:4110). */
.hbk-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px dashed var(--hbk-color-summary-border, #6e7781);
    border-radius: var(--hbk-radius, 0.5rem);
    background-color: var(--hbk-color-summary-bg, #ffffff);
    color: var(--hbk-color-panel-strong, #1f2328);
}

.hbk-summary__title {
    margin: 0;
    color: var(--hbk-color-summary-label, #1f2328);
    font-size: var(--hbk-summary-size, 1.125rem);
    line-height: var(--hbk-summary-line, 1.5);
    font-weight: 700;
}

.hbk-summary__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0;
    font-size: var(--hbk-summary-size, 1.125rem);
    line-height: var(--hbk-summary-line, 1.5);
    font-weight: 700;
}

.hbk-summary__item {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.375rem;
    min-width: 0;
}

.hbk-summary__item--full {
    flex-basis: 100%;
}

.hbk-summary__item dt {
    color: var(--hbk-color-summary-label, #1f2328);
}

.hbk-summary__item dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Più prestazioni: elenco numerato nell'ordine della visita, durata e prezzo per riga. */
.hbk-summary__services {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hbk-summary__services li {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
}

.hbk-summary__meta {
    color: var(--hbk-color-panel-text, #57606a);
    font-weight: 400;
}

.hbk-summary .hbk-note {
    padding: 0.5rem 0 0.5rem 1rem;
    background: transparent;
}

/* Moduli da scaricare sotto le istruzioni (ADR-0029): "Scarica il modulo: <titolo> (PDF)", nuova scheda annunciata
   con .hbk-sr-only. Righe alte almeno 24 px (WCAG 2.5.8). */
.hbk-documents {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0 0 0 1.25rem;
    list-style: none;
}

.hbk-document {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 0.125rem;
    color: var(--hbk-color-heading-on-panel, currentColor);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.hbk-document:hover {
    text-decoration-thickness: 2px;
}

.hbk-document > .hbk-icon {
    margin-top: 0.125rem;
}

/* ==========================================================================
 * Avvisi: riepilogo degli errori, orario non più disponibile (409), troppe richieste, errore del server.
 * Stesso aspetto del riepilogo errori dei moduli del sito.
 * ========================================================================== */
.hbk-alert {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--hbk-color-error-strong, #b42318);
    border-radius: var(--hbk-radius, 0.5rem);
    background-color: var(--hbk-color-error-bg, #fef3f2);
    color: var(--hbk-color-error-strong, #b42318);
    font-size: var(--hbk-small-size, 0.9375rem);
    line-height: var(--hbk-small-line, 1.47);
}

.hbk-alert > .hbk-icon {
    margin-top: 0.125rem;
}

.hbk-alert__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.hbk-alert__title {
    margin: 0;
    font-size: var(--hbk-label-size, 1.125rem);
    line-height: var(--hbk-label-line, 1.55);
    font-weight: 700;
}

.hbk-alert__text {
    margin: 0;
}

.hbk-alert__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Collegamenti ai campi alti almeno 26 px (WCAG 2.5.8), come nei moduli del sito. */
.hbk-alert a {
    display: inline-block;
    padding-block: 0.125rem;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.hbk-alert--info {
    border-color: var(--hbk-color-summary-border, #6e7781);
    background-color: var(--hbk-color-surface, #ffffff);
    color: var(--hbk-color-panel-strong, #1f2328);
}

/* ==========================================================================
 * Messaggi al posto del calendario o del widget: prestazione solo per telefono, nessun posto nei prossimi
 * giorni, giornata evento conclusa, errore del server, prenotazione online sospesa (ripiego del tema).
 * ========================================================================== */
.hbk-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    border-radius: var(--hbk-radius-lg, 1rem);
    background-color: var(--hbk-color-surface, #ffffff);
    color: var(--hbk-color-panel-strong, #1f2328);
    text-align: center;
}

.hbk-message__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--hbk-color-band, #f6f8fa);
    color: var(--hbk-color-selected, #116329);
}

.hbk-message__title {
    margin: 0;
    color: var(--hbk-color-heading-on-panel, #1f2328);
    font-size: var(--hbk-step-size, 1.5rem);
    line-height: var(--hbk-step-line, 1.33);
    font-weight: 700;
    text-wrap: balance;
}

.hbk-message__text {
    max-width: 36rem;
    margin: 0;
    font-size: var(--hbk-text-size, 1rem);
    line-height: var(--hbk-text-line, 1.5);
}

/* ==========================================================================
 * Risposta dopo l'invio: "Richiesta inviata" o "Prenotazione confermata", con il riepilogo.
 * Il focus va sul titolo (tabindex="-1" nel markup).
 * ========================================================================== */
.hbk-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.hbk-result__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--hbk-color-primary, #1a7f37);
    color: var(--hbk-color-on-primary, #ffffff);
}

.hbk-result__icon .hbk-icon {
    width: 2rem;
    height: 2rem;
}

.hbk-result__title {
    margin: 0;
    color: var(--hbk-color-heading, currentColor);
    font-family: var(--hbk-heading-font, inherit);
    font-size: var(--hbk-title-size, 1.875rem);
    line-height: var(--hbk-title-line, 1.22);
    font-weight: 700;
}

.hbk-result__title:focus {
    outline: none;
}

.hbk-result__text {
    max-width: 40rem;
    margin: 0;
    font-size: var(--hbk-lead-size, 1.125rem);
    line-height: var(--hbk-lead-line, 1.5);
}

.hbk-result__text strong {
    font-weight: 700;
}

.hbk-result .hbk-summary {
    width: 100%;
    text-align: start;
}

/* ==========================================================================
 * Colori forzati (contrasto elevato di Windows): il browser sostituisce fondi e colori con quelli di sistema.
 * Giorno e orario scelti prendono i colori della selezione (Highlight); icone e segni disegnati con le
 * maschere un colore di sistema, perché il fondo che li disegna sparirebbe; pulsanti e orari un bordo.
 * ========================================================================== */
@media (forced-colors: active) {
    .hbk-icon,
    .hbk-legend__today {
        background-color: CanvasText;
    }

    .hbk-button .hbk-icon,
    .hbk-link-button .hbk-icon,
    .hbk-icon-button .hbk-icon,
    .hbk-calendar__nav .hbk-icon,
    .hbk-add .hbk-icon,
    .hbk-day::after {
        background-color: ButtonText;
    }

    a.hbk-button .hbk-icon,
    .hbk-document .hbk-icon {
        background-color: LinkText;
    }

    .hbk-button,
    .hbk-add__box,
    .hbk-calendar__nav {
        border: 1px solid ButtonText;
    }

    a.hbk-button {
        border-color: LinkText;
    }

    .hbk-slot__text {
        border: 1px solid CanvasText;
    }

    .hbk-day.is-selected,
    .hbk-day.is-selected:hover,
    .hbk-day[aria-pressed="true"],
    .hbk-day[aria-pressed="true"]:hover,
    .hbk-day[aria-selected="true"],
    .hbk-day[aria-selected="true"]:hover,
    .hbk-slot__input:checked + .hbk-slot__text {
        forced-color-adjust: none;
        border-color: Highlight;
        background-color: Highlight;
        color: HighlightText;
        outline-color: CanvasText;
    }

    .hbk-day.is-selected::after,
    .hbk-day[aria-pressed="true"]::after,
    .hbk-day[aria-selected="true"]::after,
    .hbk-slot__input:checked + .hbk-slot__text::before {
        background-color: HighlightText;
    }

    .hbk-day:disabled,
    .hbk-day[aria-disabled="true"],
    .hbk-slot__input:disabled + .hbk-slot__text {
        border-color: GrayText;
        color: GrayText;
    }

    /* Consensi: la casella del sistema, che mostra la spunta con i colori di sistema. */
    .hbk-check,
    .hbk-check:checked {
        appearance: auto;
        background: none;
    }

    /* Il bordo trasparente diventerebbe visibile: il varco dell'anello che gira prende il colore della pagina. */
    .hbk-spinner,
    .hbk-panel[aria-busy="true"]::after,
    .hbk-button[aria-busy="true"]::before {
        border-color: CanvasText;
        border-right-color: Canvas;
    }
}

/* ==========================================================================
 * Movimento ridotto: niente transizioni; gli indicatori di caricamento restano fermi, con il testo.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hbk-widget *,
    .hbk-widget ::before,
    .hbk-widget ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}