/* Estilos próprios do projeto.
   O grosso da aparência vem do Bootstrap; aqui ficam só os ajustes. */

:root {
    /* Laranja quente, uma identidade só para o site inteiro — o painel
       inclusive. Os valores foram medidos para contraste sobre branco:
       #c2410c dá 5,18:1 e passa AA para texto; #ea580c daria 3,56:1 e
       #f97316 apenas 2,80:1, ambas reprovadas. */
    --cor-primaria: #c2410c;
    --cor-primaria-escura: #9a3412;
    --cor-acento: #fb923c;
    --cor-borda: #e5e7eb;
}

/* O Bootstrap 5.3 traz o azul escrito em literais dentro do CSS compilado
   (`--bs-btn-bg: #0d6efd`, `--bs-link-color: #0d6efd`, `.form-control:focus`
   com `#86b7fe`...). Trocar só o `--bs-primary-rgb` não alcança nenhum deles:
   o resultado seria "a tela parece crua, mas com um botão laranja" — e o anel
   de foco azul piscaria em cima dos campos que acabamos de estilizar. Daí a
   lista explícita abaixo, que é o mínimo que cobre as telas do projeto. */
:root {
    --bs-primary: #c2410c;
    --bs-primary-rgb: 194, 65, 12;
    --bs-link-color: #c2410c;
    --bs-link-color-rgb: 194, 65, 12;
    --bs-link-hover-color: #9a3412;
    --bs-link-hover-color-rgb: 154, 52, 18;
    --bs-primary-text-emphasis: #7c2d12;
    --bs-primary-bg-subtle: #ffedd5;
    --bs-primary-border-subtle: #fed7aa;
}

.btn-primary {
    --bs-btn-bg: var(--cor-primaria);
    --bs-btn-border-color: var(--cor-primaria);
    --bs-btn-hover-bg: var(--cor-primaria-escura);
    --bs-btn-hover-border-color: var(--cor-primaria-escura);
    --bs-btn-active-bg: var(--cor-primaria-escura);
    --bs-btn-active-border-color: var(--cor-primaria-escura);
    --bs-btn-disabled-bg: var(--cor-primaria);
    --bs-btn-disabled-border-color: var(--cor-primaria);
    --bs-btn-focus-shadow-rgb: 194, 65, 12;
}

.btn-outline-primary {
    --bs-btn-color: var(--cor-primaria);
    --bs-btn-border-color: var(--cor-primaria);
    --bs-btn-hover-bg: var(--cor-primaria);
    --bs-btn-hover-border-color: var(--cor-primaria);
    --bs-btn-active-bg: var(--cor-primaria-escura);
    --bs-btn-active-border-color: var(--cor-primaria-escura);
    --bs-btn-focus-shadow-rgb: 194, 65, 12;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cor-acento);
    box-shadow: 0 0 0 .25rem rgba(194, 65, 12, .2);
}

.form-check-input:checked {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.form-check-input:focus {
    border-color: var(--cor-acento);
    box-shadow: 0 0 0 .25rem rgba(194, 65, 12, .2);
}

/* Aba ativa do painel. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--cor-primaria);
}

body {
    background-color: #f5f6f8;
}

.navbar-brand {
    font-weight: 600;
}

/* Tabelas de listagem */
.tabela-listagem th {
    white-space: nowrap;
}

.tabela-listagem td {
    vertical-align: middle;
}

/* Formulários */
.obrigatorio::after {
    content: " *";
    color: #dc3545;
}

/* Rodapé fixo no fim da página */
main {
    min-height: calc(100vh - 160px);
}


/* ------------------------------------------------------------------ */
/* Tela pública de pedido                                              */
/* ------------------------------------------------------------------ */

.pagina-publica {
    background-color: #f5f6f8;
}

.pagina-publica .bloco {
    background: #fff;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.pagina-publica .bloco h2 {
    color: var(--cor-primaria);
    margin-bottom: .9rem;
}

.pagina-publica .linha-item {
    margin-bottom: .5rem;
}

.pagina-publica .resumo {
    background: #fff;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* Honeypot: fora da tela, nunca com display:none puro nem type="hidden" —
   robôs ignoram campos escondidos por esses dois meios. Posicionado fora da
   área visível e sem receber foco (tabindex="-1" no widget). */
.campo-armadilha {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    width: 0;
    overflow: hidden;
}


/* ------------------------------------------------------------------ */
/* Tela do cliente (celular)                                           */
/* ------------------------------------------------------------------ */

/* Este bloco vem DEPOIS das regras de `.pagina-publica` de propósito: a
   especificidade é a mesma (0,2,0) e quem vem por último vence. Fora daqui,
   nada muda: `.pagina-cliente` só existe do lado do cliente, então a tela de
   login do painel continua exatamente como estava.

   Nenhum ancestral da `.barra-envio` pode receber `transform`, `filter`,
   `backdrop-filter` ou `will-change`: qualquer um deles faz o
   `position: fixed` da barra se posicionar em relação a esse elemento em vez
   da tela, e a barra descola. É a armadilha clássica do cabeçalho bonito com
   `backdrop-filter: blur()`. */

.pagina-cliente {
    background-color: #f5f6f8;
    /* Rodapé elástico de verdade, no lugar do `main { min-height: calc(100vh
       - 160px) }` do topo do arquivo: com o cabeçalho novo a constante 160 sai
       de calibragem e a página ganha rolagem mesmo vazia. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pagina-cliente main {
    /* `min-height: 0` desfaz o calc() acima só nesta tela: quem empurra o
       rodapé para baixo aqui é o `flex-grow` do <main>, que acerta sozinho
       com qualquer altura de cabeçalho. */
    min-height: 0;
    flex: 1 1 auto;
}

/* ---------------------------------------------------------- cabeçalho */

.topo-cliente {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
    color: #fff;
    padding: 1.1rem 1rem;
}

.topo-conteudo {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.topo-marca {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
    border-radius: 12px;
    font-size: 1.35rem;
}

.topo-nome {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

/* O `.92` de opacidade sobre o laranja ainda dá 4,6:1 — passa AA. Em #fb923c
   ou #f97316 este subtítulo seria ilegível, e é por isso que o cabeçalho usa
   o tom escuro. */
.topo-frase {
    display: block;
    font-size: .875rem;
    opacity: .92;
}

/* ------------------------------------------------------------ cartões */

.pagina-cliente .bloco {
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    padding: 1.15rem 1.15rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.pagina-cliente .bloco h2 {
    color: var(--cor-primaria);
}

/* O número do passo é o que dá o ar de assistente à tela: o título fica
   escuro e legível, e a cor vira um selo pequeno em vez de encher o texto. */
.pagina-cliente .bloco h2.passo-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
}

.passo-numero {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria);
    color: #fff;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
}

/* ------------------------------------------------------------ campos */

.pagina-cliente .campo {
    margin-bottom: 1rem;
}

.pagina-cliente .campo:last-child {
    margin-bottom: 0;
}

.pagina-cliente .form-label {
    font-weight: 600;
    font-size: .9rem;
    color: #374151;
}

/* 46px é o alvo de toque confortável; os 38px padrão do Bootstrap ficam
   apertados no dedo. O `font-size: 1rem` também não é estético: o iOS dá
   zoom sozinho ao focar um campo com menos de 16px. */
.pagina-cliente .form-control,
.pagina-cliente .form-select {
    min-height: 46px;
    font-size: 1rem;
}

.pagina-cliente .form-text {
    font-size: .82rem;
}

/* --------------------------------------------------------- erro no campo */

/* As três famílias são necessárias: uma regra só com `.form-control`
   deixaria os quatro `<select>` — justamente os campos mais fáceis de
   errar — sem borda vermelha nenhuma. */
.pagina-cliente .campo-invalido .form-control,
.pagina-cliente .campo-invalido .form-select,
.pagina-cliente .campo-invalido .form-check-input {
    border-color: #dc3545;
}

.pagina-cliente .campo-invalido .form-control:focus,
.pagina-cliente .campo-invalido .form-select:focus {
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .18);
}

/* ------------------------------------------------------- linha de produto */

.pagina-cliente .linha-item {
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: .75rem;
    margin-bottom: .6rem;
    background: #fcfcfd;
}

/* O campo de quantidade entre os dois botões. */
.campo-qtd {
    display: flex;
    align-items: stretch;
    gap: .35rem;
}

.campo-qtd input {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.passo-qtd {
    flex: 0 0 46px;
    width: 46px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    background: #fff;
    color: var(--cor-primaria);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.passo-qtd:hover {
    background: #fff7ed;
    border-color: var(--cor-acento);
}

.passo-qtd:active {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
}

.remover-item {
    min-height: 46px;
}

@media (max-width: 575.98px) {
    #adicionar-item {
        width: 100%;
    }
}

/* -------------------------------------------------------------- resumo */

.pagina-cliente .resumo {
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* A linha do Total perdeu o `d-flex` do Bootstrap na template justamente
   para poder ser escondida no celular: `.d-flex` é `display: flex
   !important` e venceria este `display: none` sem avisar. */
.resumo .linha-total {
    display: flex;
    justify-content: space-between;
}

/* --------------------------------------------------------- barra de envio */

/* No computador a barra é um bloco comum, e o total dela não aparece: o
   cartão `.resumo` logo acima já mostra a mesma conta. */
.barra-envio {
    margin-top: 1rem;
}

.barra-envio-interno {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.barra-total {
    display: none;
}

/* O total da barra nasce VAZIO e só o JavaScript escreve nele — é ele que
   sabe somar. Sem JavaScript o lugar fica escondido, em vez de mostrar um
   número errado no elemento mais visível da tela. */
.js-total {
    display: none;
}

html.js .js-total {
    display: inline;
}

@media (max-width: 991.98px) {
    .barra-envio {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        margin-top: 0;
        background: #fff;
        border-top: 1px solid var(--cor-borda);
        box-shadow: 0 -4px 14px rgba(16, 24, 40, .08);
        /* O `env()` só não é zero no iOS porque o viewport tem
           `viewport-fit=cover` (ver base_publico.html). */
        padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    }

    .barra-envio-interno {
        max-width: 780px;
        margin: 0 auto;
        flex-wrap: wrap;
    }

    .barra-total {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }

    .barra-rotulo {
        font-size: .72rem;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .barra-valor {
        font-size: 1.05rem;
        font-weight: 700;
        color: #111827;
        white-space: nowrap;
    }

    .barra-envio #botao-enviar {
        flex: 1 1 150px;
        font-weight: 700;
    }

    /* O respiro para a barra não cobrir o fim da página vai no <body>, e não
       no <main>: o `py-4` do Bootstrap é `padding-bottom: ... !important` e
       venceria um padding posto lá. Além disso quem fica embaixo de tudo é o
       <footer>, que está fora do <main> — e é onde mora o link de telefone.
       Sobra generosa porque a barra pode quebrar em duas linhas num aparelho
       estreito. */
    .pagina-cliente {
        padding-bottom: 108px;
    }

    /* No celular o total é o número da barra. Repetir a mesma linha aqui, a
       70px de distância, faz o cliente procurar diferença entre dois números
       iguais. O subtotal e a taxa continuam à vista: é o que explica a conta. */
    .pagina-cliente .resumo .linha-total {
        display: none;
    }

    /* Rolar até o primeiro erro (pedido.js) e o `focus()` da linha nova param
       exatamente atrás da barra sem isto. Escopado com `:has()` para não
       mexer na rolagem do painel; onde `:has()` não existir, a regra é
       descartada e o comportamento é o de hoje. */
    html:has(.pagina-cliente) {
        scroll-padding-bottom: 120px;
    }
}

/* No papel a barra voltaria repetida em TODA página impressa: o Chrome
   repete elemento `position: fixed` a cada quebra. */
@media print {
    .barra-envio {
        position: static;
        box-shadow: none;
        border-top: 0;
        padding: 0;
    }

    .pagina-cliente {
        padding-bottom: 0;
    }

    .passo-qtd,
    .remover-item,
    #adicionar-item {
        display: none;
    }
}

/* ------------------------------------------------- confirmação e 503 */

.confirmacao-hero {
    text-align: center;
    padding: .5rem 0 1.5rem;
}

/* Verde, e não laranja: o selo responde "deu certo?", e essa resposta tem
   cor própria. O laranja continua sendo a identidade da loja, não o
   significado de sucesso. */
.hero-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: .75rem;
    background: #dcfce7;
    color: #15803d;
    border-radius: 50%;
    font-size: 2rem;
}

.aviso-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: .75rem;
    background: #fef3c7;
    color: #b45309;
    border-radius: 50%;
    font-size: 1.7rem;
}

/* Título de cartão. O seletor repete `.bloco h2` porque aquela regra
   (`color: var(--cor-primaria)`) tem a mesma especificidade e este rótulo é
   cinza, de propósito: quem manda na hierarquia da tela é o conteúdo. */
.pagina-cliente .bloco h2.titulo-cartao {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .9rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
}

.qtd-item {
    display: inline-block;
    min-width: 1.9rem;
    font-weight: 700;
    color: var(--cor-primaria);
}

.total-confirmacao td {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cor-primaria);
}

/* ---------------------------------------------------------------- rodapé */

.rodape-cliente {
    text-align: center;
    color: #6b7280;
    font-size: .85rem;
    padding: 1.5rem 1rem;
}

.rodape-cliente a {
    color: var(--cor-primaria);
    font-weight: 600;
}


/* ------------------------------------------------------------------ */
/* Painel de pedidos                                                   */
/* ------------------------------------------------------------------ */

/* Linha de pedido atrasado. O `table-warning` do Bootstrap é claro demais
   para saltar aos olhos no meio de uma lista longa: a barra vermelha na
   lateral é o que faz a linha ser encontrada de relance. */
.painel-lista tr.table-warning td:first-child {
    box-shadow: inset 3px 0 0 #dc3545;
}

/* Selo de contagem nas abas: sem isto o número fica desalinhado do rótulo. */
.nav-pills .badge {
    font-size: .75em;
    vertical-align: text-bottom;
}

/* Os botões de ação da lista são pequenos e ficam lado a lado com o
   formulário de "avançar": sem isto eles quebram de linha. */
.painel-lista td .btn,
.painel-lista td form {
    vertical-align: middle;
}