/* Stili di base */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url('im/sfondo.gif');
    background-color: #FFCC00; /* Colore di fallback */
    color: #000;
    /* RIMOSSO: Proprietà scrollbar-*-color obsolete */
}

/* Container principale per centrare il contenuto e limitarne la larghezza */
.container {
    max-width: 950px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
    text-align: center; /* Per centrare i blocchi interni */
}

/* Stili per i link generici (usati principalmente nel footer) */
a {
    color: #ffffff; /* Colore originale dei link definito nello stile iniziale (menu footer) */
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #FFFF00;
    text-decoration: underline;
}

/* Regola generale per le celle di tabella (non più usata per il layout, ma mantenuta se ci sono tabelle di dati) */
td {
    font-size: 12px;
}

/* Stili per i titoli e il logo */
.logo-title {
    margin-bottom: 0;
}

.logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Nuova classe per l'interlinea singola */
.single-line-divider {
    height: 1.2em; /* Altezza di una singola riga di testo approssimativa */
    margin: 0;
    padding: 0;
}

.main-title {
    font-family: Verdana, sans-serif; /* MODIFICATO: font-family ora gestita solo via CSS */
    font-size: 2.2em; /* Equivalente a 22pt circa */
    color: #000;
    margin: 10px 0;
    text-align: center;
    font-weight: normal; /* Aggiunto per neutralizzare l'h1 */
}

.main-title .highlight {
    color: #EC134A; /* Colore originale per "Assistenza" e "MacBook" */
}

/* Contatti e numeri di telefono */
.contact-info {
    text-align: center;
    margin-bottom: 20px;
}

/* Stili per i link telefonici e WhatsApp */
.phone-link,
.whatsapp-link {
    color: #3033A4; /* Blu scuro come da originale */
    font-size: 2em; /* Leggermente più piccolo: da 2.2em a 2em */
    font-family: Arial, sans-serif;
    display: inline-block; /* Importante: Trasforma il link in un blocco in linea */
    margin-top: 5px;
    text-decoration: underline;
    transition: color 0.2s ease; /* Transizione fluida per i cambi di colore */
    padding: 0 2px; /* Un piccolo padding per facilitare il click senza espandere troppo */
}

.phone-link:hover,
.whatsapp-link:hover {
    color: #5A708C; /* Blu più chiaro al passaggio del mouse */
    text-decoration: underline;
}

.phone-link:active,
.whatsapp-link:active {
    color: #6B8E23; /* Verde spento al click (OliveDrab) */
    text-decoration: underline;
}

.whatsapp-icon {
    vertical-align: middle;
    margin-right: 5px;
    width: 35px;
    height: 33px;
    /* Assicurati che l'icona non sia cliccabile come parte del link, solo il testo */
    pointer-events: none;
}

/* Sezione intro Apple MacBook/iMac */
.intro-box {
    background-color: #5A708C;
    padding: 20px 10px;
    margin: 20px 0;
    text-align: center;
}

.intro-text {
    font-family: Verdana, sans-serif;
    color: #FFFFFF;
    font-size: 2.5em; /* Rimpicciolito da 3.5em a 2.5em */
    line-height: 1.2; /* Mantenuto per coerenza, se ci fossero problemi si può provare 1 */
    margin: 0;
    font-style: italic; /* Dal codice originale */
}

.intro-text .highlight-yellow {
    color: #EEC034;
    font-size: 1em; /* Impostato a 1em per ereditare la dimensione del parent (2.5em) */
    display: block;
    margin-top: 5px; /* Ridotto il margine superiore */
    font-weight: bold;
}

/* Ho aggiunto la seguente regola per RICAMBI ORIGINALI, dato che non ha una classe specifica */
.intro-text u {
    font-size: 1em; /* Fa in modo che "RICAMBI ORIGINALI" abbia la stessa dimensione del testo circostante */
    font-weight: bold;
}


/* Sezione contenuto principale */
.content-section {
    background-color: #FFFFFF;
    padding: 20px;
    text-align: justify; /* Testo giustificato */
    margin-top: 20px;
    word-wrap: break-word;
}

.lead-text {
    font-family: Arial, sans-serif;
    font-size: 2em; /* Rimpicciolito di pochissimo su desktop (prima era 2.2em) */
    text-align: justify; /* Dal codice originale */
    margin-bottom: 20px;
}

.content-title {
    font-family: Arial, sans-serif;
    font-size: 2.5em; /* Circa 36pt */
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.3;
}

.content-title .green-text {
    color: #008000;
    font-style: italic; /* Dal codice originale */
    font-weight: normal;
}

.content-title .blue-text {
    color: #000080;
    font-size: 1.1em; /* Circa 33pt relativo al 36pt */
    font-weight: normal;
}

/* Stili per le immagini affiancate */
.image-gallery {
    display: flex; /* Abilita Flexbox */
    flex-wrap: wrap; /* Permette alle immagini di andare a capo se non c'è spazio */
    justify-content: center; /* Centra le immagini orizzontalmente */
    align-items: center; /* Allinea le immagini al centro verticalmente (utile se altezze diverse) */
    gap: 15px; /* Spazio tra le immagini */
    margin: 20px 0;
}

.image-gallery .responsive-img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.image-gallery .mac1-img {
    flex: 2 1 60%; /* mac1.PNG sarà più grande: cresce 2x, si riduce 1x, base 60% */
    max-width: 416px; /* Imposta una dimensione massima per mac1.PNG (larghezza originale) */
    min-width: 200px; /* Larghezza minima per mac1.PNG su mobile */
}

.image-gallery .doctor-img {
    flex: 1 1 30%; /* doctor_notebook.gif sarà più piccola: cresce 1x, si riduce 1x, base 30% */
    max-width: 150px; /* Imposta una dimensione massima per doctor_notebook.gif (larghezza originale) */
    min-width: 80px; /* Larghezza minima per doctor_notebook.gif su mobile */
}


.repair-details {
    font-family: Arial Black, sans-serif;
    color: #0000FF;
    font-size: 1.6em; /* Approssimazione di "Arial Black" con font size implicito */
    text-align: center;
    margin-top: 20px;
}

.repair-details .red-text {
    color: #FF0000;
}

.repair-details .blue-text {
    color: #0000FF;
}

.repair-details .italic-text {
    font-style: italic;
    font-weight: normal; /* Rimuove il grassetto per il testo in corsivo */
    color: #FF0000; /* Dal codice originale */
}

.shipping-info {
    font-family: Verdana, sans-serif;
    font-size: 2.2em; /* Equivalente a 30pt circa */
    color: #FF0000;
    text-align: center;
    margin-top: 30px;
    line-height: 1.2;
}

.shipping-info .red-text {
    color: #FF0000;
}

.shipping-info .grey-text {
    color: #5A708C;
    font-weight: bold; /* Dal codice originale */
}

.text-block p {
    font-family: Arial, sans-serif;
    font-size: 1.5em; /* Equivalente a size="5" */
    text-align: justify;
    line-height: 1.5;
    margin-top: 20px;
}

.attention-note {
    text-align: center;
    margin: 30px 0;
    font-family: Verdana, sans-serif;
    font-size: 1.5em; /* Equivalente a size="5" */
    font-weight: bold; /* Dal codice originale */
}

.attention-note .red-text {
    color: #FF0000;
}

.attention-note .blue-text {
    color: #0000FF;
}

/* Dettagli di contatto */
.contact-details {
    text-align: center;
    margin-top: 30px;
    line-height: 1.5;
    font-size: 1.5em; /* Equivalente a size="6" */
}

.contact-details .green-text {
    color: #008000;
    font-weight: bold; /* Dal codice originale */
    font-size: 1.1em; /* Per Laboratorio */
}

.contact-details .phone-number {
    color: #3033A4;
    font-family: Arial, sans-serif;
    font-style: italic;
}

.contact-details .hours-highlight {
    background-color: #FFFF00;
    font-family: Arial Black, sans-serif;
    color: #FF0000;
    font-size: 1.1em; /* Equivalente a 15pt */
    font-weight: bold;
}

.contact-details .hours-text {
    background-color: #FFFF00;
    font-family: Arial, sans-serif;
    color: #0000FF;
    font-size: 1em; /* Ridotto leggermente per desktop */
}

.saturday-hours {
    text-align: center;
    background-color: #FFFF00;
    font-family: Arial Black, sans-serif;
    font-size: 2.1em; /* Ridotto leggermente per desktop (da 2.2em) */
    color: #FF0000;
    margin-top: 10px;
    padding: 5px;
    font-weight: bold;
}

.facebook-link {
    text-align: center;
    margin-top: 20px;
}

.facebook-icon {
    max-width: 100%;
    height: auto;
    width: 275px;
    height: 93px;
    display: inline-block; /* Per centrarla meglio */
}

/* Footer Navigation */
.footer-nav {
    background-color: #19ADED;
    border: 1px solid #3033A4;
    padding: 10px 0;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.footer-nav a {
    color: #3033A4;
    font-family: Arial, sans-serif;
    font-size: 1.5em; /* Equivalente a size="5" */
    padding: 10px 5px;
    text-align: center;
    flex-grow: 1;
    min-width: 120px;
    text-decoration: none; /* Rimuovi la sottolineatura di default per i link di navigazione */
}

.footer-nav a:hover {
    color: #FFFF00;
    text-decoration: underline;
}

.copyright {
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    margin-top: 20px;
    color: #000;
}

/* Media Queries per la responsività */
@media (max-width: 950px) { /* Applica un padding extra quando il container raggiunge il max-width */
    .container {
        padding: 5px;
    }
}

@media (max-width: 768px) {
    .main-title {
        font-size: 1.8em;
    }

    .phone-link,
    .whatsapp-link {
        font-size: 1.6em; /* Rimpicciolito per tablet */
    }

    .intro-text {
        font-size: 2em; /* Rimpicciolito ulteriormente per tablet */
    }

    .intro-text .highlight-yellow {
        font-size: 1em; /* Mantenuto 1em per ereditare dal parent */
    }

    .lead-text {
        font-size: 1.8em; /* Rimpicciolito di poco su tablet (prima era 2.2em, ora da 2em a 1.8em) */
    }

    .content-title {
        font-size: 1.8em;
    }

    .content-title .green-text {
        font-size: 1em;
    }

    .content-title .blue-text {
        font-size: 0.9em;
    }

    .repair-details {
        font-size: 1.2em;
    }

    .shipping-info {
        font-size: 1.8em;
    }

    .text-block p {
        font-size: 1.2em;
    }

    .attention-note {
        font-size: 1.2em;
    }

    .contact-details {
        font-size: 1.2em;
    }

    .contact-details .hours-highlight,
    .contact-details .hours-text,
    .saturday-hours {
        font-size: 1.2em; /* Mantenuto 1.2em per tablet */
    }

    /* Le immagini vengono ridimensionate qui per tablet */
    .image-gallery .mac1-img {
        max-width: 90%; /* Diminuisci leggermente su tablet */
    }
    .image-gallery .doctor-img {
        max-width: 100px; /* Diminuisci notevolmente su tablet (da 150px a 100px) */
    }

    .footer-nav a {
        font-size: 1.2em;
        flex-basis: 100%; /* Ogni link occupa l'intera larghezza su schermi più piccoli */
        margin-bottom: 5px; /* Spazio tra i link nel footer */
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.4em;
    }

    .phone-link,
    .whatsapp-link {
        font-size: 1.2em; /* Rimpicciolito ulteriormente per mobile */
    }

    .intro-text {
        font-size: 1.5em; /* Rimpicciolito ulteriormente per mobile */
    }

    .intro-text .highlight-yellow {
        font-size: 1em; /* Mantenuto 1em per ereditare dal parent */
    }

    .lead-text {
        font-size: 1.4em; /* Rimpicciolito di molto su mobile (prima era 2.2em, ora da 1.8em a 1.4em) */
    }

    .content-title {
        font-size: 1.4em;
    }

    .repair-details {
        font-size: 1em;
    }

    .shipping-info {
        font-size: 1.4em;
    }

    .text-block p {
        font-size: 1em;
    }

    .attention-note {
        font-size: 1em;
    }

    .contact-details {
        font-size: 1em;
    }

    .contact-details .hours-highlight,
    .contact-details .hours-text,
    .saturday-hours {
        font-size: 1em; /* Mantenuto 1em per mobile */
    }

    /* Per le immagini su schermi molto piccoli, torniamo al layout in riga per cercare di affiancarle */
    .image-gallery {
        flex-direction: row; /* Torna a layout in riga */
        flex-wrap: wrap; /* Assicurati che possano andare a capo se non c'è spazio */
        justify-content: center; /* Centra le immagini orizzontalmente */
        align-items: flex-start; /* Allinea in alto (o center se preferisci centrate) */
        gap: 5px; /* Riduci lo spazio tra le immagini per farle stare fianco a fianco */
    }

    .image-gallery .responsive-img {
        width: auto; /* Lascia che la larghezza sia gestita da max-width */
        max-width: none; /* Rimuovi la max-width generica per responsive-img */
        min-width: unset; /* Rimuovi min-width */
    }

    .image-gallery .mac1-img {
        order: 1; /* Assicura l'ordine */
        max-width: 45%; /* Ridotto ulteriormente mac1.PNG (prima era 50%) */
        flex: 0 1 auto; /* Non cresce, si riduce a piacere, base auto */
    }

    .image-gallery .doctor-img {
        order: 2; /* Assicura l'ordine */
        margin-top: 0; /* Rimuovi il margine superiore se si affiancano */
        max-width: 60px; /* Mantenuta la dimensione attuale per doctor_notebook.gif */
        flex: 0 1 auto; /* Non cresce, si riduce a piacere, base auto */
    }
}