/* ========================================================================================
   DROPDOWN PROFILO UTENTE - Menu superiore
   Ultimo aggiornamento: 25/02/2026
   ======================================================================================== */


/* -----------------------------------------------------------------------
   Wrapper e trigger
   ----------------------------------------------------------------------- */

.profilo-dropdown-wrapper {
    position: relative; }

.profilo-trigger {
    cursor: pointer; position: relative; }

.profilo-trigger svg {
    width: 22px; height: 22px; fill: currentColor; }

/*    *    quando loggato: cerchio rosso con iniziale bianca    */
.profilo-trigger.profilo-loggato {
    border-radius: 50% !important; background: var(--nsf-red) !important; }

.profilo-iniziale {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--nsf-white);
    font-size: 16px; font-weight: 700; line-height: 1;
    text-transform: uppercase; }


/* -----------------------------------------------------------------------
   Badge notifiche
   ----------------------------------------------------------------------- */

.profilo-badge {
    position: absolute; top: -4px; right: -6px;
    width: 20px; height: 20px; padding: 0;
    border-radius: 50%; background: var(--nsf-red);
    color: var(--nsf-white); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; pointer-events: none;
    animation: badge-pulse 3s ease-in-out infinite; }

@keyframes badge-pulse {
    0%, 85%, 100% { transform: scale(1); }
    90% { transform: scale(1.3); }
    95% { transform: scale(1); }
}


/* -----------------------------------------------------------------------
   Dropdown panel
   ----------------------------------------------------------------------- */

.profilo-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 320px; max-height: 80vh; overflow-y: auto;
    background: var(--nsf-white); border: 1px solid var(--nsf-gray-200);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 9999; padding: 0; }

.profilo-dropdown::before {
    content: ''; position: absolute; top: -6px; right: 14px;
    width: 12px; height: 12px; background: var(--nsf-white);
    border-left: 1px solid var(--nsf-gray-200);
    border-top: 1px solid var(--nsf-gray-200);
    transform: rotate(45deg); z-index: 1; }


/* -----------------------------------------------------------------------
   Sezione guest
   ----------------------------------------------------------------------- */

.dropdown-sezione {
    padding: 16px; }

.dropdown-sezione-titolo {
    font-size: 13px; font-weight: 600; color: var(--nsf-gray-600);
    margin: 0 0 8px 0; padding: 0; text-transform: uppercase; letter-spacing: 0.3px; }


/* -----------------------------------------------------------------------
   Form login dentro dropdown — RESET TOTALE
   Questo blocco ridefinisce ogni proprietà da zero.
   Non dipende da css_2026_Login.css né da css_2026_Registrazione.css
   ----------------------------------------------------------------------- */

#menu-superiore-wrapper-login {
    padding: 0 !important; margin: 0 !important; display: block; }

#menu-superiore-wrapper-login .login-container {
    max-width: 100%; margin: 0; padding: 0; }

/* --- Input container: posizionamento relativo per icona absolute --- */
#menu-superiore-wrapper-login .input-container {
    position: relative; margin: 0 0 12px 0; padding: 0; display: block; }

/* --- Icona SVG a sinistra dentro l'input --- */
#menu-superiore-wrapper-login .input-container .input-icona {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; fill: var(--nsf-gray-600);
    z-index: 3; pointer-events: none; }

/* --- Floating label wrapper --- */
#menu-superiore-wrapper-login .input-container .floating-label {
    position: relative; width: 100%; display: block; }

/* --- Input dentro floating label --- */
#menu-superiore-wrapper-login .input-container .floating-label input {
    display: block; width: 100% !important; box-sizing: border-box;
    margin: 0; padding: 12px 10px 12px 34px !important;
    font-size: 14px !important; font-weight: 400; line-height: 1.4;
    color: var(--nsf-black-soft); background: var(--nsf-white);
    border: 1px solid var(--nsf-gray-680) !important; border-radius: 3px !important;
    box-shadow: none !important; outline: none !important;
    transition: border-color 0.2s ease; font-family: inherit; }

#menu-superiore-wrapper-login .input-container .floating-label input:focus {
    border-color: var(--nsf-success-alt) !important;
    box-shadow: 0 2px 4px var(--nsf-black-20) !important; outline: none !important; }

/* --- Label floating --- */
#menu-superiore-wrapper-login .input-container .floating-label label {
    position: absolute; left: 34px; top: 50%; transform: translateY(-50%);
    font-size: 13px; font-weight: 500; color: var(--nsf-gray-600);
    pointer-events: none; transition: all 0.2s ease;
    background: transparent; padding: 0 4px; z-index: 2;
    margin: 0; display: block; line-height: 1; }

/* --- Label sale in alto --- */
#menu-superiore-wrapper-login .input-container .floating-label input:focus + label,
#menu-superiore-wrapper-login .input-container .floating-label input:not(:placeholder-shown) + label {
    top: -8px; transform: translateY(0); left: 8px;
    font-size: 11px; font-weight: 500; color: var(--nsf-gray-600);
    background: var(--nsf-white); }

/* --- Pulsante Accedi --- */
#menu-superiore-wrapper-login .login-btn-accedi {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 10px 12px; margin: 0;
    font-size: 14px; font-weight: 500; letter-spacing: 0;
    color: var(--nsf-cta-intermediate); background: transparent;
    border: 1px solid var(--nsf-cta-intermediate); border-radius: 0;
    cursor: pointer; position: relative; overflow: hidden; z-index: 1;
    box-shadow: none; text-decoration: none; font-family: inherit; }

#menu-superiore-wrapper-login .login-btn-accedi svg {
    width: 15px; height: 15px; fill: currentColor; }

/* --- Pulsante Reset Password --- */
#menu-superiore-wrapper-login .login-btn-reset {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 10px 12px; margin: 0;
    font-size: 14px; font-weight: 500;
    color: var(--nsf-black); background: transparent;
    border: 1px solid var(--nsf-black-pure); border-radius: 0;
    cursor: pointer; font-family: inherit; }

#menu-superiore-wrapper-login .login-btn-reset svg {
    width: 15px; height: 15px; fill: currentColor; }

/* --- Password dimenticata --- */
#menu-superiore-wrapper-login .login-forgot-password {
    text-align: center; margin: 8px 0 0 0; padding: 0; font-size: 13px; }

#menu-superiore-wrapper-login .login-forgot-password a {
    color: var(--nsf-gray-800); cursor: pointer; display: inline-flex;
    align-items: center; gap: 5px; font-size: 13px; text-decoration: none; }

#menu-superiore-wrapper-login .login-forgot-password a:hover {
    color: var(--nsf-black); text-decoration: underline; }

#menu-superiore-wrapper-login .login-forgot-password .forgot-icona {
    width: 14px; height: 14px; fill: currentColor; }

/* --- Container nascosti --- */
#menu-superiore-wrapper-login [data-id="not-login"] {
    display: none; }

#menu-superiore-wrapper-login .login-reset-container {
    margin: 0; padding: 0; }

#menu-superiore-wrapper-login .login-reset-success p {
    margin-bottom: 8px; }

/* --- Overlay loader --- */
#menu-superiore-wrapper-login .overlay-content-login {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--nsf-white-90);
    display: none; align-items: center; justify-content: center; z-index: 10; }


/* -----------------------------------------------------------------------
   Header utente loggato: cerchio + nome + esci
   ----------------------------------------------------------------------- */

.dropdown-loggato-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; border-bottom: 1px solid var(--nsf-gray-200); }

.dropdown-loggato-iniziale {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-width: 40px; border-radius: 50%;
    background: var(--nsf-red); color: var(--nsf-white);
    font-size: 18px; font-weight: 700; text-transform: uppercase; }

.dropdown-loggato-info {
    display: flex; flex-direction: column; gap: 2px; }

.dropdown-loggato-nome {
    font-size: 15px; color: var(--nsf-gray-700); }

.dropdown-loggato-nome strong {
    color: var(--nsf-black); }

.dropdown-loggato-esci {
    font-size: 13px; color: var(--nsf-gray-500); text-decoration: none; }

.dropdown-loggato-esci:hover {
    color: var(--nsf-red); text-decoration: underline; }


/* -----------------------------------------------------------------------
   Righe ordini sospesi (DB)
   ----------------------------------------------------------------------- */

.dropdown-ordine-sospeso {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 16px; text-decoration: none;
    border-bottom: 1px solid var(--nsf-gray-200);
    transition: background 0.15s ease; }

.dropdown-ordine-sospeso:hover {
    background: var(--nsf-gray-50); }

.dropdown-ordine-dettaglio {
    font-size: 14px; color: var(--nsf-gray-700); line-height: 1.4; }

.dropdown-ordine-dettaglio strong {
    color: var(--nsf-black); font-weight: 600; }

.dropdown-ordine-azione {
    font-size: 13px; font-weight: 600; color: var(--nsf-cta-intermediate);
    margin-top: 2px; }

.dropdown-ordine-sospeso:hover .dropdown-ordine-azione {
    text-decoration: underline; }


/* -----------------------------------------------------------------------
   Riga corsi selezionati (cookie)
   ----------------------------------------------------------------------- */

#dropdown-carrello-cookie,
#dropdown-carrello-cookie-guest {
    display: none; }

#dropdown-carrello-cookie.visibile,
#dropdown-carrello-cookie-guest.visibile {
    display: block; }

.dropdown-corsi-selezionati {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 16px; text-decoration: none;
    border-bottom: 1px solid var(--nsf-gray-200);
    transition: background 0.15s ease; }

.dropdown-corsi-selezionati:hover {
    background: var(--nsf-gray-50); }

.dropdown-corsi-selezionati-testo {
    font-size: 14px; color: var(--nsf-gray-700); line-height: 1.4; }

.dropdown-corsi-selezionati-testo strong {
    color: var(--nsf-black); font-weight: 600; }

.dropdown-corsi-selezionati-azione {
    font-size: 13px; font-weight: 600; color: var(--nsf-cta-intermediate);
    margin-top: 2px; }

.dropdown-corsi-selezionati:hover .dropdown-corsi-selezionati-azione {
    text-decoration: underline; }


/* -----------------------------------------------------------------------
   Link Area studente (fondo dropdown loggato)
   ----------------------------------------------------------------------- */

.dropdown-link-area-studente {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; font-size: 14px; font-weight: 500;
    color: var(--nsf-gray-700); text-decoration: none;
    border-top: 1px solid var(--nsf-gray-200);
    transition: background 0.15s ease; }

.dropdown-link-area-studente:hover {
    background: var(--nsf-gray-100); color: var(--nsf-black); }

.dropdown-link-area-studente .dropdown-link-icona {
    width: 16px; height: 16px; min-width: 16px;
    fill: var(--nsf-gray-500); }

.dropdown-link-area-studente:hover .dropdown-link-icona {
    fill: var(--nsf-black); }


/* -----------------------------------------------------------------------
   Overlay backdrop (click fuori chiude)
   ----------------------------------------------------------------------- */

.profilo-overlay-attivo {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9998; background: transparent; }


/* -----------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------- */

@media (max-width: 768px) {

    .profilo-dropdown {
        position: fixed; top: 45px; left: 0; right: 0;
        width: 100%; max-height: calc(100vh - 45px);
        border-radius: 0; }

    .profilo-dropdown::before {
        display: none; }

}