/**
 * Espaçamentos compactos para mobile (delivery + comanda).
 * Carregado após responsive.css nos layouts públicos.
 */

/* Categorias: mesmo tamanho ativo/inativo (só muda a cor) */
.menu_filter .item a,
.menu_filter .item.active a,
.menu_filter .item a:hover,
.menu_filter .item a:focus {
    font-size: 14px;
    line-height: 22px;
    padding: 4px 16px !important;
    font-weight: 600;
    font-family: 'Montserrat-Regular', sans-serif;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    transform: none !important;
    display: inline-block;
}

@media (max-width: 767px) {

    /* --- Conteúdo principal --- */
    .main-content {
        margin-top: 0.5rem !important;
    }

    .page-section {
        margin-top: 12px !important;
        margin-bottom: 24px !important;
    }

    /* --- Cardápio --- */
    #menu.section {
        margin-top: 0 !important;
        padding-top: 0;
    }

    .menu_filter {
        margin-bottom: 14px;
    }

    .menu_filter .item {
        margin-top: 5px;
    }

    #menu_items {
        padding-bottom: 20px;
    }

    #menu_items .filtr-item {
        margin-bottom: 14px;
    }

    .section .title-block {
        margin-bottom: 14px;
    }

    .section-title {
        margin-bottom: 12px;
    }

    /* --- Carrinho / checkout --- */
    .carrinho-container {
        margin-top: 8px;
    }

    /* --- Header delivery: regras finais em principal_web.php (após todos os CSS) --- */

    /* --- Header comanda --- */
    .comanda-header {
        padding: 8px 12px 8px;
    }

    .comanda-mesa-bar {
        margin-top: 6px;
        gap: 6px;
    }

    .comanda-logo {
        font-size: 16px;
    }

    .comanda-logo img {
        height: 30px;
    }

    /* --- Produto / páginas com #menu --- */
    #menu .section-title {
        font-size: 24px;
    }

    #menu .title-block {
        margin-bottom: 8px;
    }

    .menu_filter .item a,
    .menu_filter .item.active a,
    .menu_filter .item a:hover,
    .menu_filter .item a:focus {
        font-size: 13px;
        line-height: 20px;
        padding: 3px 14px !important;
    }
}

@media (min-width: 768px) {

    .main-content {
        margin-top: 1.25rem;
    }

    #menu.section {
        margin-top: 1.5rem;
    }

    .menu_filter {
        margin-bottom: 50px;
    }

    .menu_filter .item a,
    .menu_filter .item.active a,
    .menu_filter .item a:hover,
    .menu_filter .item a:focus {
        font-size: 16px;
        line-height: 24px;
        padding: 4px 20px !important;
    }
}