/* --- Reset & Variabili CSS --- */
:root {
    --primary-color  : #0d1b2a;
    /* Blu scuro notte */
    --secondary-color: #1b263b;
    /* Blu leggermente più chiaro */
    --accent-color   : #e0e1dd;
    /* Grigio chiaro / Argento per accenti e testo */
    --highlight-color: #ff6b6b;
    /* Per i messaggi success sending */
    --success-message: #3ec63b;
    /* Un rosso/corallo per highlights o CTA */
    --text-light     : #f8f9fa;
    --text-dark      : #333;
    --font-heading   : 'Montserrat', sans-serif;
    --font-body      : 'Open Sans', sans-serif;
    --nav-height     : 70px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family     : var(--font-body);
    line-height     : 1.7;
    color           : var(--text-light);
    background-color: var(--primary-color);
    overflow-x      : hidden;
    /* Previene lo scroll orizzontale */
}

/* --- Language Switcher (Text-based) --- */
.language-switcher {
    display    : flex;
    align-items: center;
    gap        : 8px;
    /* Spazio ridotto tra gli elementi */
    margin-left: 20px;
}

.language-switcher .lang-btn {
    background : none;
    border     : none;
    color      : var(--accent-color);
    /* Colore del testo standard */
    cursor     : pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size  : 0.9rem;
    padding    : 5px;
    transition : color 0.3s ease, opacity 0.3s ease;
}

.language-switcher .lang-separator {
    color    : var(--accent-color);
    opacity  : 0.5;
    font-size: 1rem;
}

.language-switcher .lang-btn:hover {
    color: var(--highlight-color);
    /* Evidenzia al passaggio del mouse */
}

/* Stile per il pulsante della lingua non attiva */
.language-switcher .lang-btn:not(.active) {
    opacity: 0.7;
}

/* Stile per il pulsante della lingua attiva */
.language-switcher .lang-btn.active {
    color  : var(--highlight-color);
    cursor : default;
    opacity: 1;
}

.container {
    max-width: 1100px;
    margin   : auto;
    padding  : 0 20px;
    overflow : hidden;
    /* Per float o altri layout */
}

.logo {
    width : 250px;
    height: auto;
}

h1,
h2,
h3 {
    font-family  : var(--font-heading);
    font-weight  : 700;
    margin-bottom: 1rem;
}

h2.section-title {
    font-size     : 2.5rem;
    text-align    : center;
    margin-bottom : 2rem;
    color         : var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    position      : relative;
    padding-bottom: 10px;
}

h2.section-title::after {
    content         : '';
    position        : absolute;
    bottom          : 0;
    left            : 50%;
    transform       : translateX(-50%);
    width           : 80px;
    height          : 3px;
    background-color: var(--highlight-color);
}


p {
    margin-bottom: 1rem;
    font-size    : 1.1rem;
    color        : #bdc3c7;
    /* Grigio chiaro per leggibilità */
}

a {
    text-decoration: none;
    color          : var(--highlight-color);
    transition     : color 0.3s ease;
}

a:hover {
    color: #ff8a8a;
    /* Highlight più chiaro al hover */
}

section {
    padding: 80px 0;
}

section:nth-child(odd) {
    /* Alterna colore sfondo sezioni */
    background-color: var(--secondary-color);
}


.btn {
    display       : inline-block;
    background    : var(--highlight-color);
    color         : var(--text-light);
    padding       : 12px 25px;
    border        : none;
    border-radius : 25px;
    /* Pulsanti più arrotondati */
    cursor        : pointer;
    font-family   : var(--font-heading);
    font-weight   : bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition    : background-color 0.3s ease, transform 0.2s ease;
    box-shadow    : 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn:hover {
    transform: translateY(-2px);
}

/* --- Navbar --- */
#main-nav {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    height          : var(--nav-height);
    width           : 100%;
    background-color: rgba(13, 27, 42, 0.85);
    /* Sfondo con trasparenza */
    position        : fixed;
    top             : 0;
    left            : 0;
    z-index         : 1000;
    padding         : 0 2rem;
    backdrop-filter : blur(5px);
    /* Effetto vetro smerigliato */
    box-shadow      : 0 2px 10px rgba(0, 0, 0, 0.3);
}

#main-nav .logo {
    font-family   : var(--font-heading);
    font-size     : 2rem;
    font-weight   : 700;
    color         : var(--accent-color);
    letter-spacing: 1px;
}

#main-nav .logo span {
    color: var(--highlight-color);
}

#main-nav ul {
    display   : flex;
    list-style: none;
}

#main-nav ul li a {
    color         : var(--accent-color);
    padding       : 10px 15px;
    margin        : 0 5px;
    font-family   : var(--font-heading);
    font-weight   : 400;
    position      : relative;
    letter-spacing: 0.5px;
}

#main-nav ul li a::after {
    content         : '';
    position        : absolute;
    width           : 0;
    height          : 2px;
    bottom          : 5px;
    left            : 50%;
    background-color: var(--highlight-color);
    transition      : width 0.3s ease, left 0.3s ease;
}

/* --- Video Section --- */
#video {
    /* background-color: var(--secondary-color); La logica di alternanza dovrebbe gestirla */
    padding: 60px 0 80px 0;
    /* Aggiusta padding se necessario */
}

.video-showcase {
    display         : flex;
    flex-direction  : column;
    /* Stack su mobile, poi cambierà */
    align-items     : center;
    gap             : 2.5rem;
    background-color: rgba(27, 38, 59, 0.5);
    /* var(--secondary-color) con più trasparenza o colore diverso */
    padding         : 30px;
    border-radius   : 12px;
    box-shadow      : 0 8px 25px rgba(0, 0, 0, 0.2);
    border          : 1px solid #2a3b4f;
}

.video-container {
    position          : relative;
    width             : 100%;
    max-width         : 720px;
    /* Dimensione massima per il video */
    padding-bottom    : 56.25%;
    /* Aspect ratio 16:9 (9 / 16 * 100) */
    height            : 0;
    overflow          : hidden;
    border-radius     : 8px;
    /* Arrotonda i bordi del contenitore iframe */
    box-shadow        : 0 5px 15px rgba(0, 0, 0, 0.3);
}

.video-container iframe {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    border  : none;
    /* Rimuove il bordo predefinito dell'iframe */
}

.video-caption {
    text-align: center;
    max-width : 700px;
    /* Larghezza della didascalia */
}

.video-caption h3 {
    font-size    : 1.8rem;
    color        : var(--accent-color);
    margin-bottom: 0.75rem;
}

.video-caption p {
    font-size    : 1rem;
    color        : #bdc3c7;
    margin-bottom: 1.5rem;
    max-width    : 600px;
    /* Limita larghezza testo per leggibilità */
    margin-left  : auto;
    margin-right : auto;
}

.btn-youtube {
    background-color: #FF0000;
    /* Colore YouTube */
    color           : white;
}

.btn-youtube:hover {
    background-color: #cc0000;
}

.btn-youtube i {
    margin-right: 8px;
}

/* Layout su schermi più grandi per video e didascalia affiancati (opzionale) */
@media (min-width: 992px) {

    /* Esempio breakpoint per desktop */
    .video-showcase {
        flex-direction: row;
        align-items   : flex-start;
        /* Allinea elementi all'inizio */
        gap           : 3rem;
    }

    .video-container {
        flex     : 2;
        /* Video occupa più spazio */
        max-width: none;
        /* Rimuove limite se flessibile */
    }

    .video-caption {
        flex      : 1;
        /* Didascalia occupa meno spazio */
        text-align: left;
        margin-top: 1rem;
        /* Un po' di spazio sopra */
    }

    .video-caption p {
        margin-left : 0;
        margin-right: 0;
    }
}

#main-nav ul li a:hover::after,
#main-nav ul li a.active::after {
    width: 80%;
    left : 10%;
}

#main-nav ul li a.active {
    color: var(--highlight-color);
}

.biography {
    text-align: justify;
}

.soek-concept {
    text-align: justify;
}

/* --- Hamburger Menu --- */
.menu-toggle {
    display : none;
    /* Nascosto di default su desktop */
    cursor  : pointer;
    position: relative;
    z-index : 1001;
    /* Sopra il menu quando aperto */
}

.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
    content         : '';
    display         : block;
    background-color: var(--accent-color);
    height          : 3px;
    width           : 28px;
    border-radius   : 3px;
    transition      : all 0.3s ease-in-out;
}

.menu-toggle .hamburger::before {
    transform: translateY(-8px);
}

.menu-toggle .hamburger::after {
    transform: translateY(5px);
    /* Era 8px, ma il secondo transform lo sovrascrive. Somma = 8px */
}

/* Hamburger Animazione (quando il nav è aperto) */
#main-nav.nav-open .menu-toggle .hamburger {
    transform: rotate(45deg);
}

#main-nav.nav-open .menu-toggle .hamburger::before {
    transform: translateY(0) rotate(-90deg);
}

#main-nav.nav-open .menu-toggle .hamburger::after {
    transform: translateY(-3px) rotate(-90deg);
    /* In realtà va a 0px Y a causa della rotazione */
    opacity  : 0;
    /* Nascondi la linea centrale */
}


/* --- Hero Section (Home) --- */
#home {
    height         : 100vh;
    min-height     : 500px;
    /* O l'altezza che preferisci */
    display        : flex;
    justify-content: center;
    align-items    : center;
    text-align     : center;
    position       : relative;
    /* Necessario per posizionare l'overlay e il contenuto */
    overflow       : hidden;
    /* Se l'immagine di sfondo è più grande */
    padding-top    : 0;
    /* Non più necessario padding se l'immagine copre tutto */

    /* IMPOSTA QUI L'IMMAGINE DI SFONDO */
    background-image   : url('../img/Hero_Section.jpg');
    /* SOSTITUISCI QUESTO */
    background-size    : cover;
    /* Copre l'intera area, tagliando se necessario */
    background-position: center center;
    /* Centra l'immagine */
    background-repeat  : no-repeat;
}

/* Assicura che .hero-content sia sopra l'overlay */
#home .hero-content {
    position       : relative;
    z-index        : 2;
    /* Sopra l'overlay */
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    width          : 90%;
    max-width      : 800px;
}

.image-overlay {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(13, 27, 42, 0.65);
    z-index         : 1;
}

/* Testo e Pulsante Hero (senza animazione di delay, visibili subito) */
#heroIntroText h1 {
    font-size    : 4rem;
    color        : var(--text-light);
    margin-bottom: 0.5rem;
    text-shadow  : 2px 2px 8px rgba(0, 0, 0, 0.7);
}

#heroIntroText p.subtitle {
    font-size    : 1.8rem;
    color        : var(--accent-color);
    margin-bottom: 2rem;
    font-family  : var(--font-body);
    font-weight  : 300;
    text-shadow  : 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-cta-button {
    /* Il pulsante principale .btn */
    margin-top: 1rem;
    /* Un po' di spazio dal testo */
}


/* Lo scroll-down-indicator deve essere sopra l'overlay */
.scroll-down-indicator {
    position : absolute;
    bottom   : 30px;
    left     : 50%;
    transform: translateX(-50%);
    color    : var(--accent-color);
    font-size: 2rem;
    animation: bounce 2s infinite;
    z-index  : 3;
    /* Sopra tutto, tranne la navbar */
}

/* Adattamenti responsive per H1 e P */
@media(max-width: 768px) {

    #heroIntroText h1 {
        font-size: 2.8rem;
    }

    #home .hero-content .logo {
        display: none;
        /* Nasconde il logo nella hero section su schermi piccoli */
    }

    /* Il contenitore li dello switcher si adatta alla lista mobile */
    #main-nav ul li.language-switcher-mobile-container {
        /* Spaziatura come gli altri link */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Aumentiamo un po' la dimensione del testo per migliore cliccabilità */
    .language-switcher-mobile-container .language-switcher .lang-btn {
        font-size: 1.1rem;
    }

    .language-switcher-mobile-container .language-switcher .lang-separator {
        font-size: 1.2rem;
    }
}


@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}


/* --- About Section --- */
#about .about-content {
    display    : flex;
    gap        : 2rem;
    align-items: center;
}

#about .about-image img {
    max-width : 300px;
    width     : 100%;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

#about .about-text {
    flex: 1;
}

#about .about-text p {
    font-size: 1.1rem;
    color    : #ccc;
}

#about .social-links {
    margin-top: 1.5rem;
}

#about .social-links a {
    color       : var(--accent-color);
    font-size   : 1.8rem;
    margin-right: 15px;
    transition  : color 0.3s ease, transform 0.3s ease;
}

#about .social-links a:hover {
    color    : var(--highlight-color);
    transform: scale(1.2);
}

/* --- Music Section & Audio Player --- */
#music {
    background-color: var(--primary-color);
    /* o var(--secondary-color) per alternare */
}

.audio-player-container {
    max-width       : 700px;
    margin          : 2rem auto;
    padding         : 25px;
    background-color: var(--secondary-color);
    /* Sfondo più scuro per il player */
    border-radius   : 12px;
    box-shadow      : 0 8px 25px rgba(0, 0, 0, 0.2);
    border          : 1px solid #2a3b4f;
}

.track-info {
    display       : flex;
    align-items   : center;
    gap           : 20px;
    margin-bottom : 20px;
    padding-bottom: 15px;
    border-bottom : 1px solid #2a3b4f;
}

.track-info img#albumArt {
    width        : 80px;
    height       : 80px;
    border-radius: 8px;
    object-fit   : cover;
    box-shadow   : 0 2px 8px rgba(0, 0, 0, 0.3);
}

.track-info h3 {
    font-size    : 1.4rem;
    color        : var(--accent-color);
    margin-bottom: 5px;
}

.track-info p {
    font-size    : 0.9rem;
    color        : #a0aec0;
    /* Grigio chiaro per artista */
    margin-bottom: 0;
}

.custom-controls {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    /* Spazia di più i gruppi di controllo */
    gap            : 10px;
    /* Spazio tra i pulsanti/gruppi */
    margin-top     : 15px;
    margin-bottom  : 10px;
    flex-wrap      : wrap;
    /* Permette ai controlli di andare a capo */
}

.custom-controls button {
    background-color: transparent;
    border          : 2px solid var(--accent-color);
    color           : var(--accent-color);
    width           : 45px;
    /* Dimensioni fisse per i pulsanti principali */
    height          : 45px;
    border-radius   : 50%;
    font-size       : 1.1rem;
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 0;
    /* Rimuovi padding se width/height sono fissi */
    transition      : background-color 0.2s, color 0.2s, border-color 0.2s;
}

.custom-controls button:hover {
    background-color: var(--highlight-color);
    color           : var(--text-light);
    border-color    : var(--highlight-color);
}
.custom-controls button#playPauseBtn {
    /* Evidenzia il pulsante play */
    width       : 55px;
    height      : 55px;
    font-size   : 1.5rem;
    border-width: 3px;
}

.volume-control {
    display    : flex;
    align-items: center;
    gap        : 8px;
}

.volume-control input[type="range"] {
    width       : 80px;
    /* Slider volume più piccolo */
    accent-color: var(--highlight-color);
}
.volume-control i {
    color    : var(--accent-color);
    font-size: 0.9rem;
}
#seekBar {
    -webkit-appearance: none;
    appearance        : none;
    width             : 100%;
    height            : 8px;
    background        : #444;
    /* Sfondo della seekbar */
    border-radius     : 5px;
    outline           : none;
    opacity           : 0.9;
    transition        : opacity .2s;
    margin            : 15px 0;
    /* Più spazio */
}
#seekBar:hover {
    opacity: 1;
}
#seekBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance        : none;
    width             : 18px;
    height            : 18px;
    background        : var(--highlight-color);
    border-radius     : 50%;
    cursor            : pointer;
    border            : 2px solid var(--secondary-color);
    /* Contorno per il pollice */
    box-shadow        : 0 0 5px rgba(0, 0, 0, 0.3);
}
#seekBar::-moz-range-thumb {
    width        : 18px;
    height       : 18px;
    background   : var(--highlight-color);
    border-radius: 50%;
    cursor       : pointer;
    border       : 2px solid var(--secondary-color);
    box-shadow   : 0 0 5px rgba(0, 0, 0, 0.3);
}

.time-control {
    font-size : 0.9rem;
    color     : var(--accent-color);
    min-width : 90px;
    /* Assicura spazio per il tempo */
    text-align: right;
}
.playlist {
    margin-top : 25px;
    border-top : 1px solid #2a3b4f;
    padding-top: 15px;
}
.playlist h4 {
    font-size    : 1.2rem;
    margin-bottom: 10px;
    color        : var(--accent-color);
}
.playlist ul {
    list-style: none;
    max-height: 200px;
    /* Altezza massima con scroll */
    overflow-y: auto;
}
.playlist li {
    padding        : 10px 15px;
    cursor         : pointer;
    border-bottom  : 1px solid #222e3c;
    transition     : background-color 0.2s;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}
.playlist li:hover {
    background-color: #2a3b4f;
    /* Sfondo leggermente diverso al hover */
}
.playlist li.playing {
    background-color: var(--highlight-color);
    color           : var(--text-light);
    font-weight     : bold;
}
.playlist li.playing .track-duration {
    color: var(--text-light);
}
.playlist .track-duration {
    font-size: 0.8rem;
    color    : #a0aec0;
}

/* Responsive per il player */
@media(max-width: 500px) {
    .custom-controls {
        justify-content: center;
        /* Centra tutti i controlli */
    }

    .volume-control,
    .time-control {
        width          : 100%;
        justify-content: center;
        margin-top     : 10px;
    }

    .track-info {
        flex-direction: column;
        text-align    : center;
    }

    .track-info div {
        /* Contenitore titolo e artista */
        width: 100%;
    }
}

/* --- Contact Section --- */
#contact {
    background: var(--primary-color);
    /* Riporta al colore primario per distacco */
}
#contact .contact-form {
    max-width       : 700px;
    margin          : auto;
    padding         : 2rem;
    background-color: var(--secondary-color);
    border-radius   : 10px;
    box-shadow      : 0 5px 15px rgba(0, 0, 0, 0.3);
}
p.contact-intro {
    text-align   : center;
    font-size    : 1.15rem;
    /* Leggermente più grande del paragrafo standard */
    color        : var(--accent-color);
    /* O un colore leggermente diverso per risaltare */
    margin-bottom: 2.5rem;
    /* Più spazio prima del form */
    max-width    : 650px;
    /* Limita la larghezza per una buona leggibilità */
    margin-left  : auto;
    margin-right : auto;
    line-height  : 1.8;
    /* Un po' più di interlinea */
}

.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display      : block;
    margin-bottom: 0.5rem;
    color        : var(--accent-color);
    font-weight  : 600;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width           : 100%;
    padding         : 12px;
    border          : 1px solid #444;
    /* Bordo più scuro */
    border-radius   : 5px;
    background-color: #2b374b;
    /* Sfondo input */
    color           : var(--text-light);
    font-family     : var(--font-body);
    font-size       : 1rem;
    transition      : border-color 0.3s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline     : none;
    border-color: var(--highlight-color);
    box-shadow  : 0 0 8px rgba(255, 107, 107, 0.5);
}
.form-group textarea {
    resize    : vertical;
    min-height: 120px;
}


/* --- Miglioramenti Stile Form di Contatto --- */

/* Wrapper per il menu a tendina per stilizzare la freccia */
.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content       : '\f078';
    /* Icona freccia giù di FontAwesome */
    font-family   : 'Font Awesome 5 Free';
    /* O 'Font Awesome 6 Free' a seconda della versione */
    font-weight   : 900;
    position      : absolute;
    top           : 50%;
    right         : 15px;
    transform     : translateY(-50%);
    color         : var(--accent-color);
    pointer-events: none;
    /* Rende la freccia non cliccabile */
    transition    : color 0.3s ease;
}

/* Stile per l'elemento select */
.form-group select {
    /* Resetta l'aspetto di default del browser */
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;
    /* Eredita lo stile degli altri input */
    width             : 100%;
    padding           : 12px;
    border            : 1px solid #444;
    border-radius     : 5px;
    background-color  : #2b374b;
    color             : var(--text-light);
    font-family       : var(--font-body);
    font-size         : 1rem;
    transition        : border-color 0.3s ease;
    cursor            : pointer;
}

.form-group select:focus {
    outline     : none;
    border-color: var(--highlight-color);
    box-shadow  : 0 0 8px rgba(255, 107, 107, 0.5);
}

.form-group select:focus+.select-wrapper::after {
    color: var(--highlight-color);
}

/* Placeholder per gli input */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color  : #6a7380;
    opacity: 1;
}


/* Rende il div contenitore esterno a tutta larghezza e con lo spazio sotto */
.form-group-checkbox {
    display: flex; /* O 'flex' se vuoi un controllo più fine, ma block è ok */
    align-items: center;
    margin-bottom: 2rem;
}

/* La label che contiene tutto si comporta come un flex container */
.checkbox-container {
    display: inline-flex; /* Usa inline-flex per non occupare tutta la larghezza inutilmente */
     /* Allinea verticalmente gli elementi al centro */
    gap: 12px;           /* Spazio tra la scatola e il testo */
    cursor: pointer;
    font-size: 0.95rem;
    color: #bdc3c7;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Nascondiamo la checkbox di default */
.checkbox-container input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Creiamo la nostra scatola visiva (il quadratino) */
.checkmark-box {
    height: 1.25em;
    width: 1.25em;
    background-color: #2b374b;
    border: 1px solid #444;
    border-radius: 3px;
    display: grid;
    place-content: center;
    transition: border-color 0.2s, background-color 0.2s;
    flex-shrink: 0; /* Impedisce alla scatola di deformarsi */
}

/* Il segno di spunta (check) dentro la scatola */
.checkmark-box::before {
    content: "";
    width: 0.7em;
    height: 0.7em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--highlight-color);
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
/* Quando la checkbox è spuntata, mostriamo il segno */
.checkbox-container input:checked ~ .checkmark-box::before {
    transform: scale(1);
}
/* Effetto al passaggio del mouse */
.checkbox-container:hover .checkmark-box {
    border-color: var(--highlight-color);
}
/* Stile per il focus (accessibilità) */
.checkbox-container input:focus-visible ~ .checkmark-box {
    outline: 2px solid var(--highlight-color);
    outline-offset: 2px;
}
/* Il testo dell'etichetta non ha bisogno di stili speciali per l'allineamento
   perché il genitore '.checkbox-container' con 'align-items: center' si occupa di tutto. */
.checkbox-label-text {
    line-height: 1; /* A volte reimpostare il line-height aiuta */
}

span.checkbox-label-text {
    margin-bottom: 2rem;
}

#contact .btn {
    width    : 100%;
    padding  : 15px;
    font-size: 1.1rem;
}


/* Stile base del bottone quando è in caricamento o disabilitato */
.btn:disabled {
    cursor : not-allowed;
    opacity: 0.7;
}

/* Lo spinner CSS (il nostro "loader") */
.button-loader {
    display         : none;
    /* Nascosto di default */
    width           : 20px;
    height          : 20px;
    border          : 3px solid rgba(255, 255, 255, 0.5);
    /* Bordo semitrasparente */
    border-top-color: #ffffff;
    /* Bordo superiore solido, crea l'effetto "pac-man" */
    border-radius   : 50%;
    animation       : spin 1s infinite linear;
    margin          : 0 auto;
    /* Per centrarlo se il testo scompare */
}

/* Animazione per la rotazione */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Quando il bottone ha la classe .loading... */
.btn.loading .button-loader {
    display: block;
    /* ...mostra lo spinner */
}

.btn.loading .button-text {
    display: none;
    /* ...e nascondi il testo originale */
}

/* Stili per i messaggi di stato (puoi personalizzarli) */
#form-status.success {
    color      : #28a745;
    /* Verde successo */
    font-weight: bold;
}

#form-status.error {
    color      : #dc3545;
    /* Rosso errore */
    font-weight: bold;
}


/* --- Footer --- */
footer {
    text-align      : center;
    padding         : 2rem;
    background-color: var(--primary-color);
    border-top      : 1px solid var(--secondary-color);
}

footer p {
    margin   : 0;
    font-size: 0.9rem;
    color    : var(--accent-color);
}

/* --- Stile Finestra Modale di Conferma --- */

/* =============================================================== */
/*  Stile Finestra Modale di Conferma */
/* =============================================================== */

/* CLASSE PER BLOCCARE LO SCROLL SUL BODY */
body.modal-open {
    overflow: hidden;
}

/* OVERLAY PRINCIPALE */
.modal-overlay {
    /* POSIZIONAMENTO E DIMENSIONI */
    position           : fixed;
    /* <-- FONDAMENTALE: Posiziona rispetto alla finestra del browser */
    top                : 0;
    left               : 0;
    width              : 100vw;
    /* Usa viewport width/height per sicurezza */
    height             : 100vh;
    z-index            : 9999;
    /* Un z-index molto alto per essere sicuri che sia sopra a tutto */

    /* ASPETTO */
    background-color: rgba(13, 27, 42, 0.7);
    backdrop-filter : blur(5px);

    /* CENTRATURA DEL CONTENUTO */
    display        : flex;
    justify-content: center;
    align-items    : center;
    opacity        : 0;
    visibility     : hidden;
    pointer-events : none;

    transition: opacity 0.3s ease, visibility 0s 0.3s;

    /* GESTIONE DELLA VISIBILITÀ (Stato di default: nascosta) */
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
    /* Non interattiva quando nascosta */

    /* TRANSIZIONE */
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* STATO VISIBILE */

/* CONTENUTO DELLA MODALE */
.modal-content {
    background-color: var(--secondary-color);
    padding         : 30px 40px;
    border-radius   : 12px;
    box-shadow      : 0 10px 30px rgba(0, 0, 0, 0.4);
    text-align      : center;
    max-width       : 90%;
    width           : 450px;
    border          : 1px solid #2a3b4f;

    /* Animazione di entrata */
    transform : translateY(20px) scale(0.95);
    transition: transform 0.3s ease-out;
}

.modal-overlay.visible .modal-content {
    transform: translateY(0) scale(1);
}


/* -- Stili per i contenuti interni della modale (titolo, messaggio, etc.) -- */
.modal-title {
    font-size: 2rem;
    color    : var(--accent-color);
    margin   : 1rem 0;
}

.modal-message {
    color        : #bdc3c7;
    font-size    : 1.1rem;
    line-height  : 1.6;
    margin-bottom: 2rem;
}

.modal-message--newsletter {
    background-color: rgba(62, 198, 59, 0.1);
    color           : #90d68e;
    padding         : 10px;
    border-radius   : 5px;
    font-size       : 1rem;
    font-weight     : 600;
}

/* --- Animazione Checkmark SVG --- */
.modal-icon .checkmark {
    width            : 80px;
    height           : 80px;
    border-radius    : 50%;
    display          : block;
    stroke-width     : 3;
    stroke           : #3ec63b;
    /* Colore verde successo */
    stroke-miterlimit: 10;
    margin           : 0 auto 10px;
    box-shadow       : inset 0px 0px 0px #3ec63b;
}

.modal-overlay {
    /* 1. POSIZIONAMENTO E LIVELLO */
    position: fixed;
    /* Posiziona l'elemento rispetto alla finestra del browser, non a un genitore. */
    top     : 0;
    left    : 0;
    z-index : 9999;
    /* Assicura che sia sopra a TUTTO il resto della pagina. */

    /* 2. DIMENSIONI */
    width : 100vw;
    /* Occupa il 100% della larghezza della finestra (viewport width). */
    height: 100vh;
    /* Occupa il 100% dell'altezza della finestra (viewport height). */

    /* 3. ASPETTO VISIVO */
    background-color: rgba(13, 27, 42, 0.7);
    /* Sfondo scuro semi-trasparente. */
    backdrop-filter : blur(5px);
    /* Effetto "vetro smerigliato" per lo sfondo. */

    /* 4. LAYOUT INTERNO (per centrare il .modal-content) */
    display        : flex;
    justify-content: center;
    align-items    : center;

    /* 5. STATO INIZIALE E TRANSIZIONE (LA PARTE FONDAMENTALE PER NASCONDERLA) */
    opacity       : 0;
    /* Completamente trasparente. */
    visibility    : hidden;
    /* Rimuove l'elemento dal rendering, non è visibile né interattivo. */
    pointer-events: none;
    /* Assicura che non intercetti click o altri eventi del mouse. */
    transition    : opacity 0.3s ease, visibility 0s 0.3s;
    /* Anima l'opacità, e nasconde/mostra visibility istantaneamente dopo la transizione. */
}

.modal-overlay.visible {
    opacity       : 1;
    /* Torna completamente opaca. */
    visibility    : visible;
    /* L'elemento torna a essere visibile e parte del layout. */
    pointer-events: auto;
    /* Permette all'elemento (e ai suoi figli) di essere cliccato. */
    transition    : opacity 0.3s ease;
    /* Anima solo l'opacità quando appare. */
}

.modal-overlay.visible .checkmark__circle {
    stroke-dasharray : 166;
    stroke-dashoffset: 166;
    animation        : stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.3s forwards;
}

.modal-overlay.visible .checkmark__check {
    transform-origin : 50% 50%;
    stroke-dasharray : 48;
    stroke-dashoffset: 48;
    animation        : stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

/* --- Responsive --- */
@media(max-width: 768px) {
    #main-nav ul {
        display         : none;
        /* Nascosto su mobile, gestito da JS */
        flex-direction  : column;
        position        : absolute;
        top             : var(--nav-height);
        left            : 0;
        width           : 100%;
        background-color: var(--secondary-color);
        /* Sfondo solido per menu aperto */
        padding         : 1rem 0;
        box-shadow      : 0 5px 10px rgba(0, 0, 0, 0.2);
    }

    #main-nav.nav-open ul {
        display: flex;
    }

    #main-nav ul li {
        text-align: center;
        margin    : 0;
        width     : 100%;
    }

    #main-nav ul li a {
        display      : block;
        /* Occupa tutta la larghezza */
        padding      : 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    #main-nav ul li a::after {
        display: none;
    }

    /* Nascondi effetto underline mobile */

    .menu-toggle {
        display: block;
        /* Mostra l'hamburger */
    }

    #home h1 {
        font-size: 2.8rem;
    }

    #home p.subtitle {
        font-size: 1.1rem;
    }

    #about .about-content {
        flex-direction: column;
        text-align    : center;
    }

    #about .about-image img {
        margin-bottom: 1.5rem;
        max-width    : 200px;
        /* Più piccolo su mobile */
    }

    h2.section-title {
        font-size: 2rem;
    }
}

/* Nuova classe da aggiungere al <body> quando la modale è aperta */
body.modal-open {
    overflow: hidden;
    /* Blocca lo scroll della pagina principale */
}