/* Contenitore Genitore (Fisica intatta) */
#navbar-container {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;
    display: flex; justify-content: center; padding-top: 25px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. STATO INIZIALE (Desktop - Su sfondo bianco) */
#dynamic-navbar {
    display: flex; align-items: center; justify-content: center;
    width: 450px; height: 60px; padding: 0 20px;
    border-radius: 40px;
    background: rgba(30, 30, 30, 0);
    border: 1px solid rgba(255, 255, 255, 0);
    transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative; 
}

/* 2. STATO DYNAMIC ISLAND (Scorrimento Desktop) */
#navbar-container.scrolled #dynamic-navbar {
    width: 800px;
    background: rgba(40, 40, 40, 0.6);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    justify-content: space-between;
    padding: 0 30px;
}

/* 3. LOGO */
.nav-logo {
    width: 0; opacity: 0; overflow: hidden;
    display: flex; align-items: center;
    transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
#navbar-container.scrolled .nav-logo {
    width: 190px; opacity: 1;
}

/* 4. LA MAGIA DELLA SCRITTURA (Ripristinato il tuo colore) */
.logo-svg { height: 35px; width: 190px; }
.logo-text {
    fill: #2c3e50; /* <-- IL TUO BLU ORIGINALE */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); /* Micro bagliore per renderlo leggibile sul vetro scuro */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s; 
}
#navbar-container.scrolled .logo-text, #dynamic-navbar.menu-open .logo-text {
    clip-path: inset(0 0 0 0); 
}

/* 5. STILE LINK & HOVER (La barra intelligente che risolve il bug) */
.nav-links { display: flex; gap: 15px; align-items: center; }

/* --> QUANDO SEI IN CIMA (Sfondo Bianco) <-- */
.nav-links a {
    position: relative; padding: 8px 16px;
    color: #1d1d1f; /* Testo scuro, leggibile sul bianco */
    text-decoration: none; font-size: 15px; font-weight: 500;
    transition: color 0.3s ease; z-index: 1;
}
.nav-links a:not(.btn-accedi)::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.05); /* Pillola scura per lo sfondo bianco */
    border-radius: 20px; z-index: -1; opacity: 0;
    transform: scale(0.8); 
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.nav-links a:not(.btn-accedi):hover::before { opacity: 1; transform: scale(1); }
.nav-links a:not(.btn-accedi):hover { color: #2c3e50; } /* Diventa del tuo blu al passaggio del mouse! */

/* --> QUANDO SCENDE L'ISOLA (Sfondo Scuro) <-- */
#navbar-container.scrolled .nav-links a, 
#dynamic-navbar.menu-open .nav-links a {
    color: #e0e0e0; /* Torna chiaro per risaltare sul nero */
}
#navbar-container.scrolled .nav-links a:not(.btn-accedi)::before, 
#dynamic-navbar.menu-open .nav-links a:not(.btn-accedi)::before {
    background: rgba(255, 255, 255, 0.1); /* Pillola chiara per lo sfondo scuro */
}
#navbar-container.scrolled .nav-links a:not(.btn-accedi):hover, 
#dynamic-navbar.menu-open .nav-links a:not(.btn-accedi):hover {
    color: #ffffff;
}

/* Bottone Accedi */
.btn-accedi {
    background-color: #2c3e50; color: #ffffff !important;
    padding: 10px 24px; border-radius: 30px; font-weight: bold;
    transition: transform 0.3s ease, background-color 0.3s ease !important;
}
.btn-accedi:hover { background-color: #1a252f; transform: scale(1.05); }

/* Hamburger Menu Base (Risolto bug colore anche qui) */
.hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 10; }
.hamburger span { width: 22px; height: 2px; background-color: #1d1d1f; border-radius: 2px; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); } /* Scuro di base */
#navbar-container.scrolled .hamburger span,
#dynamic-navbar.menu-open .hamburger span { background-color: #e0e0e0; } /* Diventa chiaro quando scende l'isola */

/* =========================================
   RESPONSIVE NAVBAR (SMARTPHONE) - FIX DEFINITIVA
   ========================================= */
@media (max-width: 768px) {
    
    /* Contenitore principale trasparente */
    #dynamic-navbar { 
        width: 100%; 
        border-radius: 0;
        background: transparent; 
        border: none;
        justify-content: space-between; 
        align-items: center; /* Mantiene logo e hamburger allineati dritti */
        padding: 15px 25px; 
    }
    
    /* Quando scendi diventa scuro ed effetto vetro */
    #navbar-container.scrolled #dynamic-navbar { 
        background: rgba(40, 40, 40, 0.9); 
        backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    }
    
    /* =========================================
       1. IL LOGO (Animazione riattivata)
       ========================================= */
    .nav-logo { 
        position: relative;
        z-index: 100; /* Lo tiene sopra il menu scuro quando è aperto */
    }
    .logo-text {
        fill: #ffffff; /* Bianco per risaltare */
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); /* Micro ombra per leggerlo sempre */
        /* Ho rimosso il blocco: ora l'animazione di scrittura viene ereditata dal PC! */
    }
    
    /* =========================================
       2. L'HAMBURGER MENU (Costruzione infallibile)
       ========================================= */
    .hamburger { 
        display: block; 
        position: relative; 
        width: 30px; /* Larghezza fissa */
        height: 20px; /* Altezza fissa */
        z-index: 100; /* Sopra il menu scuro */
        cursor: pointer;
    }
    
    .hamburger span { 
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        left: 0;
        transition: all 0.3s ease-in-out;
    }
    
    /* Posizione delle 3 linee a riposo (Hamburger) */
    .hamburger span:nth-child(1) { top: 0px; }
    .hamburger span:nth-child(2) { top: 9px; } /* Esattamente al centro */
    .hamburger span:nth-child(3) { top: 18px; } /* Esattamente in basso */

    /* =========================================
       3. IL MENU A TENDINA (Schermo intero)
       ========================================= */
    .nav-links {
        position: fixed; /* Usa fixed per coprire lo schermo senza creare bug */
        top: 0; left: 0; 
        width: 100%; height: 100vh;
        background: rgba(20, 20, 20, 0.98); /* Sfondo quasi nero */
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        gap: 30px; /* Spazio tra le scritte Home, Servizi, ecc. */
        
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: all 0.4s ease;
        z-index: 90; /* Il menu sta sotto il Logo e sotto la X */
    }

    /* =========================================
       4. STATO APERTO (Appare il menu e si forma la X)
       ========================================= */
    #dynamic-navbar.menu-open .nav-links {
        opacity: 1; visibility: visible; pointer-events: all;
    }
    
    /* La riga 1 scende al centro e ruota */
    #dynamic-navbar.menu-open .hamburger span:nth-child(1) { 
        top: 9px; 
        transform: rotate(45deg); 
    }
    /* La riga 2 (quella in mezzo) scompare */
    #dynamic-navbar.menu-open .hamburger span:nth-child(2) { 
        opacity: 0; 
    }
    /* La riga 3 sale al centro e ruota al contrario */
    #dynamic-navbar.menu-open .hamburger span:nth-child(3) { 
        top: 9px; 
        transform: rotate(-45deg); 
    }
}

/* ==========================================
   STILI BANNER COOKIE (Desktop & Mobile)
========================================== */

/* Overlay scuro: visibile solo su Mobile */
.cookie-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Stile Base del Banner */
.cookie-banner {
    display: none;
    position: fixed;
    background-color: #ffffff;
    color: #111111;
    z-index: 9999;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    /* Stato iniziale per l'animazione di entrata dal basso */
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

/* Classi attivate dal JS per l'animazione */
.cookie-banner.show {
    opacity: 1;
    transform: translateY(0);
}
.cookie-overlay.show {
    opacity: 1;
}
.cookie-banner.hide {
    transform: translateY(100%);
    opacity: 0;
}

/* Tipografia e Layout interno */
.cookie-content { padding: 25px; }
.cookie-title { margin: 0 0 10px 0; font-size: 18px; font-weight: 800; text-transform: uppercase;}
.cookie-text { margin: 0 0 25px 0; font-size: 14px; line-height: 1.6; color: #444444; }
.cookie-actions { display: flex; gap: 15px; justify-content: stretch; }

/* ==========================================
   BOTTONI SQUADRATI (Senza bordi arrotondati)
========================================== */
.btn-cookie {
    flex: 1;
    padding: 14px 15px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0; /* Angoli perfettamente squadrati */
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-cookie-outline {
    background: transparent;
    border: 2px solid #111111;
    color: #111111;
}
.btn-cookie-outline:hover { background: #f0f0f0; }

.btn-cookie-solid {
    background: #000000; /* Nero profondo */
    border: 2px solid #000000;
    color: #ffffff;
}
.btn-cookie-solid:hover { background: #333333; }

/* ==========================================
   REGOLE MOBILE (Blocca tutto)
========================================== */
@media (max-width: 767px) {
    .cookie-banner { bottom: 0; left: 0; width: 100%; border-top-left-radius: 12px; border-top-right-radius: 12px; }
    .cookie-desktop-text { display: none; } /* Su mobile togliamo le scritte in più per non ingombrare */
    body.cookie-locked { overflow: hidden; } /* Questa classe blocca lo scroll della pagina */
}

/* ==========================================
   REGOLE DESKTOP PC (In basso a sx, non blocca)
========================================== */
@media (min-width: 768px) {
    .cookie-overlay { display: none !important; } /* Niente overlay nero su PC */
    .cookie-banner {
        bottom: 25px;
        left: 25px;
        width: 450px;
        border: 1px solid #eeeeee;
        border-radius: 0; /* Box squadrato come i bottoni */
    }
}