/* Tablet */
@media (max-width: 992px) {
    .container {
        padding: 15px;
    }
    
    /* Nasconde la navigazione desktop */
    .main-nav ul {
        display: none; 
    }
    
    /* Mostra l'icona del menu mobile (hamburger) */
    .mobile-menu-toggle {
        display: block; 
    }
    
    /* Quando il menu mobile è attivo (classe 'active' aggiunta via JS) */
    .main-nav.active ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 70px; /* Sotto l'header */
        left: 0;
        right: 0;
        background-color: #333; /* Sfondo del menu mobile */
        padding: 10px;
        z-index: 100;
        box-shadow: 0 5px 10px rgba(0,0,0,0.3); /* Ombra per il menu aperto */
        border-bottom-left-radius: 8px; /* Angoli arrotondati */
        border-bottom-right-radius: 8px;
    }
    
    .main-nav.active ul li {
        margin-left: 0; /* Rimuove il margine sinistro sui menu verticali */
        margin-bottom: 10px;
        width: 100%; /* Fa occupare l'intera larghezza agli elementi */
        text-align: center; /* Centra il testo nel menu mobile */
    }

    .main-nav.active ul li a {
        padding: 10px 0; /* Padding adeguato per i link */
        display: block; /* Rende l'intera area del li cliccabile */
    }

    /* Nascondi la ricerca nel menu mobile per semplicità */
    .main-nav.active .search-form {
        display: none;
    }

    /* Stili per il dropdown del menu utente nel menu mobile */
    .main-nav.active .user-menu .dropdown {
        position: static; /* Importante: cambia da absolute a static per non fuoriuscire */
        /* display: block;  <-- QUESTA RIGA È STATA RIMOSSA/COMMENTATA, la gestione è via JS */
        background-color: #222; /* Colore leggermente più scuro per i sub-menu */
        box-shadow: none; /* Rimuove l'ombra */
        min-width: unset; /* Rimuove la larghezza minima */
        border-radius: 0; /* Rimuove i bordi arrotondati */
        padding-top: 5px; /* Piccolo padding superiore */
    }

    .main-nav.active .user-menu .dropdown li a {
        padding-left: 30px; /* Indenta i sub-link */
        font-size: 0.95em; /* Dimensione leggermente più piccola */
    }
    
    /* Media query specifica per il login-container su tablet */
    .login-container {
        max-width: 300px; /* Mantieni la larghezza desiderata */
        width: 90%; /* Si adatta alla larghezza disponibile */
        margin: 50px auto; /* Centra con un po' di margine superiore/inferiore */
    }
}

/* Smartphone */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .viaggi-list {
        grid-template-columns: 1fr;
    }
    
    .event-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .event-buttons .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Responsive per il login container su smartphone */
    .login-container {
        padding: 15px; /* Riduci il padding sui telefoni */
        margin: 20px auto; /* Mantieni centrato ma con meno spazio verticale */
        box-shadow: none; /* Rimuovi l'ombra per un look più pulito su mobile */
        border: 1px solid #eee; /* Bordo più leggero su mobile */
    }

    .login-container h1 {
        font-size: 22px; /* Riduci la dimensione del titolo su mobile */
    }
}