/* Colores personalizados para presentación - Komuro Sushi */

/* Colores principales */
:root {
    --primary-color: #153c65;          /* Azul oscuro elegante */
    --secondary-color: #6c757d;        /* Gris medio */
    --text-dark: #2c3e50;             /* Texto principal oscuro */
    --text-muted: #6c757d;            /* Texto secundario */
    --text-light: #f8f9fa;            /* Texto claro */
    --success-color: #28a745;         /* Verde éxito */
    --warning-color: #ffc107;         /* Amarillo advertencia */
    --danger-color: #dc3545;          /* Rojo peligro */
    --info-color: #17a2b8;            /* Azul información */
    --sushi-red: #c41e3a;             /* Rojo sushi para precios */
    --whatsapp-green: #25d366;        /* Verde WhatsApp para botones */
    
    /* Colores de fondo de secciones */
    --bg-promotions: #f8f9fa;         /* Fondo promociones */
    --bg-featured: #ffffff;           /* Fondo productos destacados */
    --bg-menu: #f1f3f4;              /* Fondo menú productos */
    --bg-dishes: #ffffff;             /* Fondo platos individuales */
}

/* Aplicar colores principales */
.btn-primary {
    background-color: var(--whatsapp-green) !important;
    border-color: var(--whatsapp-green) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #1eb554 !important;
    border-color: #1eb554 !important;
    color: #ffffff !important;
}

/* Botones de éxito también en verde WhatsApp */
.btn-success {
    background-color: var(--whatsapp-green) !important;
    border-color: var(--whatsapp-green) !important;
    color: #ffffff !important;
}

.btn-success:hover {
    background-color: #1eb554 !important;
    border-color: #1eb554 !important;
    color: #ffffff !important;
}

/* Botones outline también en verde WhatsApp */
.btn-outline-success {
    background-color: var(--whatsapp-green) !important;
    border-color: var(--whatsapp-green) !important;
    color: #ffffff !important;
}

.btn-outline-success:hover {
    background-color: #1eb554 !important;
    border-color: #1eb554 !important;
    color: #ffffff !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

/* Títulos de categorías blancos - Sobrescribir Bootstrap text-dark */
.category-title,
.section-title,
h1.category-name,
h2.category-name,
h3.category-name,
h1, h2, h3, h4, h5, h6,
.section h2,
.section h3,
.section-header h2,
.section-header h3,
.mb-4 h2,
.mb-4 h3,
.text-center h2,
.text-center h3,
/* Específicamente para sobrescribir text-dark de Bootstrap en títulos */
h1.text-dark,
h2.text-dark,
h3.text-dark,
h4.text-dark,
h5.text-dark,
h6.text-dark,
.text-dark h1,
.text-dark h2,
.text-dark h3,
.text-dark h4,
.text-dark h5,
.text-dark h6,
/* Para elementos con emojis y texto específico */
.row h2.text-dark,
.col h2.text-dark,
.container h2.text-dark,
.section .text-dark,
div.text-dark {
    color: #ffffff !important;
}

/* Texto oscuro para párrafos y contenido general */
.text-dark,
p, span, div {
    color: var(--text-dark) !important;
}

/* Sobrescribir Bootstrap text-dark específicamente para títulos de sección, NO para cards */
body .text-dark h1:not(.card-title),
body .text-dark h2:not(.card-title),
body .text-dark h3:not(.card-title),
body .text-dark h4:not(.card-title),
body .text-dark h5:not(.card-title),
body .text-dark h6:not(.card-title),
body h1.text-dark:not(.card-title),
body h2.text-dark:not(.card-title),
body h3.text-dark:not(.card-title),
body h4.text-dark:not(.card-title),
body h5.text-dark:not(.card-title),
body h6.text-dark:not(.card-title) {
    color: #ffffff !important;
}

/* Regla específica para elementos problemáticos, pero NO dentro de cards */
html body .container .text-dark:not(.card *):not(.card-title),
html body .row .text-dark:not(.card *):not(.card-title),
html body .col .text-dark:not(.card *):not(.card-title),
html body div .text-dark:not(.card *):not(.card-title) {
    color: #ffffff !important;
}

/* Texto secundario */
.text-muted {
    color: var(--text-muted) !important;
}

/* Colores de estado */
.text-success {
    color: var(--success-color) !important;
    background-color: transparent !important;
}

.btn-success {
    color: #ffffff !important;
    background-color: var(--success-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
    background-color: transparent !important;
}

.btn-warning {
    color: #000000 !important;
    background-color: var(--warning-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
    background-color: transparent !important;
}

.btn-danger {
    color: #ffffff !important;
    background-color: var(--danger-color) !important;
}

.text-info {
    color: var(--info-color) !important;
    background-color: transparent !important;
}

.btn-info {
    color: #ffffff !important;
    background-color: var(--info-color) !important;
}

/* Secciones del catálogo */
.section-promotions {
    background-color: var(--bg-promotions) !important;
}

.section-featured-products {
    background-color: var(--bg-featured) !important;
}

.section-products-menu {
    background-color: var(--bg-menu) !important;
}

.section-individual-dishes {
    background-color: var(--bg-dishes) !important;
}

/* Navbar y elementos principales - Fondo negro */
.navbar,
.navbar-expand-lg,
.navbar-dark,
nav.navbar {
    background-color: #000000 !important;
}

.navbar-brand {
    color: #ffffff !important;
    font-weight: bold !important;
}

.navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-nav .nav-link:hover {
    color: #cccccc !important;
}

/* Cards de productos */
.card {
    border-color: #e9ecef !important;
}

/* Títulos de cards DEBEN permanecer en negro - sobrescribir cualquier regla blanca */
.card-title,
.card .card-title,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card .text-dark,
body .card .text-dark,
html body .card .text-dark {
    color: var(--text-dark) !important;
}

.card-text {
    color: var(--text-muted) !important;
}

/* Precios - Fondo rojo sushi y texto blanco PARA TODAS LAS SECCIONES */
.price,
.precio,
.product-price,
.card-price,
.menu-price,
span.price,
div.price,
.price-tag,
.price-value,
/* Piezas de promociones en cuadro rojo */
.promotion-pieces,
.h4.text-success.mb-0.promotion-pieces,
span.promotion-pieces,
/* Precios específicos de promociones (ahora sin fondo) */
.h4.text-success,
h4.text-success,
.text-success.h4,
.text-success.mb-0,
/* Precios específicos de platos individuales */
.h6.text-success,
h6.text-success,
.text-success.h6,
/* Precios específicos de productos destacados y menú */
span.price-tag,
.formatted_price,
/* Selectores más generales para capturar todos los precios */
.card-body span.h4,
.card-body span.h6,
.card-body .text-success {
    background-color: var(--sushi-red) !important;  /* Rojo sushi */
    color: #ffffff !important;                      /* Texto blanco */
    font-weight: bold !important;
    padding: 4px 8px !important;                   /* Espaciado interno */
    border-radius: 4px !important;                 /* Bordes redondeados */
    display: inline-block !important;              /* Para que el padding funcione */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; /* Sombra sutil */
}

/* Excepciones: Precios de promociones SIN fondo rojo (solo texto) */
.promotion-price,
small.promotion-price,
.text-muted.promotion-price {
    background-color: transparent !important;
    color: #6c757d !important;
    font-weight: normal !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
    box-shadow: none !important;
}

/* Badge de piezas en promociones - Ticket rojo sushi */
.promotion-pieces-badge,
span.promotion-pieces-badge {
    background-color: var(--sushi-red) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 0.85em !important;
    box-shadow: 0 2px 4px rgba(196, 30, 58, 0.3) !important;
    border: none !important;
}

/* Badge de piezas para cada ítem individual dentro de promociones */
.promotion-item-pieces,
span.promotion-item-pieces {
    background-color: var(--sushi-red) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
    border-radius: 50% !important;  /* Círculo para los números individuales */
    font-size: 0.75em !important;
    min-width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(196, 30, 58, 0.3) !important;
    border: none !important;
}

/* Footer - Fondo negro */
.footer,
footer,
.site-footer {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Botones de cantidad en carrito */
.quantity-btn {
    background-color: var(--whatsapp-green) !important;
    border-color: var(--whatsapp-green) !important;
    color: white !important;
}

.quantity-btn:hover {
    background-color: #1eb554 !important;
    border-color: #1eb554 !important;
}

/* TODOS los botones de agregar al carrito - Verde WhatsApp universal */
.card-body .btn,
.card-body .btn-primary,
.card-body .btn-success,
.card-body .btn-sm,
.card-body button,
.mt-auto .btn,
.mt-auto button,
button[onclick*="addToCart"],
button[onclick*="agregarPromocionAlCarrito"],
button[onclick*="addDishToCart"],
.w-100.btn,
button.btn.btn-primary {
    background-color: var(--whatsapp-green) !important;
    border-color: var(--whatsapp-green) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.card-body .btn:hover,
.card-body .btn-primary:hover,
.card-body .btn-success:hover,
.card-body button:hover,
.mt-auto .btn:hover,
button[onclick*="addToCart"]:hover,
button[onclick*="agregarPromocionAlCarrito"]:hover,
button[onclick*="addDishToCart"]:hover {
    background-color: #1eb554 !important;
    border-color: #1eb554 !important;
    color: #ffffff !important;
}

/* ===============================
   CARRITO FLOTANTE - OPTIMIZACIÓN GENERAL
   =============================== */

/* Carrito flotante mejorado */
.floating-cart {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* Footer del carrito siempre al final */
.floating-cart-footer {
    margin-top: auto;
    background: #ffffff;
    border-top: 1px solid var(--whatsapp-green);
    padding: 15px;
}

/* Botón de WhatsApp mejorado */
.floating-cart-footer .btn,
button[onclick="openCheckoutModal()"] {
    background-color: var(--whatsapp-green) !important;
    border-color: var(--whatsapp-green) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 10px 15px !important;
}

.floating-cart-footer .btn:hover,
button[onclick="openCheckoutModal()"]:hover {
    background-color: #1eb554 !important;
    border-color: #1eb554 !important;
}

/* Badge del carrito */
.cart-badge {
    background-color: var(--danger-color) !important;
}

/* Elementos del admin - Sidebar rojo sushi */
.sidebar {
    background-color: var(--sushi-red) !important;
}

.sidebar .nav-link {
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transform: translateX(5px) !important;
}

.sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Iconos del sidebar */
.sidebar .nav-link i {
    color: #ffffff !important;
}

/* Títulos y separadores del sidebar */
.sidebar .sidebar-heading {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.1rem !important;
}

/* Submenús del sidebar */
.sidebar .nav-item .nav-link {
    color: #ffffff !important;
}

.sidebar .nav-item .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.sidebar .nav-item .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Submenús anidados */
.sidebar .nav-item .nav .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    padding-left: 2.5rem !important;
    font-size: 0.875rem !important;
}

.sidebar .nav-item .nav .nav-item .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar .nav-item .nav .nav-item .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dropdowns en sidebar */
.sidebar .dropdown-menu {
    background-color: var(--sushi-red) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sidebar .dropdown-item {
    color: #ffffff !important;
}

.sidebar .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Collapse items */
.sidebar .collapse .nav-item .nav-link {
    color: #ffffff !important;
    padding-left: 2rem !important;
}

.sidebar .collapse .nav-item .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* TODOS los elementos del sidebar deben ser blancos - Reglas universales */
.sidebar a,
.sidebar .nav-link,
.sidebar .dropdown-item,
.sidebar .sidebar-brand,
.sidebar .navbar-brand,
.sidebar span,
.sidebar .text-muted,
.sidebar .small,
.sidebar li a,
.sidebar ul li a {
    color: #ffffff !important;
}

/* Específico para elementos de AdminLTE y Bootstrap */
.main-sidebar .nav-sidebar .nav-item .nav-link,
.main-sidebar .nav-sidebar .nav-item > .nav-link,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.sidebar .nav-item > .nav-link,
.sidebar .nav-sidebar .nav-item .nav-link {
    color: #ffffff !important;
}

/* Hover states universales */
.sidebar a:hover,
.sidebar .nav-link:hover,
.sidebar .dropdown-item:hover,
.main-sidebar .nav-sidebar .nav-item .nav-link:hover,
.sidebar .nav-item > .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Estados activos universales */
.sidebar a.active,
.sidebar .nav-link.active,
.sidebar .dropdown-item.active,
.main-sidebar .nav-sidebar .nav-item .nav-link.active,
.sidebar .nav-item > .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Forzar color blanco en cualquier texto dentro del sidebar */
.sidebar * {
    color: #ffffff !important;
}

/* ===============================
   RESPONSIVE DESIGN - MÓVIL
   =============================== */

/* Media query para dispositivos móviles (pantallas menores a 768px) */
@media (max-width: 767.98px) {
    
    /* SOBRESCRIBIR layout horizontal en móvil PARA TODAS LAS SECCIONES */
    .card-body .d-flex.justify-content-between,
    .card-body .d-flex.justify-content-between.align-items-center,
    .card-body .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }
    
    /* Contenedor mt-auto debe mantener flex column */
    .card-body .mt-auto,
    .mt-auto {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* TODOS LOS PRECIOS Y PIEZAS deben aparecer arriba y centrados en móvil */
    .price-tag,
    .price,
    .precio,
    .product-price,
    .card-price,
    .menu-price,
    span.price-tag,
    /* Piezas de promociones */
    .promotion-pieces,
    .h4.text-success.mb-0.promotion-pieces,
    /* Precios de promociones */
    .h4.text-success,
    h4.text-success,
    .text-success.h4,
    .text-success.mb-0,
    /* Precios de platos individuales */
    .h6.text-success,
    h6.text-success, 
    .text-success.h6,
    /* Contenedores de precios */
    .card-body span.h4,
    .card-body span.h6,
    .card-body .text-success {
        order: 1 !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        font-size: 1.3em !important;
        align-self: center !important;
        width: auto !important;
    }
    
    /* TODOS LOS BOTONES deben aparecer abajo y ocupar todo el ancho */
    .card-body .btn,
    .card-body .btn-primary,
    .card-body .btn-success, 
    .card-body .btn-sm,
    .card-body button,
    .mt-auto button,
    button.btn.btn-primary.w-100,
    .w-100.btn {
        order: 2 !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: stretch !important;
        /* Asegurar color verde WhatsApp en móvil también */
        background-color: var(--whatsapp-green) !important;
        border-color: var(--whatsapp-green) !important;
        color: #ffffff !important;
    }
    
    /* Hover para botones en móvil */
    .card-body .btn:hover,
    .card-body .btn-primary:hover,
    .card-body .btn-success:hover {
        background-color: #1eb554 !important;
        border-color: #1eb554 !important;
    }
    
    /* Contenedores de información adicional (como badges destacados) */
    .badge.bg-warning,
    .badge.bg-secondary,
    .badge {
        order: 0.5 !important;
        align-self: center !important;
        margin-bottom: 10px !important;
    }
    
    /* Información adicional como precios de promociones */
    small.text-muted,
    .card-body small,
    .promotion-price,
    small.promotion-price {
        order: 1.5 !important;
        text-align: center !important;
        margin-bottom: 10px !important;
        background-color: transparent !important;
        color: #6c757d !important;
        padding: 0 !important;
    }
    
    /* Títulos y texto mantienen orden natural */
    .card-title {
        margin-bottom: 10px !important;
    }
    
    .card-text {
        margin-bottom: 15px !important;
    }
    
    /* Para badges de ingredientes y elementos de promociones */
    .card-body .mb-2,
    .card-body .mb-3,
    .promotion-items {
        margin-bottom: 15px !important;
    }
    
    /* Div contenedores de precios en promociones */
    .card-body .d-flex.justify-content-between.align-items-center div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* ===============================
       CARRITO MÓVIL - BOTÓN VISIBLE
       =============================== */
    
    /* Carrito flotante optimizado para móvil */
    .floating-cart {
        max-height: 70vh !important; /* Reducir altura máxima */
    }
    
    /* Footer del carrito siempre visible */
    .floating-cart-footer {
        position: sticky !important;
        bottom: 0 !important;
        background: #ffffff !important;
        border-top: 2px solid var(--whatsapp-green) !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        z-index: 1050 !important;
        padding: 15px !important;
    }
    
    /* Botón de realizar pedido más prominente en móvil */
    .floating-cart-footer .btn {
        background-color: var(--whatsapp-green) !important;
        border-color: var(--whatsapp-green) !important;
        color: #ffffff !important;
        font-size: 1.1em !important;
        padding: 12px 15px !important;
        font-weight: 600 !important;
        box-shadow: 0 3px 10px rgba(37, 211, 102, 0.3) !important;
    }
    
    /* Contenido del carrito con espacio para el footer */
    .floating-cart-content {
        max-height: calc(70vh - 100px) !important;
        overflow-y: auto !important;
        padding-bottom: 20px !important;
    }
    
    /* Total del carrito con fondo rojo sushi */
    .cart-total {
        font-size: 1.2em !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        background: var(--sushi-red) !important;
        color: #ffffff !important;
        padding: 8px 15px !important;
        font-weight: bold !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 4px rgba(196, 30, 58, 0.3) !important;
    }
    
    .cart-total .text-success {
        color: #ffffff !important;
    }
}

/* ===============================
   TABS DE CATEGORÍAS - PLATOS ÚNICOS
   =============================== */

/* Tabs de categorías con fondo rojo sushi */
#dishCategoriesTabs .nav-link {
    background-color: var(--sushi-red) !important;
    color: #ffffff !important;
    border: 1px solid var(--sushi-red) !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 500 !important;
    margin-right: 2px !important;
    margin-bottom: 4px !important; /* Espacio vertical por defecto */
    transition: all 0.3s ease !important;
}

/* Tab activo */
#dishCategoriesTabs .nav-link.active {
    background-color: #ffffff !important;
    color: var(--sushi-red) !important;
    border-bottom-color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(196, 30, 58, 0.2) !important;
}

/* Hover en tabs */
#dishCategoriesTabs .nav-link:hover:not(.active) {
    background-color: #a61729 !important; /* Rojo más oscuro */
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(196, 30, 58, 0.3) !important;
}

/* Badge dentro de los tabs */
.category-tab-badge,
#dishCategoriesTabs .nav-link .badge,
#dishCategoriesTabs .nav-link .category-tab-badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 0.75em !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
}

#dishCategoriesTabs .nav-link.active .badge,
#dishCategoriesTabs .nav-link.active .category-tab-badge {
    background-color: var(--sushi-red) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Contenedor de tabs */
#dishCategoriesTabs {
    border-bottom: 2px solid var(--sushi-red) !important;
    margin-bottom: 2.5rem !important; /* Más espacio hacia abajo */
    padding-bottom: 0.5rem !important; /* Espacio interno adicional */
    flex-wrap: wrap !important; /* Permitir wrap de tabs */
    gap: 4px !important; /* Espacio consistente entre tabs */
}

/* Nav items con mejor espaciado */
#dishCategoriesTabs .nav-item {
    margin-bottom: 0 !important; /* Reset margin para usar gap */
}

/* Media query para móvil - tabs responsivos */
@media (max-width: 767.98px) {
    #dishCategoriesTabs .nav-link {
        font-size: 0.85em !important;
        padding: 8px 12px !important;
        margin-right: 1px !important;
        margin-bottom: 8px !important; /* Espacio entre líneas de tabs */
    }
    
    #dishCategoriesTabs .nav-link .badge {
        font-size: 0.7em !important;
        padding: 2px 6px !important;
    }
    
    /* Contenedor de tabs en móvil con mejor espaciado */
    #dishCategoriesTabs {
        margin-bottom: 3rem !important; /* Más espacio en móvil */
    }
    
    /* Nav items con espaciado vertical */
    #dishCategoriesTabs .nav-item {
        margin-bottom: 4px !important;
    }
}

/* Contenido de los tabs con mejor espaciado */
#dishCategoriesTabContent .tab-pane {
    padding-top: 1rem !important;
    margin-top: 0.5rem !important;
}

/* Wrapper de tabs con espaciado general mejorado */
.nav.nav-tabs {
    margin-bottom: 2rem !important;
}

/* Barra de navegación inferior - Fondo negro con iconos y textos blancos */
.bottom-nav {
    background: #000000 !important;
    border-top: 1px solid #333333 !important;
    box-shadow: 0 -2px 10px rgba(255,255,255,0.1) !important;
}

.bottom-nav-item {
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.bottom-nav-item span {
    color: #ffffff !important;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
    color: #ffffff !important;
    background-color: var(--sushi-red) !important;
    border-radius: 8px !important;
    transform: translateY(-2px) !important;
}

.bottom-nav-item:hover span,
.bottom-nav-item.active span {
    color: #ffffff !important;
}

.bottom-nav-icon {
    color: #ffffff !important;
}

.bottom-nav-item:hover .bottom-nav-icon,
.bottom-nav-item.active .bottom-nav-icon {
    color: #ffffff !important;
}

.bottom-nav-cart .cart-badge {
    background-color: var(--sushi-red) !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
}