/* ========================================================================================
   LOGIN - RIGA LOGOUT (MESSAGGIO CONFERMA)
   ======================================================================================== */
    
p#riga-logout {
    font-size: 16px; font-weight: 400; padding: 15px; display: none; width: 100%; 
    border: 1px solid var(--nsf-black); border-radius: 8px; box-shadow: 0 4px 8px var(--nsf-black-20);
    margin-bottom: 25px; background: var(--nsf-white-warm); clear: both; }
    
p#riga-logout a {
    color: var(--nsf-black); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size:16px !important; }
    
p#riga-logout a:hover {
    text-decoration: underline; }

p#riga-logout .icona-logout {
    width: 18px; height: 18px; fill: var(--nsf-black); vertical-align: middle; margin-left: 5px; }   
    
#avviso-spedizione-estero {
    display: none; margin-top: 15px; padding: 12px 15px; background: var(--nsf-warning-light, #fff3cd);
    border: 1px solid var(--nsf-warning, #ffc107); border-radius: 6px; font-size: 14px; 
    font-weight: 500; color: var(--nsf-black); align-items: center; gap: 10px; }

#avviso-spedizione-estero.visibile {
    display: flex; }

#avviso-spedizione-estero svg {
    width: 24px; height: 24px; min-width: 24px; fill: var(--nsf-warning-dark, #d39e00); }    
    

/* ========================================================================================
   LOGIN BOX
   ======================================================================================== */

.login-box {
    display: flex; flex-direction: column; align-items: center; width: 100%; 
    padding: 10px 0 0 0; margin-bottom: 20px; }

.login-box-content {
    display: flex; align-items: center; width: 100%; gap: 15px; }

.login-box-content::before,
.login-box-content::after {
    content: ''; flex: 1; height: 1px; background: var(--nsf-cta-intermediate); }

.login-box-text {
    font-size: 15px; font-weight: 500; color: var(--nsf-gray-700); padding: 0 5px; white-space: nowrap; }

.login-trigger-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; 
    font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 2px; 
    background: var(--nsf-white); color: var(--nsf-cta-intermediate); border: 1px solid var(--nsf-cta-intermediate); 
    cursor: pointer; white-space: nowrap; }
    
.login-trigger-link svg{
    fill:var(--nsf-cta-intermediate); width:14px; height:14px; }    


@media (max-width: 767px) {

    .login-box-content {
        flex-wrap: wrap; justify-content: center; row-gap: 12px; }

    .login-box-content::before {
        order: 1; }

    .login-box-text {
        order: 2; }

    .login-box-content::after {
        order: 3; }

    .login-trigger-link {
        order: 4; flex: 0 0 100%; padding: 12px 20px; font-size: 15px; }

}
    

/* ========================================================================================
   LOGIN COLLAPSIBLE - VERSIONE MINIMAL
   ======================================================================================== */

#contenitore-completo-form-login {
    display: none; width: 100%; margin-bottom: 20px; border-radius:5px; clear:both; }

.login-form-wrapper {
    display: none; position: relative; padding: 15px 20px; margin: 0; }

/* Container form */
.login-form-wrapper .login-container {
    max-width: 300px; margin: 0 auto; }

/* Input con icone e floating label */
.login-form-wrapper .input-container {
    position: relative; margin-bottom: 15px; display: flex; align-items: center; }

.login-form-wrapper .input-container .input-icona {
    position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 18px; height: 18px;
    fill: var(--nsf-gray-700); z-index: 2; }

.login-form-wrapper .input-container .floating-label {
    flex: 1; }

.login-form-wrapper .input-container .floating-label input {
    padding-left: 40px !important; width: 100%; }

.login-form-wrapper .input-container .floating-label label {
    left: 40px; }

.login-form-wrapper .input-container .floating-label input:focus + label,
.login-form-wrapper .input-container .floating-label input:not(:placeholder-shown) + label {
    left: 12px; }

.login-btn-accedi {
    width: 100%; padding: 12px 16px; background: transparent; color: var(--nsf-cta-intermediate);
    border: 1px solid var(--nsf-cta-intermediate); font-size: 15px; font-weight: 500; cursor: pointer;
    position: relative; overflow: hidden; z-index: 1; display: inline-flex; align-items: center; 
    justify-content: center; gap: 8px; }

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

/* Pulsante Reset Password */
.login-btn-reset {
    width: 100%; padding: 12px 16px; background: transparent; color: var(--nsf-black);
    border: 1px solid var(--nsf-black-pure); font-size: 15px; font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
    
.login-btn-reset svg {
    width: 15px; height: 15px; fill: currentColor; }    

/* Link password dimenticata */
.login-forgot-password {
    text-align: center; margin-top: 15px; font-size: 14px; }

.login-forgot-password a {
    color: var(--nsf-gray-800); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

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

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

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

#reset-success-message p {
    text-align: center; font-size: 14px; color: var(--nsf-gray-700); margin-bottom: 15px; }

/* Overlay loader */
.login-form-wrapper .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; }

.loader-spinner {
    width: 36px; height: 36px; border: 3px solid var(--nsf-gray-300); border-top-color: var(--nsf-gray-700);
    border-radius: 50%; animation: spinner-rotate 0.7s linear infinite; }

@keyframes spinner-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ========================================================================================
   RIBBON UTENTE LOGGATO
   ======================================================================================== */

.ribbon-utente-loggato {
    display: none; width: 100%; border-bottom: 1px solid rgba(40, 167, 69, 0.12);
    padding: 20px 0 10px 0; margin-bottom: 20px; font-size: 15px; color: var(--nsf-gray-700); }

.ribbon-utente-loggato strong {
    color: var(--nsf-gray-800); font-weight: 600; margin: 0 4px; }

.ribbon-utente-icona {
    width: 16px; height: 16px; fill: var(--nsf-success); vertical-align: middle;
    margin-right: 6px; }

.ribbon-utente-esci {
    color: var(--nsf-gray-550); font-size: 13px; cursor: pointer; text-decoration: none;
    transition: color 0.2s ease; margin-left: 8px; }    

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


/* ========================================================================================
   MESSAGGIO PULSANTE - UTENTE LOGGATO
   ======================================================================================== */

#pulsante_motivazione_loggato {
    display: none; }


/* ========================================================================================
   RESPONSIVE
   ======================================================================================== */

@media (max-width: 600px) {

    .ribbon-utente-content {
        flex-direction: column; gap: 8px; text-align: center; }

    .pulsante-motivazione-trattino {
        display: none; }

    .pulsante-motivazione-sottotesto {
        display: block; margin-top: 3px; }

}