/* style.css - O Arquivo Mestre */

/* 1. Configurações */
@import 'variables.css';
@import 'base.css';

/* 2. Layouts */
@import 'layout/navbar.css';

/* 3. Componentes */
@import 'components/cards.css';
@import 'layout/store-header.css';

@import 'floating-back-button.css';
@import 'bag.css';

@import 'components/buttons.css';
/* Botões */
@import 'components/cards.css';
/* Cards de comida */
@import 'components/checkout-bar.css';
/* Barra de finalizar pedido */
@import 'components/modal.css';
/* Modal de status */
@import 'pages/product.css';

/* Indicador HTMX (reaproveita o loader principal) */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: flex;
}

#htmx-loading {
    background: rgba(248, 250, 252, 0.88);
    backdrop-filter: blur(8px);
    z-index: 1500;
}

body.dark-mode #htmx-loading {
    background: rgba(9, 20, 15, 0.85);
}

.restaurants-grid {
    margin-top: 8px;
}

.restaurant-card {
    position: relative;
    color: inherit;
    text-decoration: none;
}

.restaurant-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-hover);
    color: #cbd5e1;
    font-size: 28px;
}

.restaurant-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.restaurant-status {
    align-self: center;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
}

.status-open {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.status-closed {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecdd3;
}

/* --- ÁREA DO MENU (HOME) --- */
.menu-area {
    max-width: 1200px; /* Um pouco mais largo para telas modernas */
    margin: 0 auto;
    padding: 0 16px 40px 16px;
}

/* Cabeçalhos de Seção */
.section-head {
    margin-bottom: 24px;
    padding-left: 4px; /* Alinhamento visual sutil */
}

.section-title {
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 22px; /* Maior destaque */
    font-weight: 800;
    color: var(--verde-floresta);
    margin: 0;
    letter-spacing: -0.5px;
}

.section-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--text-muted);
    margin: 4px 0 0;
    font-weight: 600;
}

/* O Grid de Produtos */
.menu-grid {
    display: grid;
    /* Desktop: Cards flexíveis, mínimo de 320px para mostrar bem a foto */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding-bottom: 40px;
}

/* Mobile: Coluna única */
@media (max-width: 600px) {
    .menu-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* --- DESTAQUE DE PEDIDOS (Meus Pedidos) --- */
.order-card-latest {
    background-color: #f0fdf4; /* Verde menta muito suave */
    border: 2px solid var(--verde-folha); /* Borda de sucesso */
    border-radius: var(--radius-md);
    transform: scale(1.005); /* Leve destaque visual */
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
    padding: 16px; /* Garante espaçamento interno se não tiver no componente */
}

.order-card-latest:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
    background-color: #dcfce7;
}

.order-card-latest .order-id {
    color: var(--verde-floresta);
    font-weight: 800;
    font-family: 'Montserrat Alternates', sans-serif;
}