/* Quiosque do Mineiro · cores tiradas da logo: laranja de fundo, faixa vermelha, raios amarelos. */
:root {
    --laranja: #E8742A;
    --laranja-esc: #B9531A;
    --vermelho: #C62828;
    --vermelho-esc: #A11F1F;
    --amarelo: #FFC93C;
    --amarelo-claro: #FFF1C9;
    --creme: #FFF8EF;
    --papel: #FFFFFF;
    --tinta: #3A1D0C;
    --suave: #7C5B45;
    --linha: #F0DCC6;
    --ok: #2E7D32;
    --display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
    --texto: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --raio: 14px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 64px; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--creme);
    color: var(--tinta);
    font: 16px/1.45 var(--texto);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Topo com raios de sol, como na logo ---------- */
.topo {
    position: relative;
    overflow: hidden;
    background: var(--laranja);
    color: #fff;
    padding: calc(20px + env(safe-area-inset-top)) 16px 18px;
}
.topo::before {
    content: "";
    position: absolute;
    inset: -40% -10% -10%;
    background: repeating-conic-gradient(from 0deg at 50% 100%, rgba(255, 201, 60, .22) 0 5deg, transparent 5deg 15deg);
    pointer-events: none;
}
.topo-in {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    gap: 16px;
    align-items: center;
}
.topo-logo {
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.topo-txt { min-width: 0; }
.topo h1 {
    font: 400 clamp(30px, 7vw, 46px)/1 var(--display);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-shadow: 0 3px 0 var(--laranja-esc);
    text-wrap: balance;
}
.slogan { margin-top: 4px; font-weight: 700; }
.status {
    display: inline-block;
    margin-bottom: 6px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.status.aberto { background: var(--amarelo); color: var(--tinta); }
.status.fechado { background: var(--tinta); color: #fff; }
.topo-info {
    position: relative;
    max-width: 980px;
    margin: 16px auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.topo-info div { background: rgba(255, 255, 255, .17); border-radius: 10px; padding: 6px 12px; }
.topo-info dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.topo-info dd { margin: 0; font-weight: 800; }
.aviso-fechado {
    width: calc(100% - 32px);
    max-width: 980px;
    margin: 12px auto 0;
    background: var(--tinta);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
}

/* ---------- Barra e Abas de Categoria ---------- */
.abas-barra {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 248, 239, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1.5px solid var(--linha);
    box-shadow: 0 4px 16px rgba(58, 29, 12, .04);
}
.abas-conteiner {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}
.abas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 2px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    width: 100%;
}
.abas::-webkit-scrollbar { display: none; }
.abas a {
    flex: none;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--papel);
    border: 1.5px solid var(--linha);
    color: var(--tinta);
    box-shadow: 0 2px 5px rgba(58, 29, 12, .04);
    transition: all .18s ease;
}
.abas a:hover {
    border-color: var(--laranja);
    color: var(--laranja-esc);
    transform: translateY(-1px);
}
.abas a.ativa {
    background: var(--vermelho);
    border-color: var(--vermelho);
    color: #fff;
    box-shadow: 0 4px 12px rgba(198, 40, 40, .28);
}
.aba-seta {
    flex: none;
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--linha);
    background: #fff;
    color: var(--tinta);
    font-size: 20px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: all .15s;
    z-index: 2;
}
@media (min-width: 768px) {
    .aba-seta { display: inline-flex; }
}
.aba-seta:hover {
    background: var(--amarelo-claro);
    border-color: var(--laranja);
    color: var(--laranja-esc);
}

/* ---------- Cardápio ---------- */
.cardapio {
    max-width: 980px;
    margin: 0 auto;
    padding: 16px 16px 120px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.categoria-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--linha);
}
.categoria-cabecalho h2, .categoria h2 {
    margin: 0;
    font: 400 clamp(24px, 5vw, 32px)/1.1 var(--display);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vermelho);
}
.categoria-qtd {
    font-size: 13px;
    font-weight: 800;
    color: var(--suave);
    background: var(--amarelo-claro);
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 640px) {
    .lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}
.produto {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 14px;
    align-items: center;
    text-align: left;
    background: var(--papel);
    border: 1.5px solid var(--linha);
    border-radius: var(--raio);
    padding: 14px;
    box-shadow: 0 2px 6px rgba(58, 29, 12, .03);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.produto:hover:not(:disabled) {
    border-color: var(--laranja);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(58, 29, 12, .08);
}
.produto:disabled { cursor: default; }
.produto.esgotado { opacity: .6; }
.produto-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.produto strong { font-size: 17px; }
.desc { color: var(--suave); font-size: 14px; }
.preco { font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.produto img, .sem-foto { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; }
.sem-foto {
    display: grid;
    place-items: center;
    background: var(--amarelo-claro);
    color: var(--laranja);
    font: 400 40px/1 var(--display);
}
.tag-esgotado {
    align-self: flex-start;
    background: var(--tinta);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 6px;
    padding: 1px 8px;
}
.vazio { color: var(--suave); }
.rodape {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    text-align: center;
    color: var(--suave);
    font-size: 14px;
    padding-top: 16px;
    border-top: 1px dashed var(--linha);
}
.rodape strong { color: var(--tinta); }
.rodape-click { font-size: 12px; opacity: .8; margin-top: 6px; }

/* Cardápio digital (só consulta) */
.menu-itens { display: flex; flex-direction: column; }
.menu-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--linha);
}
.menu-item-txt { display: flex; flex-direction: column; min-width: 0; max-width: 70vw; }
.menu-item strong { font-size: 17px; }
.pontilhado { border-bottom: 2px dotted var(--linha); transform: translateY(-4px); }
.menu-item.esgotado { opacity: .55; }

/* ---------- Sacola ---------- */
.barra-sacola {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(255, 248, 239, 0), var(--creme) 40%);
}
.btn-sacola {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--vermelho);
    color: #fff;
    border: 0;
    border-radius: 14px;
    padding: 14px 18px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(198, 40, 40, .35);
}
.btn-principal, .btn-sec {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 14px 18px;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
}
.btn-principal { background: var(--vermelho); color: #fff; border: 0; }
.btn-principal:hover { background: var(--vermelho-esc); }
.btn-principal:disabled { opacity: .6; cursor: not-allowed; }
.btn-sec { background: var(--papel); color: var(--tinta); border: 1.5px solid var(--linha); }
.btn-sec:hover { border-color: var(--laranja); }
.bloco { width: 100%; }
.link-simples { text-align: center; color: var(--suave); font-weight: 700; }

.modal {
    width: min(520px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--papel);
    color: var(--tinta);
}
.modal::backdrop { background: rgba(58, 29, 12, .55); }
.modal-corpo { position: relative; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-corpo img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px; }
.modal h3 { padding-right: 40px; font: 400 26px/1.1 var(--display); text-transform: uppercase; }
.fechar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--creme);
    font-size: 22px;
    line-height: 1;
}
.modal-acoes { display: flex; gap: 12px; align-items: center; }
.modal-acoes .btn-principal { flex: 1; }
.qtd { display: flex; align-items: center; gap: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qtd button {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid var(--linha);
    background: var(--papel);
    color: var(--vermelho);
    font-size: 18px;
    font-weight: 800;
}
.item-sacola {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--linha);
}
.item-sacola > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.item-sacola small { color: var(--suave); }

/* ---------- Formulários ---------- */
label { font-weight: 700; font-size: 14px; }
label small { font-weight: 400; color: var(--suave); }
input, textarea, select {
    width: 100%;
    font: inherit;
    color: inherit;
    background: var(--papel);
    border: 1.5px solid var(--linha);
    border-radius: 10px;
    padding: 11px 12px;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px var(--amarelo-claro); }
textarea { resize: vertical; }

/* ---------- Páginas internas (checkout, acompanhamento) ---------- */
.topo-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--laranja);
    color: #fff;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.topo-mini-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.topo-mini img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.topo-mini strong { font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.voltar { margin-left: auto; font-weight: 800; text-decoration: none; background: rgba(255, 255, 255, .18); padding: 6px 12px; border-radius: 999px; }

.pagina {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pagina h1 {
    font: 400 clamp(30px, 7vw, 38px)/1.05 var(--display);
    text-transform: uppercase;
    color: var(--vermelho);
    text-wrap: balance;
}
.cartao {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--papel);
    border: 1.5px solid var(--linha);
    border-radius: 16px;
    padding: 18px;
}
.cartao h2 { font-size: 18px; font-weight: 800; }
.linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.linha > span:first-child { min-width: 0; }
.linha small { display: block; color: var(--suave); }
.linha.total { font-size: 18px; font-weight: 800; padding-top: 8px; border-top: 1px dashed var(--linha); }
.ck-itens { display: flex; flex-direction: column; gap: 8px; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.c1 { grid-column: span 1; }
.c2 { grid-column: span 2; }
.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c6 { grid-column: span 6; }
@media (max-width: 520px) {
    .c1 { grid-column: span 2; }
    .c2 { grid-column: span 4; }
    .c3, .c4 { grid-column: span 6; }
}
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.opcoes { display: grid; gap: 8px; }
.opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--linha);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 800;
}
.opcao input { flex: none; width: 20px; height: 20px; accent-color: var(--vermelho); }
.opcao small { display: block; font-weight: 400; color: var(--suave); }
.opcao:has(input:checked) { border-color: var(--vermelho); background: #FFF4F1; }
.dica { font-size: 14px; color: var(--suave); }
.erro-txt { color: var(--vermelho); font-weight: 700; }
.ok-txt { color: var(--ok); font-weight: 700; }
.erro { background: #FDECEA; color: var(--vermelho-esc); border-radius: 10px; padding: 12px; font-weight: 700; }
.aviso { background: var(--amarelo-claro); border-radius: 10px; padding: 10px 12px; font-size: 14px; }

/* ---------- Acompanhamento ---------- */
.ac-cabecalho { display: flex; flex-direction: column; gap: 4px; }
.rotulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.etapas { list-style: none; margin: 0; padding: 0; }
.etapas li {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding-bottom: 18px;
    color: var(--suave);
    font-weight: 700;
}
.etapas li::before {
    content: "";
    z-index: 1;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    border: 3px solid var(--linha);
    background: var(--papel);
}
.etapas li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 22px;
    bottom: 0;
    width: 3px;
    background: var(--linha);
}
.etapas li.feito { color: var(--tinta); }
.etapas li.feito::before { background: var(--laranja); border-color: var(--laranja); }
.etapas li.feito:not(:last-child)::after { background: var(--laranja); }
.etapas li.atual { color: var(--vermelho); }
.etapas li.atual::before { background: var(--amarelo); border-color: var(--vermelho); box-shadow: 0 0 0 5px var(--amarelo-claro); }
.pix { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
#qrPix { background: #fff; padding: 10px; border-radius: 12px; border: 1.5px solid var(--linha); }
#qrPix img, #qrPix canvas { display: block; max-width: 100%; height: auto; }
.pix textarea { font: 13px/1.4 ui-monospace, Consolas, monospace; resize: none; }
.selo { align-self: flex-start; display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 800; }
.selo.ok { background: #E6F4EA; color: var(--ok); }
.selo.pend { background: var(--amarelo-claro); color: #7A5200; }
.selo.canc { background: #FDECEA; color: var(--vermelho-esc); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}