/**
 * ACTUALIZACIÓN DE ESTILOS Y TIPOGRAFÍA - BOULEVARD RESTAURANT
 */

/* 1. Tipografía elegante y legible */
body, button, .menu-item-name, .menu-item-description {
    font-family: 'DM Sans', sans-serif !important;
}

.menu-category-title, h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
}

/* 2. Contenedor de categorías deslizable */
.menu-categories-container,
[class*="overflow-x-auto"],
.flex.flex-wrap.justify-center {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 15px 20px !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important; /* Empezar desde la izquierda */
}

.menu-categories-container::-webkit-scrollbar {
    display: none !important;
}

/* 3. Botones de categoría */
.menu-categories-container button,
[class*="overflow-x-auto"] button,
.flex.flex-wrap.justify-center button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 10px 22px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 0 !important; /* Estilo más elegante sin bordes redondeados */
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: rgba(245, 240, 232, 0.5) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* 4. Estilo para el botón activo */
.menu-categories-container button.active,
[class*="overflow-x-auto"] button[aria-selected="true"],
.flex.flex-wrap.justify-center button.active-category {
    color: #c9a96e !important;
    border-bottom: 2px solid #c9a96e !important;
    opacity: 1 !important;
}

/* 5. Evitar desbordamiento general */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* 6. Ajustes de items del menú */
.menu-item-name {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.menu-item-price {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
}