/* CSS del modulo di iscrizione 2026-2027.
 * Consolidato dai 9 blocchi <style> del file monolitico, NELLO STESSO ORDINE:
 * l ordine e la cascata, cambiarlo cambia il risultato.
 *
 * DUE LIVELLI DI SCOPE, con ruoli distinti:
 *
 *   .iscrizione-page   sul <body>. Riguarda la pagina: colonna di lettura,
 *                      spazio per l header fisso, posizionamento.
 *   .iscrizione        sul contenitore del modulo, dentro <main>. Riguarda il
 *                      form: campi, fieldset, bottoni, testi.
 *
 * Il secondo ha sostituito il vecchio "#main-title ~ *", che aveva due difetti
 * gravi: selezionava solo i FRATELLI del titolo, e quindi smetteva di
 * applicarsi non appena il wizard spostava i fieldset dentro le sue sezioni
 * (da qui il bug del min-width sui fieldset); e conteneva un ID, quindi
 * costringeva a !important qualunque regola scritta dopo.
 *
 * Rimossi nella stessa occasione i 13 selettori .wpcf7-form: la classe non
 * esiste piu nel markup dai tempi del Contact Form 7.
 *
 * Regola pratica: niente ID nei selettori di questo foglio. Se serve piu
 * specificita, si aggiunge un livello di scope, non un ID e non !important.
 */

/* ===== da riga 74 ===== */
    /* I token (--font-body, --navy, --orange, ...) arrivano da assets/styles.css,
       lo stesso foglio della home Campionati: una sola definizione per tutti. */
    .iscrizione,
    .iscrizione * {
        box-sizing: border-box;
        font-family: var(--font-body, "Manrope", system-ui, sans-serif);
    }

    .iscrizione__titolo {
        color: var(--navy, #071a33);
        font-family: var(--font-display, "Oswald", Impact, sans-serif);
        font-size: clamp(2rem, 5vw, 3.2rem);
        font-weight: 600;
        line-height: .95;
        letter-spacing: -.02em;
        text-transform: uppercase;
        text-wrap: balance;
        margin: 0 0 1.5rem;
    }

    .iscrizione fieldset {
        margin: 0 0 1.5rem;
        padding: 1.25rem;
        border: 1px solid #d0d5dd;
        border-radius: 10px;
        background: #fff;
        min-width: 0;
    }

    .iscrizione fieldset>legend {
        padding: .35rem .8rem;
        border-radius: 7px;
        background: #1956ae;
        color: #fff;
        font-size: 1.15rem;
        font-weight: 700;
    }

    .iscrizione fieldset label {
        color: #344054;
        font-weight: 600;
    }

    /* :where() azzera la specificita del filtro: senza, questa regola vale
       (0,4,1) e costringe a !important chiunque scriva dopo. */
    .iscrizione input:where(:not([type="checkbox"]):not([type="radio"]):not([type="color"])),
    .iscrizione select,
    .iscrizione textarea {
        max-width: 100%;
        padding: .55rem .7rem;
        border: 1px solid #98a2b3;
        border-radius: 6px;
        background: #fff;
        color: #101828;
        font: inherit;
        /* 16px pieni: sotto questa soglia iOS ingrandisce da solo al focus. */
        font-size: 1rem;
        line-height: 1.35;
    }

    .iscrizione button,
    .iscrizione input[type="submit"] {
        appearance: none;
        border: 0;
        border-radius: 7px;
        padding: .62rem 1rem;
        color: #fff;
        background: var(--blue, #075fb9);
        font: 700 .95rem/1.2 var(--font-body, "Manrope", system-ui, sans-serif);
        letter-spacing: .02em;
        cursor: pointer;
    }

    .iscrizione button:hover,
    .iscrizione input[type="submit"]:hover {
        filter: brightness(.92);
    }

    .campo-wrapper {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
        position: relative;
        border-radius: 8px;
    }

    .remove-button {
        position: absolute;
        top: 5px;
        right: 5px;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .remove-button:hover {
        color: red;
    }

    .remove-button::after {
        content: "\1F5D1 \FE0F ";
        font-size: 18px;
    }

    /* Styles per sezione campionato collapsed (accordion) */
    .sezione-campionato.collapsed>*:not(legend):not(.riassunto-campionato) {
        display: none;
    }

    .iscrizione .sezione-campionato .campionato-status {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
        margin: .8rem 0;
        color: var(--muted, #647084);
        font-size: .86rem;
    }

    .iscrizione .sezione-campionato.collapsed > .campionato-status {
        display: flex;
    }

    .iscrizione .riassunto-campionato {
        margin-top: 1rem;
        padding: 1rem;
        border: 1px solid #b9dfcc;
        border-left: 4px solid var(--green, #28a745);
        border-radius: .5rem;
        background: #f4fbf7;
        color: var(--ink, #17243b);
    }

    .iscrizione .riassunto-campionato__titolo {
        margin-bottom: .6rem;
        color: var(--green, #218838);
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .iscrizione .riassunto-campionato__riga {
        display: grid;
        grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
        gap: .4rem .75rem;
        align-items: baseline;
        padding: .35rem 0;
    }

    .iscrizione .riassunto-campionato__riga + .riassunto-campionato__riga {
        border-top: 1px solid rgba(40, 167, 69, .16);
    }

    .iscrizione .riassunto-campionato__etichetta {
        color: var(--muted, #647084);
        font-size: .84rem;
        font-weight: 700;
    }

    .iscrizione .riassunto-campionato__valore {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .iscrizione .riassunto-campionato__tag {
        display: inline-flex;
        width: fit-content;
        padding: .14rem .5rem;
        border-radius: 999px;
        background: #fff2d5;
        color: #805700;
        font-size: .82rem;
        font-weight: 700;
    }

    @media (max-width: 575px) {
        .iscrizione .riassunto-campionato__riga {
            grid-template-columns: 1fr;
            gap: .12rem;
        }
    }

    .iscrizione .sezione-campionato .campionato-status__badge {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .22rem .55rem;
        border: 1px solid currentColor;
        border-radius: 999px;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .iscrizione .sezione-campionato .campionato-status__badge::before {
        font-size: .9em;
        line-height: 1;
    }

    .iscrizione .sezione-campionato .campionato-status__badge--pending {
        color: #9a5b08;
        background: #fff5df;
    }

    .iscrizione .sezione-campionato .campionato-status__badge--pending::before {
        content: "\2022";
    }

    .iscrizione .sezione-campionato .campionato-status__badge--complete {
        display: none;
        color: #155b3f;
        background: #e9f7f1;
    }

    .iscrizione .sezione-campionato .campionato-status__badge--complete::before {
        content: "\2713";
    }

    .iscrizione .sezione-campionato.campionato-confermato .campionato-status__badge--pending,
    .iscrizione .sezione-campionato.campionato-confermato .campionato-status__hint {
        display: none;
    }

    .iscrizione .sezione-campionato.campionato-confermato .campionato-status__badge--complete {
        display: inline-flex;
    }

    .iscrizione .azioni-campionato {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        margin-top: 1.25rem;
        padding-top: 1rem;
        border-top: 1px solid #d9e1ea;
    }

    .iscrizione .azioni-campionato button {
        min-height: 2.75rem;
        margin: 0;
        padding: .65rem 1rem;
        border: 1px solid transparent;
        border-radius: .35rem;
        font: inherit;
        font-size: .85rem;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .iscrizione .azioni-campionato .btn-conferma-campionato {
        background: var(--green, #218838);
        color: #fff;
    }

    .iscrizione .azioni-campionato .btn-rimuovi-campionato {
        border-color: #c93636;
        background: #fff;
        color: #a82020;
    }

    .iscrizione .azioni-campionato .btn-rimuovi-campionato:hover {
        background: #fff1f1;
    }

    @media (max-width: 575px) {
        .iscrizione .azioni-campionato button {
            flex: 1 1 100%;
        }
    }

    /* I pulsanti sono visibili quando l'accordion \E8  aperto (sia per confermati che non confermati) */
    .sezione-campionato:not(.collapsed) .azioni-campionato {
        display: block;
    }

    /* I pulsanti sono nascosti quando l'accordion \E8  chiuso */
    .sezione-campionato.collapsed .azioni-campionato {
        display: none;
    }

    /* Stili per evidenziare il campionato aperto */
    .sezione-campionato:not(.collapsed) {
        border: 2px solid #007bff;
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.15);
        background-color: #f8f9ff;
    }

    .sezione-campionato:not(.collapsed) legend {
        background-color: #007bff;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .sezione-campionato:not(.collapsed) legend:hover {
        background-color: #0056b3;
    }

    /* Stili specifici per campionati NON confermati (non possono essere chiusi) */
    .sezione-campionato:not(.collapsed):not(.campionato-confermato) legend {
        position: relative;
    }

    .sezione-campionato:not(.collapsed):not(.campionato-confermato) legend:hover {
        background-color: #007bff;
        /* Mantiene lo stesso colore per indicare che non si pu\F2  chiudere */
        cursor: default;
        /* Cambia cursore per indicare che non \E8  cliccabile per chiusura */
    }

    .sezione-campionato:not(.collapsed):not(.campionato-confermato) legend::after {
        content: " \1F512 ";
        font-size: 0.8em;
        opacity: 0.7;
        margin-left: 8px;
    }

    /* Stile pannellino per le note dei campionati (visibile solo se presente testo) */
    .pannellino-note {
        background: #fffaf0;
        border: 1px solid #ffd47a;
        padding: 10px 12px;
        margin: 8px 0 12px 0;
        border-radius: 6px;
        color: #333;
    }

    .pannellino-note strong {
        margin-right: 6px;
        color: #b36b00;
    }

    .pannellino-note-contenuto {
        margin-top: 4px;
        white-space: pre-wrap;
    }

    /* Icona in alto a sinistra del pannellino note */
    .pannellino-note {
        position: relative;
    }

    .pannellino-note-icon {
        position: absolute;
        top: 8px;
        left: 8px;
        font-size: 18px;
        line-height: 1;
        color: #b36b00;
    }

    .pannellino-note-header {
        margin-left: 30px;
        font-weight: 600;
        color: #b36b00;
    }

    .sezione-campionato:not(.collapsed) legend {
        background-color: #007bff;
        color: white;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .sezione-campionato:not(.collapsed) legend:hover {
        background-color: #0056b3;
    }

    /* Stili per campionati CHIUSI e CONFERMATI - VERDE */
    .sezione-campionato.collapsed.campionato-confermato {
        border: 2px solid #28a745;
        background-color: #f8fff9;
        /* Verde molto chiaro */
    }

    .sezione-campionato.collapsed.campionato-confermato legend {
        background-color: #28a745;
        color: white;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .sezione-campionato.collapsed.campionato-confermato legend:hover {
        background-color: #1e7e34;
    }

    /* La matita rende esplicito che un campionato confermato resta modificabile.
       E generata via CSS per non alterare il testo usato da salvataggio e ripristino. */
    .sezione-campionato.collapsed.campionato-confermato legend::after {
        content: "\270E";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.6em;
        height: 2.6em;
        margin-left: 0.75rem;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.14);
        font-size: 1em;
        line-height: 1;
        vertical-align: middle;
    }

    .sezione-campionato.collapsed.campionato-confermato legend:hover::after {
        background: rgba(255, 255, 255, 0.24);
    }


    /* Stili per campionati confermati quando sono APERTI - OVERRIDE per essere BLU */
    .sezione-campionato.campionato-confermato:not(.collapsed) {
        border: 2px solid #007bff;
        /* Blu anche se confermato, se \E8  aperto */
        background-color: #f0f8ff;
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.15);
    }

    .sezione-campionato.campionato-confermato:not(.collapsed) legend {
        background-color: #007bff;
        /* Blu se aperto, anche se confermato */
        color: white;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .sezione-campionato.campionato-confermato:not(.collapsed) legend:hover {
        background-color: #0056b3;
    }

    .sezione-riassunto {
        background: #fafafa;
        border-radius: 6px;
    }

    .sezione-riassunto strong {
        font-size: 1.05em;
    }

    /* Spinner globale per invio in corso */
    .global-submit-spinner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(2px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .global-submit-spinner.visible {
        opacity: 1;
    }

    .global-submit-spinner .spinner-content {
        background: white;
        padding: 30px;
        border-radius: 12px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        width: 90%;
    }

    .global-submit-spinner .spinner-icon {
        width: 60px;
        height: 60px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #28a745;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto 20px;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .global-submit-spinner .spinner-text {
        color: #333;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .global-submit-spinner .spinner-subtext {
        color: #666;
        font-size: 14px;
        line-height: 1.4;
    }

    /* Stili per migliorare la spaziatura dei campi nei campionati */
    .sezione-campionato label {
        display: block;
        margin-bottom: 2px;
        font-weight: 500;
        line-height: 1.0;
    }

    .sezione-campionato label input,
    .sezione-campionato label textarea,
    .sezione-campionato label select {
        margin-top: 0px;
        padding: 3px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        width: 100%;
        max-width: 100%;
    }

    /* Orari: layout responsive e pi\F9  fluido su schermi piccoli */
    .orari-container {
        margin-left: 2.5rem;
        /* spaziatura comoda in desktop */
    }

    .orario-item {
        display: flex;
        gap: 10px;
        margin-bottom: 8px;
        align-items: flex-start;
        padding: 8px;
        background: white;
        border-radius: 4px;
        border: 1px solid #ccc;
        flex-wrap: wrap;
        /* permette al contenuto di andare a capo su schermi stretti */
    }

    .orario-item select.orario-giorno {
        flex: 0 0;
        min-width: 140px;
    }

    .orario-item input.orario-time {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .orario-item .error-message {
        color: #f44336;
        font-size: 0.8em;
        margin-left: 10px;
    }

    @media (max-width: 700px) {
        .orari-container {
            margin-left: 0;
            /* togliamo l'indentazione su mobile */
            padding-left: 0;
        }

        .orario-item {
            align-items: stretch;
        }

        .orario-item select.orario-giorno,
        .orario-item input.orario-time {
            flex: 0 0 100%;
            min-width: 0;
        }

        .orario-item .error-message {
            margin-left: 0;
            flex-basis: 100%;
        }

        .campo-config {
            padding: 12px;
        }

        .controlli-ordine {
            margin-right: 8px;
        }

        .numero-ordine {
            margin-right: 8px;
        }
    }

    /* Righe dei campi: rendi il contenuto superiore del campo flessibile e wrapable */
    .campo-config>div:first-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    /* Assicura che i contenitori di validazione mettano l'errore sotto il campo */
    .validation-container {
        display: flex;
        flex-direction: column;
    }

    .validation-error {
        max-width: 360px;
        width: 100%;
        box-sizing: border-box;
        word-break: break-word;
    }

    .sezione-campionato textarea {
        resize: vertical;
        min-height: 45px;
    }

    .sezione-campionato input[type="checkbox"] {
        width: auto;
        margin-right: 3px;
        transform: scale(1.0);
    }

    .sezione-campionato .spiegazioneCampoInput {
        display: block;
        margin-top: 0px;
        margin-bottom: 2px;
        font-size: 13px;
        color: #666;
        font-style: italic;
        line-height: 1.0;
    }

    /* Spaziatura specifica per container */
    .dropdown-campi-responsabili,
    .campi-gioco-container {
        margin: 3px 0;
    }

    .responsabile-container {
        margin-bottom: 2px;
    }

    /* Allinea i tre bottoni (aggiungi / svuota / modifica) in linea accanto al select */
    .responsabile-container .validation-container.responsabili-inline {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .responsabile-container .validation-container.responsabili-inline select.responsabile-select {
        flex: 1 1 auto;
        min-width: 140px;
    }

    .responsabile-container .validation-container.responsabili-inline .btn-nuovo-responsabile,
    .responsabile-container .validation-container.responsabili-inline .btn-clear-responsabile,
    .responsabile-container .validation-container.responsabili-inline .btn-modifica-responsabile {
        background: transparent;
        border: none;
        padding: 6px 8px;
        border-radius: 6px;
        cursor: pointer;
        color: white;
        font-size: 0.95em;
    }

    .responsabile-container .validation-container.responsabili-inline .btn-nuovo-responsabile {
        background: #28a745;
    }

    .responsabile-container .validation-container.responsabili-inline .btn-clear-responsabile {
        background: #ff6b6b;
    }

    .responsabile-container .validation-container.responsabili-inline .btn-modifica-responsabile {
        background: #2196F3;
        color: #fff;
        display: inline-block;
    }

    /* Responsive button text */
    .responsabile-container .btn-nuovo-responsabile .btn-text-full,
    .responsabile-container .btn-clear-responsabile .btn-text-full {
        display: inline;
    }

    .responsabile-container .btn-nuovo-responsabile .btn-text-short,
    .responsabile-container .btn-clear-responsabile .btn-text-short {
        display: none;
    }

    /* Migliora l'aspetto dei pulsanti con spaziatura */
    .responsabile-container .btn-nuovo-responsabile span,
    .responsabile-container .btn-clear-responsabile span,
    .responsabile-container .btn-modifica-responsabile span {
        display: inline-block;
    }

    .responsabile-container .btn-nuovo-responsabile .btn-text-full,
    .responsabile-container .btn-clear-responsabile .btn-text-full,
    .responsabile-container .btn-modifica-responsabile .btn-text-full {
        margin-left: 4px;
    }

    /* Su schermi piccoli (< 768px), mostra sempre il testo completo ma pi\F9  compatto */
    @media (max-width: 767px) {

        .responsabile-container .btn-nuovo-responsabile .btn-text-short,
        .responsabile-container .btn-clear-responsabile .btn-text-short {
            display: none;
        }

        .responsabile-container .btn-nuovo-responsabile .btn-icon,
        .responsabile-container .btn-clear-responsabile .btn-icon {
            display: inline;
        }

        /* Riduci leggermente il padding e font sui dispositivi mobili per far stare tutto */
        .responsabile-container .validation-container.responsabili-inline .btn-nuovo-responsabile,
        .responsabile-container .validation-container.responsabili-inline .btn-clear-responsabile {
            padding: 4px 6px;
            font-size: 0.85em;
        }

        .responsabile-container .btn-nuovo-responsabile .btn-text-full,
        .responsabile-container .btn-clear-responsabile .btn-text-full {
            margin-left: 2px;
        }
    }

    /* Select2: il plugin crea un proprio container che pu\F2  forzare il salto di riga.
   Assicuriamo che il container Select2 si comporti come elemento flex e possa ridursi.
*/
    .responsabile-container .validation-container.responsabili-inline .select2-container {
        flex: 1 1 auto;
        min-width: 0;
        /* permette al select di ridursi dentro il flex senza forzare il wrap */
    }

    .responsabile-container .validation-container.responsabili-inline .select2-selection {
        box-sizing: border-box;
        /* evitiamo overflow dovuto a padding/border */
        width: 100%;
        /* manteniamo la selezione a piena larghezza del flex item */
    }

    .responsabile-container .validation-container.responsabili-inline {
        flex-wrap: nowrap;
    }

    /* Ripristino stile pulsanti orario: usa aspetto compatto blu per i pulsanti azione all'interno di .orario-item */
    .orario-item .azione-orario-btn {
        background: #0d6efd;
        color: white;
        border: none;
        padding: 10px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
    }

    .orario-item .azione-orario-btn.destructive {
        background: #dc3545;
    }

    .campo-wrapper {
        margin-bottom: 2px;
    }

    /* Migliora la spaziatura delle azioni */
    .iscrizione .azioni-campionato {
        margin-top: 5px;
        padding: 4px;
        border-top: 1px solid #ddd;
    }

    .azioni-campionato button {
        margin-right: 3px;
        margin-bottom: 1px;
    }

    /* Riquadri di sezione.
       Erano verdi e con selettore nudo "fieldset", quindi valevano per
       qualunque fieldset della pagina. Ora sono scoped e usano i colori del
       sito: fondo chiaro, bordo sottile, angoli poco arrotondati come nella
       pagina Campionati. */
    .iscrizione fieldset {
        border: 1px solid var(--line, #d9dde2);
        border-radius: 4px;
        padding: 18px;
        margin: 18px 0;
        background-color: var(--white, #fff);
        box-shadow: none;
    }

    .iscrizione fieldset legend {
        background-color: var(--navy, #071a33);
        color: #fff;
        font-family: var(--font-display, "Oswald", Impact, sans-serif);
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        padding: 8px 16px;
        border-radius: 3px;
        font-weight: 600;
        font-size: 16px;
        border: none;
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
    }

    fieldset label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
    }

    /* Qui restano solo larghezza e spaziatura, che sono layout.
       L aspetto (padding, bordo, raggio, dimensione del testo) sta nella
       regola base .iscrizione, una volta sola.

       Prima questa regola duplicava tutto con valori diversi — font-size 14px
       contro 1rem, bordo #ddd contro #98a2b3, raggio 4 contro 6 — e vinceva
       per specificita, perche non essendo scoped conta due elementi contro una
       classe. Il risultato visibile era che su iOS la pagina si ingrandiva al
       focus di ogni campo. */
    .iscrizione fieldset input[type="text"],
    .iscrizione fieldset input[type="email"],
    .iscrizione fieldset input[type="tel"] {
        margin-top: 3px;
        width: 100%;
    }

    fieldset input:focus {
        border-color: #28a745;
        outline: none;
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
    }

    /* Stili diversi per fieldset dei campi di gioco (dentro i campionati) */
    .iscrizione .sezione-campionato fieldset {
        border: 2px solid #fd7e14;
        background-color: #fff8f0;
        box-shadow: 0 2px 4px rgba(253, 126, 20, 0.1);
    }

    .iscrizione .sezione-campionato fieldset legend,
    .iscrizione .sezione-campionato.campionato-confermato:not(.collapsed) fieldset legend,
    .iscrizione .sezione-campionato.campionato-confermato.collapsed fieldset legend {
        background-color: #fd7e14;
        color: white;
        font-size: 15px;
        box-shadow: 0 2px 4px rgba(253, 126, 20, 0.2);
    }

    .iscrizione .sezione-campionato fieldset input:focus {
        border-color: #fd7e14;
        box-shadow: 0 0 5px rgba(253, 126, 20, 0.3);
    }

    /* Stili per il fieldset "Dati predefiniti": titolo e bordo arancione come i campi di gioco */
    .iscrizione .dati-predefiniti {
        border: 2px solid #fd7e14;
        background-color: #fff8f0;
        box-shadow: 0 2px 4px rgba(253, 126, 20, 0.06);
    }

    .iscrizione .dati-predefiniti > legend {
        background-color: #fd7e14;
        color: white;
        padding: 6px 12px;
        border-radius: 4px;
        font-weight: 600;
    }


    /* === Framework di Validazione Inline === */
    .validation-container {
        position: relative;
    }

    .validation-error {
        display: block;
        color: #dc3545;
        font-size: 0.8em;
        margin-top: 4px;
        padding: 4px 8px;
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
        border-radius: 4px;
        line-height: 1.3;
        animation: fadeInError 0.3s ease-in;
    }

    /* Fix per Safari: nascondi i messaggi di validazione quando sono vuoti */
    .validation-error:empty,
    .orario-item .error-message:empty {
        display: none !important;
        visibility: hidden !important;
    }

    /* Fix specifico per Safari mobile */
    @supports (-webkit-appearance: none) {
        .orario-item .error-message[style*="display: none"] {
            display: none !important;
            height: 0 !important;
            min-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            overflow: hidden !important;
        }
    }

    .validation-error::before {
        content: "\26A0 \FE0F  ";
        margin-right: 4px;
    }

    .validation-success {
        display: block;
        color: #155724;
        font-size: 0.8em;
        margin-top: 4px;
        padding: 4px 8px;
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
        border-radius: 4px;
        line-height: 1.3;
        animation: fadeInSuccess 0.3s ease-in;
    }

    .validation-success::before {
        content: "\2705  ";
        margin-right: 4px;
    }

    .field-error input,
    .field-error textarea,
    .field-error select {
        border-color: #dc3545 !important;
        background-color: #fff5f5 !important;
        transition: all 0.2s ease-in-out !important;
    }

    .field-error input:focus,
    .field-error textarea:focus,
    .field-error select:focus {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        outline: none !important;
    }

    .field-success input,
    .field-success textarea,
    .field-success select {
        border-color: #28a745 !important;
        background-color: #f8fff8 !important;
        transition: all 0.2s ease-in-out !important;
    }

    .field-success input:focus,
    .field-success textarea:focus,
    .field-success select:focus {
        border-color: #28a745 !important;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
        outline: none !important;
    }

    /* Reset per campi senza errori */
    .validation-container:not(.field-error):not(.field-success) input,
    .validation-container:not(.field-error):not(.field-success) textarea,
    .validation-container:not(.field-error):not(.field-success) select {
        border-color: #ddd !important;
        background-color: #fff !important;
        box-shadow: none !important;
    }

    .validation-container:not(.field-error):not(.field-success) input:focus,
    .validation-container:not(.field-error):not(.field-success) textarea:focus,
    .validation-container:not(.field-error):not(.field-success) select:focus {
        border-color: #28a745 !important;
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.3) !important;
        outline: none !important;
    }

    @keyframes fadeInError {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInSuccess {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Stili specifici per contenitori di validazione in grid */
    .validation-container.grid-item {
        display: flex;
        flex-direction: column;
    }

    /* Modal styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-content {
        background-color: #fff;
        margin: 2% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 90%;
        max-width: 900px;
        max-height: 90vh;
        overflow-y: auto;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
    }

    .modal-content video {
        width: 100%;
        height: auto;
        max-height: 70vh;
    }

    .close {
        color: #aaa;
        align-self: flex-end;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .modal-content h2 {
        margin: 0 0 15px 0;
        font-size: 1.5em;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .modal-content {
            width: 95%;
            margin: 5% auto;
            padding: 15px;
        }

        .modal-content video {
            max-height: 60vh;
        }

        .modal-content h2 {
            font-size: 1.2em;
        }
    }

/* ===== da riga 12153 ===== */
    .modal-framework-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .modal-framework-overlay.show {
        opacity: 1;
    }

    .modal-framework-content {
        background: white;
        border-radius: 12px;
        padding: 25px;
        max-width: 600px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        transform: scale(0.9);
        transition: transform 0.3s ease;
        position: relative;
    }

    .modal-framework-overlay.show .modal-framework-content {
        transform: scale(1);
    }

    .modal-framework-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
    }

    .modal-framework-title {
        margin: 0;
        color: #333;
        font-size: 1.2em;
        font-weight: bold;
    }

    .modal-framework-close {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #999;
        transition: color 0.2s ease;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .modal-framework-close:hover {
        color: #666;
        background: #f0f0f0;
    }

    .modal-framework-body {
        margin-bottom: 20px;
    }

    .modal-framework-footer {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }

    .modal-framework-btn {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .modal-framework-btn-primary {
        background: #007bff;
        color: white;
    }

    .modal-framework-btn-primary:hover {
        background: #0056b3;
    }

    .modal-framework-btn-success {
        background: #28a745;
        color: white;
    }

    .modal-framework-btn-success:hover {
        background: #1e7e34;
    }

    .modal-framework-btn-danger {
        background: #dc3545;
        color: white;
    }

    .modal-framework-btn-danger:hover {
        background: #c82333;
    }

    .modal-framework-btn-secondary {
        background: #6c757d;
        color: white;
    }

    .modal-framework-btn-secondary:hover {
        background: #545b62;
    }

    .modal-framework-input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .modal-framework-input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

    .modal-framework-textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        resize: vertical;
        min-height: 80px;
    }

    .modal-framework-textarea:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    }

    .modal-framework-label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
        color: #495057;
    }

    .modal-framework-form-group {
        margin-bottom: 15px;
    }

    .modal-framework-alert {
        padding: 12px;
        border-radius: 4px;
        margin-bottom: 15px;
    }

    .modal-framework-alert-success {
        background: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }

    .modal-framework-alert-danger {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
    }

    .modal-framework-alert-warning {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        color: #856404;
    }

    .modal-framework-formatted-message p {
        margin: 0 0 12px;
    }

    .modal-framework-formatted-message p:last-child {
        margin-bottom: 0;
    }

    .modal-framework-formatted-message strong {
        color: #5c4300;
        font-weight: 800;
    }

    .modal-framework-alert-info {
        background: #d1ecf1;
        border: 1px solid #bee5eb;
        color: #0c5460;
    }

    /* Stili per elenchi puntati nel framework modale */
    .modal-framework-list {
        margin: 10px 0;
        padding-left: 0;
        list-style: none;
    }

    .modal-framework-list li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .modal-framework-list li:before {
        content: "\2022 ";
        position: absolute;
        left: 0;
        top: 0;
        color: #007bff;
        font-weight: bold;
        font-size: 1.1em;
    }

    /* Migliora la spaziatura per contenuti con andate a capo */
    .modal-framework-body {
        line-height: 1.5;
    }

    .modal-framework-body br+br {
        display: block;
        margin: 5px 0;
        content: "";
    }

    /* === STILI TOAST NOTIFICATIONS === */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        pointer-events: none;
    }

    .toast-notification {
        background: white;
        border-radius: 8px;
        padding: 16px 20px;
        margin-bottom: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-left: 4px solid;
        min-width: 300px;
        max-width: 500px;
        pointer-events: auto;
        transform: translateX(100%);
        opacity: 0;
        transition: all 0.3s ease;
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .toast-notification.show {
        transform: translateX(0);
        opacity: 1;
    }

    .toast-notification.hide {
        transform: translateX(100%);
        opacity: 0;
    }

    .toast-notification.success {
        border-left-color: #28a745;
    }

    .toast-notification.success .toast-icon {
        color: #28a745;
    }

    .toast-notification.warning {
        border-left-color: #ffc107;
    }

    .toast-notification.warning .toast-icon {
        color: #ffc107;
    }

    .toast-notification.error {
        border-left-color: #dc3545;
    }

    .toast-notification.error .toast-icon {
        color: #dc3545;
    }

    .toast-notification.info {
        border-left-color: #17a2b8;
    }

    .toast-notification.info .toast-icon {
        color: #17a2b8;
    }

    .toast-icon {
        font-size: 18px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .toast-content {
        flex: 1;
        font-size: 14px;
        line-height: 1.4;
    }

    .toast-title {
        font-weight: bold;
        margin-bottom: 4px;
        font-size: 15px;
    }

    .toast-message {
        color: #666;
    }

    .toast-close {
        background: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
        color: #999;
        padding: 0;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .toast-close:hover {
        background: #f0f0f0;
        color: #666;
    }

    .toast-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 0 0 8px 8px;
        transition: width linear;
    }

    .toast-notification.success .toast-progress {
        background: rgba(40, 167, 69, 0.3);
    }

    .toast-notification.warning .toast-progress {
        background: rgba(255, 193, 7, 0.3);
    }

    .toast-notification.error .toast-progress {
        background: rgba(220, 53, 69, 0.3);
    }

    .toast-notification.info .toast-progress {
        background: rgba(23, 162, 184, 0.3);
    }

/* ===== da riga 13765 ===== */
    /*! CSI Wizard Stepper CSS v_1_4_3 (unificato, include fix keyframes + bottoni) */
    :root {
        /* Colori del wizard ricondotti a quelli del sito.
           Ridefinire le custom property e la leva giusta: propaga a tutte le
           regole che gia le usano, senza toccarne nemmeno una e senza
           battaglie di specificita. I valori qui sotto vengono da
           assets/styles.css, con un fallback per sicurezza. */
        --wizard-primary-1: var(--navy, #071a33);
        --wizard-primary-2: var(--blue, #075fb9);
        --wizard-success: var(--green, #24a270);
        --wizard-error: #c0341d;
        --wizard-error-bg: #fdecea;
        --wizard-error-text: #7a2013;
        --wizard-text: var(--ink, #132238);
        --wizard-muted: var(--muted, #647084);
        --wizard-border: var(--line, #d9dde2);
        --wizard-bg: var(--paper, #fbfaf6);
        --wizard-btn-bg: #eef0f3;
        --wizard-btn-bg-hover: #e2e6ea;
        --wizard-progress-bg: #e7e9ee;
    }

    /* === Barra top con tab === */
    .wizard-top {
        position: sticky;
        top: 0;
        z-index: 50;
        background: #fffffffa;
        backdrop-filter: saturate(160%) blur(6px);
        border-bottom: 1px solid #e5e7eb
    }

    .wizard-top.under-modal {
        z-index: 2
    }

    .wizard-top-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 8px 10px
    }

    .wizard-tabs {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 6px 2px 8px 2px;
        scrollbar-width: thin;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch
    }

    .wizard-tabs::-webkit-scrollbar {
        height: 8px
    }

    .wizard-tabs::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: var(--wizard-border)
    }

    .wizard-tab {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 16px;
        border: 1px solid var(--wizard-border);
        background: var(--wizard-bg);
        color: #334155;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        transition: all .15s ease;
        box-shadow: 0 2px 8px rgba(2, 6, 23, .05);
        scroll-snap-align: center
    }

    .wizard-tab .num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 9999px;
        border: 1px solid var(--wizard-border);
        font-size: 12px;
        background: #fff
    }

    .wizard-tab .icon {
        font-size: 18px;
        line-height: 1
    }

    .wizard-tab.active {
        background: linear-gradient(135deg, var(--wizard-primary-1), var(--wizard-primary-2));
        color: #fff;
        border-color: transparent;
        box-shadow: 0 6px 16px rgba(2, 6, 23, .15)
    }

    .wizard-tab.active .num {
        background: #fff;
        color: var(--wizard-primary-1);
        border-color: transparent
    }

    .wizard-tab.done {
        border-color: var(--wizard-success);
        background: #ecfdf5;
        color: #065f46
    }

    .wizard-tab.done .num {
        background: var(--wizard-success);
        color: #fff;
        border-color: var(--wizard-success)
    }

    .wizard-tab.error {
        border-color: var(--wizard-error);
        background: #fef2f2;
        color: #991b1b
    }

    .wizard-tab.error .num {
        background: var(--wizard-error);
        color: #fff;
        border-color: var(--wizard-error)
    }

    .wizard-tab.locked {
        opacity: .6;
        cursor: not-allowed;
        pointer-events: auto
    }

    .wizard-tab.flash {
        animation: flashTab .8s ease 2
    }

    @keyframes flashTab {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0)
        }

        50% {
            box-shadow: 0 0 0 4px rgba(239, 68, 68, .25)
        }
    }

    /* Progress */
    .wizard-progress {
        height: 3px;
        background: var(--wizard-progress-bg);
        border-radius: 9999px;
        overflow: hidden
    }

    .wizard-progress>.bar {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--wizard-primary-1), var(--wizard-success))
    }

    /* Alert forte */
    .wizard-alert {
        display: none;
        margin: 8px 0 0 0;
        border: 1px solid var(--wizard-error);
        background: var(--wizard-error-bg);
        color: var(--wizard-error-text);
        border-radius: 10px;
        padding: 10px 12px;
        font-weight: 700
    }

    .wizard-alert.show {
        display: block;
        animation: shake .3s ease-in-out
    }

    .wizard-alert .msg {
        display: flex;
        gap: 8px;
        align-items: center
    }

    .wizard-alert .msg .icon {
        font-size: 18px
    }

    @keyframes shake {
        0% {
            transform: translateX(0)
        }

        25% {
            transform: translateX(-4px)
        }

        50% {
            transform: translateX(4px)
        }

        75% {
            transform: translateX(-3px)
        }

        100% {
            transform: translateX(0)
        }
    }
    /* ^ chiusura di @keyframes shake, mancante nel file originale:
       senza questa tutto il resto del foglio resta annidato dentro la
       @keyframes e viene ignorato. */

        /* === Steps === */
        .wizard-step {
            display: none
        }

        .wizard-step.active {
            display: block;
            animation: fadeIn .12s ease-in
        }

        @keyframes fadeIn {
            from {
                opacity: .4;
                transform: translateY(2px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        /* === Controls bottom === */
        .wizard-controls {
            position: sticky;
            bottom: 0;
            z-index: 40;
            background: #fffffffa;
            border-top: 1px solid #e5e7eb;
            backdrop-filter: saturate(160%) blur(6px)
        }

        .wizard-controls.under-modal {
            z-index: 1
        }

        .wizard-controls-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            padding: 10px 8px;
            color: var(--wizard-text);
            flex-wrap: nowrap
        }

        .wizard-actions-left {
            display: flex;
            align-items: center;
            gap: .5rem;
            flex: 0 0 auto
        }

        .wizard-actions-right {
            display: flex;
            align-items: center;
            gap: .5rem;
            flex: 1 1 auto;
            justify-content: flex-end
        }

        .wizard-btn--prev {
            margin-right: auto
        }

        .wizard-btn--next {
            margin-left: auto
        }

        /* Bottoni */
        .wizard-btn {
            border: 1px solid var(--wizard-border);
            background: var(--wizard-btn-bg);
            color: var(--wizard-text);
            border-radius: 10px;
            padding: 10px 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all .15s ease;
            box-shadow: 0 2px 8px rgba(2, 6, 23, .05);
            display: inline-flex;
            align-items: center;
            white-space: nowrap
        }

        .wizard-btn:hover {
            background: var(--wizard-btn-bg-hover);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(2, 6, 23, .12)
        }

        .wizard-btn:active {
            transform: translateY(0)
        }

        .wizard-btn:focus-visible {
            outline: 2px solid var(--wizard-primary-1);
            outline-offset: 2px
        }

        .wizard-btn[disabled] {
            opacity: .65;
            cursor: not-allowed;
            filter: grayscale(.2)
        }

        .wizard-btn[disabled]:hover {
            transform: none;
            box-shadow: 0 2px 8px rgba(2, 6, 23, .05)
        }

        .wizard-btn-primary {
            background: linear-gradient(135deg, var(--wizard-primary-1), var(--wizard-primary-2));
            color: #fff;
            border: none
        }

        .wizard-btn-primary:focus-visible {
            outline: 2px solid var(--wizard-primary-2);
            outline-offset: 2px
        }

        /* Hint legacy nascosto */
        .wizard-hint {
            display: none
        }

        /* === Inline invalid (forzata) === */
        .csi-invalid {
            border-color: var(--wizard-error) !important;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, .15) !important
        }

        /* Responsive */
        @media (max-width: 780px) {
            .wizard-top-inner {
                padding: 6px 8px
            }

            .wizard-tab {
                gap: 6px;
                padding: 8px 12px;
                border-radius: 14px;
                font-weight: 700
            }

            .wizard-tab .num {
                display: none
            }

            .wizard-tab .icon {
                font-size: 17px
            }

            .wizard-controls-inner {
                padding: 8px
            }

            .wizard-btn {
                padding: 9px 12px
            }

            .wizard-alert {
                font-size: 15px;
                padding: 12px 14px
            }
        }

        @media (max-width: 400px) {
            .wizard-tab {
                padding: 7px 10px;
                font-size: 14px
            }

            .wizard-tab .label {
                max-width: 9ch;
                overflow: hidden;
                text-overflow: ellipsis
            }
        }

        /* fine 1.4.3 */

        /* inizio wizard nav guard */
        .wizard-top.wizard-locked .wizard-tab {
            opacity: .55;
            cursor: not-allowed;
        }

        /* nascondi davvero Avanti/Indietro quando bloccato */
        .wizard-controls.wizard-locked .wizard-btn--prev,
        .wizard-controls.wizard-locked .wizard-btn--next {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        /* fine wizard nav guard */


        /* patch titolo in alto inizio */
        /* === Title & Gap Fix === */

        /* 1) stile del titolo spostato sopra i tab */
        .wizard-title {
            margin: 0 0 .5rem;
            line-height: 1.2;
            font-weight: 700;
            font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem);
        }

        /* 2) barra tab/progress: impedisce margin-collapsing e tiene il gap costante */
        .wizard-top {
            padding: 2px 0 8px;
            margin: 0;
            border-bottom: 1px solid transparent;
            /* stop al collapse con il contenuto sotto */
            overflow: auto;
        }

        /* 3) lo step attivo ha un distacco fisso dai tab; gli altri no */
        .wizard-step {
            display: flow-root;
            margin-top: 0;
        }

        /* flow-root = niente margin-collapsing */
        .wizard-step.active {
            margin-top: 12px;
        }

        /* 4) se l\2019 editor ha infilato <br> come spaziatori, azzerali accanto a titolo/tab */
        .wizard-top+br,
        .wizard-title+br {
            display: none !important;
        }

        /* patch titolo in alto fine */

        /* ===== Info box \201C Gestione campionati\201D  ===== */
        .csi-info {
            background: #e7f4fa;
            border: 1px solid #cbe8f5;
            border-radius: 6px;
            padding: 12px 14px;
            font-size: .95em;
            margin: 10px 0 16px;
        }

        .csi-info--light {
            /* variante leggermente pi\F9  chiara (opzionale) */
            background: #eef5ff;
            border-color: #dbe8ff;
        }

        .csi-info>ul {
            margin: 8px 0 0;
            padding-left: 20px;
            line-height: 1.45;
        }

        /* ===== Chip di stato ===== */
        .chip {
            display: inline-block;
            padding: .15rem .55rem;
            border-radius: 999px;
            background: #eee;
            color: #333;
            font-size: .85em;
            font-weight: 600;
        }

        .chip--open {
            background: #e9f0ff;
            color: #1b4fd6;
        }

        .chip--confirmed {
            background: #eaf7ea;
            color: #1e7a33;
        }

        /* ===== Header campionato (title + CTA) ===== */
        .campionato-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 8px 10px;
            margin: 6px 0 12px;
        }

        .campionato-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
        }

        .link-like {
            background: none;
            border: 0;
            padding: 0;
            font: inherit;
            color: #0b5ed7;
            text-decoration: underline;
            cursor: pointer;
        }

        .btn-link {
            background: none;
            border: 0;
            color: #0b5ed7;
            cursor: pointer;
            padding: 0 .25rem;
        }

        .btn-danger {
            color: #b42318;
        }

        /* ====== MOBILE TWEAKS (fino a 480/576) ====== */
        @media (max-width: 576px) {

            /* Legend/badge pi\F9  compatta */
            .campi-gioco-fieldset>legend {
                font-size: 1rem;
                padding: .35rem .65rem;
                line-height: 1.2;
            }

            /* Card del campo: layout a 2 righe */
            .campo-config {
                padding: 12px !important;
                margin-bottom: 14px !important;
                border-radius: 10px !important;
            }

            .campo-config>.campo-head,
            .campo-config>div[style*="display: flex"][style*="margin-bottom"] {
                display: grid !important;
                grid-template-columns: 1fr auto;
                grid-template-areas:
                    "titolo   controlli"
                    "cta      cta";
                row-gap: 8px;
                column-gap: 8px;
                align-items: center;
                margin-bottom: 8px !important;
            }

            /* Se non hai una .campo-head esplicita, questi selettori colpiscono comunque le parti comuni */
            .campo-config .controlli-ordine {
                grid-area: controlli;
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .campo-config label[for^="campo-"] {
                grid-area: titolo;
                font-size: 0.98rem;
                line-height: 1.25;
            }

            .campo-config input[type="checkbox"] {
                transform: scale(1.15);
                margin-right: 6px !important;
            }

            /* Bottoni \25B2  \25BC  touch-friendly */
            .campo-config .controlli-ordine button {
                width: 34px;
                height: 32px;
                padding: 0 !important;
                border-radius: 6px !important;
                font-size: 14px !important;
                touch-action: manipulation;
            }

            /* Badge numerico un filo pi\F9  grande e vicino */
            .campo-config .numero-ordine {
                font-size: .85rem !important;
                min-width: 24px !important;
                margin-right: 8px !important;
            }

            /* CTA \201C Aggiungi giorno\201D  a tutta larghezza */
            .campo-config .aggiungi-orario-btn {
                grid-area: cta;
                width: 100%;
                justify-self: stretch;
                font-size: .95rem !important;
                padding: 8px 10px !important;
                border-radius: 8px !important;
            }

            /* Contenitore orari: margini ridotti */
            .campo-config .orari-container {
                margin-left: 0 !important;
            }

            /* Riga \201C giorno + ora + azioni\201D  adattiva (2 colonne) */
            .orari-container .riga-orario {
                display: grid !important;
                grid-template-columns: 1fr 1fr;
                grid-template-areas:
                    "giorno  ora"
                    "actions actions";
                gap: 8px;
                align-items: center;
            }

            .riga-orario .sel-giorno {
                grid-area: giorno;
            }

            .riga-orario .sel-ora {
                grid-area: ora;
            }

            .riga-orario .azioni-orario {
                grid-area: actions;
                display: flex;
                gap: 8px;
                justify-content: flex-end;
            }

            /* Select / input pi\F9  alti per tap */
            .orari-container select,
            .orari-container input[type="time"],
            .section-campionati select,
            .section-campionati input[type="text"] {
                min-height: 40px;
                font-size: 16px;
                /* evita zoom iOS */
            }

            /* Box \201C Come usare\201D : compatto e con possibilit\E0  di collassare */
            .campi-gioco-fieldset .howto {
                margin-top: 10px !important;
                padding: 10px !important;
                font-size: .9rem !important;
                border-radius: 8px !important;
            }

            .howto .howto-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                user-select: none;
            }

            .howto[aria-expanded="false"] .howto-body {
                display: none;
            }
        }

        /* Piccoli ritocchi anche per 480px */
        @media (max-width: 480px) {
            .campi-gioco-fieldset>legend {
                font-size: .98rem;
            }

            .campi-gioco-fieldset p {
                font-size: .95rem;
            }
        }

/* ===== da riga 15065 ===== */
    /* nasconde davvero i bottoni estremi, a prova di Elementor/CF7 */
    .wizard-btn--prev[aria-hidden="true"],
    .wizard-btn--next[aria-hidden="true"],
    .wizard-controls.at-first-step .wizard-btn--prev,
    .wizard-controls.at-last-step .wizard-btn--next {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* jquery.select2: forza visibilit\E0 /posizionamento della X e crea lo spazio a destra nel rende
   la X c\2019 \E8  (.select2-selection__clear) ma su WP non la vedi perch\E9  il tema/CF7 la copre o la spinge fuori (arrow sovrapposta, padding insufficiente, o una regola che la mette display:none) */


    /* Select2 \2014  spazio per X + freccia */
    .select2-container--default .select2-selection--single {
        position: relative;
        min-height: 38px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-right: 3rem !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        right: .6rem !important;
    }

    /* X nativa (se presente) e fallback */
    .select2-container--default .select2-selection__clear,
    .csi-s2-clear {
        display: block !important;
        position: absolute;
        right: 1.9rem;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 .25rem;
        line-height: 1;
        font-size: 16px;
        color: #111;
        opacity: .9;
        cursor: pointer;
        z-index: 3;
    }

    .select2-container--default .select2-selection__clear:hover,
    .csi-s2-clear:hover {
        opacity: 1;
    }

/* ===== da riga 15124 ===== */
    /* Desktop fix: evita che il fieldset "Campi di gioco" esca oltre il contenitore su schermi larghi */
    @media (min-width: 577px) {
        fieldset.section-campi {
            box-sizing: border-box !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
            /* nasconde eventuale overflow causato da figli troppo larghi */
            position: relative !important;
        }

        /* Limita i figli che possono causare overflow */
        fieldset.section-campi .container-campi,
        fieldset.section-campi .campo-config,
        fieldset.section-campi .orari-container,
        fieldset.section-campi .select2-container,
        fieldset.section-campi .tip-compact {
            box-sizing: border-box !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow: visible !important;
        }

        /* Assicura che Select2 non espanda il layout oltre il fieldset */
        fieldset.section-campi .select2-container--default .select2-selection--single {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        /* Quando la select2 va a capo, facciamo aumentare l'altezza della riga
     e evitiamo che il testo vada in overlay: rendiamo la selection un blocco
     e allineiamo gli elementi flex all'inizio della riga. */
        fieldset.section-campi .campo-config>div {
            align-items: flex-start !important;
        }

        fieldset.section-campi .select2-selection--single {
            display: block !important;
            height: auto !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
        }

        fieldset.section-campi .select2-selection__rendered {
            display: block !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
        }
    }

/* ===== da riga 15178 ===== */
    @media (max-width: 576px) {

        /* Permetti ai flex items di ridursi correttamente */
        .campi-gioco-fieldset,
        .campi-container,
        .campo-config,
        .campo-config>div,
        .tip-compact,
        .tip-compact>div,
        .orari-container,
        .controlli-ordine,
        .numero-ordine,
        .wizard-controls-inner,
        .wizard-top-inner,
        .wizard-actions-right {
            box-sizing: border-box;
            min-width: 0 !important;
        }

        /* Consenti agli elementi di wrapparsi e spezza parole lunghe */
        .tip-compact {
            flex-wrap: wrap;
        }

        .tip-compact>div {
            flex: 1 1 100%;
            min-width: 0;
        }

        .campo-config {
            padding-right: 8px;
        }

        .campo-config label {
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        /* Evita margin-left fisso che pu\F2  causare overflow: usa padding interno invece */
        .orari-container {
            margin-left: 0 !important;
            padding-left: 12px !important;
            width: 100%;
        }

        /* Select2: consenti testo multilinea nella porzione renderizzata e adatta il container su mobile */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            white-space: normal !important;
            display: inline-block !important;
            max-width: calc(100% - 48px) !important;
            /* lascia spazio per freccia/clear */
            overflow: visible !important;
            vertical-align: middle !important;
            box-sizing: border-box !important;
            padding-right: 6px !important;
        }

        /* Assicura che il container Select2 si adatti al flex parent e non provochi overflow */
        .campo-config .select2-container,
        .select2-container {
            width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

        /* Rende la porzione selezionata responsive: altezza automatica e padding per caret */
        .select2-selection--single {
            height: auto !important;
            padding-top: 8px !important;
            padding-bottom: 8px !important;
            padding-right: 40px !important;
            /* spazio per la freccia */
            box-sizing: border-box !important;
        }

        /* Posizionamento e dimensioni della freccia e del clear */
        .select2-selection__arrow {
            right: 8px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            height: 22px !important;
            width: 22px !important;
        }

        .select2-selection__clear {
            right: 40px !important;
        }

        /* Dropdown non deve uscire dallo schermo mobile */
        .select2-dropdown {
            max-width: 100vw !important;
            box-sizing: border-box !important;
            word-break: break-word !important;
        }

        /* Forza comportamento testuale orizzontale e normal wrapping su mobile
     (override mirato per evitare che regole esterne o !important provochino
      la verticalizzazione del testo) */
        .campo-config label,
        .campo-config label[for^="campo-"],
        .campo-config .controlli-ordine,
        .campo-config .orari-container,
        .orari-container .riga-orario,
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            white-space: normal !important;
            writing-mode: horizontal-tb !important;
            text-orientation: mixed !important;
            transform: none !important;
            letter-spacing: normal !important;
            display: inline-block !important;
            width: auto !important;
            max-width: 100% !important;
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
        }
    }

/* ===== da riga 15298 ===== */
    @media (max-width: 576px) {
        .tip-compact .tip-toggle {
            color: #333 !important;
            /* testo scuro per contrasto */
            border: 1px solid #ffd57a !important;
            padding: 8px 12px !important;
            min-width: 120px !important;
            text-align: center !important;
            display: inline-block !important;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
            font-size: 0.95em !important;
        }

        /* Assicura che il testo del bottone non venga nascosto da overflow o trasformazioni */
        .tip-compact .tip-toggle * {
            color: inherit !important;
            visibility: visible !important;
            text-decoration: none !important;
        }
    }

/* ===== da riga 15414 ===== */
    /* Mobile layout strong overrides: force clean stacking for campo-config on very small screens */
    @media (max-width: 576px) {
        .campo-config>div {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 6px !important;
        }

        .campo-config .controlli-ordine {
            order: 1 !important;
            flex: 0 0 auto !important;
        }

        .campo-config .numero-ordine {
            order: 2 !important;
            flex: 0 0 auto !important;
        }

        .campo-config input[type="checkbox"] {
            order: 3 !important;
            flex: 0 0 auto !important;
        }

        .campo-config label {
            order: 4 !important;
            flex: 1 1 100% !important;
            min-width: 0 !important;
            display: block !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
            margin-top: 4px !important;
        }

        .campo-config .aggiungi-orario-btn {
            order: 5 !important;
            flex: 0 0 auto !important;
            margin-left: 0 !important;
            margin-top: 6px !important;
        }

        .campo-config .orari-container {
            order: 6 !important;
            width: 100% !important;
            padding-left: 12px !important;
            margin-left: 0 !important;
        }

        .orario-item {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
        }

        /* Desktop: mantieni select pi\F9  larga e impedisci che si schiacci troppo
     Mobile: lascia behavior fluido con flex-wrap */
        .orario-item select,
        .orario-item input[type="time"] {
            box-sizing: border-box !important;
            min-width: 120px !important;
            /* evita che la select diventi troppo piccola */
            max-width: 100% !important;
        }

        /* Preferisci dare un po' pi\F9  di spazio alla select rispetto all'input time su desktop */
        @media (min-width: 900px) {
            .orario-item select {
                flex: 0 0 !important;
            }

            .orario-item input[type="time"] {
                flex: 1 1 calc(100% - 240px) !important;
                min-width: 120px !important;
            }
        }

        .orario-item .cancella-orario,
        .orario-item button[onclick] {
            flex: 0 0 auto !important;
        }

        /* Mostra sempre il messaggio di errore sotto i campi (occupando tutta la riga)
     in modo che non appaia affiancato al select/time quando il contenitore \E8  flex */
        .orario-item .error-message {
            flex: 0 0 100% !important;
            order: 99 !important;
            margin-left: 0 !important;
            margin-top: 6px !important;
            background: transparent !important;
            padding: 0 !important;
        }

        /* Forza l'allineamento in alto cos\EC  l'errore finisce su riga separata quando wrap \E8  attivo */
        .orario-item {
            align-items: flex-start !important;
        }

        /* Se Select2 \E8  inizializzato, la sua container deve comportarsi come la select nativa */
        .orario-item .select2-container {
            flex: 0 0 !important;
            min-width: 220px !important;
            box-sizing: border-box !important;
        }

        .orario-item .select2-container--default .select2-selection--single {
            box-sizing: border-box !important;
            min-height: 38px !important;
        }

        /* Se la select \E8  nascosta e viene usata Select2, evita che l'ampiezza interna riduca visivamente lo spazio */
        .orario-item .select2-selection__rendered {
            padding-right: 0.5rem !important;
        }

        /* Assicura che l'errore sia un blocco e vada a capo */
        .orario-item .error-message {
            display: block !important;
            width: 100% !important;
        }
    }

/* ============================================================================
 * Correzioni responsive — 26/08/2026
 *
 * Primo intervento dopo che la pagina ha finalmente un <meta name="viewport">.
 * Fino a ieri il telefono impaginava a ~980px e riduceva in scala: tutto il
 * CSS mobile qui sopra non e mai stato eseguito su un telefono vero.
 *
 * Sta in fondo di proposito: e l ultimo blocco, quindi vince a parita di
 * specificita senza dover cancellare regole piu vecchie.
 * ========================================================================== */

/* --- Campi: larghezze fluide al posto degli attributi size="NN" rimossi ---
   Il markup imponeva la larghezza in caratteri (size="80" su Nome Societa),
   che su un telefono da 390px manda il contenuto fuori schermo e su desktop
   produceva campi sproporzionati. Ora la larghezza e CSS, quindi adattabile.

   NOTA sugli !important: il blocco base in testa a questo file seleziona con
   "#main-title ~ * input", che contiene un ID e quindi batte qualunque
   selettore a classe. Finche quel blocco resta (va sostituito in Fase 2,
   quando arriva il design system) le poche dichiarazioni che gli si
   sovrappongono non hanno altro modo di vincere. Da togliere insieme a lui. */
/* :where() anche qui: e una regola larga, deve stare in fondo alla gerarchia.
   Senza, i tre :not() la portavano a (0,4,1) e batteva le regole per tipo di
   campo scritte poco sotto — mi facevo concorrenza da solo. */
.iscrizione-page input:where(:not([type="checkbox"]):not([type="radio"]):not([type="color"])),
.iscrizione-page select,
.iscrizione-page textarea {
    max-width: 100%;
}

.iscrizione-page fieldset > label {
    display: block;
    margin-bottom: .85rem;
}

.iscrizione-page fieldset > label > input:where(:not([type="checkbox"]):not([type="radio"])),
.iscrizione-page fieldset > label > select {
    display: block;
    width: 100%;
    margin-top: .3rem;
}

.iscrizione-page input[type="text"],
.iscrizione-page input[type="email"] {
    width: 100%;
    max-width: 30rem;
}

.iscrizione-page input.campo-societa {
    max-width: 42rem;
}

/* Il cellulare non ha bisogno di trenta caratteri. */
.iscrizione-page input[type="tel"] {
    width: 100%;
    max-width: 16rem;
}

/* --- Barra degli step ---
   overflow-x: auto c era gia, ma senza alcun segnale: sullo screenshot da
   telefono si arrivava a "Campi di gioco 5" e il tab dopo era mozzato, senza
   niente che suggerisse di scorrere. La sfumatura a destra lo dice. */
@media (max-width: 640px) {
    .wizard-tabs {
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
        scroll-padding-inline: 12px;
    }
}

/* --- Indietro / Avanti ---
   justify-content: space-between li inchiodava ai due bordi opposti con il
   vuoto in mezzo. Su schermo stretto meglio due meta uguali. */
@media (max-width: 640px) {
    .iscrizione .wizard-actions-left,
    .iscrizione .wizard-actions-right {
        flex: 1 1 0;
        min-width: 0;
    }

    .iscrizione .wizard-actions-right {
        justify-content: flex-end;
    }

    .iscrizione .wizard-actions-left .wizard-btn,
    .iscrizione .wizard-actions-right .wizard-btn {
        width: 100%;
        justify-content: center;
    }

    /* Con i bottoni a tutta larghezza il suggerimento non ci sta accanto. */
    .iscrizione .wizard-controls-inner .wizard-hint {
        display: none;
    }
}


/* --- Notifiche: su schermi stretti min-width: 300px sfonda il viewport --- */
@media (max-width: 380px) {
    .iscrizione-page .notification,
    .iscrizione-page [class*="toast"] {
        min-width: 0;
        max-width: calc(100vw - 24px);
    }
}

/* Il pulsante di chiusura della toast deve avere un bersaglio touch affidabile,
   non soltanto una X visibile. */
@media (max-width: 575px) {
    .iscrizione-page .toast-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: -8px -10px -8px 0;
        font-size: 28px;
        line-height: 1;
    }
}

/* ---------------------------------------------------------------------------
 * Correzioni responsive, secondo giro — 26/08/2026
 * ------------------------------------------------------------------------- */

/* --- Colonna di lettura e spazio per l header fisso ---
   L header del sito e "is-solid", cioe position: fixed: senza questo spazio
   il primo contenuto della pagina ci finisce sotto. */
.iscrizione-page main {
    max-width: 64rem;
    margin-inline: auto;
    padding: 124px 16px 56px;
}

@media (max-width: 640px) {
    .iscrizione-page main {
        padding: 108px 12px 40px;
    }
}

/* --- Avanti / Indietro devono portare sotto l header, non dietro ---
   goToIndex fa scrollIntoView su .wizard-top; con un header fisso il punto
   di arrivo finisce coperto. scroll-margin-top sposta il bersaglio. */
.wizard-top,
.wizard-step,
.iscrizione-page fieldset {
    scroll-margin-top: 116px;
}

/* I separatori legacy fra le sezioni venivano esclusi dai wrapper del wizard:
   sommandosi prima o dopo lo step attivo creavano uno spazio crescente. */
.iscrizione > br {
    display: none;
}

@media (max-width: 640px) {

    .wizard-top,
    .wizard-step,
    .iscrizione-page fieldset {
        scroll-margin-top: 100px;
    }
}

/* --- La causa vera dello sfondamento orizzontale ---
   Dentro i fieldset ci sono righe con display:flex scritto inline e senza
   flex-wrap. Una riga flex che non va a capo impone al genitore la propria
   larghezza minima: il fieldset diventa piu largo del viewport e allora anche
   il testo normale, invece di andare a capo, viene tagliato.
   Sono stili inline, quindi servono !important. */
@media (max-width: 700px) {

    .iscrizione-page fieldset [style*="display: flex"],
    .iscrizione-page fieldset [style*="display:flex"] {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    .iscrizione-page fieldset,
    .iscrizione-page fieldset>* {
        max-width: 100%;
        min-width: 0;
    }

    /* Nomi di campo e indirizzi lunghi non devono allargare il contenitore. */
    .iscrizione-page fieldset {
        overflow-wrap: anywhere;
    }

    .iscrizione-page .select2-container {
        max-width: 100% !important;
    }
}

/* ---------------------------------------------------------------------------
 * LA causa dello sfondamento orizzontale — 26/08/2026
 *
 * Misurata nel browser, non dedotta: dentro una sonda larga 390px i fieldset
 * misuravano 502, 474, 440, 420px. Il motivo e che <fieldset> ha
 * min-width: min-content nel foglio di stile del browser, quindi non si
 * restringe mai sotto la larghezza del proprio contenuto: il riquadro sfonda
 * il viewport e il testo, invece di andare a capo, viene tagliato.
 *
 * Il blocco base in testa a questo file lo azzerava gia, con
 * "#main-title ~ fieldset { min-width: 0 }". Ma quel selettore vuole il
 * fieldset FRATELLO del titolo, e il wizard a runtime sposta ogni fieldset
 * dentro <section class="wizard-step">: da quel momento non e piu fratello e
 * la regola smette di applicarsi. Funzionava prima che il wizard partisse, poi
 * non piu.
 *
 * Con min-width: 0 i fieldset tornano tutti a 390px. Nessuna media query:
 * serve a ogni larghezza, finestra desktop stretta compresa.
 * ------------------------------------------------------------------------- */
/* Le righe flex scritte inline non vanno a capo e impongono al genitore la
   propria larghezza minima. Vale anche per inline-flex, che il selettore
   precedente non intercettava. Fino a 900px, cosi copre anche le finestre
   desktop strette. */
@media (max-width: 900px) {

    .iscrizione-page fieldset [style*="display:inline-flex"],
    .iscrizione-page fieldset [style*="display: inline-flex"],
    .iscrizione-page fieldset [style*="display:flex"],
    .iscrizione-page fieldset [style*="display: flex"] {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
 * Riga "Campo di gioco": cestino e "X" non devono stare sopra al testo
 * 26/08/2026
 *
 * Due difetti nella stessa schermata, con la stessa radice: il blocco base
 * dichiara "#main-title ~ * button { ... }" — un selettore con ID — e quindi
 * veste da pillola blu anche i due controlli che dovrebbero essere icone
 * discrete. Il cestino diventa un rettangolo che sborda dal riquadro, e la X
 * di Select2 un bottone blu piazzato a meta del testo.
 *
 * In piu il nome del campo ora va a capo (prima veniva tagliato), e la X era
 * centrata verticalmente: su tre righe finisce esattamente in mezzo alla
 * seconda. Va ancorata in alto, non centrata.
 * ------------------------------------------------------------------------- */

.iscrizione-page .campo-wrapper {
    position: relative;
    padding-right: 2.75rem;
}

.iscrizione-page .campo-wrapper .remove-button {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 6px !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #b42318 !important;
    line-height: 1;
    border-radius: 6px !important;
}

.iscrizione-page .campo-wrapper .remove-button:hover,
.iscrizione-page .campo-wrapper .remove-button:focus-visible {
    background: #fee4e2 !important;
}

/* --- Select2: il nome del campo puo occupare piu righe --- */
.iscrizione-page .select2-container--default .select2-selection--single {
    height: auto !important;
    min-height: 44px;
    padding: 7px 5.6rem 7px 0 !important;
    /* lo spazio a destra e riservato ai due controlli: il testo non ci entra */
}

.iscrizione-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
    padding-right: 0 !important;
    overflow-wrap: break-word;
}

/* X: in alto, non a meta del testo, e con un area toccabile decente. */
.iscrizione-page .select2-container--default .select2-selection__clear,
.iscrizione-page .csi-s2-clear {
    top: 6px !important;
    right: 2.2rem !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #475467 !important;
    font-size: 18px !important;
    border-radius: 6px !important;
}

.iscrizione-page .select2-container--default .select2-selection__clear:hover,
.iscrizione-page .csi-s2-clear:hover {
    background: #eaecf0 !important;
    color: #101828 !important;
}

.iscrizione-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px !important;
    right: .5rem !important;
    height: 30px !important;
}

/* Il core del wizard ripiega su un "•" quando l icona e vuota: con la
   numerazione gia presente nel badge, e un segno in piu senza informazione. */
.iscrizione-page .wizard-tab .icon {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Fondo della pagina — 26/08/2026
 *
 * Il body del sito e --paper (#fbfaf6) e i riquadri del form sono bianchi: due
 * valori quasi identici, per cui tutto leggeva come un'unica lastra bianca
 * incastrata fra header e footer scuri.
 *
 * Il fondo passa a --cream, che e gia nella palette del sito: i riquadri
 * diventano fogli posati su un piano, e il salto verso il blu dell header
 * smette di essere brusco.
 * ------------------------------------------------------------------------- */
.iscrizione-page {
    background: var(--cream, #f4f1e9);
}

.iscrizione fieldset {
    box-shadow: 0 1px 2px rgba(7, 26, 51, .05);
}

/* Una riga di colore sotto l header, per legare la testata al contenuto invece
   di lasciare il blu sospeso sopra il chiaro. */
.iscrizione-page .site-header {
    border-bottom: 3px solid var(--orange, #ff5a1f);
}

/* ---------------------------------------------------------------------------
 * Avvisi e bottoni: classi al posto degli stili inline — 26/08/2026
 *
 * Nel markup c erano cinque ricette di colore ripetute a mano riquadro per
 * riquadro (#f8d7da, #fff3cd, #d1ecf1, #f8f9fa, #fff7ed) piu bottoni con il
 * proprio verde o grigio. Presentazione dentro l HTML: impossibile da
 * ritoccare in un punto solo, e imbattibile da qualunque foglio di stile
 * senza !important.
 *
 * Ora sono classi con nomi che dicono il RUOLO, non il colore: cambiare la
 * palette e un intervento solo.
 * ------------------------------------------------------------------------- */

.iscrizione .avviso {
    margin: 14px 0;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 4px;
    font-size: .95rem;
    line-height: 1.5;
}

.iscrizione .avviso> :first-child { margin-top: 0; }
.iscrizione .avviso> :last-child { margin-bottom: 0; }

/* Da leggere prima di procedere: l unico livello davvero forte. */
.iscrizione .avviso--critico {
    color: #7a2013;
    background: #fdecea;
    border-color: #f3c6bf;
    border-left-color: #c0341d;
}

/* Serve attenzione, ma non blocca. */
.iscrizione .avviso--attenzione {
    color: #6b4a05;
    background: #fdf6e3;
    border-color: #efdfae;
    border-left-color: var(--orange, #ff5a1f);
}

/* Informazione utile, tono neutro. */
.iscrizione .avviso--info {
    color: var(--ink, #132238);
    background: #eef4fb;
    border-color: #cfe0f2;
    border-left-color: var(--blue, #075fb9);
}

/* Nota di servizio, il peso visivo piu basso. */
.iscrizione .avviso--nota {
    color: var(--muted, #647084);
    background: var(--paper, #fbfaf6);
    border-color: var(--line, #d9dde2);
    border-left-color: var(--line, #d9dde2);
}

/* Istruzioni operative su come compilare una sezione. */
.iscrizione .avviso--guida {
    color: var(--ink, #132238);
    background: #fff6ee;
    border-color: #f6d9bd;
    border-left-color: var(--orange, #ff5a1f);
}

/* Esito positivo: conferma uno stato raggiunto, non un'azione da premere. */
.iscrizione .avviso--successo {
    color: #155b3f;
    background: #e9f7f1;
    border-color: #bfe3d3;
    border-left-color: var(--green, #24a270);
}

/* --- Bottoni: stessa grammatica della .button del sito, scoped al form. --- */
.iscrizione .bottone,
.iscrizione .wizard-btn,
.iscrizione .modal-framework-btn {
    display: inline-flex;
    min-height: 48px;
    padding: .72rem 1.15rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px solid transparent;
    border-radius: 2px;
    color: #fff;
    background: var(--navy, #071a33);
    font: 800 .78rem/1.2 var(--font-body, "Manrope", system-ui, sans-serif);
    letter-spacing: .07em;
    text-align: center;
    text-transform: uppercase;
    box-shadow: none;
    cursor: pointer;
    transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}

.iscrizione .bottone:hover,
.iscrizione .wizard-btn:hover,
.iscrizione .modal-framework-btn:hover {
    filter: none;
    transform: translateY(-2px);
    box-shadow: 0 7px 0 rgba(7, 26, 51, .14);
}

.iscrizione .bottone:focus-visible,
.iscrizione .wizard-btn:focus-visible,
.iscrizione .modal-framework-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--orange, #ff5a1f) 45%, transparent);
    outline-offset: 3px;
}

.iscrizione .bottone:disabled,
.iscrizione .wizard-btn:disabled,
.iscrizione .modal-framework-btn:disabled {
    opacity: .58;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.iscrizione .bottone--primario,
.iscrizione .wizard-btn.wizard-btn-primary,
.iscrizione .modal-framework-btn-primary {
    color: #fff;
    background: var(--orange, #ff5a1f);
    border-color: var(--orange, #ff5a1f);
}

.iscrizione .bottone--secondario {
    color: #fff;
    background: var(--navy, #071a33);
    border-color: var(--navy, #071a33);
}

.iscrizione .bottone--conferma,
.iscrizione .modal-framework-btn-success {
    background: var(--green, #24a270);
    border-color: var(--green, #24a270);
}

.iscrizione .bottone--annulla,
.iscrizione .wizard-btn:not(.wizard-btn-primary),
.iscrizione .modal-framework-btn-secondary {
    color: var(--ink, #132238);
    background: var(--paper, #fbfaf6);
    border-color: var(--navy, #071a33);
}

.iscrizione .bottone--pericolo,
.iscrizione .modal-framework-btn-danger {
    color: #fff;
    background: #c0341d;
    border-color: #c0341d;
}

.iscrizione .bottone--grande {
    min-height: 56px;
    padding-inline: clamp(1.5rem, 6vw, 3rem);
    font-size: .9rem;
}

.iscrizione .bottone--compatto {
    min-height: 42px;
    padding: .55rem .85rem;
    font-size: .72rem;
}

@media (max-width: 640px) {
    .iscrizione .bottone--mobile-intero {
        width: 100%;
    }
}

/* --- Introduzione: orientamento prima del wizard. --- */
.iscrizione .iscrizione-intro {
    display: grid;
    gap: clamp(.75rem, 2vw, 1.15rem);
    margin: 0;
}

.iscrizione .section-premessa {
    padding: clamp(.75rem, 2.5vw, 1.25rem);
}

.iscrizione .wizard-premessa-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin: 0 0 .75rem;
    padding: .8rem 1rem;
    border: 1px solid var(--line, #d9dde2);
    border-left: 4px solid var(--blue, #075fb9);
    background: #f5f8fc;
    color: var(--muted, #647084);
    font-size: .88rem;
}

.iscrizione .iscrizione-intro__device-advice {
    display: none;
}

.iscrizione .post-submit-completion {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid #b9ddc6;
    border-top: 6px solid var(--green, #20a65a);
    background: #f6fcf8;
}

.iscrizione .post-submit-completion[hidden] {
    display: none;
}

.iscrizione .post-submit-completion__eyebrow {
    margin: 0;
    color: #176b38;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.iscrizione .post-submit-completion h2,
.iscrizione .post-submit-completion h3,
.iscrizione .post-submit-completion p {
    margin: 0;
}

.iscrizione .post-submit-completion h2 {
    color: #125f31;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.iscrizione .post-submit-completion__receipt-status,
.iscrizione .post-submit-completion__help {
    max-width: 70ch;
    line-height: 1.55;
}

.iscrizione .post-submit-completion__identifier {
    display: grid;
    gap: .3rem;
    padding: 1rem;
    border-left: 4px solid var(--orange, #ff5a1f);
    background: #fff;
}

.iscrizione .post-submit-completion__identifier span {
    color: var(--muted, #647084);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.iscrizione .post-submit-completion__identifier strong {
    overflow-wrap: anywhere;
    color: var(--navy, #071a33);
}

.iscrizione .post-submit-completion__summary {
    padding: 1rem;
    border: 1px solid var(--line, #d9dde2);
    background: #fff;
}

.iscrizione .post-submit-completion__summary h3 {
    margin-bottom: .85rem;
    color: var(--navy, #071a33);
}

.iscrizione .post-submit-completion__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.iscrizione .post-submit-completion__actions .bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    text-decoration: none;
}

.iscrizione.is-submission-complete .wizard-controls {
    display: none;
}

.iscrizione.is-submission-complete .wizard-tab {
    pointer-events: none;
}

.iscrizione .wizard-premessa-link strong {
    color: var(--navy, #071a33);
}

.iscrizione .wizard-premessa-link__button {
    flex: none;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--blue, #075fb9);
    background: #fff;
    color: var(--blue, #075fb9);
    font-size: .76rem;
}

.iscrizione .iscrizione-intro__hero {
    padding: clamp(1.15rem, 3vw, 2rem);
    color: #fff;
    background: var(--navy, #071a33);
    border-bottom: 5px solid var(--orange, #ff5a1f);
}

.iscrizione .iscrizione-intro__eyebrow {
    margin: 0 0 .6rem;
    color: #f8b396;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.iscrizione .iscrizione-intro__hero h2 {
    max-width: 18ch;
    margin: 0;
    color: inherit;
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    line-height: 1;
}

.iscrizione .iscrizione-intro__lead {
    max-width: 65ch;
    margin: .75rem 0 1rem;
    color: #dce7f5;
    font-size: clamp(1rem, 2.4vw, 1.22rem);
    line-height: 1.55;
}

.iscrizione .iscrizione-intro__notice {
    max-width: 68ch;
    margin: 0 0 1rem;
    padding-left: .8rem;
    border-left: 3px solid var(--orange, #ff5a1f);
    color: #f7dccf;
    font-size: .9rem;
    line-height: 1.45;
}

.iscrizione .iscrizione-intro__benefits,
.iscrizione .iscrizione-intro__checklist ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 1px;
    list-style: none;
    background: var(--line, #d9dde2);
}

.iscrizione .iscrizione-intro__benefits li,
.iscrizione .iscrizione-intro__checklist li {
    display: grid;
    gap: .35rem;
    padding: .8rem 1rem;
    background: #fff;
}

.iscrizione .iscrizione-intro__benefits strong,
.iscrizione .iscrizione-intro__checklist strong {
    color: var(--navy, #071a33);
    font-size: .95rem;
}

.iscrizione .iscrizione-intro__benefits span,
.iscrizione .iscrizione-intro__checklist span {
    color: var(--muted, #647084);
    font-size: .9rem;
    line-height: 1.45;
}

.iscrizione .iscrizione-intro__flow,
.iscrizione .iscrizione-intro__checklist {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line, #d9dde2);
    background: var(--paper, #fbfaf6);
}

.iscrizione .iscrizione-intro__flow h3,
.iscrizione .iscrizione-intro__checklist h3,
.iscrizione .iscrizione-intro__final-warning h3 {
    margin: 0 0 1rem;
    color: var(--navy, #071a33);
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
}

.iscrizione .iscrizione-intro__flow ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.iscrizione .iscrizione-intro__flow li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .65rem;
    align-items: start;
    color: var(--muted, #647084);
    font-size: .9rem;
    line-height: 1.45;
}

.iscrizione .iscrizione-intro__flow b {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    color: #fff;
    background: var(--orange, #ff5a1f);
    font-size: .74rem;
}

.iscrizione .iscrizione-intro__flow strong {
    display: block;
    margin-bottom: .12rem;
    color: var(--navy, #071a33);
}

.iscrizione .iscrizione-intro__final-warning {
    padding: .9rem 1.1rem;
    border: 1px solid #efdfae;
    border-left: 5px solid var(--orange, #ff5a1f);
    background: #fdf6e3;
}

.iscrizione .iscrizione-intro__final-warning p {
    max-width: 75ch;
    margin: .65rem 0 0;
    color: #6b4a05;
    line-height: 1.55;
}

.iscrizione .iscrizione-intro__more {
    border: 1px solid var(--line, #d9dde2);
    background: var(--paper, #fbfaf6);
}

.iscrizione .iscrizione-intro__more > summary {
    padding: .9rem 1.1rem;
    color: var(--navy, #071a33);
    font-weight: 800;
    cursor: pointer;
}

.iscrizione .iscrizione-intro__more-content {
    display: grid;
    gap: 1rem;
    padding: 0 1rem 1rem;
}

.iscrizione .iscrizione-intro__import .iscrizione-import {
    margin: 0 1rem 1rem;
}

.iscrizione .iscrizione-intro__checklist ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.iscrizione .iscrizione-import {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1.1rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border: 1px dashed var(--line, #d9dde2);
}

.iscrizione .iscrizione-import p {
    flex: 1 1 25rem;
    margin: 0;
    color: var(--muted, #647084);
    line-height: 1.45;
}

.iscrizione .iscrizione-import__preview {
    flex-basis: 100%;
}

.iscrizione .iscrizione-intro__help p {
    max-width: 70ch;
    margin: 0;
    color: var(--muted, #647084);
    line-height: 1.5;
}

/* --- Testi di orientamento negli step del wizard. --- */
.iscrizione .step-intro {
    max-width: 68ch;
    margin: 0 0 1.25rem;
    color: var(--muted, #647084);
    line-height: 1.5;
}

.iscrizione .field-optional,
.iscrizione .field-help {
    color: var(--muted, #647084);
    font-weight: 400;
}

.iscrizione .presidente-copy-option {
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid #bfe3d3;
    border-left: 4px solid var(--green, #24a270);
    background: #e9f7f1;
}

.iscrizione .presidente-copy-option__label {
    display: flex;
    gap: .65rem;
    align-items: center;
    margin: 0;
    color: #155b3f;
    font-weight: 800;
    cursor: pointer;
}

.iscrizione .presidente-copy-option__label input {
    flex: 0 0 auto;
}

.iscrizione .presidente-copy-option .field-help {
    margin: .65rem 0 0;
    color: #155b3f;
}

.iscrizione .step-section-title {
    margin: 1.4rem 0 .7rem;
    color: var(--navy, #071a33);
    font-size: 1rem;
}

.iscrizione .section-campi-gioco .avviso--guida p {
    margin: .55rem 0 0;
}

.iscrizione .section-campi-gioco .avviso--guida a {
    color: inherit;
    font-weight: 800;
}

.iscrizione .campi-non-censiti {
    display: block;
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid #bfe3d3;
    border-radius: 4px;
    background: #e9f7ef;
}

.iscrizione .campi-non-censiti__header {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
}

.iscrizione .campi-non-censiti__header .step-section-title {
    margin: 0;
    color: #155724;
}

.iscrizione .campi-non-censiti .field-help {
    margin: .55rem 0 .8rem;
    color: #155724;
}

.iscrizione .campi-non-censiti__counter {
    margin-bottom: .8rem;
    padding: .45rem .6rem;
    border: 1px solid #10b981;
    border-radius: 3px;
    background: #f0fff4;
    color: #155724;
    font-size: .85rem;
}

.iscrizione .campi-non-censiti #lista-campi-non-censiti {
    margin-bottom: .5rem;
}

.iscrizione .campionati-help {
    margin-top: 1rem;
}

.iscrizione .campionati-help summary {
    color: var(--navy, #071a33);
    font-weight: 800;
    cursor: pointer;
}

.iscrizione .invio-step {
    color: var(--ink, #132238);
    line-height: 1.6;
}

.iscrizione .invio-step__checklist {
    margin: 1rem 0;
    padding-left: 1.2rem;
}

.iscrizione .invio-step__actions {
    margin-top: 1.25rem;
    text-align: center;
}

.iscrizione .mini-riepilogo-invio {
    display: none;
    max-width: 45rem;
    margin: .75rem auto .4rem;
    padding: .8rem;
    border: 1px solid var(--line, #d9dde2);
    border-radius: 4px;
    color: var(--ink, #132238);
    background: var(--paper, #fbfaf6);
    font-size: .95rem;
    text-align: left;
}

.iscrizione .invio-step__note {
    margin: .75rem 0 0;
    color: var(--muted, #647084);
    font-size: .9rem;
    text-align: center;
}

.iscrizione .invio-step__backup {
    margin-top: 1.25rem;
}

.iscrizione .invio-step__backup summary {
    cursor: pointer;
}

.iscrizione .invio-step__backup-action {
    display: flex;
    justify-content: center;
    margin-top: .6rem;
}

.iscrizione .field-help {
    max-width: 62ch;
    margin: -.35rem 0 0;
    font-size: .88rem;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .iscrizione .iscrizione-intro__benefits,
    .iscrizione .iscrizione-intro__flow ol,
    .iscrizione .iscrizione-intro__checklist ul {
        grid-template-columns: 1fr;
    }

    .iscrizione .wizard-premessa-link {
        align-items: stretch;
        flex-direction: column;
    }

    .iscrizione .wizard-premessa-link__button {
        width: 100%;
    }

    .iscrizione .iscrizione-intro__device-advice {
        display: grid;
        gap: .35rem;
        padding: .9rem 1rem;
        border: 1px solid #b9d4ee;
        border-left: 4px solid var(--blue, #075fb9);
        background: #f1f7fd;
        color: var(--muted, #647084);
        font-size: .9rem;
        line-height: 1.45;
    }

    .iscrizione .iscrizione-intro__device-advice strong {
        color: var(--navy, #071a33);
    }

    .iscrizione .post-submit-completion__actions {
        flex-direction: column;
    }

    .iscrizione .post-submit-completion__actions .bottone {
        width: 100%;
    }
}