/* Regole generali per i controlli di Mapbox - hanno priorità su tutto */
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
    z-index: 1001 !important; /* Sopra la bottom bar che ha z-index 1000 */
}

/* Styling migliorato per gli attributi */
.mapboxgl-ctrl-attrib {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 4px !important;
}

/* Barra mobile fissa in basso */
.mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 13vh;
    min-height: 90px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-top: 1px solid #e0e0e0;
    display: none;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    padding: 6px 4px 6px 4px;
}

@media screen and (max-width: 768px) {
    .mobile-bottom-bar {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    
    /* Nascondere il vecchio menu mobile quando è attiva la nuova barra */
    .mobile-menu-toggle,
    .mobile-fullscreen-menu {
        display: none !important;
    }
    
    /* Nascondere la sidebar su mobile */
    #sidebar {
        display: none !important;
    }
    
    .toggle-sidebar {
        display: none !important;
    }
    
    /* Aggiustare l'altezza della mappa per far spazio alla barra */
    #map {
        height: 87vh !important;
        width: 100% !important;
        position: relative !important;
    }
    
    body {
        overflow: hidden;
    }
    
    /* Riposizionare gli attributi di Mapbox sopra la bottom bar - soluzione più aggressiva */
    .mapboxgl-ctrl-bottom-left {
        position: fixed !important;
        bottom: calc(13vh + 5px) !important;
        left: 5px !important;
        z-index: 999 !important;
    }
    
    .mapboxgl-ctrl-bottom-right {
        position: fixed !important;
        bottom: calc(13vh + 5px) !important;
        right: 5px !important;
        z-index: 999 !important;
    }
    
    /* Assicurarsi che gli attributi siano visibili */
    .mapboxgl-ctrl-attrib {
        background-color: rgba(255, 255, 255, 0.8) !important;
        border-radius: 4px !important;
        padding: 2px 5px !important;
        font-size: 11px !important;
    }
}

.mobile-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    position: relative;
    min-height: 70px;
    /* Aggiungi separatore leggero a destra di ogni elemento tranne l'ultimo */
    border-right: 1px solid rgba(224, 224, 224, 0.4);
}

.mobile-bar-item:last-child {
    border-right: none;
}

.mobile-bar-item:hover {
    background-color: rgba(76, 175, 80, 0.1);
    transform: translateY(-2px);
}

.mobile-bar-item:active {
    transform: translateY(0);
    background-color: rgba(76, 175, 80, 0.2);
}

.mobile-bar-icon {
    margin-bottom: 6px; /* Aumentato da 4px per più spazio tra icona e testo */
    color: #4CAF50;
    transition: all 0.2s ease;
    font-size: 20px; /* Aumentato da 18px */
}

.mobile-bar-icon i {
    font-size: 20px; /* Aumentato da 18px */
    color: inherit;
}

.mobile-bar-item:hover .mobile-bar-icon {
    color: #45a049;
    transform: scale(1.1);
}

.mobile-bar-text {
    text-align: center;
    font-size: 10px; /* Aumentato da 9px */
    font-weight: 500;
    color: #333;
    line-height: 1.1; /* Leggermente aumentato da 1.0 */
}

.mobile-bar-text div {
    margin: 0;
    padding: 0;
}

/* Stili per i modal */
.mobile-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center;
    align-items: flex-end;
}

.mobile-modal.mobile-modal-fullscreen {
    align-items: center;
}

/* Nuovo stile per il modal waypoints - 65% dello schermo */
.mobile-modal.mobile-modal-waypoints {
    align-items: flex-end;
    background-color: transparent; /* niente overlay scuro */
    pointer-events: none; /* lascia passare i click alla mappa nell'area superiore */
}

.mobile-modal-content {
    background-color: white;
    width: calc(100% - 20px); /* lascia spazio per gli angoli tondi ai lati */
    max-height: 78vh; /* Uniforma altezza modali non-fullscreen su mobile */
    height: 78vh;
    border-radius: 20px; /* angoli tondi anche in basso */
    overflow: hidden;
    animation: slideUp 0.3s ease;
    position: relative;
    margin: 10px; /* mostra il raggio in basso */
    margin-bottom: calc(10px + env(safe-area-inset-bottom));
    margin-bottom: calc(10px + constant(safe-area-inset-bottom));
}

.mobile-modal-fullscreen .mobile-modal-content {
    height: 90vh;
    max-height: 90vh;
    border-radius: 20px;
    margin: 20px;
    width: calc(100% - 40px);
}

/* Stile specifico per il modal waypoints - 65% altezza */
.mobile-modal-waypoints .mobile-modal-content {
    height: 50vh; /* bottom sheet al 50% */
    max-height: 50vh;
    border-radius: 20px 20px 0 0; /* solo angoli superiori arrotondati */
    width: 100%; /* occupa tutta la larghezza, ancorato al fondo */
    margin: 0; /* nessun gap: parte dal bordo inferiore (minimo) */
    animation: slideUpFromBottom 0.3s ease;
    pointer-events: auto; /* il contenuto resta interattivo */
    position: fixed; /* ancorato al fondo viewport, non dipende dal flex */
    left: 0;
    right: 0;
    bottom: 0; /* parte dal limite inferiore */
    z-index: 3001; /* sopra la bottom bar */
}

/* Bottom sheet anche per POI, Route e Download: stessa UX del Waypoints */
#mobile-poi-modal,
#mobile-route-modal,
#mobile-download-modal {
    align-items: flex-end !important;
    background-color: transparent !important; /* niente overlay scuro */
    pointer-events: none !important; /* lascia passare i click alla mappa nell'area superiore */
}

#mobile-poi-modal .mobile-modal-content,
#mobile-route-modal .mobile-modal-content,
#mobile-download-modal .mobile-modal-content {
    height: 50vh !important; /* bottom sheet al 50% */
    max-height: 50vh !important;
    border-radius: 20px 20px 0 0 !important; /* solo angoli superiori arrotondati */
    width: 100% !important; /* occupa tutta la larghezza, ancorato al fondo */
    margin: 0 !important; /* nessun gap: parte dal bordo inferiore */
    animation: slideUpFromBottom 0.3s ease !important;
    pointer-events: auto !important; /* il contenuto resta interattivo */
    position: fixed !important; /* ancorato al fondo viewport */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important; /* parte dal limite inferiore */
    z-index: 3001 !important; /* sopra la bottom bar */
}

/* Nascondi il titolo e compatta la header bar lasciando solo la X per POI/Route/Download */
#mobile-poi-modal .mobile-modal-header h3,
#mobile-route-modal .mobile-modal-header h3,
#mobile-download-modal .mobile-modal-header h3 { display: none !important; }

#mobile-poi-modal .mobile-modal-header,
#mobile-route-modal .mobile-modal-header,
#mobile-download-modal .mobile-modal-header {
    justify-content: flex-end !important;
    height: 0 !important;          /* elimina l'altezza della barra */
    padding: 0 !important;         /* rimuove il padding della barra */
    border: 0 !important;          /* rimuove la linea di separazione */
    overflow: visible !important;  /* permette alla X posizionata assoluta di essere visibile */
}

#mobile-poi-modal .mobile-modal-close,
#mobile-route-modal .mobile-modal-close,
#mobile-download-modal .mobile-modal-close {
    position: absolute;            /* posiziona la X sopra il contenuto */
    top: 12px;
    right: 12px;
    z-index: 1;
}

/* Quando un modal è aperto, rimuovi l'extra spazio calcolato per la bottom bar
   per evitare spazi finali variabili nelle liste/option all'interno del modal */
body.modal-open .mobile-poi-options,
.mobile-modal[style*="display: flex"] .mobile-poi-options,
body.modal-open .mobile-route-options,
.mobile-modal[style*="display: flex"] .mobile-route-options,
body.modal-open .mobile-download-options,
.mobile-modal[style*="display: flex"] .mobile-download-options,
body.modal-open .mobile-waypoints-list,
.mobile-modal[style*="display: flex"] .mobile-waypoints-list {
    padding-bottom: 20px !important; /* Base */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; /* iOS modern */
    padding-bottom: calc(20px + constant(safe-area-inset-bottom)) !important; /* iOS legacy */
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideUpFromBottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.mobile-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.mobile-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Waypoints modal: nascondi il titolo e lascia solo la X a destra */
#mobile-waypoints-modal .mobile-modal-header h3 { display: none !important; }
#mobile-waypoints-modal .mobile-modal-header {
    justify-content: flex-end;
    height: 0 !important;          /* elimina l'altezza della barra */
    padding: 0 !important;         /* rimuove il padding della barra */
    border: 0 !important;          /* rimuove la linea di separazione */
    overflow: visible !important;  /* permette alla X posizionata assoluta di essere visibile */
}
#mobile-waypoints-modal .mobile-modal-close {
    position: absolute;            /* posiziona la X sopra il contenuto */
    top: 12px;
    right: 12px;
    z-index: 1;
}

/* Testo guida sopra i gruppi di pulsanti nei modali */
 .mobile-modal-hint {
    font-size: 13px;
    line-height: 1.35;
    color: #555;
    background: #f5f7f9;
    margin: 12px 20px 10px 20px; /* più spazio dal titolo */
    padding: 10px 12px;
    border: 1px solid #e2e6ea;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Variante più compatta quando appare dentro la lista waypoints (dopo i pulsanti) */
.mobile-waypoints-list .mobile-modal-hint, .mobile-waypoints-list .waypoints-drag-hint.mobile-modal-hint {
    margin: 6px 0 4px 0;
    padding: 8px 10px;
    font-size: 12px;
}
@media screen and (max-width: 480px) {
    .mobile-modal-hint { font-size: 12px; padding: 8px 10px; margin: 10px 16px 8px 16px; }
}
@media screen and (max-width: 360px) {
    .mobile-modal-hint { font-size: 11px; padding: 7px 9px; margin: 8px 14px 8px 14px; }
}

.mobile-modal-close {
    background-color: #ffffff; /* pallino bianco */
    border: 1px solid rgba(0,0,0,0.08); /* separatore leggero dallo sfondo del titolo */
    font-size: 24px;
    cursor: pointer;
    color: #333; /* X più visibile sul bianco */
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.mobile-modal-close:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Opzioni POI */
.mobile-poi-options {
    padding: 20px;
    padding-bottom: calc(20px + 13vh); /* Aggiunge spazio per la bottom bar */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-poi-option {
    display: flex;
    align-items: center;
    padding: 10px 14px; /* compattato per uniformarsi alle route più basse */
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

/* Uniforma dimensioni e spaziatura con i pulsanti di calcolo percorso */
.mobile-poi-option,
.mobile-route-option {
    padding: 10px 14px !important; /* stessa altezza verticale */
    min-height: 52px; /* nuova altezza uniforme più bassa */
    box-sizing: border-box;
}

/* Allinea icone e testo internamente (stesso gap) */
.mobile-poi-option i,
.mobile-route-option i,
.mobile-poi-option svg,
.mobile-route-option svg,
.mobile-poi-option img,
.mobile-route-option img {
    margin-right: 16px; /* gap coerente */
}

/* Versione compatta su schermi molto piccoli mantiene coerenza */
@media screen and (max-width: 480px) {
    .mobile-poi-option,
    .mobile-route-option {
        padding: 12px 14px;
        min-height: 58px;
    }
}

/* Override del layout verticale del desktop per i pulsanti POI mobili */
.mobile-poi-option.poi-button {
    flex-direction: row !important;
    gap: 0 !important;
    padding: 10px 14px !important;
    height: auto !important;
    justify-content: flex-start !important;
    width: 100%;
}

.mobile-poi-option .poi-icon {
    width: 22px !important;
    height: 22px !important;
    margin-right: 16px !important; /* stessa spaziatura dei route */
    flex-shrink: 0;
}

.mobile-poi-option span {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333 !important;
    text-align: left !important;
    min-height: auto !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.mobile-poi-option[data-active="true"] {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}

/* Stili per diversi tipi di POI attivi */
.mobile-poi-option[data-poi-type="passes"][data-active="true"] {
    border-color: #28752B;
    background-color: rgba(40, 117, 43, 0.1);
}

.mobile-poi-option[data-poi-type="passes"][data-active="true"] span {
    color: #28752B !important;
    font-weight: 600 !important;
}

.mobile-poi-option[data-poi-type="roads"][data-active="true"] {
    border-color: #2196F3;
    background-color: rgba(33, 150, 243, 0.1);
}

.mobile-poi-option[data-poi-type="roads"][data-active="true"] span {
    color: #2196F3 !important;
    font-weight: 600 !important;
}

.mobile-poi-option[data-poi-type="picnic"][data-active="true"] {
    border-color: #795548;
    background-color: rgba(121, 85, 72, 0.1);
}

.mobile-poi-option[data-poi-type="picnic"][data-active="true"] span {
    color: #795548 !important;
    font-weight: 600 !important;
}

.mobile-poi-option[data-poi-type="favorites"][data-active="true"] {
    border-color: #ff4757;
    background-color: rgba(255, 71, 87, 0.1);
}

.mobile-poi-option[data-poi-type="favorites"][data-active="true"] span {
    color: #ff4757 !important;
    font-weight: 600 !important;
}

.mobile-poi-option:hover {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.05);
}

/* Opzioni Route */
.mobile-route-options {
    padding: 20px;
    padding-bottom: calc(20px + 13vh); /* Aggiunge spazio per la bottom bar */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-route-option {
    display: flex;
    align-items: center;
    padding: 10px 14px !important;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

/* Uniformità: rimosso spostamento e ombra per attivi (niente regole aggiuntive) */

.mobile-route-option[data-route-type="driving"][data-active="true"] {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.15);
}

.mobile-route-option[data-route-type="driving-no-toll"][data-active="true"] {
    border-color: #FF9800;
    background-color: rgba(255, 152, 0, 0.15);
}

.mobile-route-option[data-route-type="cycling"][data-active="true"] {
    border-color: #9C27B0;
    background-color: rgba(156, 39, 176, 0.15);
}

.mobile-route-option[data-route-type="driving"][data-active="true"] span {
    color: #4CAF50;
    font-weight: 600;
}

.mobile-route-option[data-route-type="driving-no-toll"][data-active="true"] span {
    color: #FF9800;
    font-weight: 600;
}

.mobile-route-option[data-route-type="cycling"][data-active="true"] span {
    color: #9C27B0;
    font-weight: 600;
}

.mobile-route-option[data-active="true"] img {
    transform: scale(1.1);
}

.mobile-route-option:hover {
    background-color: rgba(0,0,0,0.02);
}

/* Opzioni Download */
.mobile-download-options {
    padding: 20px;
    padding-bottom: calc(20px + 13vh); /* Aggiunge spazio per la bottom bar */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-download-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.mobile-download-option:hover {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.05);
}

/* Stili comuni per icone e testo */
.mobile-poi-option i,
.mobile-route-option i,
.mobile-download-option i,
.mobile-more-option i {
    margin-right: 15px;
    color: #4CAF50;
    flex-shrink: 0;
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.mobile-poi-option svg,
.mobile-route-option svg,
.mobile-download-option svg,
.mobile-more-option svg {
    margin-right: 15px;
    color: #4CAF50 !important;
    stroke: #4CAF50 !important;
    flex-shrink: 0;
}

.mobile-poi-option img,
.mobile-route-option img,
.mobile-download-option img,
.mobile-more-option img {
    margin-right: 15px;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.mobile-poi-option span,
.mobile-route-option span,
.mobile-download-option span {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

/* Stili per testo attivo sui pulsanti mobile route */
.mobile-route-option[data-route-type="driving"][data-active="true"] span {
    color: #4CAF50;
    font-weight: 600;
}

.mobile-route-option[data-route-type="driving-no-toll"][data-active="true"] span {
    color: #FF9800;
    font-weight: 600;
}

.mobile-route-option[data-route-type="cycling"][data-active="true"] span {
    color: #9C27B0;
    font-weight: 600;
}

.mobile-route-option[data-active="true"] img {
    transform: scale(1.1);
}

/* Lista waypoints */
.mobile-waypoints-list {
    padding: 20px;
    padding-bottom: calc(20px + 13vh); /* Aggiunge spazio per la bottom bar */
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

/* Waypoints nel bottom sheet (50vh): forza altezza interna scrollabile */
#mobile-waypoints-modal .mobile-waypoints-list {
    max-height: none !important; /* ignora limite basato su 90vh */
    height: calc(50vh - 20px) !important; /* 20px = padding top del contenuto */
    height: calc(50vh - 20px - env(safe-area-inset-bottom)) !important; /* iOS modern */
    height: calc(50vh - 20px - constant(safe-area-inset-bottom)) !important; /* iOS legacy */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; /* momentum scrolling su iOS */
    overscroll-behavior: contain; /* evita scroll chaining al body */
}

/* Consenti lo scroll con il dito anche quando si tocca al centro degli elementi */
@media (max-width: 768px) {
    #mobile-waypoints-modal .mobile-waypoints-list,
    #mobile-waypoints-modal .mobile-waypoints-list .waypoint-item {
        touch-action: pan-y !important; /* abilita pan verticale, evita blocco del drag */
    }
}

/* Stili per i controlli dei waypoints nel modal mobile */
.mobile-waypoints-list .route-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px; /* più compatto */
    flex-wrap: wrap;
}
/* Pulsanti controllo percorso (puliti e compatti) */
.mobile-waypoints-list .route-control-btn {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 110px;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.mobile-waypoints-list .route-control-btn svg { width:14px; height:14px; stroke:currentColor; }
.mobile-waypoints-list .route-control-btn:hover { background:#f5f5f5; }

/* Inverti percorso (verde) */
.mobile-waypoints-list .route-control-btn.reverse-btn {
    border-color:#2e7d32 !important;
    color:#2e7d32 !important;
}
.mobile-waypoints-list .route-control-btn.reverse-btn svg { color:#2e7d32 !important; stroke:#2e7d32 !important; }
.mobile-waypoints-list .route-control-btn.reverse-btn:hover { background:#e8f5e9; }

/* Cancella percorso (rosso) */
.mobile-waypoints-list .route-control-btn.clear-btn {
    border-color:#c62828 !important;
    color:#c62828 !important;
}
.mobile-waypoints-list .route-control-btn.clear-btn svg { color:#c62828 !important; stroke:#c62828 !important; }
.mobile-waypoints-list .route-control-btn.clear-btn:hover { background:#ffebee; }
.mobile-waypoints-list .move-btn,
.mobile-waypoints-list .remove-btn {
    width: 28px; /* Ridotto da 32px */
    height: 28px; /* Ridotto da 32px */
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mobile-waypoints-list .move-btn:hover {
    border-color: #4CAF50;
    color: #4CAF50;
}

.mobile-waypoints-list .remove-btn {
    background: #fff5f5;
    border-color: #fecaca;
    color: #dc2626;
    font-size: 14px; /* Ridotto da 16px */
    margin-left: 6px; /* Ridotto da 8px */
}

.mobile-waypoints-list .remove-btn:hover {
    background: #fef2f2;
    border-color: #f87171;
}

.mobile-waypoints-list .location-info {
    font-size: 11px; /* Ridotto da 12px */
    color: #666;
    margin-top: 3px; /* Ridotto da 4px */
    line-height: 1.2;
}

/* Opzioni More */
.mobile-more-options {
    padding: 20px;
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

/* Rendi il modal "Altro" scorrevole: header fisso, contenuto che scrolla */
#mobile-more-modal .mobile-modal-content {
    /* Adatta l'altezza per considerare i 20px di margine sopra/sotto */
    height: calc(100vh - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    display: flex;
    flex-direction: column;
}

#mobile-more-modal .mobile-modal-header {
    flex: 0 0 auto;
}

#mobile-more-modal .mobile-more-options {
    flex: 1 1 auto;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; /* momentum scrolling su iOS */
    overscroll-behavior: contain;      /* evita scroll chaining al body */
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-bottom: calc(20px + constant(safe-area-inset-bottom));
}

.mobile-more-section {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0;
}

.mobile-more-section:first-child {
    margin-top: 0;
}

.mobile-more-option {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.mobile-more-option:hover {
    background-color: rgba(76, 175, 80, 0.05);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.mobile-more-option:last-child {
    border-bottom: none;
}

.mobile-more-option span {
    font-size: 16px;
    color: #333;
}

/* Nascondere la bottom bar quando un modal è aperto */
body.modal-open .mobile-bottom-bar {
    display: none !important; /* nasconde la bottom bar quando un modal è aperto */
}

.mobile-modal {
    z-index: 3000; /* assicurati che stia sopra la bottom bar */
}

/* Stile alternativo: rendere la bottom bar invisibile quando un modal è aperto */
.mobile-modal.active ~ .mobile-bottom-bar,
.mobile-modal[style*="display: flex"] ~ .mobile-bottom-bar {
    display: none !important; /* nasconde anche se il modal compare prima nel DOM */
}

/* Responsive adjustments */
@media screen and (max-width: 480px) {
    .mobile-bar-text {
        font-size: 9px; /* Aumentato da 8px */
    }
    
    .mobile-bottom-bar {
        min-height: 85px;
        height: 13vh;
    }
    
    .mobile-bar-item {
        min-height: 65px;
        padding: 4px 2px;
    }

    /* Pulsanti POI e Route più compatti */
    .mobile-poi-option,
    .mobile-route-option {
        padding: 10px 12px !important; /* Riduce vertical space */
        min-height: 52px !important;   /* Più compatto ma >44px tappabile */
    }
    .mobile-poi-option span,
    .mobile-route-option span {
        font-size: 14px !important; /* Ridotto da 16 */
        line-height: 1.2 !important;
    }
    .mobile-poi-option i,
    .mobile-route-option i,
    .mobile-poi-option svg,
    .mobile-route-option svg,
    .mobile-poi-option img,
    .mobile-route-option img {
        font-size: 18px !important;
        width: 20px !important;
        height: 20px !important;
        margin-right: 14px !important; /* leggermente meno */
    }
    
    .mobile-bar-icon {
        font-size: 18px; /* Aumentato da 16px */
    }
    
    .mobile-bar-icon i {
        font-size: 18px; /* Aumentato da 16px */
    }
    
    #map {
        height: 87vh !important;
        width: 100% !important;
        position: relative !important;
    }
    
    #sidebar {
        display: none !important;
    }
    
    /* Assicuriamo che gli attributi Mapbox siano visibili anche su schermi piccoli - soluzione più aggressiva */
    .mapboxgl-ctrl-bottom-left {
        position: fixed !important;
        bottom: calc(13vh + 5px) !important;
        left: 5px !important;
        z-index: 999 !important;
    }
    
    .mapboxgl-ctrl-bottom-right {
        position: fixed !important;
        bottom: calc(13vh + 5px) !important;
        right: 5px !important;
        z-index: 999 !important;
    }
    
    /* Assicurarsi che gli attributi siano più visibili */
    .mapboxgl-ctrl-attrib {
        background-color: rgba(255, 255, 255, 0.8) !important;
        border-radius: 4px !important;
        padding: 2px 5px !important;
        font-size: 10px !important;
    }
}

/* Override finale di uniformità (in caso di altre regole più sotto) */
@media screen and (max-width: 768px) {
    .mobile-poi-option,
    .mobile-poi-option.poi-button,
    .mobile-route-option {
            padding: 10px 14px !important;
            min-height: 52px !important;
            display: flex;
            align-items: center;
    }
    .mobile-poi-option .poi-icon,
    .mobile-route-option img,
    .mobile-route-option svg,
    .mobile-route-option i {
            margin-right: 16px !important;
    }
}

@media screen and (max-width: 360px) {
    .mobile-bar-text {
        font-size: 8px; /* Aumentato da 7px */
    }
    
    .mobile-bar-icon {
        font-size: 16px; /* Aumentato da 14px */
    }
    
    .mobile-bar-icon i {
        font-size: 16px; /* Aumentato da 14px */
    }
    
    .mobile-bar-item {
        min-height: 60px;
        padding: 3px 1px;
    }

    /* Ulteriore compattazione su schermi strettissimi */
    .mobile-poi-option,
    .mobile-route-option {
        padding: 8px 10px !important;
        min-height: 48px !important;
    }
    .mobile-poi-option span,
    .mobile-route-option span {
        font-size: 13px !important;
    }
    .mobile-poi-option i,
    .mobile-route-option i,
    .mobile-poi-option svg,
    .mobile-route-option svg,
    .mobile-poi-option img,
    .mobile-route-option img {
        font-size: 16px !important;
        width: 18px !important;
        height: 18px !important;
        margin-right: 12px !important;
    }
}

/* Stili per smartphone in landscape */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .mobile-bottom-bar {
        height: 20vh;
        min-height: 100px;
    }
    
    #map {
        height: 80vh !important;
        width: 100% !important;
        position: relative !important;
    }
    
    #sidebar {
        display: none !important;
    }
    
    /* Riposizionare gli attributi di Mapbox sopra la bottom bar in modalità landscape - soluzione più aggressiva */
    .mapboxgl-ctrl-bottom-left {
        position: fixed !important;
        bottom: calc(20vh + 5px) !important;
        left: 5px !important;
        z-index: 999 !important;
    }
    
    .mapboxgl-ctrl-bottom-right {
        position: fixed !important;
        bottom: calc(20vh + 5px) !important;
        right: 5px !important;
        z-index: 999 !important;
    }
    
    /* Assicurarsi che gli attributi siano visibili anche in landscape */
    .mapboxgl-ctrl-attrib {
        background-color: rgba(255, 255, 255, 0.8) !important;
        border-radius: 4px !important;
        padding: 2px 5px !important;
        font-size: 11px !important;
    }
}