/* Estilos específicos para móviles - Botones de categorías */
@media (max-width: 599px) {
    /* Evitar desbordamiento horizontal en el contenedor del mapa */
    #globalroute-container,
    #globalroute-container .globalroute-search-container,
    #globalroute-container .globalroute-header-container {
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* En móvil no usar 100vw para evitar scroll horizontal y corte por la scrollbar */
    #globalroute-container .globalroute-search-container {
        width: 100% !important;
    }

    /* Quitar padding lateral del header en móvil para tener más espacio horizontal para categorías */
    #globalroute-container .globalroute-header-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* En móvil: los tres botones en columna solo si la fila es hija directa del header (estructura antigua).
       Con el wrapper de scroll (globalroute-category-wrapper), la fila queda en horizontal con scroll y flechas. */
    .globalroute-header-container > .globalroute-category-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .globalroute-header-container > .globalroute-category-row > .globalroute-category-btn2 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        min-height: 48px !important;
        height: auto !important;
        padding: 12px 16px !important;
    }

    /* Estilos comunes a los tres botones en móvil: misma altura y responsivos */
    .globalroute-category-row > .globalroute-category-btn2.globalroute-category-gas,
    .globalroute-category-row > .globalroute-category-btn2.globalroute-category-clean,
    .globalroute-category-row > .globalroute-category-btn2.globalroute-category-parking {
        min-height: 48px !important;
        height: auto !important;
        padding: 12px 16px !important;
        border-radius: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .globalroute-category-row > .globalroute-category-btn2 .globalroute-category-icon2 {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        flex-shrink: 0 !important;
        background: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .globalroute-category-row > .globalroute-category-btn2 .globalroute-category-icon2 img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
        padding: 0 !important;
    }

    .globalroute-category-row > .globalroute-category-btn2 .globalroute-category-label2 {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        text-align: center !important;
        font-size: 13px !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-wrap: break-word !important;
    }

    /* Botón de estacionamientos para móviles */
    .globalroute-category-btn2.globalroute-category-parking {
        border: 0.50px solid #1B1B1B !important;
        background: transparent !important;
    }
    
    .globalroute-category-btn2.globalroute-category-parking .globalroute-category-icon2,
    .globalroute-category-btn2.globalroute-category-parking .globalroute-category-icon2 img {
        width: 24px !important;
        height: 24px !important;
    }
    
    .globalroute-category-btn2.globalroute-category-parking .globalroute-category-label2 {
        color: #1B1B1B !important;
    }
    
    .globalroute-category-btn2.globalroute-category-parking.active {
        background: #005EFE !important;
        color: #FFFFFF !important;
        border: none !important;
    }
    
    .globalroute-category-btn2.globalroute-category-parking.active .globalroute-category-label2 {
        color: #FFFFFF !important;
    }
    
    .globalroute-category-btn2.globalroute-category-parking.active .globalroute-category-icon2 {
        background: none !important;
    }
    
    .globalroute-category-btn2.globalroute-category-parking.inactive {
        background: transparent !important;
        color: #1B1B1B !important;
        border: 0.50px solid #1B1B1B !important;
    }
    
    .globalroute-category-btn2.globalroute-category-parking.inactive .globalroute-category-label2 {
        color: #1B1B1B !important;
    }

    /* Botón de centros de limpieza para móviles */
    .globalroute-category-btn2.globalroute-category-clean {
        border: 0.50px solid #1B1B1B !important;
        background: #FDFDFE !important;
    }

    /* Botón de gasolineras para móviles */
    .globalroute-category-btn2.globalroute-category-gas {
        border: 0.50px solid #1B1B1B !important;
        background: #FDFDFE !important;
    }

    .globalroute-category-btn2.globalroute-category-gas.active {
        background: #005EFE !important;
        color: #FFFFFF !important;
        border: 0.50px solid #005EFE !important;
    }

    .globalroute-category-btn2.globalroute-category-gas.active .globalroute-category-label2 {
        color: #FFFFFF !important;
    }

    .globalroute-category-btn2.globalroute-category-gas.inactive {
        background: #FDFDFE !important;
        color: #1B1B1B !important;
        border: 0.50px solid #1B1B1B !important;
    }

    .globalroute-category-btn2.globalroute-category-gas.inactive .globalroute-category-label2 {
        color: #1B1B1B !important;
    }

    /* Estados activos e inactivos para centros de limpieza */
    .globalroute-category-btn2.globalroute-category-clean.active {
        background: #005EFE !important;
        color: #FFFFFF !important;
        border: 0.50px solid #005EFE !important;
    }
    
    .globalroute-category-btn2.globalroute-category-clean.active .globalroute-category-label2 {
        color: #FFFFFF !important;
    }
    
    .globalroute-category-btn2.globalroute-category-clean.inactive {
        background: #FDFDFE !important;
        color: #1B1B1B !important;
        border: 0.50px solid #1B1B1B !important;
    }
    
    .globalroute-category-btn2.globalroute-category-clean.inactive .globalroute-category-label2 {
        color: #1B1B1B !important;
    }
}