/* Importazione del font da Google Fonts */
/* La riga qui sotto va nel tuo file HTML */
/* <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet"> */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-image: url('images/background.jpg'); /* Assicurati che il percorso sia corretto */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000;
}

/* --- Stili della Navigazione --- */
.navbar {
    /* MODIFICA: Aumento opacità per migliore leggibilità dei link bianchi (da 0.2 a 0.8) */
    background-color: rgba(0, 0, 0, 0.8); 
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); /* Effetto neon per la navbar */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar:hover {
    /* MODIFICA: Aumento opacità in hover (da 0.3 a 0.9) */
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.7); /* Bagliore più forte al passaggio del mouse */
}

.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    max-width: 70px;
    height: auto;
    padding: 5px 0;
}

/* AGGIORNATO: RINOMINATO da .navbar ul a .nav-links per compatibilità JS */
.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* AGGIORNATO: RINOMINATO da .navbar li a .nav-links li */
.nav-links li {
    position: relative;
}

/* AGGIORNATO: RINOMINATO da .navbar a a .nav-links a */
.nav-links a {
    display: block;
    color: #fff; /* Reso BIANCO per risaltare sul background scuro */
    /* MODIFICA: Ombra scura per nitidezza dei link normali */
    text-shadow: 0 0 4px #000, 0 0 1px #000; 
    text-align: center;
    padding: 20px 25px;
    text-decoration: none;
    font-weight: 700; /* Grassetto */
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

/* AGGIORNATO: RINOMINATO .navbar a:hover a .nav-links a:hover */
.nav-links a:hover {
    color: #007bff;
    /* MODIFICA: Ombra nera forte per incorniciare il testo neon/blu e migliorare la leggibilità */
    text-shadow: 0 0 5px rgba(0, 255, 255, 1), 1px 1px 0px #000; 
}

/* AGGIORNATO: RINOMINATO .navbar a.active a .nav-links a.active */
.nav-links a.active {
    color: #007bff;
    /* MODIFICA: Ombra nera forte per incorniciare il testo neon/blu e migliorare la leggibilità */
    text-shadow: 0 0 5px rgba(0, 255, 255, 1), 1px 1px 0px #000;
}

/* Stili del menu a discesa (dropdown) */
.dropdown {
    position: static;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    /* MODIFICA: Rendo quasi opaco (0.95) e tolgo il blur per leggibilità dei link scuri */
    background-color: rgba(255, 255, 255, 0.95); 
    backdrop-filter: none; /* Rimosso per maggiore nitidezza */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Ombra più scura */
    z-index: 1000;
    text-align: center;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content-inner {
    display: inline-block;
    background-color: transparent;
    box-shadow: none;
    border-top: 2px solid #007bff;
}

.dropdown-content a {
    color: #333; /* Colore scuro per alto contrasto */
    padding: 15px 30px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid #ddd; /* Bordo meno trasparente */
    min-width: 150px;
    /* MODIFICA: Rimuovo qualsiasi text-shadow dai link del dropdown per pulizia */
    text-shadow: none; 
}

.dropdown-content a:hover {
    background-color: rgba(220, 220, 220, 0.8); /* Sfondo in hover più scuro */
    color: #007bff;
    text-shadow: none;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

/* --- Stili per il bottone Hamburger (Nascondi su Desktop) --- */
.menu-toggle {
    display: none; /* Nascosto di default sul desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-right: 15px;
    z-index: 1001; 
}

.icon-bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #00ffff; /* Colore neon */
    transition: all 0.3s ease-in-out;
}

/* --- Stili del Contenuto Principale (Generale) --- */
.content {
    padding: 40px;
    padding-top: 100px;
    padding-bottom: 40px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.2); /* Trasparenza media */
    backdrop-filter: blur(5px);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); /* Effetto neon per il contenitore */
    z-index: 1;
    position: relative;
}

/* STILE RIPRISTINATO per gli H1 generali (non il motto) */
h1 {
    color: #fff; /* Reso BIANCO */
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.9); /* Effetto neon sull'intestazione */
    margin-bottom: 20px;
    font-size: 2.2em;
    font-weight: 700; /* Reso GRASSETTO */
}

.subtitle {
    color: #f0f0f0; /* Grigio chiaro per il sottotitolo */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); /* Effetto luminoso */
    font-size: 1.2em;
    margin-bottom: 40px;
}

.content p {
    text-align: justify;
    line-height: 1.7;
    font-size: 1.1em;
    margin-bottom: 20px;
    
    /* STILI CHIAVE PER LA LEGGIBILITÀ DEL TESTO DEI PARAGRAFI */
    color: #fff; /* Testo BIANCO per contrastare meglio il background scuro */
    font-weight: 600; /* Reso leggermente GRASSETTO */
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), /* Ombra scura per nitidezza (effetto contorno) */
                 0 0 1px rgba(0, 255, 255, 0.2); /* Bagliore leggero per l'effetto neon */
}


/* --- Stili per la Home Page (Novità!) --- */

/* Hero Section (Slogan) */
.hero-section {
    background-image: url('images/background.jpg'); 
    background-size: cover;
    background-position: center;
    height: 60vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Overlay scuro */
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    padding: 20px;
    max-width: 800px;
}

/* CORREZIONE: Ho cambiato h1 in h2 per lo stile del tuo motto (che è in .hero-content) */
.hero-content h2 { 
    font-size: 3em;
    color: #00ffff; /* Neon Azzurro */
    text-transform: uppercase;
    /* Effetto Neon Molto Forte */
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.7); 
    margin-bottom: 10px;
}

.hero-content p {
    font-size: 1.2em;
    color: #f0f0f0;
    margin-bottom: 30px;
    font-weight: 500;
}

.cta-button-hero {
    display: inline-block;
    padding: 15px 30px;
    background-color: transparent;
    border: 3px solid #ff00ff; /* Bordo Neon Fucsia */
    color: #ff00ff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    border-radius: 5px;
    box-shadow: 0 0 10px #ff00ff;
    transition: all 0.3s ease;
}

.cta-button-hero:hover {
    background-color: #ff00ff;
    color: #000;
    box-shadow: 0 0 20px #ff00ff;
}

/* Griglia Punti di Forza (3 Box) */
.main-content {
    /* Rimuoviamo il background-color qui per avere uno sfondo pulito sotto la Hero */
    background-color: transparent !important; 
    box-shadow: none !important;
    padding-top: 50px; 
}

.key-features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    margin: 0 auto 50px auto;
    max-width: 1200px;
}

.feature-box {
    flex: 1 1 300px;
    text-align: center;
    padding: 30px;
    transition: transform 0.3s ease;
    text-decoration: none;
    /* Riquadro neon fucsia */
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.7); 
    border: 1px solid rgba(255, 0, 255, 0.5);
    /* MODIFICA: Reso più scuro (0.95) per maggiore leggibilità */
    background-color: rgba(0, 0, 0, 0.95);
    border-radius: 8px; /* Assicuriamo i bordi arrotondati */
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(255, 0, 255, 1);
}

.feature-box h3 {
    color: #00ffff;
    /* MODIFICA: Aggiunto ombra nera netta per leggibilità sul box scuro */
    text-shadow: 0 0 5px #00ffff, 1px 1px 0px #000;
    margin-bottom: 15px;
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}

/* Effetto Hover Titolo H3 */
.feature-box:hover h3 {
    color: #ff00ff; /* Cambia colore */
    /* MODIFICA: Mantenuta l'ombra nera per la leggibilità */
    text-shadow: 0 0 8px #ff00ff, 1px 1px 0px #000; 
}


.feature-box p {
    color: #f0f0f0;
    font-size: 0.95em;
    text-align: center; /* Testo centrato nel box */
    text-shadow: none; /* Rimuove l'ombra del testo generale */
}


/* Riquadri Secondari (Introduzione & News) */
.secondary-features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    margin: 50px auto;
    max-width: 1200px;
}

.product-intro-box,
.news-box {
    flex: 1 1 45%; 
    min-width: 300px;
    padding: 30px;
    /* MODIFICA: Reso più scuro (0.9) per maggiore leggibilità */
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: left;
    /* Utilizziamo l'effetto neon azzurro per questi box */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.95);
    /* Aggiunta transizione per il box secondary */
    transition: box-shadow 0.3s ease;
}

.product-intro-box:hover,
.news-box:hover {
    box-shadow: 0 0 25px rgba(0, 255, 255, 1.2);
}

.product-intro-box h2,
.news-box h2 {
    color: #00ffff;
    /* MODIFICA: Aggiunto ombra nera netta per leggibilità sul box scuro */
    text-shadow: 0 0 8px #00ffff, 1px 1px 0px #000;
    margin-bottom: 20px;
    text-align: center;
    /* Aggiunta transizione per l'hover del testo */
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}

/* Effetto Hover Titolo H2 */
.product-intro-box:hover h2,
.news-box:hover h2 {
    color: #ff00ff; /* Cambia colore */
    /* MODIFICA: Mantenuta l'ombra nera per la leggibilità */
    text-shadow: 0 0 12px #ff00ff, 1px 1px 0px #000; 
}

.product-intro-box p {
    color: #f0f0f0;
    line-height: 1.6;
    margin-bottom: 15px;
    text-shadow: none; /* Rimuove l'ombra del testo generale */
    font-weight: normal; /* Rimuove il grassetto forzato del .content p */
}

/* Stili specifici per il box News */
.news-list {
    margin-bottom: 20px;
}

.news-item {
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    font-size: 0.95em;
    color: #f0f0f0;
}

.news-item p {
    margin: 0;
    text-align: left;
    text-shadow: none;
}

.news-date {
    color: #ff00ff;
    font-weight: 700;
}

/* Stile per i Pulsanti CTA secondari */
.secondary-cta-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    background-color: transparent;
    border: 2px solid #00ffff;
    color: #00ffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.secondary-cta-button:hover {
    background-color: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 10px #00ffff;
}


/* --- Stili per la pagina "Storia" --- */
.about-section {
    overflow: auto;
    margin-bottom: 20px;
}

.profile-image {
    width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    float: left;
    margin-right: 25px;
    margin-bottom: 15px;
}

/* --- Stili per il Footer --- */
footer {
    background-color: rgba(255, 255, 255, 0.2); /* Trasparenza media */
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); /* Effetto neon per il footer */
    color: #f0f0f0; /* Reso più visibile */
    text-shadow: 0 0 4px #000; /* Ombra scura per leggibilità */
    padding: 40px 20px;
    font-size: 14px;
    border-top: 1px solid rgba(221, 221, 221, 0.2);
    border-radius: 8px;
    margin-top: 20px;
    z-index: 1;
    position: relative;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    max-width: 250px;
    height: auto;
}

.footer-right-side {
    text-align: right; /* Mantiene allineamento a destra sul desktop */
}

.contact-box {
    border: 1px solid rgba(221, 221, 221, 0.2);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); /* Effetto neon anche qui */
}

.contact-box p {
    margin-bottom: 5px;
    color: #fff;
    text-shadow: 0 0 4px #000;
}

.contact-box p:last-child {
    margin-bottom: 0;
}

.copyright {
    text-align: right;
    font-size: 13px;
    margin-top: 10px;
    color: #fff;
    text-shadow: 0 0 4px #000;
}

/* --- Stili per la pagina "Dove Siamo" --- */
.location-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 40px;
}

.map-full-width {
    width: 100%;
    margin-bottom: 30px;
}

.map-full-width iframe {
    width: 100%;
    height: 500px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.company-info-wrapper {
    width: 100%;
    max-width: 600px;
    margin-top: 30px;
    text-align: left; 
    padding-left: 20px; 
}

.address-details, 
.contact-details, 
.business-hours {
    margin-bottom: 30px;
}

.company-info-wrapper h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: #00ffff;
    text-shadow: 0 0 8px #00ffff, 1px 1px 0px #000;
    border-bottom: 2px solid rgba(0, 255, 255, 0.5);
    padding-bottom: 5px;
}

.company-info-wrapper p,
.company-info-wrapper li {
    font-size: 1em;
    line-height: 1.6;
    color: #fff;
    text-shadow: 0 0 4px #000;
}

.company-info-wrapper ul {
    list-style-type: none;
    padding: 0;
}

/* --- Stili per la pagina dei giochi omologati (generale) --- */
.page-title {
    text-align: center;
    font-size: 2.5em;
    color: #fff; /* Reso bianco */
    /* AUMENTATO MARGINE SUPERIORE PER NON NASCONDERSI DIETRO LA NAVBAR */
    margin: 120px 0 40px; 
    font-weight: 700;
    
    /* EFFETTO OMBREGGIATURA 3D MAGGIORE (MANTENUTO) */
    text-shadow: 
        /* Ombra scura e molto definita */
        3px 3px 0px rgba(0, 0, 0, 0.9), /* Effetto 'ombra portata' netto */
        6px 6px 1px rgba(0, 0, 0, 0.5), /* Profondità maggiore */
        9px 9px 2px rgba(0, 0, 0, 0.3); /* Leggera sfocatura/distacco finale */
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.game-item {
    background-color: rgba(255, 255, 255, 0.3); /* Sfondo semitrasparente per le schede */
    backdrop-filter: blur(5px);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); /* Effetto neon */
    transition: transform 0.3s ease;
    cursor: pointer;
}

.game-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.7); /* Bagliore più forte al passaggio del mouse */
}

.game-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Stili per la modale (pop-up dell'immagine) */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

/* --- Stili per la pagina Assistenza --- */
.assistance-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
}

.assistance-section .left-column,
.assistance-section .right-column {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.service-message {
    font-size: 1.2em;
    font-style: italic;
    color: #f0f0f0;
    text-shadow: 0 0 4px #000;
    margin-bottom: 30px;
}

.repair-module-preview {
    text-align: center;
}

.pdf-preview {
    width: 100%;
    min-height: 400px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin-bottom: 20px;
}

.button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
}

.highlight-box {
    background-color: rgba(255, 255, 255, 0.3); /* Sfondo semitrasparente */
    backdrop-filter: blur(5px);
    border: 2px solid rgba(0, 255, 255, 0.5); /* Bordo con colore neon */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); /* Effetto neon */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.highlight-box p {
    font-size: 1.1em;
    line-height: 1.5;
    margin: 0;
    color: #fff;
    text-shadow: 0 0 4px #000;
}

.no-preventive {
    font-weight: 700;
    color: #dc3545;
    text-align: center;
    margin-top: 10px;
    text-shadow: 0 0 5px #000;
}

/* AGGIORNAMENTO: Stile per evidenziare il costo delle riparazioni */
.important-notice {
    background-color: rgba(255, 69, 0, 0.4); /* Arancio/Rosso brillante trasparente */
    backdrop-filter: blur(5px);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 50px;
    text-align: center;
    border: 2px solid #ff4500;
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.8); /* Forte bagliore rosso/arancio */
    font-weight: 700;
}

.important-notice .important-title {
    font-size: 1.8em;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 5px #000, 0 0 8px rgba(255, 255, 255, 1); /* Sfondo scuro e neon bianco */
    margin-bottom: 10px;
}

.notice-text {
    font-size: 1.1em;
    line-height: 1.6;
    color: #fff;
    text-shadow: 0 0 4px #000;
}
/* FINE AGGIORNAMENTO COSTO RIPARAZIONI */

.contact-info {
    text-align: left;
    margin-top: 40px;
}

.contact-info h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 0 0 4px #000;
}

.contact-info p {
    margin-bottom: 5px;
    text-align: left;
    color: #fff;
    text-shadow: 0 0 4px #000;
}

.contact-details-box p {
    text-align: center; /* Centra il testo nel box di dettaglio contatti */
}

/* --- Stili per la Pagina Comunicazioni --- */

.communications-container {
    max-width: 800px; 
    margin: 40px auto; 
    padding: 0 20px;
}

.communication-item {
    margin-bottom: 40px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(3px);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.7); 
    transition: all 0.3s ease;
    text-align: center;
}

.communication-item:hover {
    box-shadow: 0 0 25px rgba(255, 0, 255, 1); 
    transform: translateY(-2px);
}

.communication-image {
    max-width: 100%; 
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.communication-date {
    font-size: 0.9em;
    color: #f0f0f0;
    text-shadow: 0 0 3px #000;
}

/* --- Estensioni per la Comunicazione PDF (Nuovi Stili) --- */

.communication-item.communication-pdf {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.7); 
    border: 1px solid rgba(0, 255, 255, 0.5);
    /* Assicurati che il background del blocco sia scuro */
    background-color: rgba(0, 0, 0, 0.5);
}

.communication-item.communication-pdf:hover {
    box-shadow: 0 0 25px rgba(0, 255, 255, 1);
    transform: translateY(-2px);
}

.communication-item h2 {
    color: #00ffff;
    /* Ombra neon azzurra sul testo del titolo */
    text-shadow: 0 0 8px #00ffff, 1px 1px 0px #000;
    font-size: 1.5em;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
}

.communication-item p {
    text-align: center;
    color: #f0f0f0;
    font-weight: 500;
    text-shadow: 0 0 4px #000;
}

.pdf-preview-wrapper {
    margin: 20px 0;
    border: 2px solid #ff00ff; /* Bordo Fucsia Neon per l'anteprima */
    box-shadow: 0 0 10px #ff00ff;
    border-radius: 4px;
    overflow: hidden;
    background-color: #333;
}

.pdf-preview-wrapper iframe {
    width: 100%;
    height: 800px; 
    display: block;
}

.download-link {
    margin: 20px 0;
    text-align: center;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    
    /* Stile Principale CTA: Sfondo Neon Azzurro con testo scuro */
    background-color: #00ffff; 
    color: #000;
    
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    border-radius: 5px;
    border: none;
    cursor: pointer;
    
    /* Forte Ombra Neon */
    box-shadow: 0 0 10px #00ffff, 0 0 20px rgba(0, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.cta-button:hover {
    /* Effetto Hover: Cambia colore a Neon Fucsia */
    background-color: #ff00ff;
    color: #fff;
    box-shadow: 0 0 15px #ff00ff, 0 0 25px rgba(255, 0, 255, 0.7);
    transform: translateY(-2px);
}

/* Regolazione per Mobile (sezione cta-button) */
@media screen and (max-width: 768px) {
    .pdf-preview-wrapper iframe {
        height: 350px; 
    }
    .cta-button {
        width: 90%; /* Rende il pulsante più grande sul mobile */
        padding: 12px 20px;
        font-size: 0.9em;
    }
}

/* Regolazione per Mobile */
@media screen and (max-width: 768px) {
    .pdf-preview-wrapper iframe {
        /* Altezza ridotta per il mobile */
        height: 350px; 
    }
}

/* --- Stili per la Pagina Contatti --- */

.contact-sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

/* Forziamo la sezione Ordini a centrare e occupare una larghezza ragionevole */
.contact-section.full-width-order {
    flex: 0 0 100%;
    /* LARGHEZZA AGGIORNATA */
    max-width: 700px; 
    margin: 0 auto;
}

.contact-section h2 {
    color: #fff;
    font-size: 1.5em;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.9);
    margin-bottom: 20px;
}

/* PADDING AGGIORNATO */
.highlight-box.order-box {
    padding: 30px 40px; 
}

.highlight-box.order-box p {
    margin-bottom: 15px; 
    font-weight: 600;
    text-align: center;
    color: #f0f0f0;
    line-height: 1.6; 
}

/* Leggibilità link/telefono */
.highlight-box .email-link,
.highlight-box a[href^="tel:"] {
    color: #fff; 
    font-weight: 700;
    text-decoration: underline; 
    font-size: 1.1em;
    text-shadow: none; 
    transition: color 0.3s ease;
}

.email-link:hover,
.highlight-box a[href^="tel:"]:hover {
    color: #00ffff;
    text-decoration: underline;
}

/* Stile per la riga orizzontale */
.contact-divider {
    border: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); 
    margin: 25px auto;
    width: 80%;
}

/* --- Stili del Banner Cookie (GDPR) --- */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9); 
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); 
    color: #fff;
    padding: 15px 30px;
    z-index: 9999; 
    transition: transform 0.5s ease-in-out;
}

.cookie-banner-hidden {
    transform: translateY(100%); 
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

#cookie-banner h3 {
    margin: 0 20px 0 0;
    font-size: 1.2em;
    color: #00ffff; 
    text-shadow: 0 0 5px #00ffff;
}

#cookie-banner p {
    flex-grow: 1;
    margin: 10px 20px 10px 0;
    font-size: 0.9em;
    line-height: 1.4;
    text-align: left;
    color: #f0f0f0;
    text-shadow: 0 0 2px #000; 
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-button {
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.accept-button {
    background-color: #007bff; 
    color: white;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.8);
}

.accept-button:hover {
    background-color: #0056b3;
}

.manage-button {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.manage-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #00ffff;
    color: #00ffff;
}

/* --- Stili Pagina in Costruzione/Manutenzione --- */

.construction-box {
    max-width: 650px;
    margin: 80px auto 120px auto;
    padding: 50px 30px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    
    /* Effetto Neon di Notifica - Usiamo Fucsia/Rosso per l'urgenza */
    border: 3px solid #ff00ff; 
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.9);
}

.construction-box .subtitle {
    color: #f0f0f0;
    text-shadow: 0 0 5px #f0f0f0;
    font-style: normal;
    font-size: 1.2em;
    margin-bottom: 25px;
}

.construction-box p {
    color: #fff;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: center; /* Centriamo anche i paragrafi */
    text-shadow: none; /* Rimuoviamo l'ombra scura generale del .content p */
    font-weight: normal; /* Rimuoviamo il grassetto generale del .content p */
}

.cta-button-contact {
    display: inline-block;
    padding: 12px 25px;
    background-color: transparent;
    border: 2px solid #00ffff; /* Bottone in neon azzurro */
    color: #00ffff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    box-shadow: 0 0 10px #00ffff;
    transition: all 0.3s ease;
}

.cta-button-contact:hover {
    background-color: rgba(0, 255, 255, 0.15);
    box-shadow: 0 0 20px #00ffff;
}


/* ---------------------------------------------------------------------- */
/* --- SEZIONE MOBILE/RESPONSIVE: MEDIA QUERIES AGGIORNATE --- */
/* ---------------------------------------------------------------------- */

/* Media Query per Schermi Tablet (max 992px) */
@media screen and (max-width: 992px) {
    
    /* Le grid flessibili devono scendere a colonna prima */
    .key-features-grid,
    .secondary-features-grid {
        flex-direction: column;
        gap: 20px;
    }
    .feature-box,
    .product-intro-box,
    .news-box {
        flex: 1 1 100%;
        min-width: auto;
    }

    /* Adattamento Sezione Dove Siamo */
    .company-info-wrapper {
        padding-left: 0;
        text-align: center;
    }
}

/* Media Query per Schermi Smartphone (max 768px) - IL VERO RESPONSIVE */
@media screen and (max-width: 768px) {
    
    /* MODIFICA CHIAVE PER RISOLVERE IL BACKGROUND SU MOBILE */
    body {
        background-attachment: scroll !important; 
        /* Rimuove "fixed" su mobile, risolvendo problemi di rendering e zoom */
    }

    .navbar-container {
        /* Permette al logo e all'hamburger di stare affiancati */
        flex-direction: row; 
        justify-content: space-between;
        align-items: center; /* Centra verticalmente logo e hamburger */
    }

    /* 1. Rimuovi lo sfondo blur della navbar per velocità sul mobile */
    .navbar {
        backdrop-filter: none;
        background-color: rgba(0, 0, 0, 1); /* Sfondo nero solido per consistenza */
    }

    /* 2. Mostra il bottone Hamburger */
    .menu-toggle {
        display: block; 
    }

    /* 3. Nascondi i link della navbar di default e preparali per il mobile */
    .nav-links {
        flex-direction: column; /* I link vanno uno sotto l'altro */
        width: 100%;
        display: none; /* Nascondi la lista di default */
        position: absolute;
        top: 70px; /* Sotto il logo/hamburger */
        left: 0;
        background-color: rgba(0, 0, 0, 0.95);
        box-shadow: 0 10px 10px rgba(0, 255, 255, 0.3);
        border-top: 1px solid #007bff;
        padding-bottom: 10px;
    }
    
    /* 4. Mostra la lista quando il bottone hamburger è attivo (gestito da JS) */
    .nav-links.active {
        display: flex;
    }

    /* 5. Stili dei singoli link nel menu mobile */
    .nav-links li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-links li:last-child {
        border-bottom: none;
    }
    
    .nav-links a {
        padding: 12px 15px;
        text-align: left;
    }
    
    /* 6. Gestione del Dropdown nel mobile (lo rendiamo statico e non più una tendina orizzontale) */
    .dropdown-content {
        position: static; /* Non più assoluto */
        box-shadow: none;
        border-top: none;
        width: 100%;
        background-color: rgba(22, 22, 22, 1); /* Sfondo più scuro per i sottolink */
        padding: 0;
        border-radius: 0;
    }
    
    .dropdown-content-inner {
        display: block; /* Rendi i link interni un blocco unico */
        width: 100%;
    }
    
    .dropdown-content a {
        padding-left: 30px; /* Indentazione per i link del menu a tendina */
        color: #007bff;
        text-align: left;
        font-size: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* 7. Altri aggiustamenti del layout */
    .content {
        padding-top: 80px; /* Spazio per la navbar mobile */
        padding: 20px;
    }
    
    h1 {
        font-size: 1.8em;
    }

    .page-title {
        margin: 100px 0 30px; /* Ridotto margine in alto */
        font-size: 2em;
    }
    
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-logo {
        max-width: 200px;
        margin-bottom: 20px;
    }

    .footer-right-side {
        text-align: center;
        width: 100%;
    }

    .contact-box {
        text-align: center;
        width: 100%;
    }

    .copyright {
        text-align: center;
        margin-top: 20px;
    }
    
    .profile-image {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    
    .assistance-section {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .assistance-section .left-column,
    .assistance-section .right-column {
        min-width: unset;
        width: 100%;
    }

    .pdf-preview {
        min-height: 250px;
    }

    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
    }

    #cookie-banner h3, #cookie-banner p {
        margin: 5px 0;
    }

    .cookie-buttons {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }
}