/*
========================================================================================
    CSS FORM REGISTRAZIONE - NonSoloFitness
========================================================================================
    Richiede: css_2026_Variabili_globali.css (caricato prima di questo file)
========================================================================================
*/

.form-registrazione { 
    font-size: 15px; }

.form-registrazione label { 
    color: var(--nsf-gray-800); font-weight: 500; }

.form-registrazione h4 {
    margin: 0 0 5px 0 !important; }

.form-registrazione div.sezioni-registrazione {
    width: 100%; float: left; }  

.sezioni-registrazione::after {
    content: ""; display: block; }

.form-registrazione div.sezioni-registrazione:after {
    display: block; clear: both; content: " "; }     

.form-registrazione div.sezioni-registrazione.contenitore_dati_registrazione {
    margin-bottom: 10px !important; }

.form-registrazione .label-wrapper {
    display: block !important; margin: 0 0 5px 0 !important; }

.form-registrazione .label-wrapper small {
    margin: 0 5px 0 0 !important; font-size: 12px !important; font-weight: 500; font-style: italic; }    

.form-registrazione #fieldset_diploma_richiesta {
    display: none; }     

#div_come_versare_saldo p { 
    width: 100%; float: left; margin-bottom: 10px; padding: 0; }

#div_come_versare_saldo p { 
    display: block; clear: both; content: " "; }

.form-registrazione #form-registrazione div#termini {
    height: 60px; overflow: auto; margin: 10px 0 10px 0; font-size: 11px; line-height: 15px; 
    background-color: var(--nsf-gray-250); width: 100%; text-align: left; font-weight: normal; }   


.my-error-class {
    background-color: var(--nsf-red); border: 1px solid var(--nsf-red) !important; animation: attenuaErrore 2s ease forwards; animation-delay: 0.5s; }

@keyframes attenuaErrore {
    to { background-color: var(--nsf-white); } 
}

.my-valid-class {
    border-color: var(--nsf-success-alt) !important; background-color: var(--nsf-white) !important; }

.form-registrazione .pulsante_iscrizione {
    font-weight: 500 !important; letter-spacing: 2px !important; }

.form-registrazione .label_per_selezione_corso {
    color: var(--nsf-red); font-weight: 500; }

.form-registrazione .div_visibile_dopo_selezione_corso {
    display: none; }       





/*
========================================================================================
    RIGHE TABELLA (3 colonne con checkbox)
========================================================================================
*/

.contenitore_righe_3_colonne {
    width: 100%; margin-bottom:50px; }

.riga_3_colonne {
    display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--nsf-gray-250); cursor: pointer; 
    position: relative; overflow: hidden; }

.riga_3_colonne.totale {
    border-top: 1px solid var(--nsf-red); }

.riga_3_colonne_colonna_immagine {
    flex-shrink: 0; margin-right: 15px; }

.riga_3_colonne_colonna_immagine img,

.riga_3_colonne_colonna_immagine svg {
    height: 30px; width: 30px; border: 1px solid var(--nsf-gray-250); padding: 3px;
    display: block; color: var(--nsf-form-icon-gray) !important; }

.riga_3_colonne_colonna_checkbox_radiobutton {
    flex-basis: 30px; flex-shrink: 0; display: flex; align-items: center;
    justify-content: flex-end; }
    
.riga_3_colonne_colonna_checkbox_radiobutton input[type="checkbox"], .riga_3_colonne_colonna_checkbox_radiobutton input[type="radio"] {
    width: 18px; height: 18px; cursor: pointer; accent-color: var(--nsf-success-alt); }
    
.riga_3_colonne_colonna_descrizione {
    font-size: 14px; overflow-wrap: break-word; flex-grow: 1; padding-right: 10px; line-height:1.6; }
    
.riga_3_colonne_colonna_descrizione strong {
    font-size: 15px; font-weight: 500; }
    
.riga_3_colonne_colonna_descrizione b {
    font-weight: 500; }


/*
========================================================================================
    CARRELLO (eccezione)
========================================================================================
*/

.contenitore_righe_3_colonne.carrello { 
    font-size: 14px !important; margin-bottom: 20px !important; }

.contenitore_righe_3_colonne.carrello .riga_3_colonne .riga_3_colonne_colonna_checkbox_radiobutton { 
    flex-basis: 60px !important; }

.contenitore_righe_3_colonne.carrello .riga_3_colonne .riga_3_colonne_colonna_descrizione strong {
    font-size: 14px !important; }

.contenitore_righe_3_colonne.carrello .riga_totale {
    color: var(--nsf-red) !important; font-weight: 600 !important; }


/*
========================================================================================
    CODICE PROMOZIONALE
========================================================================================
*/

.form-registrazione .pulsante_generico.applica_codice_promozionale {
    background: var(--nsf-promo-btn-bg); background-color: var(--nsf-promo-btn-bg); 
    color: var(--nsf-promo-btn-text); width: 120px !important; font-size: 14px !important; }

.form-registrazione #messaggio_codice_promozionale {
    display: none; visibility: hidden; font-size: 13px !important; 
    float: left !important; margin: 5px 0 0 0 !important; }


/*
========================================================================================
    STATI ELEMENTI (selezionato, deselezionato, errato)
========================================================================================
*/

.form-registrazione .control_border_step_superato {
    border: 1px solid var(--nsf-success-alt) !important; }

.form-registrazione .div_border_elemento_selezionato::after {
    content: ""; position: absolute; bottom: 0; left: 0; height: 1px;
    background-color: var(--nsf-success-alt); width: 0; 
    animation: animazione-bordo-entrata 0.3s ease-out forwards; }

.form-registrazione .div_border_elemento_deselezionato::after {
    content: ""; position: absolute; bottom: 0; left: 0; height: 1px;
    background-color: var(--nsf-success-alt); width: 100%; 
    animation: animazione-bordo-uscita 0.3s ease-out forwards; }    

@keyframes animazione-bordo-entrata {
    from { width: 0; } to { width: 100%; } }

@keyframes animazione-bordo-uscita {
    from { width: 100%; } to { width: 0; } }

.form-registrazione .div_border_elemento_selezionato svg {
    color: var(--nsf-success-alt) !important; fill: var(--nsf-success-alt); }    

.form-registrazione .div_border_elemento_deselezionato svg {
    color: var(--nsf-form-icon-gray) !important; fill: var(--nsf-form-icon-gray); }     

.form-registrazione .step_superato {
    color: var(--nsf-success-alt); }   

.form-registrazione .div_border_elemento_errato {
    position: relative; color: var(--nsf-red); font-weight: bold; }

.form-registrazione .div_border_elemento_errato::before {
    content: ""; position: absolute; bottom: 0; left: 0; height: 2px;
    background-color: var(--nsf-red); width: 0%; transition: width 0.4s ease; }

.form-registrazione .div_border_elemento_errato.attiva-bordo::before {
    width: 100%; }


/*
========================================================================================
    AVVISI E SEPARATORI
========================================================================================
*/

.form-registrazione p.avviso_iscrizione {
    margin: 5px 0 10px 0 !important; width: 100% !important;  }

.form-registrazione p.avviso_iscrizione.bollettino {
    margin-top: 10px !important; display: none; }

.form-registrazione .riga_sopra {
    border-top: 1px solid var(--nsf-gray-250); } 

.form-registrazione .riga_sotto {
    border-bottom: 1px solid var(--nsf-gray-250); }    

.form-registrazione .separator-flex {
    display: flex; align-items: center; width: 100%; text-align: center; padding: 10px 0 25px 0; }

.form-registrazione .separator-flex::before, .form-registrazione .separator-flex::after {
    content: ""; flex: 1; border-bottom: 1px solid var(--nsf-gray-450); }

.form-registrazione .separator-text {
    padding: 0 15px; font-weight: 500; font-size: 15px; color: var(--nsf-gray-750); }

.form-registrazione #riga_azienda_isit {
    cursor: pointer; font-weight: 500; }    

.form-registrazione #riga_privacy {
    cursor: pointer; line-height:1.8 !important; }   

.form-registrazione-container .span_avviso_small a { 
    opacity: 0.8; color: var(--nsf-black-pure); }    


/*
========================================================================================
    TOOLTIP
========================================================================================
*/

.tooltip-nf {
    position: absolute; bottom: -45px; left: 0; background-color: var(--nsf-white); 
    color: var(--nsf-black-pure); border: 1px solid var(--nsf-red); border-radius: 4px; 
    padding: 8px 12px 8px 40px; font-size: 14px; font-family: system-ui, sans-serif;
    line-height: 1.6; box-shadow: 0 2px 6px var(--nsf-black-15); z-index: 1000; 
    max-width: 300px; white-space: normal; font-weight: 400 !important; }

.tooltip-nf::before {
    content: ''; position: absolute; top: 10px; left: 12px; width: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23e2001a' d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; height: 18px; }

.tooltip-nf::after {
    content: ""; position: absolute; top: -7px; left: 22px; width: 0; height: 0; 
    border-left: 7px solid transparent; border-right: 7px solid transparent; 
    border-bottom: 7px solid var(--nsf-white); filter: drop-shadow(0 -1px 0 #e2001a); }    


/*
========================================================================================
    MOBILE - Righe 3 colonne
========================================================================================
*/

@media (max-width: 768px) {

    .form-registrazione .riga_3_colonne_colonna_immagine img, 
    .form-registrazione .riga_3_colonne_colonna_immagine svg {
        height: 30px; width: 30px; }

    .riga_3_colonne {
        align-items: flex-start !important; }

    .riga_3_colonne_colonna_checkbox_radiobutton {
        align-items: flex-start !important; padding-top: 4px; margin-right: 10px; }

    .riga_3_colonne_colonna_descrizione {
        padding-right: 5px; }
}    


/*
========================================================================================
    MODAL - Privacy e condizioni di vendita
========================================================================================
*/

.modal-documenti {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0, 0, 0, 0.85); z-index: 10000; display: none; 
    align-items: center; justify-content: center; opacity: 0;
    transition: opacity 0.3s ease; cursor: pointer; }

.modal-documenti.attivo {
    display: flex; }

.modal-documenti.mostra {
    opacity: 1; }

.modal-documenti-contenuto {
    background: #fff; width: 90%; max-width: 800px; max-height: 85vh; border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); position: relative; transform: scale(0.9);
    opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: default;
    display: flex; flex-direction: column; }

.modal-documenti.mostra .modal-documenti-contenuto {
    transform: scale(1); opacity: 1; }

.modal-documenti-close {
    position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; 
    cursor: pointer; z-index: 10; opacity: 0.6; transition: opacity 0.2s; }

.modal-documenti-close:hover {
    opacity: 1; }

.modal-documenti-close svg {
    width: 100%; height: 100%; fill: #5f6368; }

.modal-documenti-body {
    padding: 60px 40px 40px 40px; overflow-y: auto; max-height: 85vh; }

.modal-documenti-body h2 {
    margin: 0 0 25px 0; font-size: 18px !important; font-weight: 500; color: #202124; 
    font-family: 'Poppins', sans-serif; display: flex; align-items: center; gap: 15px; 
    padding-bottom: 20px; border-bottom: 1px solid #e0e0e0; }

.modal-logo {
    width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0; }

.modal-documenti-body h3 {
    margin: 25px 0 15px 0; font-size: 17px !important; font-weight: 500; color: #333; 
    font-family: 'Poppins', sans-serif; background: #fafafa; padding: 12px 16px; 
    border-radius: 6px; border-left: 3px solid var(--nsf-red); }

.modal-documenti-body h4 {
    margin: 20px 0 12px 0; font-size: 16px !important; font-weight: 500; color: #444; }

.modal-documenti-body p {
    margin: 0 0 15px 0; line-height: 1.6; color: var(--nsf-black-80); }

.modal-documenti-body ul, 
.modal-documenti-body ol {
    margin: 0 0 15px 20px; line-height: 1.6; color: #5f6368; }

.modal-documenti-body li {
    margin-bottom: 8px; }

.modal-documenti-body a {
    color: var(--nsf-red); text-decoration: none; }

.modal-documenti-body a:hover {
    text-decoration: underline; }

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

.modal-documenti-body summary {
    cursor: pointer; font-weight: 500; padding: 10px 0; color: #333; }

.modal-documenti-body summary:hover {
    color: var(--nsf-red); }

@media (max-width: 768px) {

    .modal-documenti-contenuto {
        width: 95%; max-height: 90vh; }

    .modal-documenti-body {
        padding: 50px 25px 25px 25px; }

    .modal-documenti-body h2 {
        font-size: 20px; gap: 12px; }

    .modal-logo {
        width: 36px; height: 36px; }

    .modal-documenti-body h3 {
        font-size: 16px; padding: 10px 14px; }

    .modal-documenti-close {
        top: 15px; right: 15px; width: 28px; height: 28px; }
}


/*
========================================================================================
    PASSWORD - Toggle visibilità e generatore
========================================================================================
*/

.form-col .password-field {
    display: flex; align-items: center; flex-wrap: nowrap; width: 98%; margin: 0 !important; 
    padding: 0 !important; }

.form-col .password-field input[type="password"], .form-col .password-field input[type="text"] {
    flex: 1 1 auto; width: 100% !important; min-width: 0; box-sizing: border-box; margin: 0; }

.form-col .password-field input:focus {
    border-color: var(--nsf-success-alt); outline: none; 
    box-shadow: 0 2px 4px var(--nsf-black-20); }

.password-icon-col {
    width: 40px; flex-shrink: 0; display: flex; align-items: center; 
    justify-content: flex-end; margin: 0; padding: 0; }

.password-action-btn {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer; 
    display: flex; align-items: center; justify-content: center; 
    transition: opacity 0.2s ease; opacity: 0.8; position: relative; flex-shrink: 0; }

.password-action-btn:hover {
    opacity: 0.9; }

.password-action-btn:active {
    opacity: 1; }

.password-action-btn svg {
    width: 22px; height: 22px; flex-shrink: 0; fill: var(--nsf-gray-700); 
    transition: fill 0.2s ease; display: block; }

.password-action-btn:hover svg {
    fill: var(--nsf-info); }

.password-action-btn.password-visible svg {
    fill: var(--nsf-success-alt); }

.password-action-btn.password-generated {
    animation: pulse-generate 0.4s ease; }

@keyframes pulse-generate {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); } }

.password-action-btn::before {
    content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); 
    left: 50%; transform: translateX(-50%); background-color: var(--nsf-gray-900); 
    color: var(--nsf-white); padding: 6px 10px; border-radius: 4px; font-size: 12px;
    font-weight: 400; white-space: nowrap; opacity: 0; visibility: hidden; 
    transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 100; pointer-events: none; }

.password-action-btn::after {
    content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; 
    transform: translateX(-50%); border: 4px solid transparent; 
    border-top-color: var(--nsf-gray-900); opacity: 0; visibility: hidden; 
    transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; }

.password-action-btn:hover::before, 
.password-action-btn:hover::after {
    opacity: 1; visibility: visible; }

@media (max-width: 480px) {
    
    .password-icon-col {
        width: 30px; }

    .password-action-btn svg {
        width: 22px; height: 22px; }

    .form-col .password-field {
        width: 98% !important; }
}


/*
========================================================================================
    INDIRIZZO - Pulsante reset (X)
========================================================================================
*/

.form-col.form-col-indirizzo {
    position: relative; }
    
/* Icona lente di ricerca come pseudo-elemento */
.form-col-indirizzo::after {
    content: '';
    position: absolute;
    right: 25px;          /* stessa posizione della X */
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c0c0c0' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Quando il bottone X è visibile, nascondi la lente */
.form-col-indirizzo:has(.btn-reset-indirizzo[style*="display: block"])::after,
.form-col-indirizzo:has(.btn-reset-indirizzo[style*="display:block"])::after {
    opacity: 0;
}    

.form-col.form-col-indirizzo input {
    padding-right: 40px; }

.btn-reset-indirizzo {
    display: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 5px; line-height: 1; }

.btn-reset-indirizzo svg {
    width: 14px; height: 14px; fill: var(--nsf-gray-600); }

.btn-reset-indirizzo:hover svg {
    fill: var(--nsf-gray-900); }

.pac-container {
    z-index: 10000 !important; }


/*
========================================================================================
    CHECKBOX AZIENDA
========================================================================================
*/

.form-col-checkbox {
    display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }

.form-col-checkbox input[type="checkbox"] {
    width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }

.form-col-checkbox label {
    cursor: pointer; }
    





/*
========================================================================================
    GRIGLIA FORM - Sistema a righe e colonne
========================================================================================
*/

.form-registrazione-container {
    display: flex; flex-direction: column; width: 100%; }

.form-riga {
    display: flex; flex-wrap: nowrap; width: 100%; padding: 10px 0; gap: 1%; }

.form-col-sinistra {
    flex: 0 0 49.5%; display: flex; align-items: center; }

.form-col-destra {
    flex: 0 0 49.5%; display: flex; align-items: center; justify-content: flex-end;  }

.form-col-intera {
    flex: 0 0 100%; display: flex; align-items: center; }

.form-col-destra-doppia {
    flex: 0 0 49.5%; display: flex; flex-wrap: nowrap; gap: 1%; }


.form-col-destra-doppia-sx input{
    width:94% !important; }    

.form-col-destra-doppia-sx, .form-col-destra-doppia-dx {
    flex: 0 0 49.25%; display: flex; align-items: center; justify-content: flex-end; }

/* Input e select */
.form-col-sinistra input, .form-col-sinistra select, .form-col-destra input, .form-col-destra select, .form-col-destra-doppia-sx input, .form-col-destra-doppia-sx select, .form-col-destra-doppia-dx input, .form-col-destra-doppia-dx select {
    width: 97%; }

.form-col-intera  input[type="text"], .form-col-intera select {
    width: 99%; }

.form-col-sinistra .password-field {
    display: flex; align-items: center; flex-wrap: nowrap; width: 97%;  margin: 0 !important; 
    padding: 0 !important; }

.form-col-sinistra .password-field input[type="password"], .form-col-sinistra .password-field input[type="text"] {
    flex: 1 1 auto; width: 100% !important; min-width: 0; box-sizing: border-box; margin: 0; }

.form-col-checkbox {
    display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }

.form-col-checkbox input[type="checkbox"] {
    width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }

.form-col-checkbox label {
    cursor: pointer; }

.form-col-sinistra.form-col-indirizzo {
    position: relative; }

.form-col-sinistra.form-col-indirizzo input {
    padding-right: 40px; }


/*
========================================================================================
    MOBILE - Griglia
========================================================================================
*/

@media (max-width: 768px) {
    
    .form-riga {
        flex-wrap: wrap; gap: 15px 0; }
    
    .form-col-sinistra, .form-col-destra, 
    .form-col-destra-doppia {
        flex: 0 0 100%; }
    
    .form-col-destra {
        justify-content: flex-start; }
    
    .form-col-destra-doppia {
        flex-wrap: wrap; gap: 15px 0; }
    
    .form-col-destra-doppia-sx, .form-col-destra-doppia-dx {
        flex: 0 0 100%; justify-content: flex-start; }
    
    .form-col-intera input[type="text"], 
    .form-col-intera select,
    .form-col-sinistra input, 
    .form-col-sinistra select, 
    .form-col-destra input, 
    .form-col-destra select, 
    .form-col-destra-doppia-sx input, 
    .form-col-destra-doppia-sx select, 
    .form-col-destra-doppia-dx input, 
    .form-col-destra-doppia-dx select {
        width: 97% !important; }

    .password-field.floating-label {
        display: flex; align-items: center; width: 97% !important; }

    .password-field.floating-label input {
        flex: 1; min-width: 0; width: 100% !important; }

    .password-field.floating-label .password-icon-col {
        position: static; width: auto; flex-shrink: 0; }

    .password-field.floating-label .password-action-btn {
        position: static; flex-shrink: 0; width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center; }
}


.eccezione-privacy {
    line-height:1.6;  }

.eccezione-privacy a {
    color:var(--nsf-black-70); }

#riga_privacy input[type="checkbox"] {  
    width: 18px; height: 18px; cursor: pointer; }
    
    
    
/*
========================================================================================
    DETAILS AZIENDA (dentro .sezioni-registrazione)
========================================================================================
*/

.sezioni-registrazione details {
    margin-bottom: 10px; overflow: hidden; }

.sezioni-registrazione details[open] {
    border-bottom: none; }

.sezioni-registrazione summary {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; cursor: pointer; font-weight: 500; line-height: 1.5; 
    list-style: none; }

.sezioni-registrazione summary::-webkit-details-marker,
.sezioni-registrazione summary::marker {
    display: none; }

.sezioni-registrazione summary::after {
    content: '+'; font-size: 1.2em; font-weight: 300; margin-left: auto; }

.sezioni-registrazione details[open] summary::after {
    content: '−'; }

.sezioni-registrazione summary svg {
    width: 22px; height: 22px; fill: var(--nsf-gray-800); flex-shrink: 0; }

.sezioni-registrazione details > div {
    padding: 10px 0; }    
    


  
    
    
/* ========================================================================================
   MODAL CALCOLO CODICE FISCALE
   ======================================================================================== */

.modal-cf-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 99%; 
    height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 10000; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease; cursor: pointer;  }
    
.modal-cf-overlay.attivo {
    display: flex; }
    
.modal-cf-overlay.mostra {
    opacity: 1; }

.modal-cf-container {
    background: #fff; width: 90%; max-width: 450px; max-height: 85vh; border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); position: relative; transform: scale(0.9); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    cursor: default; display: flex; flex-direction: column; overflow-y: auto; }
    
.modal-cf-overlay.mostra .modal-cf-container {
    transform: scale(1); opacity: 1; }

.modal-cf-header {
    display: flex; flex-direction: column; align-items: center; padding: 10px; border-bottom: 1px solid #e0e0e0; 
    margin-bottom: 10px; position: relative; }
    
.modal-cf-titolo {
    margin: 10px 0 0 0; font-size: 16px; font-weight: 500; color: #202124; font-family: 'Poppins', sans-serif; text-align: center; }
    
.modal-cf-close {
    position: absolute; right: 15px; top: 15px; width: 28px; height: 28px;
    cursor: pointer; opacity: 0.6; transition: opacity 0.2s; background: none; border: none; 
    padding: 0; }
    
.modal-cf-close:hover {
    opacity: 1; }
    
.modal-cf-close svg {
    width: 100%; height: 100%; fill: #5f6368; }

.modal-cf-body {
    padding: 0 25px; }

.modal-cf-field {
    margin-bottom: 20px; }
    
.modal-cf-label {
    display: block; font-size: 14px; font-weight: 500; color: #333; margin-bottom: 8px; }

.modal-cf-date-row {
    display: flex; gap: 10px; }
    
.modal-cf-select {
    padding: 12px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; background: #fff; 
    cursor: pointer; transition: border-color 0.2s; }
    
.modal-cf-select:focus {
    outline: none; border-color: var(--nsf-info); }
    
.modal-cf-select-giorno {
    flex: 0 0 28%; }
    
.modal-cf-select-mese {
    flex: 0 0 42%; }
    
.modal-cf-select-anno {
    flex: 0 0 28%; }

.modal-cf-field-luogo {
    position: relative; }
    
.modal-cf-input {
    width: 100%; padding: 12px 14px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; 
    box-sizing: border-box; transition: border-color 0.2s; }
    
.modal-cf-input:focus {
    outline: none; border-color: var(--nsf-info); }

.modal-cf-autocomplete {
    position: absolute; left: 0; right: 0; top: 100%; max-height: 200px; 
    overflow-y: auto; background: #fff; border: 1px solid #ccc; border-top: none; border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10001; display: none; }
    
.modal-cf-autocomplete-item {
    padding: 12px 14px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f0f0f0; transition: background 0.15s; 
    display: flex; justify-content: space-between; align-items: center; }
    
.modal-cf-autocomplete-item:last-child {
    border-bottom: none; }
    
.modal-cf-autocomplete-item:hover, .modal-cf-autocomplete-item.active {
    background: #f5f5f5; }
    
.modal-cf-autocomplete-nome {
    font-weight: 500; color: #1a1a1a; }
    
.modal-cf-autocomplete-prov {
    font-size: 12px; color: #666; background: #f0f0f0; padding: 3px 8px; border-radius: 4px; }

.modal-cf-sesso-row {
    display: flex; gap: 15px; }
    
.modal-cf-radio-label {
    display: flex; align-items: center; cursor: pointer; padding: 12px 20px; border: 1px solid #ccc; 
    border-radius: 6px; flex: 1; justify-content: center; transition: all 0.2s; }
    
.modal-cf-radio-label:hover {
    border-color: #999; }
    
.modal-cf-radio-label:has(.modal-cf-radio:checked) {
    border-color: var(--nsf-info); background: var(--nsf-info-bg-light); }
    
.modal-cf-radio {
    margin-right: 8px; accent-color: var(--nsf-info); }
    
.modal-cf-radio-text {
    font-size: 15px; font-weight: 500; }

.modal-cf-footer {
    padding: 25px; }
    
.modal-cf-btn-calcola {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 16px 20px; font-size: 16px; font-weight: 500; letter-spacing: 1px; border: 1px solid; 
    border-radius: 3px; cursor: pointer; transition: all 0.3s ease; background-color: var(--nsf-info); border-color: var(--nsf-info); 
    color: #fff; box-shadow: 0 4px 14px rgba(0, 123, 255, 0.25); }
    
.modal-cf-btn-calcola:hover {
    background-color: var(--nsf-info-dark); border-color: var(--nsf-info-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 123, 255, 0.35); }
    
.modal-cf-btn-calcola:active {
    transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2); }
    
.modal-cf-btn-calcola svg {
    width: 20px; height: 20px; fill: currentColor; }

/* ========================================================================================
   SEZIONE CODICE FISCALE (nel form)
   ======================================================================================== */
.form-riga-cf {
    flex-wrap: wrap; }
    
.cf-spiegazione-box {
    background: var(--nsf-white-warm, --nsf-off-white); border-left: 4px solid var(--nsf-star-yellow); padding: 12px 14px; font-size: 14px;  
    line-height: 1.5; border-radius: 0 6px 6px 0; }background: var(--nsf-warm-bg); 
        
    
.link-calcola-cf {
    font-size: 14px; color: var(--nsf-info); text-decoration: underline; cursor: pointer; }
    
.link-calcola-cf:hover {
    color: var(--nsf-info-dark); text-decoration: none; }

#span_cf_dati_alternativi {
    display: none; background: var(--nsf-info-bg-light, --nsf-info-light); border-left: 4px solid var(--nsf-info); padding: 12px 14px; font-size: 14px; 
    color: var(--nsf-info-dark); line-height: 1.5; border-radius: 0 6px 6px 0; }
    
#span_cf_dati_alternativi span {
    font-weight: 600; }

/* SweetAlert sopra la modal */
.swal2-container {
    z-index: 20000 !important; }

/* ========================================================================================
   MOBILE
   ======================================================================================== */
@media (max-width: 768px) {
    .modal-cf-container {
        width: 95%; max-height: 90vh; }
        
    .modal-cf-header {
        padding: 12px 15px; }
        
    .modal-cf-titolo {
        font-size: 14px; margin: 0 10px; }
        
    .modal-cf-close {
        width: 24px; height: 24px; }
        
    .modal-cf-body {
        padding: 0 20px; }
        
    .modal-cf-footer {
        padding: 20px; }
        
    .modal-cf-date-row {
        flex-wrap: nowrap; }

    .modal-cf-select-giorno {
        flex: 0 0 25%; }

    .modal-cf-select-mese {
        flex: 1 1 auto; }

    .modal-cf-select-anno {
        flex: 0 0 30%; margin-top: 0; }
        
    .modal-cf-autocomplete {
        max-height: 150px; }

    .modal-cf-select {
        padding: 10px 6px; font-size: 13px; }        
}

#div_cf_link a {
    color:var(--nsf-black-70); text-decoration:none; border-bottom:1px solid var(--nsf-black-50); padding-bottom:1px;  }
    
@media (max-width: 768px) {
    .form-riga-cf {
        gap: 0 !important; }
}        


/* Stato normale dell'input */
#txt_codicepromozionale {
    background-color: #FFFFFF;
    transition: background-color 2s ease; /* Gestisce il ritorno lento al bianco */
}

/* Classe di errore */
#txt_codicepromozionale.is-invalid {
    background-color: #FF0000;
    transition: none; /* L'errore appare istantaneamente */
}


#riga_privacy {
    display: flex; align-items: flex-start; gap: 8px; }
    
#riga_privacy input[type="checkbox"] {
    margin-top: 3px; flex-shrink: 0; }
    
#riga_privacy label, p.privacy_cookie_avviso {
    font-size: 15px; color: var(--nsf-gray-900); line-height: 1.4; font-weight:400; }
    
#riga_privacy label a, p.privacy_cookie_avviso a {
    color: var(--nsf-gray-700); text-decoration: none; border-bottom: none; }
    
#riga_privacy label a:hover, p.privacy_cookie_avviso a:hover {
    text-decoration: underline; }
    
    
/* ========================================================================================
   FLOATING LABEL
   ======================================================================================== */
/* ========================================================================================
   FLOATING LABEL
   ======================================================================================== */

.floating-label {
    position: relative; width: 100%; }

.floating-label label {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px;
    color: var(--nsf-gray-600); pointer-events: none; transition: all 0.2s ease; background: transparent;  padding: 0 4px;
    z-index: 1; }

/* Quando la label è attiva (in alto), background bianco per coprire il bordo */
.floating-label input:focus + label, .floating-label input:not(:placeholder-shown) + label, .floating-label textarea:focus + label, .floating-label textarea:not(:placeholder-shown) + label,
.floating-label select:focus + label, .floating-label select:not([value=""]) + label, .floating-label select:valid + label {
    top: -8px; transform: translateY(0); font-size: 12px; font-weight: 500; background: var(--nsf-white); }

/* Password field con floating label */
.password-field.floating-label {
    position: relative; }

.password-field.floating-label .password-icon-col {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; }
    
.password-field.floating-label {
    display: flex; align-items: center; gap: 6px; }

.password-field.floating-label .password-action-btn {
    margin-right: 4px; }    

.password-field.floating-label .password-icon-col:first-of-type {
    right: 45px; }

.password-field.floating-label .password-icon-col:last-of-type {
    right: 5px; }

/* Campo indirizzo con pulsante reset FUORI */
.form-col-indirizzo {
    display: flex; align-items: center; gap: 8px; }

.form-col-indirizzo .floating-label {
    flex: 1; }

.form-col-indirizzo .btn-reset-indirizzo {
    flex-shrink: 0; }

@media (max-width: 767px) {
    .floating-label label {
        font-size: 13px; left: 10px; }
    
    .floating-label input:focus + label, .floating-label input:not(:placeholder-shown) + label, .floating-label textarea:focus + label, .floating-label textarea:not(:placeholder-shown) + label,
    .floating-label select:focus + label, .floating-label select:not([value=""]) + label, .floating-label select:valid + label {
        font-size: 12px; }
}


/*
========================================================================================
    STEPPER ORIZZONTALE (in cima alla pagina)
========================================================================================
*/

.stepper-orizzontale {
    display: flex; 
    align-items: center; 
    width: 100%; 
    padding: 15px 0 25px 0; 
}

.stepper-orizzontale-item {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    flex-shrink: 0; 
}

.stepper-orizzontale-item svg {
    width: 18px; 
    height: 18px; 
    fill: var(--nsf-info); /* Ho impostato 'info' come default, cambialo in 'red' se preferisci */
    flex-shrink: 0; 
}

.stepper-orizzontale-item span {
    font-size: 14px; 
    font-weight: 500; 
    color: var(--nsf-gray-900); 
}

.stepper-orizzontale-linea {
    flex: 1; 
    height: 1px; 
    background: var(--nsf-gray-350); 
    margin: 0 15px; 
}

/*
========================================================================================
    TITOLI STEP ISCRIZIONE
========================================================================================
*/

.pagina-iscrizione-step-titolo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    color: var(--nsf-black);
    font-weight: 500;
    margin-bottom: 10px;
}

.pagina-iscrizione-step-titolo svg {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

/*
========================================================================================
    MEDIA QUERIES (Mobile)
========================================================================================
*/

@media (max-width: 768px) {
    /* Ridimensionamento Stepper */
    .stepper-orizzontale-item span {
        font-size: 12px; 
    }
    .stepper-orizzontale-linea {
        margin: 0 8px; 
    }

    /* Ridimensionamento Titoli */
    .pagina-iscrizione-step-titolo {
        font-size: 18px;
    }
    .pagina-iscrizione-step-titolo svg {
        width: 22px;
        height: 22px;
    }
}


.riepilogo-iscrizione {
    font-size: 15px; }

.riepilogo-iscrizione > div {
    border-bottom: 1px solid var(--nsf-gray-250); padding: 10px 0; display: block; width: 100%; }

.riepilogo-iscrizione > div:first-child {
    padding-top: 0;
}


.riepilogo-iscrizione .span_avviso_small {
    display: none;
}

.riepilogo-iscrizione .quota_partecipazione_spiegazione {
    display: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--nsf-gray-250); 
}

.riepilogo-iscrizione .span_avviso_small {
    display: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--nsf-gray-250);
}


.h4-sconto {
    background: var(--nsf-warm-bg); border-left: 4px solid var(--nsf-star-yellow); padding: 12px 14px; font-size: 15px; font-weight: 500; 
    line-height: 1.5; border-radius: 0 6px 6px 0; color: var(--nsf-gray-900); }

@media (max-width: 767px) {

    .h4-sconto {
        font-size: 16px !important; }

}

.riga-riepilogo b {
    display: inline-block;
    width: 95px;
}



/* ========================================================================================
   CARRELLO - CODICE PROMOZIONALE
   ======================================================================================== */

.codice-promo-container {
    display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 15px; 
    font-size: 14px; font-weight: 500; transition: opacity 0.3s ease; }
    
.codice-promo-container.corsi_in_sede {
    justify-content: flex-start !important; margin-top: 0px !important;}
    

.codice-promo-container.fade-out {
    opacity: 0; }

#txt_codicepromozionale {
    width: 120px; height: 38px; padding: 0 10px; font-size: 14px; border: 1px solid var(--nsf-black-pure);
    background: var(--nsf-white); text-transform: uppercase; transition: border-color 0.2s ease, background-color 0.2s ease; 
    box-sizing: border-box; }

#txt_codicepromozionale:focus {
    border-color: var(--nsf-black); outline: none; }

#txt_codicepromozionale::placeholder {
    text-transform: none; color: var(--nsf-gray-600); font-size: 13px; }

.codice-promo-btn {
    width: 80px; height: 38px; padding: 0; font-size: 14px; font-weight: 600;
    background: transparent; color: var(--nsf-black); text-align: center; cursor: pointer; 
    border: 1px solid var(--nsf-black-pure); position: relative; overflow: hidden; z-index: 1; 
    display: flex; align-items: center; justify-content: center; 
    box-sizing: border-box; }

.codice-promo-btn.disabilita_pulsante {
    color: var(--nsf-gray-500); border-color: var(--nsf-gray-500); cursor: not-allowed; 
    pointer-events: none; opacity: 0.7; }

.codice-promo-btn.disabilita_pulsante::before {
    display: none; }

@media (max-width: 767px) {

    .codice-promo-container {
        gap: 4px; font-size: 13px; }

    #txt_codicepromozionale {
        width: 120px; }

    .codice-promo-btn {
        width: 60px; }

}


/* ========================================================================================
   PULSANTI DISABILITATI
   ======================================================================================== */

#btn_iscrizione.disabilitato, .btn-iscrizione.disabilitato, #btn_registrazione.disabilitato {
    opacity: 0.3; pointer-events: none; cursor: not-allowed; }
    
    
    
/* ========================================================================================
   CARRELLO - MESSAGGI CODICE PROMOZIONALE
   ======================================================================================== */

.iscrizione-corsi-online-messaggio {
    display: none; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 15px; 
    margin-left: auto; margin-top: 15px; width: fit-content; font-size: 15px; font-weight: 500; 
    box-shadow: 0 2px 8px var(--nsf-black-10); transition: opacity 0.3s ease; }
    
    
.iscrizione-corsi-online-messaggio.sede {
    justify-content: flex-start !important; margin-left: 0 !important}    

.iscrizione-corsi-online-messaggio svg {
    width: 20px; height: 20px; fill: currentColor; }

.iscrizione-corsi-online-messaggio.visibile {
    display: flex; }

.iscrizione-corsi-online-messaggio.fade-out {
    opacity: 0; }

#iscrizione-corsi-online-messaggio-ok {
    color: var(--nsf-success-alt); border-right: 3px solid var(--nsf-success-alt); background: var(--nsf-success-bg); }

#iscrizione-corsi-online-messaggio-no {
    color: var(--nsf-red); border-right: 3px solid var(--nsf-red); background: var(--nsf-red-bg); }
    
    
#div-sconto-applicato {
    border-left:2px solid var(--nsf-success); padding-left:12px; }