/* ===== Ajustes base para “look de app” ===== */
:root {
    /* Espaço seguro em iOS (notch) */
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

html {
    font-size: 16px;
}

body {
    background: #f8f9fa;
}

/* Header fixo, compacto e com hierarquia */
.mc-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-top: calc(0.25rem + var(--safe-top));
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .mc-header .title {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1;
    }

    .mc-header .subtitle {
        font-size: .8rem;
        color: #6c757d;
    }

/* Conteúdo com espaço para bottom bar opcional */
.mc-content {
    padding-bottom: calc(64px + var(--safe-bottom));
}

/* Bottom bar opcional (quando a página define a seção "CartBar") */
.mc-bottombar {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    padding-bottom: var(--safe-bottom);
    background: #ffffff;
    border-top: 1px solid rgba(0,0,0,.08);
}

/* Footer discreto */
.mc-footer {
    color: #6c757d;
    font-size: .875rem;
}

/* Cards mais “respiráveis” */
.card {
    border-radius: .75rem;
    border: 1px solid rgba(0,0,0,.06);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-weight: 600;
}

/* Links sóbrios */
a {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

    /* Foco visível (acessibilidade) */
    a:focus, button:focus, input:focus, select:focus, textarea:focus {
        outline: 3px solid #258cfb33;
        outline-offset: 1px;
    }

/* ===== Sub-navegação do fluxo (partial _OrderNav) ===== */

.order-subnav {
}

    .order-subnav .order-subnav-wrap {
        display: flex;
        gap: .5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: .25rem;
    }

    .order-subnav .subnav-link {
        display: inline-block;
        white-space: nowrap;
        border: 1px solid rgba(0,0,0,.08);
        padding: .4rem .8rem;
        border-radius: 999px;
        background: #fff;
        font-size: .9rem;
        color: #333;
    }

        .order-subnav .subnav-link:hover,
        .order-subnav .subnav-link:focus {
            text-decoration: none;
            border-color: rgba(0,0,0,.18);
            box-shadow: 0 1px 0 rgba(0,0,0,.03);
        }

        .order-subnav .subnav-link.active {
            border-bottom: 2px solid #0d6efd; /* linha azul */
            color: #0d6efd; /* mantém destaque pelo texto */
            font-weight: 600; /* levemente mais forte */
        }

/* ===== Utilitários pequenos ===== */
.small.text-muted {
    color: #6c757d !important;
}


/* Escopo apenas na página de catálogo */
.catalog-page .category-chips {
    display: flex;
    overflow-x: auto;
    gap: .5rem;
    padding: .25rem 0 .75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

    .catalog-page .category-chips .chip {
        display: inline-block;
        white-space: nowrap;
        border: 1px solid rgba(0,0,0,.08);
        padding: .35rem .75rem;
        border-radius: 999px;
        background: #fff;
        font-size: .9rem;
        color: #333;
    }

        .catalog-page .category-chips .chip:focus,
        .catalog-page .category-chips .chip:hover {
            text-decoration: none;
            border-color: rgba(0,0,0,.18);
            box-shadow: 0 1px 0 rgba(0,0,0,.03);
        }

/* Cartões de produto */
.catalog-page .product-card {
    border-radius: 0.9rem;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: transform .06s ease, box-shadow .12s ease;
}

    .catalog-page .product-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0,0,0,.06);
    }

    .catalog-page .product-card .card-title {
        font-size: 1rem;
        font-weight: 600;
    }

    .catalog-page .product-card .card-body strong {
        font-weight: 700;
        padding: .25rem .5rem;
        border-radius: .5rem;
        background: #f1f3f5;
    }

/* Espaço para header fixo do layout */
.catalog-page [id^="cat_"] {
    scroll-margin-top: 72px;
}

/* Acessibilidade: foco visível em chips e botões */
.catalog-page .chip:focus {
    outline: 3px solid #258cfb33;
}

/* Stepper de quantidade (apenas ajuste visual mínimo, sem alterar ids/names) */
.catalog-page .qty-stepper .btn {
    min-width: 2.25rem;
}

/* Melhorias no formulário de busca */
.catalog-page .search-box .form-control {
    border-radius: .75rem 0 0 .75rem;
}

.catalog-page .search-box .btn {
    border-radius: 0 .75rem .75rem 0;
}


/* ===== Estilos escopados ao Checkout ===== */
.checkout-page .card {
    border-radius: .85rem;
    border: 1px solid rgba(0,0,0,.06);
}

.checkout-page .card-header {
    background: #fff;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Itens do carrinho */
.checkout-page .cart-items > .border {
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: .75rem !important;
    padding: .75rem !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.checkout-page .cart-items .fw-semibold {
    font-weight: 600;
}

.checkout-page .cart-items .small.text-muted {
    color: #6c757d !important;
}

.checkout-page .cart-items .d-flex.align-items-center.gap-2 .btn {
    min-width: 2.25rem;
}

.checkout-page .cart-items .mx-1 {
    min-width: 1.75rem;
    text-align: center;
    display: inline-block;
}

/* Adicionais - destaque para selecionados */
.checkout-page .adicionais-title {
    font-weight: 600;
    color: #495057;
}

.checkout-page .form-check {
    padding: .35rem .5rem;
    border-radius: .5rem;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .checkout-page .form-check:has(> .form-check-input:checked) {
        background: #f6f9ff;
        box-shadow: inset 0 0 0 1px rgba(37,140,251,.15);
    }

/* Total */
.checkout-page .total-row {
    border-top: 1px dashed rgba(0,0,0,.08);
    padding-top: .5rem;
}

/* Formulário */
.checkout-page .form-label {
    font-weight: 600;
}

.checkout-page .form-control, .checkout-page .form-select {
    border-radius: .6rem;
}

/* Acessibilidade: foco visível */
.checkout-page a:focus, .checkout-page button:focus, .checkout-page input:focus, .checkout-page select:focus, .checkout-page textarea:focus {
    outline: 3px solid #258cfb33;
    outline-offset: 1px;
}

/* Espaço compatível com header fixo (se houver) */
.checkout-page {
    scroll-margin-top: 72px;
}

/* ===== Estilos escopados à página de Pedidos ===== */

.orders-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.orders-page .controls {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Cards de pedido */
.orders-page .order-card {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: transform .06s ease, box-shadow .12s ease;
}

    .orders-page .order-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0,0,0,.06);
    }

.orders-page .order-title {
    font-weight: 600;
    font-size: 1rem;
}

.orders-page .order-sub {
    color: #6c757d;
    font-size: .85rem;
}

.orders-page .order-total {
    font-weight: 700;
    background: #f1f3f5;
    border-radius: .5rem;
    padding: .25rem .5rem;
    white-space: nowrap;
}

/* Badge de status (base) */
.orders-page .status-badge {
    font-size: .8rem;
    padding: .25rem .5rem;
    border-radius: .5rem;
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    white-space: nowrap;
}
/* Mapeamento por conteúdo do status (sem depender de enum exato) */
.orders-page [data-status*="Rascunho"] .status-badge {
    background: #fff;
    color: #6c757d;
}

.orders-page [data-status*="Aberto"] .status-badge {
    background: #fff;
    color: #0d6efd;
}

.orders-page [data-status*="Confirmado"] .status-badge {
    background: #e7f1ff;
    color: #0d6efd;
}

.orders-page [data-status*="Prepar"] .status-badge {
    background: #fff7e6;
    color: #b4690e;
}
/* EmPreparacao */
.orders-page [data-status*="Caminho"] .status-badge {
    background: #eafaf1;
    color: #0a7c4a;
}
/* A caminho */
.orders-page [data-status*="Retirada"] .status-badge {
    background: #eafaf1;
    color: #0a7c4a;
}
/* AguardandoRetirada/Retirada */
.orders-page [data-status*="Entreg"] .status-badge {
    background: #eafaf1;
    color: #0a7c4a;
}
/* Entregue */
.orders-page [data-status*="Cancel"] .status-badge {
    background: #fdecec;
    color: #b42318;
}
/* Cancelado */

/* Acessibilidade: foco visível */
.orders-page a:focus, .orders-page button:focus, .orders-page input:focus {
    outline: 3px solid #258cfb33;
    outline-offset: 1px;
}

/* Empty state */
.orders-page .empty {
    border: 1px dashed rgba(0,0,0,.15);
    border-radius: .85rem;
    padding: 1rem;
    color: #6c757d;
    text-align: center;
}

/* Espaço compatível com header fixo do layout */
.orders-page {
    scroll-margin-top: 72px;
}

/* ===== Estilos escopados à página de Status ===== */

.status-page .card {
    border-radius: .85rem;
    border: 1px solid rgba(0,0,0,.06);
}

.status-page .card-header {
    background: #fff;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Resumo topo */
.status-page .summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

@media (min-width:576px) {
    .summary-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

.status-page .summary-item {
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .65rem;
    padding: .75rem;
}

.status-page .summary-label {
    color: #6c757d;
    font-size: .8rem;
}

.status-page .summary-value {
    font-weight: 600;
}

/* Timeline */
.status-page .timeline {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .5rem;
}

@media (min-width:768px) {
    .status-page .timeline {
        flex-direction: row;
    }
}

.status-page .step {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
}

    .status-page .step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 11px;
        top: 22px;
        bottom: -12px;
        width: 2px;
        background: rgba(0,0,0,.08);
    }

@media (min-width:768px) {
    .status-page .step {
        flex: 1;
    }

        .status-page .step:not(:last-child)::after {
            top: 11px;
            left: 22px;
            right: -12px;
            bottom: auto;
            height: 2px;
            width: auto;
        }
}

.status-page .dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.2);
    background: #fff;
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
}

.status-page .step.done .dot {
    background: #eaf5ff;
    border-color: #0d6efd33;
}

.status-page .step.active .dot {
    background: #0d6efd;
    border-color: #0d6efd;
}

.status-page .step.cancel .dot {
    background: #fdecec;
    border-color: #b42318;
}

.status-page .label {
    font-weight: 600;
    font-size: .92rem;
}

.status-page .hint {
    color: #6c757d;
    font-size: .8rem;
}

/* Painel de atualizações */
.status-page .updates .update-item {
    border-left: 3px solid #e9ecef;
    padding-left: .75rem;
    margin-left: .25rem;
}

    .status-page .updates .update-item + .update-item {
        margin-top: .75rem;
    }

/* Acessibilidade */
.status-page a:focus, .status-page button:focus {
    outline: 3px solid #258cfb33;
    outline-offset: 1px;
}

@media (min-width: 576px) {
    .catalog-page .product-card .card-title {
        font-size: 1.05rem;
    }
}

@media (min-width: 992px) {
    .catalog-page .product-card .card-title {
        font-size: 1.1rem;
    }
}

/* === UI/UX enhancements layer (mobile-first) === */
:root {
    --radius-card: .85rem;
    --radius-input: .65rem;
    --radius-chip: 999px;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.06);
    --shadow-elev: 0 4px 14px rgba(0,0,0,.08);
    --color-border: rgba(0,0,0,.08);
    --focus-ring: 3px solid #258cfb33;
    --tap-size: 44px;
}

/* tipografia progressiva */
@media (min-width: 576px) {
    html {
        font-size: 16.5px
    }
}

@media (min-width: 768px) {
    html {
        font-size: 17px
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 18px
    }
}

:where(a,button,[role="button"],input,select,textarea):focus-visible {
    outline: var(--focus-ring);
    outline-offset: 1px;
}

/* botões */
.btn {
    border-radius: .6rem;
    min-height: 40px;
    transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-outline-primary:hover {
    background: #e7f1ff;
}

.btn-outline-secondary:hover {
    background: #f1f3f5;
}

.btn:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* cartões */
.card {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}

@media (hover:hover) {
    .card:hover {
        box-shadow: var(--shadow-elev);
    }
}

/* inputs */
.form-control, .form-select {
    border-radius: var(--radius-input);
    min-height: 42px;
}

.form-check-input {
    width: 1.15em;
    height: 1.15em;
}

/* utilitário a11y */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* novos ganchos semânticos */
.price-badge {
    font-weight: 700;
    background: #f1f3f5;
    border-radius: .5rem;
    padding: .25rem .5rem;
    display: inline-block;
}

.product-meta {
    color: #6c757d;
    line-height: 1.4;
}

.actions-sticky {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 10;
    border-top: 1px solid var(--color-border);
}

.badge-soft {
    background: #f8f9fa;
    border: 1px solid var(--color-border);
}

.badge-outline {
    background: #fff;
    border: 1px solid var(--color-border);
}

.qty-stepper--compact .btn {
    min-width: 2rem;
}

.summary-item--emphasis {
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.empty--compact {
    padding: .75rem;
    font-size: .9rem;
}

/* lista de pedidos */
.order-list {
    display: grid;
    gap: .5rem;
}

@media(min-width:768px) {
    .order-list {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
}

/* reforços de chips */
.order-subnav .subnav-link {
    border-radius: var(--radius-chip);
}

.catalog-page .category-chips .chip {
    border-radius: var(--radius-chip);
}

/* checkout específico */
.checkout-page .cart-body {
    display: block;
}

.checkout-page .total-row {
    border-top: 1px dashed var(--color-border);
    padding-top: .5rem;
}

/* status */
.status-page .summary-grid {
    gap: .5rem;
}