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

:root {
    /* Variabili specifiche per il ticker (componente locale) */
    --hover-alpha: .08;
    --ticker-h: 40px;
    --ticker-bg: #f7f9fc;
    --ticker-border: #e7ebf0;
    --ticker-text: #1f2937;
    --ticker-pill-bg: var(--nsf-white);
    --ticker-pill-text: #1f2937;
    --ticker-gap: 12px; 
    --chev-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23000" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>'); 
}

* {
    box-sizing: border-box; 
}

/* ----------------------------------------------------------------------------------------------------
    fix che andranno aggiunti nel CSS principale
*/   
      
#contenitore_principale {
    position: static !important; top: auto !important; }
        
.contenitore_1200 {
    max-width: 1200px; margin: 0 auto; padding: 0 10px; background-color: var(--nsf-white); box-shadow: 3px 0 5px -2px var(--nsf-black-10), -3px 0 5px -2px var(--nsf-black-10); }
    
/*
    fix che andranno aggiunti nel CSS principale
---------------------------------------------------------------------------------------------------- */        

body.menu-open {
    overflow: hidden; 
}
    
.main-header {
    display: flex; justify-content: space-between; align-items: center; padding: 0 10px; background: var(--nsf-white);
    box-shadow: 0 2px 5px var(--nsf-black-08); min-height: 60px; flex-direction: row; flex-wrap: nowrap; line-height: 1.4; 
    position: sticky; top: 0; z-index: 1000; }

.header-left, .header-right {
    display: flex; align-items: center; }

.header-left {
    gap: 0; }

.hamburger-menu {
    border: none; padding: 0; background: transparent; cursor: pointer; width: 50px;
    height: 50px; display: block; margin-right: 10px; flex: 0 0 auto; border-radius: 50%;
    position: relative; overflow: hidden; }

.hamburger-menu svg {
    width: 100%; height: 100%; padding: 10px; fill: var(--nsf-black-pure); pointer-events: none; }

.hamburger-menu::before {
    content: ""; position: absolute; inset: 0; background: rgba(0,0,0,var(--hover-alpha)); transform: scaleX(0);
    transform-origin: left center; pointer-events: none; }

.hamburger-menu.in::before {
    animation: hb-fill-in .42s cubic-bezier(.2,.9,.25,1.2) forwards; }

.hamburger-menu.out::before {
    animation: hb-drain-out .42s cubic-bezier(.2,.8,.25,1) forwards; }

.hamburger-menu:focus-visible {
    outline: none; box-shadow: 0 0 0 3px var(--nsf-red-40); }

@keyframes hb-fill-in {
    0% { transform-origin: left center; transform: scaleX(0) }
    85% { transform-origin: left center; transform: scaleX(1.06) }
    100% { transform-origin: left center; transform: scaleX(1) }
}

@keyframes hb-drain-out {
    0% { transform-origin: right center; transform: scaleX(1) }
    20% { transform-origin: right center; transform: scaleX(1.02) }
    100% { transform-origin: right center; transform: scaleX(0) }
}

.header-actions {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; 
    flex-direction: row; flex-wrap: nowrap; }

.header-action-text {
    display: flex; align-items: center; height: 35px; padding: 0 4px; font-size: 20px;
    font-weight: 600; color: var(--nsf-phone-green); text-decoration: none; transition: color .2s ease; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; }

.header-action-text:hover, .header-action-text:focus-visible {
    color: var(--nsf-red); outline: none; }


.header-action {
    display: inline-flex; justify-content: center; align-items: center; width: 35px; height: 35px;
    text-decoration: none; 
    background-color: var(--icon-color);
    
    /* Riflesso bagnato leggero (non copre troppo il colore) */
    background-image: linear-gradient(135deg, var(--nsf-white-25) 0%, rgba(255,255,255,0) 50%);
    
    /* Ombra base neutra molto leggera */
    box-shadow: 0 4px 10px var(--nsf-black-05); 
    
    border: none; 
    transition: transform .2s cubic-bezier(.4,1.9,.5,1), box-shadow .2s ease, filter .2s ease;
}

/* GLOW SPECIFICI PER MANTENERE IL COLORE PURO 
   Usiamo ombre colorate invece di nere per non scurire il rosso 
*/
.action--nsf-rosso.header-action {
    box-shadow: 0 4px 10px var(--nsf-red-25); }

.action--blu-brillante.header-action {
    box-shadow: 0 4px 10px var(--nsf-info-25); }

.action--wa.header-action {
    box-shadow: 0 4px 10px var(--nsf-whatsapp-25); }

.header-action svg {
    width: 75%; height: 75%; fill: var(--nsf-white); 
    /* Nessun filtro ombra sull'icona per lasciare il bianco netto e pulito */
    transition: transform .2s cubic-bezier(.4,1.9,.5,1); 
}

.menu-superiore-xp-svg-ricerca {
    cursor:pointer; }

/* Effetto Hover: Aumenta il glow colorato e la brillantezza */
.header-action:hover, .header-action:focus-visible {
    outline: none; transform: translateY(-3px); filter: brightness(1.05); }

.action--nsf-rosso.header-action:hover {
    box-shadow: 0 8px 15px var(--nsf-red-35); }

.action--blu-brillante.header-action:hover {
    box-shadow: 0 8px 15px var(--nsf-info-35); }

.action--wa.header-action:hover {
    box-shadow: 0 8px 15px var(--nsf-whatsapp-35); }

.header-action:hover svg, .header-action:focus-visible svg {
     transform: scale(1.1); }

/* Effetto Click */
.header-action:active {
    transform: translateY(-1px); box-shadow: 0 2px 5px var(--nsf-black-10); filter: brightness(1.0); }
/* --- FINE STILE ICONE --- */

.action--blu-brillante {
    --icon-color: var(--nsf-cta-info); }
    
.action--nsf-rosso {
    --icon-color: var(--nsf-red); }

.action--wa {
    --icon-color: var(--nsf-social-whatsapp); }

.action--wa svg {
    width: 90%; height: 90%; }

.menu-panel {
    position: fixed; top: 0; left: 0; width: 90%; max-width: 320px;
    height: 100%; background: var(--nsf-white); z-index: 1002; overflow-y: auto; transform: translateX(-100%);
    transition: transform .3s ease-in-out; display: flex; flex-direction: column; }

.menu-open .menu-panel {
    transform: translateX(0); }

.menu-panel[aria-hidden="true"] {
    visibility: hidden; }

.menu-panel-logo-container {
    padding: 5px 10px; text-align: center; border-bottom: 1px solid var(--nsf-gray-450); }

.menu-panel-logo-container img {
    max-width: 180px; height: auto; }

.menu-panel ul {
    list-style: none; padding: 0; margin: 0; }

.menu-panel .menu-list {
    flex-grow: 1; overflow-y: auto; }

.menu-panel li {
    border-bottom: 1px solid var(--nsf-gray-300); }

.menu-panel .menu-item-with-icon {
    justify-content: flex-start; gap: 5px; }

.menu-panel li a, .menu-panel li .submenu-trigger {
    display: flex; justify-content: space-between; align-items: center; padding: 15px 15px; text-decoration: none;
    color: var(--nsf-black-pure); font-size: 14px !important; transition: color .2s ease; line-height: 1.4; }

.menu-panel li a:hover, .menu-panel li .submenu-trigger:hover {
    color: var(--nsf-red); }

.menu-item-icon {
    width: 18px; height: 18px; flex-shrink: 0; transform: translateY(-2px); display: block; }

.submenu-trigger {
    display: flex; align-items: center; gap: 1px; cursor: pointer; }

.submenu-trigger::after {
    content: ""; width: 14px; height: 14px; flex: 0 0 14px; background: currentColor;
    -webkit-mask: var(--chev-svg) no-repeat center/contain; mask: var(--chev-svg) no-repeat center/contain; transition: transform .2s ease,opacity .2s ease; opacity: .9; }

.submenu-trigger.open::after {
    transform: rotate(180deg); }

.menu-panel .submenu-trigger.active-parent {
    font-weight: 500; color: var(--nsf-red); background-color: var(--nsf-gray-100); }
    
.menu-panel .menu-list > li > ul .submenu-trigger.active-parent {
    background-color: var(--nsf-gray-200); }    

.menu-panel .menu-list ul {
    display: none; }

.menu-panel .menu-list > li > ul > li > a, .menu-panel .menu-list > li > ul > li > .submenu-trigger {
    padding-left: 25px; color: var(--nsf-gray-900); }

.menu-panel .menu-list > li > ul > li > ul > li > a, .menu-panel .menu-list > li > ul > li > ul > li > .submenu-trigger {
    padding-left: 35px; color: var(--nsf-gray-850); }
          
.menu-panel .menu-list > li > ul > li, .menu-panel .menu-list > li > ul > li > ul > li {
    border-bottom: 1px solid var(--nsf-gray-250) !important; }

.menu-overlay {
    position: fixed; inset: 0; background: var(--nsf-black-50); z-index: 1001; opacity: 0;
    visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }

.menu-open .menu-overlay {
    opacity: 1; visibility: visible; }

.close-menu {
    position: fixed; top: 15px; left: calc(90% + 1px); z-index: 1003; width: 40px;
    height: 40px; background: var(--nsf-white); border-radius: 50%; border: none; display: flex;
    justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 6px var(--nsf-black-30); opacity: 0;
    visibility: hidden; transition: opacity .3s ease-in-out; padding: 0; }

.close-menu svg {
    width: 20px; height: 20px; }

.menu-open .close-menu {
    opacity: 1; visibility: visible; }

.desktop-navigation {
    display: none; font-family: 'Poppins',sans-serif; }

@media (min-width:1200px) {
    .header-left {
        flex-grow: 1; }

    .desktop-navigation {
        display: flex; margin-left: 0; }

    .desktop-navigation ul {
        display: flex; list-style: none; margin: 0; padding: 0; gap: 15px; }

    .desktop-navigation li {
        position: relative; }

    .desktop-navigation .mobile-only-item {
        display: none; }

    .desktop-navigation li a, .desktop-navigation li .submenu-trigger {
        white-space: nowrap; color: var(--nsf-gray-900); text-decoration: none; display: flex; align-items: center; }

    .desktop-navigation > ul > li > a, .desktop-navigation > ul > li > .submenu-trigger {
        font-size: 15px !important; font-weight: 500; padding: 15px 5px; position: relative; }

    .desktop-navigation > ul > li > a:hover, .desktop-navigation > ul > li > .submenu-trigger:hover {
        color: var(--nsf-red); }

    .desktop-navigation > ul > li > a::before, .desktop-navigation > ul > li > .submenu-trigger::before {
        content: ''; position: absolute; width: 100%; height: 1px; bottom: 12px;
        left: 0; background-color: var(--nsf-red); transform: scaleX(0); transform-origin: right center; transition: transform .4s cubic-bezier(.16,1,.3,1); }

    .desktop-navigation > ul > li > a:hover::before, .desktop-navigation > ul > li > .submenu-trigger:hover::before {
        transform: scaleX(1); transform-origin: left center; }

    .desktop-navigation ul ul a, .desktop-navigation ul ul .submenu-trigger {
        font-size: 14px !important; font-weight:400; padding: 10px 20px; border-bottom: 1px solid var(--nsf-gray-250); }

    .desktop-navigation ul ul {
        display: none; position: absolute; top: 100%; left: 0; background: var(--nsf-white);
        border: 1px solid var(--nsf-gray-400); box-shadow: 0 4px 8px var(--nsf-black-08); min-width: 220px; z-index: 1001; padding: 5px 0; }

    .desktop-navigation ul ul ul {
        top: -6px; left: 100%; }

    .desktop-navigation li:hover > ul {
        display: block; }

    .desktop-navigation ul ul li {
        width: 100%; }

    .desktop-navigation .submenu-trigger::after {
        content: ""; width: 12px; height: 12px; flex-basis: 12px; background: currentColor;
        -webkit-mask: var(--chev-svg) no-repeat center/contain; mask: var(--chev-svg) no-repeat center/contain; transition: transform .2s ease; margin-left: 6px; }

    .desktop-navigation ul ul .submenu-trigger::after {
        transform: rotate(-90deg); }

    .desktop-navigation ul ul > li > a, .desktop-navigation ul ul > li > .submenu-trigger {
        position: relative; transition: color .22s ease; }

    .desktop-navigation ul ul > li > a:hover, .desktop-navigation ul ul > li > .submenu-trigger:hover, .desktop-navigation ul ul > li > a:focus-visible, .desktop-navigation ul ul > li > .submenu-trigger:focus-visible {
        color: var(--nsf-red); }

    @media (prefers-reduced-motion:reduce) {
    .desktop-navigation ul ul > li > a, .desktop-navigation ul ul > li > .submenu-trigger {
        transition: none; }
        }
    }

.desktop-navigation, .desktop-navigation a, .desktop-navigation .submenu-trigger, .menu-panel, .menu-panel a, .menu-panel .submenu-trigger {
    font-family: 'Poppins', sans-serif !important; }
    
.menu-panel .menu-list > li > a, .menu-panel .menu-list > li > .submenu-trigger {
    position: relative; }

.menu-panel .menu-list > li > a::before, .menu-panel .menu-list > li > .submenu-trigger::before {
    content: ''; position: absolute; height: 1px; left: 10px; right: 10px;
    bottom: 0px; background-color: var(--nsf-red); transform: scaleX(0); transform-origin: right center; transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none; }

.menu-panel .menu-list > li > a:hover::before, .menu-panel .menu-list > li > .submenu-trigger:hover::before {
    transform: scaleX(1); transform-origin: left center; }

.desktop-navigation ul ul li {
    position: relative; }

.desktop-navigation ul ul li > a, .desktop-navigation ul ul li > .submenu-trigger {
    position: relative; z-index: 1; background-color: transparent; }

.desktop-navigation ul ul li::before {
    content: ''; position: absolute; inset: 0; background-color: var(--nsf-gray-200); border-top-right-radius: 999px;
    border-bottom-right-radius: 999px; transform: scaleX(0); transform-origin: left center; transition: transform 0.4s cubic-bezier(.16, 1, .3, 1), border-radius 0.1s 0.3s ease-out;
    z-index: 0; }

.desktop-navigation ul ul li::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 5px; 
    height: 100%; background-color: var(--nsf-red); transform: scaleY(0); transform-origin: bottom center; transition: transform 0.2s ease-out;
    z-index: 0; }

.desktop-navigation ul ul li:hover::before{
    transform: scaleX(1); border-top-right-radius: 0; border-bottom-right-radius: 0; }

.desktop-navigation ul ul li:hover::after {
    transform: scaleY(1); }
    
.menu-panel .menu-list > li > ul > li > a, .menu-panel .menu-list > li > ul > li > .submenu-trigger, .menu-panel .menu-list > li > ul > li > ul > li > a, .menu-panel .menu-list > li > ul > li > ul > li > .submenu-trigger {
    transition: background-color .2s ease, color .2s ease; }

.menu-panel .menu-list > li > ul > li > a:hover, .menu-panel .menu-list > li > ul > li > .submenu-trigger:hover, .menu-panel .menu-list > li > ul > li > ul > li > a:hover, .menu-panel .menu-list > li > ul > li > ul > li > .submenu-trigger:hover {
    background-color: var(--nsf-gray-50); color: var(--nsf-red); border-left: 5px solid var(--nsf-red); padding-left:20px !important; opacity: 0.95; }

.menu-panel .menu-list > li > ul > li > ul > li > a:hover, .menu-panel .menu-list > li > ul > li > ul > li > .submenu-trigger:hover {
   padding-left:30px !important; }
    

.ticker {
    background: var(--ticker-bg); border-top: 1px solid var(--ticker-border); border-bottom: 1px solid var(--ticker-border); display: flex; overflow: hidden;
    box-shadow: 0 1px 0 var(--nsf-white-80) inset, 0 6px 10px rgba(20, 25, 40, .04); font-size:12px; padding:5px 10px; position: sticky; 
    top: 60px; z-index: 1000; }

@media (min-width: 1200px) {
    .ticker {
        display: none; }
}

.ticker .ticker-viewport {
    display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; scrollbar-width: none; flex: 1 1 auto; }

.ticker .ticker-viewport::-webkit-scrollbar {
    display: none; }

.ticker .ticker-track {
    display: inline-flex; align-items: center; gap: 10px; padding-inline: 15px; will-change: auto; }

.ticker .ticker-track li {
    list-style: none; flex: 0 0 auto; }

.ticker .ticker-label-item {
    font-weight: 500; color: var(--nsf-red); font-size: 13px; white-space: nowrap; margin-right: 5px; }

.ticker .ticker-track a {
    display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 6px;
    font: 600 13px/1 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: .01em; color: var(--ticker-pill-text); color: #002a57; background: var(--ticker-pill-bg); border: 1px solid var(--nsf-gray-400);
    box-shadow: 0 1px 0 rgba(0,0,0,.02); text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; font-size:12px; }

.ticker .ticker-track a:hover, .ticker-track a:focus-visible {
    background: var(--nsf-white); border-color: #dfe3e8; color: var(--nsf-red); transform: translateY(-1px); outline: none; }

.ticker .ticker-gradient {
    position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none;
    transition: opacity .2s ease; }

.ticker .ticker-gradient.left {
    left: 0; background: linear-gradient(90deg,var(--ticker-bg),rgba(255,255,255,0)); }

.ticker .ticker-gradient.right {
    right: 0; background: linear-gradient(270deg,var(--ticker-bg),rgba(255,255,255,0)); width: 80px; opacity: 1; transition: opacity 0.3s ease; }

.ticker .ticker-track, .ticker-track li {
    margin: 0; padding: 0; line-height: 1; }    
        
.menu-open .ticker {
    display: none; }
    


/* ============================================
   OVERLAY RICERCA GLOBALE
   ============================================ */

/* Overlay fullscreen */
.search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: var(--nsf-black-95); z-index: 99999; display: none; align-items: flex-start; justify-content: center;  
    padding: 0 20px 20px 20px; overflow-y: auto; }

.search-overlay-container {
    width: 90%; max-width: 900px; background: var(--nsf-white); padding: 20px; position: relative;
    top:20px; }

.close-overlay {
    position: absolute; top: 15px; right: 15px; background: transparent; border: none; font-size: 32px; cursor: pointer; color: var(--nsf-gray-600);
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
    border-radius: 50%; }

.close-overlay:hover {
    color: var(--nsf-red); }
    
    
@media screen and (max-width: 768px)  {
    #menu_superiore_telefono_text {
        visibility:hidden; display:none; }
}    

#menu_superiore_telefono_text{
  font-weight:700;
  letter-spacing:.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;

  color: var(--nsf-phone-green);

  /* contorno sottilissimo + minimo stacco */
  text-shadow:
    0 0 0.6px var(--nsf-phone-green-dark),
    0 1px 2px var(--nsf-black-12);

  transition: transform .15s ease, text-shadow .15s ease;
}

#menu_superiore_telefono_text:hover,
#menu_superiore_telefono_text:focus-visible{
  transform: translateY(-1px);

  text-shadow:
    0 0 0.8px var(--nsf-phone-green-darker),
    0 2px 4px var(--nsf-black-15);

  outline:none;
}

/* ============================================
   CARRELLO NAVBAR
   ============================================ */
    
    
#menu_superiore_totale_carrello {
    font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 15px; color: var(--nsf-gray-800); 
    transition: all 0.2s ease; cursor: pointer; }
    
#menu_superiore_totale_carrello:hover {
    color: var(--nsf-red); text-shadow: 0 2px 4px rgba(226, 0, 26, 0.15); }
    
    
/* ============================================
   MENU ISCRIZIONE
   ============================================ */

.header-iscrizione {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; padding: 0 10px; }    
    
    
.header-iscrizione {
    box-shadow: none; }    
    
    
.menu-badge-new {
    display: inline-flex; align-items: center; margin-left: 6px;
    padding: 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--nsf-white); background: var(--nsf-red);
    border-radius: 3px; line-height: 1.4; vertical-align: middle; }