/* /assets/css/mobile-bottom-nav.css */

/* Por defecto, la barra está oculta en escritorio */
.mobile-bottom-nav {
    display: none;
}

/* --- Media Query para activar la barra en móviles --- */
@media (max-width: 768px) {
    /* Estilo del contenedor principal de la barra */
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65px;
        background-color: var(--color-mobile-nav-bg, rgba(0, 0, 0, 0.9));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1100; /* Asegura que esté por encima de otros elementos */
    }

    /* Estilo para cada botón de la barra */
    .nav-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #f0f0f0;
        text-decoration: none;
        font-size: 10px;
        flex-grow: 1;
        gap: 4px;
    }

    .nav-button i {
        font-size: 20px;
    }

    /* Contenedor especial para el botón central del carrito */
    .center-button-container {
        position: relative;
        width: 70px; /* Ancho para el espacio del botón elevado */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Botón central del carrito (elevado) */
    .center-button {
        position: absolute;
        bottom: -20px; /* Sube el botón */
        width: 60px;
        height: 60px;
        background-color: #000000;
        border: 4px solid #ffffff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
    }
    
    .center-button img {
        width: 32px;
        height: 32px;
    }

    /* Posicionamiento del contador de notificaciones sobre el nuevo botón */
    .center-button .cart-counter {
        top: -5px;
        right: -5px;
    }
}
/* --- INICIO DE LA CORRECCIÓN --- */
    /* Esta regla se aplica a los iconos de Font Awesome (Info, Reseñas, WhatsApp) */
    .nav-button i {
        font-size: 20px;
    }
    
    /* Esta nueva regla se aplica SÓLO al icono SVG (Favoritos) */
    .nav-button svg {
        width: 20px;
        height: 20px;
        fill: currentColor; /* Hereda el color del <a> (que tiene el color personalizado) */
    }
    /* --- FIN DE LA CORRECCIÓN --- */


    /* Contenedor especial para el botón central del carrito */
    .center-button-container {
        position: relative;
        width: 70px; /* Ancho para el espacio del botón elevado */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Botón central del carrito (elevado) */
    .center-button {
        position: absolute;
        bottom: -20px; /* Sube el botón */
        width: 60px;
        height: 60px;
        background-color: #000000;
        border: 4px solid #ffffff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
    }
    
    .center-button img {
        width: 32px;
        height: 32px;
    }

    /* Posicionamiento del contador de notificaciones sobre el nuevo botón */
    .center-button .cart-counter {
        top: -5px;
        right: -5px;
    }