/* --- Ottimizzazione Mobile Header e Menu (FestMap) --- */
@media screen and (max-width: 767px) {

    /* --- 1. Header Principale --- */
    .app-header {
        padding: 8px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important; /* Permette una gestione pulita se lo spazio è poco */
    }

    /* Pulsante Menu a Hamburger */
    .app-header .icon-btn {
        font-size: 24px !important;
        padding: 4px !important;
    }

    /* Riduciamo gli spazi tra i link di navigazione centrali su mobile */
    .bottom-nav.inline-nav-links {
        gap: 12px !important;
        margin: 0 auto !important;
    }

    .bottom-nav.inline-nav-links .nav-item {
        font-size: 11px !important;
        gap: 1px !important;
    }

    .bottom-nav.inline-nav-links .nav-item .home-logo {
        height: 26px !important;
        max-width: 60px !important;
    }

    .bottom-nav.inline-nav-links .nav-item .nav-icon {
        font-size: 16px !important;
    }

    /* Spazio destro azzerato per bilanciare l'hamburger a sinistra */
    .header-right-space {
        display: none !important;
    }

    /* --- 2. Contatore Eventi (Badge in alto a destra) --- */
    #event-counter-badge {
        position: static !important; /* Lo spostiamo nel flusso o lo compattiamo per evitare sovrapposizioni */
        margin-left: auto;
        font-size: 0.75rem !important;
        padding: 3px 8px !important;
        background: rgba(117, 151, 222, 0.15) !important; /* Richiama i toni del brand */
        color: #ffffff !important;
        border-radius: 10px !important;
        margin-top: 5px;
        width: 100%;
        text-align: center;
        order: 3; /* Lo mettiamo su una seconda riga nell'header se lo spazio stringa */
    }

    /* --- 3. Menu a Scomparsa (Drawer) --- */
    .drawer {
        width: 270px !important;
        left: -270px !important;
        padding: 15px !important;
    }

    .drawer-header h3 {
        font-size: 1.2rem !important;
        margin: 0 !important;
    }

    .drawer-header button {
        font-size: 28px !important;
    }

    .drawer-links li {
        margin-bottom: 18px !important;
    }

    .drawer-links li a {
        font-size: 15px !important;
    }

    /* --- 4. Categorie Rapide in Home (Ottimizzazione scorrimento orizzontale) --- */
    .home-categories-bar {
        padding: 8px 10px !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Nasconde la barra su Firefox */
    }

    .home-categories-bar::-webkit-scrollbar {
        display: none; /* Nasconde la barra su Chrome/Safari */
    }

    .category-chip {
        flex: 0 0 auto !important;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

    .category-chip img {
        width: 28px !important;
        height: 28px !important;
    }

    /* --- 5. Sezione Ricerca e Filtri in Home --- */
    .search-section {
        padding: 10px !important;
    }

    .search-bar-wrapper {
        flex-direction: column !important; /* Dispone barra di ricerca e tasti in colonna su smartphone stretti */
        gap: 8px !important;
    }

    #search-input {
        width: 100% !important;
        padding: 10px !important;
        border-radius: 8px;
        border: 1px solid #ddd;
    }

    .search-bar-wrapper button,
    .search-bar-wrapper select {
        width: 100% !important;
        padding: 10px !important;
        border-radius: 8px;
    }

    /* --- Adattamento Mobile del Menu a Scomparsa (Drawer) --- */
    .drawer {
        left: 0 !important; /* Annulla il posizionamento fisso fuori schermo di PC */
        transform: translateX(-100%); /* Lo sposta fuori schermo tramite transform, compatibile con app.js */
        transition: transform 0.3s ease !important;
        width: 260px; /* Leggermente più compatto su smartphone */
        max-width: 80vw;
    }

    /* Quando app.js aggiunge la classe .open */
    .drawer.open {
        transform: translateX(0) !important;
        left: 0 !important;
    }

    /* Backdrop ottimizzato per mobile */
    .backdrop {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    .search-section {
        padding: 8px 10px !important;
        background: #ffffff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .search-main-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Input di ricerca occupa lo spazio principale */
    #search-input {
        flex: 1 !important;
        min-width: 120px !important;
        padding: 8px 10px !important;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 0.85rem;
    }

    /* Pulsante Filtri visibile solo su mobile */
    .btn-mobile-filters {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        background: #4A148C !important;
        color: white !important;
        border: none !important;
        padding: 8px 12px !important;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: bold;
        cursor: pointer;
        white-space: nowrap;
    }

    /* Contenitore dei filtri nascosto di default su mobile (stile tendina) */
    .filters-dropdown-container {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding-top: 8px !important;
        margin-top: 4px !important;
        border-top: 1px solid #eee;
    }

    /* Quando la tendina è aperta tramite JS */
    .filters-dropdown-container.mobile-filters-open {
        display: flex !important;
    }

    /* I singoli dropdown interni occupano tutta la larghezza nella tendina mobile */
    .filters-dropdown-container .filter-dropdown-item {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Pulsante reset allineato */
    #reset-filters-btn {
        padding: 8px 10px !important;
        border-radius: 6px;
    }
}

/* --- CORREZIONE VISUALIZZAZIONE PC --- */
@media screen and (min-width: 768px) {
    /* Nasconde il pulsante Filtri su desktop */
    .btn-mobile-filters {
        display: none !important;
    }

    /* Forza la riga principale a disporre gli elementi in linea orizzontale */
    .search-main-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Rende visibile e affiancato il contenitore dei filtri su desktop */
    .filters-dropdown-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* I singoli filtri tornano a occupare solo lo spazio necessario in riga */
    .filters-dropdown-container .filter-dropdown-item {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    /* Barra di ricerca elastica che riempie lo spazio rimanente */
    #search-input {
        flex: 1 !important;
        min-width: 150px !important;
    }
}