/* ===== FONT ===== */
@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/dist/font/poppins-v24-latin-regular.woff2') format('woff2'); }
@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/dist/font/poppins-v24-latin-500.woff2') format('woff2'); }
@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/dist/font/poppins-v24-latin-600.woff2') format('woff2'); }


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

*/



* {
    margin: 0; padding: 0; box-sizing: border-box; }
  
  
 html {
    scroll-behavior: smooth; }


body {
    margin:0; padding:0; font-size:16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; overflow-x: hidden; 
    color: var(--nsf-black-pure); }

#contenitore_principale {
    position: absolute; top: 45px; left: 0; width: 100%; }

.contenitore_1200 {
    max-width: 1200px; margin: 0 auto; padding: 0 10px; background-color: var(--nsf-white); }

header {
  display: flex; flex-direction: column; padding: 10px 0;  }

.logo_nonsolofitness {
    text-align:center;}

.logo_eps_coni {
  display: none; text-align:right; }

.main-aside {
    display: block; padding-bottom: 20px; }

main, aside {
    display: block; width: 100%; padding: 10px; margin: 0; }


footer {
    width: 100%; border-top: 1px solid var(--nsf-gray-250); }


@media screen and (min-width: 1200px) {

    header {
        flex-direction: row; align-items: center; }
  
    .logo_nonsolofitness, .logo_eps_coni {
        width: 50%; text-align:left; }
        
    .logo_nonsolofitness, .logo_eps_coni {
        width: 50%; }
  
    .logo_eps_coni {
        display: block; }
    
    .main-aside {
        display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; }

    main:not(.larghezza-completa) {
        width: 70%; }
        
    aside {
        width: 30%; }
        
    .main-aside.full-width {
        flex-wrap: wrap;  }
        
    .main-aside.full-width main, .main-aside.full-width aside {
        width: 100%; }
        
}

@media screen and (max-width: 1199px) {
    aside.pagina_ringraziamento  {
        display: none;
    }
}


/*
    Elementi grafici
*/    
      
h1, h2, h3, h4, h5, h6  {
    padding:0; margin:0; font-weight:normal; width:100%; display:block; }
    
h3 {
    font-size:28px; margin-bottom:10px !important; color: var(--nsf-gray-900); font-weight:400;}

h4 {
    font-size:21px; }

h5 {
    font-size:20px; }  
    
h6 {
    font-size:19px; }   
    
strong, b {
    font-weight:unset !important; font-weight:600 !important; }    
    
strong.strong_500 {
    font-weight:unset !important; font-weight:500 !important; }    
    
hgroup {
    margin-bottom:20px;}  
    
hgroup h1 {
    margin-bottom:10px; font-size:28px; } 
    
hgroup h2 {
     font-size:18px; font-style:italic; line-height:1.5; }     
    
    
a {
    color: var(--nsf-red); text-decoration:none; cursor:pointer;}
    
a:hover {
    opacity:.8; }     
    
img {
    height:auto; max-width:100%;}
    
img a, a img {
    border:0; border-style:none;}    
    
ul, ol {
    padding:0 0 0 10px; margin:0 0 20px 0; list-style-position:inside; list-style-type:square; line-height:1.7;}
    
ul li, ol li {
    line-height:1.7;}      
         
p {
    margin:0 0 20px 0; padding:0; line-height:1.7;}
    
table {
    margin:0; padding:0; border-collapse:collapse; }
    
table thead  {
    margin:0; padding:0; font-weight:normal; }
    
table thead th {
    text-align:left; }
    
table th, table td {
    vertical-align:middle; }
    
blockquote, cite {
     font-style:normal; } 
     
figure.immagine-principale{
    text-align:center; }     
     
dl {
    padding:0; margin:0 0 20px 0; }
    
dl dt {
    padding:0; font-weight:500; margin-bottom:5px; }
    
dl dd {
    padding:0 0 15px 0; font-size:15px; }  
    

h3.h3-titolo-sottolineato {
    position: relative; font-size: 22px !important; font-weight:500 !important; padding-bottom: 5px; }

h3.h3-titolo-sottolineato::after {
    content: ""; position: absolute; bottom: 0; left: 0; height: 1px;
    width: 100%; background: linear-gradient( to right, var(--nsf-gray-450) 0%, rgba(204, 204, 204, 0.6) 40%, rgba(204, 204, 204, 0.3) 75%, rgba(204, 204, 204, 0) 100% ); }    
         
    
details {
	margin-bottom: 10px; border-bottom: 1px solid var(--nsf-gray-300); overflow: hidden; }
	
details p{
	margin:5px 20px; }	
	
summary {
	display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px 0; cursor: pointer;
	font-weight: 500; line-height:1.5; }
	
summary::marker, summary::-webkit-details-marker {
    display: none; }
    
summary::after {
	content: '+'; font-size: 1.2em; font-weight: 300; }
	
details[open] summary::after {
    content: '-'; }
    
details > div {
    padding: 10px; }
    
.summary-icona-domanda {
    padding: 10px 30px 10px 45px; position: relative; }

.summary-icona-domanda::before {
    content: ''; position: absolute; left: 10px; top:15px; width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23e2001a' d='M202.7 288L352 288c17.7 0 32-14.3 32-32l0-192c0-17.7-14.3-32-32-32L64 32C46.3 32 32 46.3 32 64l0 192c0 17.7 14.3 32 32 32l32 0c17.7 0 32 14.3 32 32l0 16 55.5-41.6c5.5-4.2 12.3-6.4 19.2-6.4zM352 320l-149.3 0-81.1 60.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-16 0-32-32 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L352 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64zM320 448c-35.3 0-64-28.7-64-64l0-32 32 0 0 32c0 17.7 14.3 32 32 32l117.3 0c6.9 0 13.7 2.2 19.2 6.4L512 464l0-16c0-17.7 14.3-32 32-32l32 0c17.7 0 32-14.3 32-32l0-192c0-17.7-14.3-32-32-32l-128 0 0-32 128 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64l-32 0 0 32 0 16c0 6.1-3.4 11.6-8.8 14.3s-11.9 2.1-16.8-1.5L437.3 448 320 448zM184.3 70.3c-16.4 0-31 10.3-36.4 25.7l-.3 .9c-3 8.3 1.4 17.5 9.7 20.4s17.5-1.4 20.4-9.7l.3-.9c.9-2.7 3.5-4.4 6.3-4.4l41.3 0c6.5 0 11.7 5.3 11.7 11.7c0 4.2-2.2 8.1-5.9 10.2l-31.4 18c-5 2.9-8 8.1-8 13.9l0 9.5c0 8.8 7.2 16 16 16s16-7.2 16-16l0-.3L247.4 152c13.6-7.8 22-22.3 22-37.9c0-24.2-19.6-43.7-43.7-43.7l-41.3 0zM208 250.7a22.7 22.7 0 1 0 0-45.3 22.7 22.7 0 1 0 0 45.3z'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; }         
    
ul.none, ol.none {
    list-style-type:none; }
    
ul.numeri, ol.numeri{
    list-style-type:decimal;}
    
ul.lettere, ol.lettere{
    list-style-type:lower-latin;}
    
ul.simboli, ol.simboli{
    list-style-type:square;}   
    
.centrato {
    text-align:center; }
    
/*          
            margin    
          margin top    
                                */    
.margin_top_meno_5 {
    margin-top:-5px !important; }  

.margin_top_meno_10 {
    margin-top:-10px !important; }        
    
.margin_top_0 {
    margin-top:0 !important; }     

.margin_top_0_px {
    margin-top:0 !important; }
    
.margin_top_3px {
    margin-top:3px !important; } 
    
.margin_top_5px {
    margin-top:5px !important; }          
    
.margin_top_10px {
    margin-top:10px !important; }      
    
.margin_top_15px {
    margin-top:15px !important; }      
    
.margin_top_20px {
    margin-top:20px !important; }    
    
.margin_top_30px {
    margin-top:30px !important; }   
    
.margin_top_40px {
    margin-top:30px !important; }     
    
.margin_top_50px {
    margin-top:50px !important; }  
    
/*          
            margin    
          margin top    
                                */     
.margin_bottom_meno_5 {
    margin-top:-5px !important; }  

.margin_bottom_meno_10 {
    margin-top:-10px !important; }     
    
.margin_bottom_0 {
    margin-bottom:0 !important; }     
    
.margin_bottom_0px {
    margin-bottom:0 !important; }
    
.margin_bottom_3px {
    margin-bottom:3px !important; } 
    
.margin_bottom_5px {
    margin-bottom:5px !important; }          
    
.margin_bottom_10px {
    margin-bottom:10px !important; }      
    
.margin_bottom_15px {
    margin-bottom:15px !important; }      
    
.margin_bottom_20px {
    margin-bottom:20px !important; }    
    
.margin_bottom_30px {
    margin-bottom:30px !important; }  
    
.margin_bottom_40px {
    margin-bottom:40px !important; }         
    
.margin_bottom_50px {
    margin-bottom:50px !important; }
    
.margin_bottom_plus {
    margin-bottom:30px !important; }      
    
/*          
            padding    
          padding top    
                                */    
.padding_top_meno_5 {
    padding-top:-5px !important; }  

.padding_top_meno_10 {
    padding-top:-10px !important; }        
    
.padding_top_0 {
    padding-top:0 !important; }     

.padding_top_0_px {
    padding-top:0 !important; }
    
.padding_top_3px {
    padding-top:3px !important; } 
    
.padding_top_5px {
    padding-top:5px !important; }          
    
.padding_top_10px {
    padding-top:10px !important; }      
    
.padding_top_15px {
    padding-top:15px !important; }      
    
.padding_top_20px {
    padding-top:20px !important; }    
    
.padding_top_30px {
    padding-top:30px !important; } 
    
.padding_top_40px {
    padding-top:40px !important; }       
    
.padding_top_50px {
    padding-top:50px !important; }  
    
/*          
            padding    
          padding top    
                                */     
.padding_bottom_meno_5 {
    padding-top:-5px !important; }  

.padding_bottom_meno_10 {
    padding-top:-10px !important; }     
    
.padding_bottom_0 {
    padding-bottom:0 !important; }     
    
.padding_bottom_0px {
    padding-bottom:0 !important; }
    
.padding_bottom_3px {
    padding-bottom:3px !important; } 
    
.padding_bottom_5px {
    padding-bottom:5px !important; }          
    
.padding_bottom_10px {
    padding-bottom:10px !important; }      
    
.padding_bottom_15px {
    padding-bottom:15px !important; }      
    
.padding_bottom_20px {
    padding-bottom:20px !important; }    
    
.padding_bottom_30px {
    padding-bottom:30px !important; }  
    
.padding_bottom_40px {
    padding-bottom:30px !important; }         
    
.padding_bottom_50px {
    padding-bottom:50px !important; }    
    
.padding_bottom_plus {
    padding-bottom:30px !important; }      
    
    
/*          
            font-size   
                                */     
.font-size-13 {
    font-size:14px !important; }    
    
.font-size-14 {
    font-size:14px !important; }    
    
.font-size-15 {
    font-size:15px !important; }
    
.font-size-16 {
    font-size:16px !important; }      
    
.font-size-17 {
    font-size:17px !important; }  
    
.font-size-18 {
    font-size:18px !important; }               
    
.text-align-center {
    text-align:center; }    
    
.font-style-italic {
    font-style:italic !important; }  

.font-weight-400 {
    font-weight:400 !important; }    
    
.font-weight-500 {
    font-weight:500 !important; }  
    
.font-weight-600 {
    font-weight:600 !important; }      
    
/*          
            text-aling   
                                */     
                                
.text_align_center  {
    text-align:center; }  
    
.text_align_left  {
    text-align:left; }

.text_align_right  {
    text-align:right; }    
    

  
    
          
    
.overlay_loader {
    position:fixed; top:0; left:0; width: 100%; height: 100%; z-index: 2147483647; background-color: var(--nsf-black-50); background-position:center center; background-repeat:no-repeat; display: none; 
    background-image:URL(https://www.nonsolofitness.it/dist/img/layout/loader.gif); }
    
.overlay-no-loader {
    position:fixed; top:0; left:0; width: 100%; height: 100%; z-index: 2147483647; background-color: var(--nsf-black-50); display: none; }    
    
    
/*
    Elementi grafici: input, select etc
*/ 
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], select, textarea {
    width:98%; border: 1px solid var(--nsf-gray-680); padding: 12px 15px 12px 10px; box-sizing: border-box; border-radius: 3px; 
    font-size:16px; }
  
select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 12px 40px 12px 10px !important; 
    background: var(--nsf-white) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M201.4%20374.6c12.5%2012.5%2032.8%2012.5%2045.3%200l160-160c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L224%20306.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l160%20160z'/%3E%3C/svg%3E") no-repeat;
    cursor: pointer; background-position: calc(100% - 10px) center; background-size: 15px 15px; }

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    border-color: var(--nsf-success-alt); outline: none; box-shadow: 0 2px 4px var(--nsf-black-20); }
      
input[type="checkbox"] {
    width:15px; height:15px; }
    
input[type="submit"]{
     -webkit-appearance: none; border-radius:0; }
     
input:focus, select:focus {
    border: 1px solid var(--nsf-success-alt); }   
    
input[type="checkbox"] {
    cursor:pointer; }            
 
::placeholder {
   color: var(--nsf-gray-600); font-size: 13px; }
   
/*
    breadcrumbs fondamentale in ogni pagina
*/   
.breadcrumbs {
      width: 100%; padding: 0; margin-bottom:10px; padding-bottom:10px; font-size:14px; border-bottom: 1px solid var(--nsf-gray-150); line-height:1.5; font-weight:500; }
      
.breadcrumbs i {
    font-size:14px; }   
    
.breadcrumbs a {
    text-decoration: none; color: var(--nsf-black-pure); font-weight:400; }
    
.breadcrumbs a::after {
    content: ">"; margin: 0 4px; font-size:12px;  }   
   
   
/*
    questo pulsante vale per tutte le pagine. background e color verranno personalizzati in base alle esigenze
*/   
.pulsante_container {
    width: 100%; padding: 10px 0; text-align: center; margin-bottom:30px; }

.pulsante_generico {
    border:none !important; padding: 12px 8px; text-align: center; text-decoration: none; display: inline-block;
    cursor: pointer; width: 92%; max-width: 320px; position: relative; 
    font-weight:500; font-size:16px; color: var(--nsf-white); box-shadow: 0 4px 8px var(--nsf-black-20); transition: opacity 0.5s ease-in-out;}

.pulsante_generico:hover {
    opacity: 0.75;  }

.pulsante_generico:active {
    top: 2px; background: rgb(105, 192, 223); box-shadow: 0 3px 0 0 rgba(78, 136, 160, 1); transform-origin: 50% 100%; }
    
.pulsante_container.pulsante-svg {
    display: flex; justify-content: center; align-items: center; width: 100%; }

.pulsante_generico.pulsante-svg {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.pulsante_generico.pulsante-svg svg {
    width: 26px; height: 26px; flex-shrink: 0; }    
  
.disabilita_pulsante {
    opacity: 0.3; pointer-events: none; cursor: not-allowed; }
    
.cta_informazioni {
    background-color: var(--nsf-cta-info);  }
     
.cta_azione_preliminare {
    background-color: var(--nsf-cta-intermediate); }
    
.cta_azione_definitiva {
    background-color: var(--nsf-cta-primary);}   
    
.cta_cta_iscrizione {
    background-color: var(--nsf-red);}  
    
.cta_border {
    border:1px !important; border-style:solid !important; }        
    
.cta_neutro_border {
    color: var(--nsf-black-pure); border-color: var(--nsf-black-pure) !important; }

.cta_informazioni_border {
    color: var(--nsf-cta-info); border-color: var(--nsf-cta-info) !important; }

.cta_azione_preliminare_border {
    color: var(--nsf-cta-intermediate); border-color: var(--nsf-cta-intermediate) !important; }      
    
 .cta_azione_definitiva_border {
    color: var(--nsf-cta-primary); border-color: var(--nsf-cta-primary) !important; }    

.cta_cta_iscrizione_border {
    color: var(--nsf-red); border-color: var(--nsf-red) !important; }
           
    
    
    

/*
    diverse tipologie di messaggio con la palette individuata
    il messaggio si compone di una icona font-awesome e del testo
*/ 
.messaggio {
    font-weight: 500; padding: 10px; text-align: center; border-radius: 6px; margin-left: auto; 
    margin-right: auto; max-width: 400px; }

.messaggio.success {
    color: var(--nsf-success); border: 2px solid var(--nsf-success); }

.messaggio.warning {
    color: var(--nsf-warning); border: 2px solid var(--nsf-warning-border); }

.messaggio.danger {
    color: var(--nsf-danger); border: 2px solid var(--nsf-danger); }

.messaggio i, .messaggio svg {
    font-size: 18px; color: inherit; fill: currentColor; padding-right: 10px;
    vertical-align: middle; }

.messaggio svg {
    width: 25px; height: 25px; display: inline-block; } 
 
  
/*
    avvisi
*/

/*    avviso presente in iscrizione default/grazie    */
.span_avviso_small { 
    display:block; font-weight:400; margin-top:5px; display:none; float:left; }
    
    
   
/*
    inserisco queste classi in questo file perché mi occorrono sia per il footer che per la colonna destra
*/   
.social-icon {
    width: 60px; height: 65px; border-radius: 3px; display: flex; justify-content: center;
    align-items: center; }

.social-icon i {
    color: var(--nsf-white); font-size: 40px; }
      
.social-icon.whatsapp {
    background-color: var(--nsf-social-whatsapp); }
        
.social-icon.facebook {
    background-color: var(--nsf-social-facebook); }
        
.social-icon.instagram {
    background-color: var(--nsf-social-instagram); }
        
.social-icon.youtube {
    background-color: var(--nsf-social-youtube); }
    
.social-icon.linkedin {
    background: var(--nsf-social-linkedin); }   
 
.social-icon.rss {
    background: var(--nsf-social-rss); }    

.social-icon i:hover{
    animation-name: fa-bounce; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, cubic-bezier(.28,.84,.42,1) ); }    
    

@keyframes fa-bounce {
    0% { transform: scale(1,1) translateY(0); }
    10% { transform: scale(1.1,.9) translateY(0); }
    30% { transform: scale(.9,1.1) translateY(-0.5em); }
    50% { transform: scale(1.05,.95) translateY(0); }
    57% { transform: scale(1,1) translateY(-0.125em); }
    64% { transform: scale(1,1) translateY(0); }
    100% { transform: scale(1,1) translateY(0); }
}

.social-icon svg {
    color: var(--nsf-white); fill: var(--nsf-white); width: 40px; height: 40px; }

.social-icon:hover svg {
    animation: fa-bounce 1s cubic-bezier(.28,.84,.42,1) infinite; }        
        
        
@media only screen and (max-width :320px) 
{
    .social-icon {
        width: 60px; height: 60px; }
    
    .social-icon > i {
        font-size: 36px; }
                                                                
}   



/*
    MESSAGGIO
*/
.notice{
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 10px;
  color: var(--nsf-white); box-shadow: 0 6px 14px var(--nsf-black-12); position: relative; overflow: hidden; }

.notice::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width: 64px; opacity:.25; background: currentColor; mix-blend-mode: soft-light; }

.notice__icon{
  flex: 0 0 auto; width: 28px; height: 28px; margin-left: 10px; fill: var(--nsf-white); 
  filter: drop-shadow(0 1px 2px var(--nsf-black-25)); }

.notice__content{
  display:flex; flex-direction:column; gap: 6px; min-width: 0; padding-left:10px; }

.notice__title {
    font-weight:700; line-height:1.2; margin:0; }

.notice__text {
    margin:0; line-height:1.5; opacity:.95; }

.notice__actions {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }

.notice--warning{
  background: linear-gradient(90deg, var(--nsf-warning-dark) 0 64px, var(--nsf-warning-light) 64px); }
  
.notice--success{
  background: linear-gradient(90deg, var(--nsf-success-dark) 0 64px, var(--nsf-success-light) 64px); }
  
.notice--error{
  background: linear-gradient(90deg, var(--nsf-danger-dark) 0 64px, var(--nsf-danger-light) 64px); }
  
.notice--info{
  background: linear-gradient(90deg, var(--nsf-info-dark) 0 64px, var(--nsf-info-light) 64px); }

.notice .btn{
  appearance:none; border-radius:8px; padding:10px 14px; font:inherit; cursor:pointer;
  transition:.15s ease; border:1px solid transparent; color: var(--nsf-white); }
  
.notice .btn--light{
  background: var(--nsf-white-18); border-color: var(--nsf-white-35); }
  
.notice .btn--light:hover{
  background: var(--nsf-white-28); }
  
.notice .btn--ghost{
  background: transparent; border-color: var(--nsf-white-35); }
  
.notice .btn--ghost:hover{
  background: var(--nsf-white-18); }

@media (max-width:560px){
  .notice {
      gap:10px; }
      
  .notice__icon {
      width: 24px; height: 24px; margin-left: 6px; }
}


/*
<!-- WARNING -->
<div class="notice notice--warning margin_bottom_20px" role="status" aria-live="polite">
    <i class="notice__icon fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
    <div class="notice__content">
        <p class="notice__title">Attenzione</p>
        <p class="notice__text">Questa è una notifica semplice con un colore più brillante.</p>
    </div>
</div>

<!-- SUCCESS -->
<div class="notice notice--success" role="status" aria-live="polite">
    <i class="notice__icon fa-solid fa-circle-check" aria-hidden="true"></i>
    <div class="notice__content">
        <p class="notice__title">Operazione riuscita</p>
        <p class="notice__text">Tutto è andato a buon fine. Ottimo lavoro.</p>
    </div>
</div>

<!-- ERROR con pulsanti -->
<div class="notice notice--error" role="alert" aria-live="assertive">
    <i class="notice__icon fa-solid fa-circle-xmark" aria-hidden="true"></i>
    <div class="notice__content">
        <p class="notice__title">Si è verificato un errore</p>
        <p class="notice__text">Questa è una notifica che informa di un problema.</p>
        <div class="notice__actions">
            <button class="btn btn--light">Aiutami, per favore</button>
            <button class="btn btn--ghost">Non importa</button>
        </div>
    </div>
</div>

<!-- INFO con pulsanti -->
<div class="notice notice--info" role="status" aria-live="polite">
    <i class="notice__icon fa-solid fa-bell" aria-hidden="true"></i>
    <div class="notice__content">
        <p class="notice__title">Suggerimento</p>
        <p class="notice__text">Puoi assegnare stato e relazione direttamente dalla lista visite.</p>
        <div class="notice__actions">
            <button class="btn btn--light">Mostrami come</button>
            <button class="btn btn--ghost">No, grazie</button>
        </div>
    </div>
</div>
*/


/* ===== Box richiesta informazioni — CSS completo ===== */

div.box-richiesta-informazioni{
  border: 1px solid var(--nsf-cta-info); padding:10px; width:100%; display:flow-root; overflow:auto; }
  
div.box-richiesta-informazioni:after {
    display:block; clear:both; content:" "; }

div.box-richiesta-informazioni img:hover {
    opacity:0.75; }

div.box-richiesta-informazioni div.div-form{
  width:100%; max-width:350px; margin:20px auto; }

div.box-richiesta-informazioni div.div-form input[type="text"], div.box-richiesta-informazioni div.div-form input[type="email"] {
  display:block; width:100%; box-sizing:border-box; margin-bottom:10px; }

div.box-richiesta-informazioni div.div-form .field-divider{
  display:flex; align-items:center; gap:.75rem; margin:15px 0; color: var(--nsf-gray-700);
  font-weight:400; letter-spacing:.2px; }
  
div.box-richiesta-informazioni div.div-form .field-divider::before, div.box-richiesta-informazioni div.div-form .field-divider::after {
  content:""; flex:1 1 auto; height:1px; background: linear-gradient(to right, transparent, var(--nsf-info-35) 30%, var(--nsf-info-55)); }
  
div.box-richiesta-informazioni div.div-form .field-divider::after{
  background: linear-gradient(to left, transparent, var(--nsf-info-35) 30%, var(--nsf-info-55)); }

@media (min-width:640px){
  div.box-richiesta-informazioni div.div-form .field-divider {
      margin:.75rem 0 1rem; }
}

div.box-richiesta-informazioni div.div-form .div-privacy{
  position:relative; display:inline-block; font-size:13px; line-height:1.45; padding:0 0 3px 0; }

.nsf-privacy-underline-in::after{
  content:""; position:absolute; left:0; right:auto; bottom:-2px;
  height:2px; width:0; background: var(--nsf-red); animation:animazione-bordo-entrata .3s ease-out forwards; transition: background-color .25s ease; }

.nsf-privacy-underline-success::after{
  background: var(--nsf-success-alt); }

.nsf-privacy-underline-out-reverse::after{
  content:""; position:absolute; right:0; left:auto; bottom:-2px;
  height:2px; width:100%; background: var(--nsf-success-alt); animation:animazione-bordo-uscita .4s ease-out forwards; }

.box-richiesta-informazioni input[type="text"].my-error-class, .box-richiesta-informazioni input[type="email"].my-error-class, .box-richiesta-informazioni textarea.my-error-class {
  border-color: var(--nsf-red) !important; background: var(--nsf-danger-bg); animation:attenuaErrore .5s ease forwards; animation-delay:1s; }
  
.box-richiesta-informazioni input[type="text"].my-valid-class, .box-richiesta-informazioni input[type="email"].my-valid-class, .box-richiesta-informazioni textarea.my-valid-class {
  border-color: var(--nsf-success-alt) !important; }

.box-richiesta-informazioni input[type="checkbox"]{
  accent-color: var(--nsf-cta-info); }

.box-richiesta-informazioni .pulsante-generico-input{
  -webkit-appearance:none; appearance:none; background:none; font-weight:600 !important; }

.box-richiesta-informazioni .pulsante-generico-input:focus {
    outline:none; }

.nsf-is-hidden {
    display: none !important; }

@keyframes nsfSlideOutLeft {
  to { transform: translateX(-16px); opacity: 0; }
}
@keyframes nsfSlideInRight {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.nsf-slide-out-left {
    animation: nsfSlideOutLeft .35s ease forwards; }
.nsf-slide-in-right {
    animation: nsfSlideInRight .35s ease forwards; }

@media (prefers-reduced-motion: reduce) {
  .nsf-slide-out-left, .nsf-slide-in-right {
      animation: none; }
}

@keyframes nsfFadeOut {
  to { opacity: 0; transform: translateY(-6px); }
}
.nsf-fade-out {
    animation: nsfFadeOut .4s ease forwards; }
    
    
hgroup.h1-diploma-europeo {
            margin-bottom:0 !important;}
            
hgroup.h1-diploma-europeo h1{
    margin-bottom:0 !important;}   
            
.p-h1-sottopancia strong {
    font-weight:400 !important; font-style:italic; }                     
    
.container-immagine-principale {
    position: relative; display: inline-block; overflow: hidden; line-height: 0; }


.container-immagine-principale .badge-europeo {
    position: absolute; right: 0; bottom: 10px; background-color: rgba(226, 0, 26, 0.9); color: var(--nsf-white);
    font-weight: 500; font-size: 13px; padding: 6px 10px; text-transform: uppercase; box-shadow: -2px -2px 6px var(--nsf-black-20);
    z-index: 2; height:30px; line-height:20px; }


@media (max-width: 480px) {

    .container-immagine-principale .badge-europeo {
        font-size: 10px; padding: 4px 8px; }
        
}


.promo-banner {
    display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--nsf-cta-info);
    color: var(--nsf-white); padding: 10px; text-align: center; border-radius: 6px; margin-bottom: 50px; }

.promo-banner .promo-content {
    margin: 20px; text-align: center; }

.promo-banner .promo-content b {
    font-size: 24px; display: block; margin-bottom: 20px; line-height:1.6; font-weight:500; }

.promo-banner .promo-button {
    display: block; text-decoration: none; color: var(--nsf-white); border: 1px solid var(--nsf-white); padding: 12px 24px;
    border-radius: 4px; font-weight:500; transition: background-color 0.3s ease; margin: 0 auto; width:280px;  }
    
.promo-banner .promo-button:hover {
    background-color: var(--nsf-white-20); }
    
.promo-banner .promo-image {
    margin:20px; }    

.promo-banner .promo-image img {
    max-width: 100%; height: auto; display: block; margin: 0 auto; }

@media (min-width: 768px) {
    .promo-banner {
        flex-direction: row; text-align: left; justify-content: space-around; }

    .promo-banner .promo-content {
        margin-bottom: 0; }

    .promo-banner .promo-content b {
        font-size: 28px; }

    .promo-banner .promo-image img {
        margin: 0; }
}
        
.div-container-pulsante-iscrizione.percorsi {
    margin-bottom:0px !important; }    
     
            
@media (min-width: 1200px) {
              
    .desktop-version {
        display:block; visibility:visible; }       
                
    .mobile-version {
        display:none; visibility:hidden; }      

    #colonna_destra.colonna-mobile {
        position: sticky; top: 60px; align-self: flex-start; /*margin-top: -300px;*/ margin-right: -10px; 
        background-color: var(--nsf-white) !important; z-index: 999; }
            
    #colonna_destra.colonna-mobile .div-container-pulsante-iscrizione {
        margin:0 0 15px 0 !important; } 
            
    #colonna_destra.colonna-mobile .prezzo_corso {
        text-align:center; font-size:30px; font-weight:600; }
        
    #colonna_destra.colonna-mobile .colonna-destra-p-abilitazione {
        text-align:center; font-size:13px; }
            
    #colonna_destra.colonna-mobile .add-to-cart-fixed {
        box-shadow: 0 4px 8px 2px var(--nsf-black-10); padding:5px; }
                
    #colonna_destra.colonna-mobile .add-to-cart-fixed .loghi{
        padding:0 10px 10px 10px; }    
}         
        
        
@media (max-width: 1199px) {
    .desktop-version {
        display:none; visibility:hidden; }       
                
    .mobile-version {
        display:block; visibility:visible; }                         
}


/*
========================================================================================
    CSS QUIZ CTA - Versione Pagina Corso (single column)
========================================================================================
    Richiede: css_2026_Variabili_globali.css
========================================================================================
*/

.nsf-corso-quiz-cta {
    width: 100%; max-height: 300px; background-image: url('https://www.nonsolofitness.it/dist/img/home/quiz-background-rettangolare.png'); background-size: cover; background-position: center;
    background-color: var(--nsf-white); position: relative; display: flex; align-items: center; justify-content: center;
    padding: 60px 20px; }
    
.nsf-corso-quiz-cta::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, var(--nsf-white-50) 0%, var(--nsf-white) 80%); }
    
.nsf-corso-quiz-cta-btn {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 48px; font-size: 15px; font-weight: 500; letter-spacing: 0.3px; text-decoration: none;
    border-radius: 2px; overflow: hidden; background: var(--nsf-red); color: var(--nsf-white); border: 1.5px solid var(--nsf-red);
    cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 24px var(--nsf-red-40), 0 4px 8px var(--nsf-black-15); }
    
.nsf-corso-quiz-cta-btn:hover {
    color: var(--nsf-white-warm); border-color: var(--nsf-red); transform: translateY(-2px);
    box-shadow: 0 12px 32px var(--nsf-red-50), 0 6px 12px var(--nsf-black-20); }
    
.nsf-corso-quiz-cta-btn:active {
    transform: translateY(0) scale(0.98); box-shadow: 0 4px 12px var(--nsf-red-30), 0 2px 4px var(--nsf-black-10); }

@media (max-width: 576px) {
    
    .nsf-corso-quiz-cta {
        padding: 40px 16px; max-height: 200px; }
        
    .nsf-corso-quiz-cta-btn {
        padding: 14px 32px; font-size: 14px; }
        
}



/* ========================================================================================
   PULSANTE ISCRIZIONE PRIMARIO
   ======================================================================================== */
.pulsante_iscrizione_2026 {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    background-color: var(--nsf-red) !important; color: var(--nsf-white) !important; max-width: 400px !important; width: 100% !important; padding: 16px 20px !important;
    font-size: 16px !important; font-weight: 500 !important; letter-spacing: 1.5px !important; border: none !important; box-shadow: 0 4px 14px rgba(226, 0, 26, 0.4), 0 8px 24px rgba(226, 0, 26, 0.25) !important;
    transition: all 0.3s ease !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }

.pulsante_iscrizione_2026:hover {
    background-color: #c40017 !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(226, 0, 26, 0.5), 0 12px 32px rgba(226, 0, 26, 0.3) !important; }

.pulsante_iscrizione_2026:active {
    transform: translateY(0); box-shadow: 0 2px 8px rgba(226, 0, 26, 0.4), 0 4px 12px rgba(226, 0, 26, 0.2) !important; }

.pulsante_iscrizione_2026 svg {
    width: 18px; height: 18px; flex-shrink: 0; }

.pulsante-motivazione {
    text-align: center; font-size: 14px; color: var(--nsf-gray-900); font-style: italic; }
    
.pulsante-motivazione-trattino {
    color: var(--nsf-gray-600); }    
    
.reset-margin-bottom-padding-bottom {
    margin-bottom: 0 !important; padding-bottom: 0 !important; }
    
    
/* ========================================================================================
   PULSANTE CHIUSURA MODAL
   ======================================================================================== */    
/* Pulsante base modal */
.container-button {
    width: 100%; text-align: center; margin-top: 30px; }

.button-model {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: min(90%, 300px) !important; padding: 16px 20px;
    font-size: 16px; font-weight: 500; letter-spacing: 1.5px; border: 1px solid; border-radius: 3px; margin: 0 auto;
    cursor: pointer; transition: all 0.3s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

.button-model svg {
    width: 20px; height: 20px; fill: currentColor; transition: fill 0.3s ease; }

.button-model:active {
    transform: translateY(0); }

/* Variante chiusura */
.button-model-chiudi {
    background-color: var(--nsf-white-antiflash); border-color: var(--nsf-black); color: var(--nsf-black); box-shadow: 0 4px 14px var(--nsf-black-15), 0 8px 24px var(--nsf-black-10);
    text-shadow: none; }

.button-model-chiudi:hover {
    background-color: var(--nsf-black-pure); border-color: var(--nsf-black-pure); color: var(--nsf-white-antiflash); transform: translateY(-2px); box-shadow: 0 6px 20px var(--nsf-black-25), 0 12px 32px var(--nsf-black-15); }

.button-model-chiudi:active {
    box-shadow: 0 2px 8px var(--nsf-black-20), 0 4px 12px var(--nsf-black-10); }
    
/*
    esempi
    
    link
        <a href="#" class="button-model button-model-chiudi">
            <svg>...</svg>
            CHIUDI
        </a>
    
    no link 
    <div class="container-button">
        <button type="button" class="button-model button-model-chiudi modal-documenti-chiudi-btn">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M507.3 155.3C513.5 149.1 513.5 138.9 507.3 132.7C501.1 126.5 490.9 126.5 484.7 132.7L320 297.4L155.3 132.7C149.1 126.5 138.9 126.5 132.7 132.7C126.5 138.9 126.5 149.1 132.7 155.3L297.4 320L132.7 484.7C126.5 490.9 126.5 501.1 132.7 507.3C138.9 513.5 149.1 513.5 155.3 507.3L320 342.6L484.7 507.3C490.9 513.5 501.1 513.5 507.3 507.3C513.5 501.1 513.5 490.9 507.3 484.7L342.6 320L507.3 155.3z"/></svg>
            CHIUDI
        </button>
    </div>




/*    --------------------------------------------------------------------------------------------------------------------------------    
                                        gestione centralizzata pulsanti   
      --------------------------------------------------------------------------------------------------------------------------------    */  

/*          
            max-width   
                                */                                       
    
.pulsante_max_width_250px {
    width: min(100%, 250px) !important; }
        
.pulsante_max_width_300px {
    width: min(100%, 300px) !important; }
    
.pulsante_max_width_350px {
    width: min(100%, 350px) !important; }
  
.pulsante_max_width_400px {
    width: min(100%, 400px) !important; }
    
.pulsante_max_width_500px {
    width: min(100%, 500px) !important; }


  

/*    --------------------------------------------------------------------------------------------------------------------------------    
                                        pulsante ghost    
      --------------------------------------------------------------------------------------------------------------------------------    */  


/*    --------------------------------------------------------------------------------------------------------------------------------    
      definizioni di base del pulsante ghost    
      --------------------------------------------------------------------------------------------------------------------------------    */ 

.pulsante_ghost_container_flex {
    display: flex; justify-content: center; width: 100%; }
      
.pulsante_ghost_default {
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    font-weight: 500; letter-spacing: 1px; border: 1px solid transparent; 
    border-radius: 3px; cursor: pointer; transition: all 0.3s ease; background-color: transparent; 
    text-decoration: none !important; box-shadow: 0 4px 8px var(--nsf-black-20);
    flex-shrink: 0; }
    
a.pulsante_ghost_default {
    margin: 0 auto; }    

.pulsante_ghost_default svg {
    width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }   
    
.pulsante_ghost_default.default_padding {
    padding: 12px 8px; }   
    
.pulsante_ghost_default.mini_padding {
    padding: 6px 4px; }         
    
    
/*    --------------------------------------------------------------------------------------------------------------------------------    */    


/*    -------------------------------------------------------------------------------------------------------------------------------- 
      pulsante ghost: effetti di riempimento, classi di base    
      --------------------------------------------------------------------------------------------------------------------------------    */ 
.riempimento-da-sinistra-verso-destra {
    position: relative; overflow: hidden; transition: color 0.3s ease; }
    
.riempimento-da-sinistra-verso-destra::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; 
    height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; z-index: 1; }

.riempimento-da-sinistra-verso-destra:hover::before {
    transform: scaleX(1); }

.riempimento-da-sinistra-verso-destra > * {
    position: relative; z-index: 2; vertical-align: middle; }
/*    --------------------------------------------------------------------------------------------------------------------------------    */     
    


/*    -------------------------------------------------------------------------------------------------------------------------------- 
      pulsante ghost: varianti di colore del riempimento    
       --------------------------------------------------------------------------------------------------------------------------------    */  
       
       
/*                                                                                                                              
                                                                                                                                
                                                                                                                              Black      */
.pulsante_ghost_nero {
    color: var(--nsf-black); border-color: var(--nsf-black) !important; }
    
.riempimento-da-sinistra-verso-destra-nero::before  {
    background: var(--nsf-black); }
    
.riempimento-da-sinistra-verso-destra-nero:hover {
    color: var(--nsf-white); }
    
.riempimento-da-sinistra-verso-destra-nero:hover svg  {
    fill: var(--nsf-white); }  
    
.riempimento-da-sinistra-verso-destra-nero:hover {
    color: var(--nsf-white); }      
    
    
/*                                                                                                                              
                                                                                                                                Purple     */    
.pulsante_ghost_purple {
    color: var(--nsf-cta-intermediate); border-color: var(--nsf-cta-intermediate) !important; }
    
.riempimento-da-sinistra-verso-destra-purple::before  {
    background: var(--nsf-cta-intermediate); }
    
.riempimento-da-sinistra-verso-destra-purple:hover {
    color: var(--nsf-white); }
    
.riempimento-da-sinistra-verso-destra-purple:hover svg  {
    fill: var(--nsf-white); }    

.riempimento-da-sinistra-verso-destra-purple:hover {
    color: var(--nsf-white); }          
    
    
/*                                                                                                                          
                                                                                                                        Success (verde)    */
.pulsante_ghost_success {
    color: var(--nsf-success-alt); border-color: var(--nsf-success-alt) !important; background: transparent; }

.riempimento-da-sinistra-verso-destra-success::before {
    background: var(--nsf-success-alt); }

.riempimento-da-sinistra-verso-destra-success:hover {
    color: var(--nsf-white); }

.riempimento-da-sinistra-verso-destra-success:hover svg {
    fill: var(--nsf-white); }
    
.riempimento-da-sinistra-verso-destra-success:hover {
    color: var(--nsf-white); }        
    
    
    
/* 
                                                                                                                                    Info */
.pulsante_ghost_info {
    color: var(--nsf-info); border-color: var(--nsf-info) !important; background: transparent; }

.riempimento-da-sinistra-verso-destra-info::before {
    background: var(--nsf-info); }

.riempimento-da-sinistra-verso-destra-info:hover {
    color: var(--nsf-white) !important; }

.riempimento-da-sinistra-verso-destra-info:hover svg {
    fill: var(--nsf-white); }        
    
a.riempimento-da-sinistra-verso-destra-info:hover {
    color: var(--nsf-white) !important; }    
    
     
    
    
/* 
                                                                                                                                    acquisto */
.pulsante_ghost_acquisto {
    color: var(--nsf-red); border-color: var(--nsf-red) !important; background: transparent; }

.riempimento-da-sinistra-verso-destra-acquisto::before {
    background: var(--nsf-red); }

.riempimento-da-sinistra-verso-destra-acquisto:hover {
    color: var(--nsf-white); }

.riempimento-da-sinistra-verso-destra-acquisto:hover svg {
    fill: var(--nsf-white); }     
    
    
    
    
    
/* ============================================
   SEARCH BAR CONDIVISA — NonSoloFitness
   ============================================
   Classi prefisso: nsf-search-
   Usato in: pagina corsi, pagina libri, overlay rcbs, overlay rcs
   Richiede: css_2026_Variabili_globali.css
   ============================================ */


/* --- Wrapper esterno --- */
.nsf-search {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }


/* --- Container relativo dell'input --- */
.nsf-search-wrap {
    flex: 1; min-width: 220px; position: relative; }


/* --- Favicon a sinistra --- */
.nsf-search-logo {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; opacity: 0.4; pointer-events: none; }


/* --- Lente a destra --- */
.nsf-search-icon {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; fill: var(--nsf-gray-500); pointer-events: none; }


/* --- Input a pillola --- */
.nsf-search-input {
    width: 100% !important; padding: 14px 44px 14px 46px !important; font-size: 16px !important;
    border: 1px solid var(--nsf-gray-750) !important; border-radius: 28px !important;
    background: var(--nsf-white) !important; font-family: inherit !important;
    color: var(--nsf-black-soft) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: none !important; outline: none !important; line-height: 1.4 !important;
    font-weight: 400 !important; }

.nsf-search-input:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important; }

.nsf-search-input:focus {
    outline: none !important; border-color: var(--nsf-gray-400) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) !important; }

.nsf-search-input::placeholder {
    color: var(--nsf-gray-500) !important; font-size: 14px !important; }

.nsf-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none; display: none; }


/* --- Pulsante X custom --- */
.nsf-search-reset {
    position: absolute; right: 42px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; padding: 0; border: none; background: none;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    box-shadow: none; line-height: 1; }

.nsf-search-reset svg {
    width: 14px; height: 14px; fill: var(--nsf-gray-500); }

.nsf-search-reset:hover svg {
    fill: var(--nsf-red); }


/* --- Responsive --- */
@media screen and (max-width: 768px) {

    .nsf-search {
        flex-direction: column; gap: 12px; }

    .nsf-search-wrap {
        min-width: 100%; }

}


/*
<!-- ========================================================================================
     SEARCH BAR STANDARD — NonSoloFitness
     ========================================================================================
     Template riutilizzabile per tutte le barre di ricerca del sito.
     Richiede: css_2026_Search_condiviso.css (classi nsf-search-*)
     ========================================================================================
     
     ISTRUZIONI:
     1. Copia questo blocco dove serve
     2. Personalizza: id, placeholder, aria-label, data-stats-id
     3. Se non serve la validazione oninput, rimuovila
     4. Se non serve maxlength o pattern, rimuovili
     5. Il pulsante reset parte con style="display:none;" — il JS lo mostra con display:flex
     
     CLASSI:
     .nsf-search          → wrapper esterno (flex, gap, wrap)
     .nsf-search-wrap     → container relativo dell'input
     .nsf-search-logo     → favicon 15x15 semitrasparente a sinistra
     .nsf-search-icon     → lente SVG 16x16 a destra
     .nsf-search-input    → input a pillola (border-radius 28px)
     .nsf-search-reset    → pulsante X custom (nascosto di default)
     
     NOTE:
     - type="search" per semantica e accessibilità
     - La X nativa di WebKit è nascosta via CSS (c'è la X custom)
     - Il favicon a sinistra è decorativo (aria-hidden, pointer-events:none)
     - La lente a destra è decorativa (aria-hidden, pointer-events:none, focusable:false)
     - role="search" e aria-label sul wrapper per accessibilità
     
     ======================================================================================== -->


<!-- Barra ricerca -->
<div class="nsf-search" role="search" aria-label="Cerca [CONTESTO]">
    <div class="nsf-search-wrap">
        <img class="nsf-search-logo" src="/favicon.ico" alt="" aria-hidden="true" />
        <svg class="nsf-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path 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"/></svg>
        <input type="search"
               id="[ID]"
               class="nsf-search-input"
               placeholder="[PLACEHOLDER]"
               maxlength="50"
               inputmode="text"
               autocomplete="off"
               aria-label="[ARIA-LABEL]"
               data-stats-id="[STATS-ID]"
               oninput="this.value=this.value.replace(/[^\p{L}\s]/gu,'').replace(/\s{2,}/g,' ')" />
        <button type="button"
                id="[ID]-reset"
                class="nsf-search-reset"
                style="display:none;"
                aria-label="Cancella ricerca"
                data-stats-id="[STATS-ID]-reset">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" aria-hidden="true" focusable="false"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
        </button>
    </div>
</div>


<!-- ========================================================================================
     ESEMPIO: Pagina libri
     ========================================================================================
     
<div class="nsf-search" role="search" aria-label="Cerca libri">
    <div class="nsf-search-wrap">
        <img class="nsf-search-logo" src="/favicon.ico" alt="" aria-hidden="true" />
        <svg class="nsf-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path 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"/></svg>
        <input type="search"
               id="libri-ricerca"
               class="nsf-search-input"
               placeholder="Cerca per titolo, autore o argomento..."
               autocomplete="off"
               aria-label="Cerca libri per titolo, autore o argomento"
               data-stats-id="libri-ricerca"
               oninput="this.value=this.value.replace(/[^\p{L}\s]/gu,'').replace(/\s{2,}/g,' ')" />
        <button type="button"
                id="libri-ricerca-reset"
                class="nsf-search-reset"
                style="display:none;"
                aria-label="Cancella ricerca"
                data-stats-id="libri-ricerca-reset">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" aria-hidden="true" focusable="false"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
        </button>
    </div>
</div>

     ======================================================================================== -->


<!-- ========================================================================================
     ESEMPIO: Overlay (rcbs / rcs)
     ========================================================================================
     Negli overlay il wrapper esterno non serve (.nsf-search) perché il layout
     è gestito dal container dell'overlay. Si usa solo .nsf-search-wrap:
     
<div class="nsf-search-wrap">
    <img class="nsf-search-logo" src="/favicon.ico" alt="" aria-hidden="true" />
    <svg class="nsf-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path 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"/></svg>
    <input type="search"
           id="rcbs-input"
           class="nsf-search-input"
           placeholder="Cerca un corso..."
           maxlength="50"
           autocomplete="off"
           oninput="this.value=this.value.replace(/[^\p{L}\s]/gu,'').replace(/\s{2,}/g,' ')" />
    <button type="button"
            id="rcbs-clear"
            class="nsf-search-reset"
            style="display:none;"
            aria-label="Cancella ricerca">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" aria-hidden="true" focusable="false"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
    </button>
</div>

     ======================================================================================== -->

*/