/* Cardápio do cliente (celular) */
body.cliente { background: var(--cor-fundo); padding-bottom: env(safe-area-inset-bottom); }

.cli-topo {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--cor-primaria); color: #fff;
}
.cli-topo img { height: 40px; width: auto; border-radius: 8px; background: #fff; padding: 2px; }
.cli-topo small { display: block; opacity: .85; font-size: .8rem; }
.cli-topo strong { font-size: 1.15rem; }

.cli-app { max-width: 640px; margin: 0 auto; }
.cli-carregando { text-align: center; padding: 40px 16px; color: var(--sutil); }
.cli-corpo { max-width: 640px; margin: 0 auto; padding: 16px 16px 180px; }
.cli-aviso { background: #fff; border-radius: 14px; padding: 24px; text-align: center; margin: 24px 16px; }

.cli-cats {
    position: sticky; top: 64px; z-index: 9;
    display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px;
    background: #fff; border-bottom: 1px solid var(--borda);
    scrollbar-width: none;
}
.cli-cats::-webkit-scrollbar { display: none; }
.cli-cats button {
    border: 0; padding: 7px 14px; border-radius: 99px; background: var(--cor-fundo);
    color: var(--cor-texto); font: inherit; font-size: .88rem; white-space: nowrap; cursor: pointer;
}
.cli-cats button.on { background: var(--cor-primaria); color: #fff; }

.cli-secao { scroll-margin-top: 120px; }
.cli-secao h2 { font-size: 1.05rem; margin: 18px 0 10px; }
.cli-prod {
    display: flex; gap: 12px; align-items: center;
    background: #fff; border-radius: 14px; padding: 10px; margin-bottom: 8px;
}
.cli-prod img, .cli-prod .sem-foto { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--cor-secundaria); }
.cli-prod .info { flex: 1; min-width: 0; }
.cli-prod .info strong { display: block; }
.cli-prod .info p { margin: 2px 0; font-size: .82rem; color: var(--sutil); }
.cli-prod .preco { font-weight: 700; }
.cli-prod.esgotado { opacity: .5; }
.cli-add {
    width: 38px; height: 38px; border-radius: 50%; border: 0; flex-shrink: 0;
    background: var(--cor-primaria); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.cli-qtd-badge { min-width: 24px; text-align: center; font-weight: 700; color: var(--cor-primaria); }

.cli-rodape {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--borda);
    display: flex; flex-direction: column; gap: 8px;
}
.cli-rodape > * { max-width: 608px; width: 100%; margin: 0 auto; }
.cli-rodape .btn { padding: 13px; font-size: 1rem; }
.btn-garcom { background: var(--cor-secundaria); border-color: var(--cor-secundaria); color: var(--cor-texto); }

.cli-item { background: #fff; border-radius: 14px; padding: 12px; margin-bottom: 8px; }
.cli-item .linha { display: flex; align-items: center; gap: 10px; }
.cli-item .linha strong { flex: 1; }
.cli-item input { margin-top: 8px; font-size: .9rem; padding: 7px 10px; }
.qtd { display: inline-flex; align-items: center; gap: 10px; }
.qtd button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--borda); background: #fff; font-size: 1.1rem; cursor: pointer; }

.cli-totais { background: #fff; border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.cli-totais div { display: flex; justify-content: space-between; padding: 4px 0; }
.cli-totais .total { font-weight: 700; font-size: 1.1rem; border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 10px; }

.cli-formas h3 { font-size: 1rem; margin: 16px 0 8px; }
.cli-forma {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 14px; border: 2px solid var(--borda); border-radius: 14px; background: #fff;
    font: inherit; color: inherit; margin-bottom: 8px; cursor: pointer;
}
.cli-forma.on { border-color: var(--cor-primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 15%, transparent); }
.cli-forma .icone { font-size: 1.5rem; }
.cli-forma small { display: block; color: var(--sutil); }

.cli-pix { background: #fff; border-radius: 14px; padding: 18px; text-align: center; }
.cli-pix img { width: 220px; height: 220px; max-width: 100%; }
.cli-pix .valor { font-size: 1.4rem; font-weight: 700; }
.cli-copia { font-family: ui-monospace, Consolas, monospace; font-size: .72rem; background: var(--cor-fundo); padding: 10px; border-radius: 8px; word-break: break-all; margin: 10px 0; max-height: 80px; overflow: auto; text-align: left; }
.aguardando { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--sutil); font-size: .9rem; margin: 16px 0; }
.aguardando::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--cor-primaria); border-right-color: transparent; border-radius: 50%; animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.cli-estado { text-align: center; padding: 28px 12px; background: #fff; border-radius: 14px; }
.cli-estado .icone { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; background: #e8f5ee; color: var(--ok); }
.cli-estado .icone.espera { background: #fff6e0; color: var(--aviso); }
.cli-estado h2 { margin: 0 0 6px; }
.cli-estado p { color: var(--sutil); margin: 0; }
.cli-passos { display: flex; justify-content: space-between; margin: 20px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--sutil); }
.cli-passos li { flex: 1; position: relative; padding-top: 22px; }
.cli-passos li::before { content: ""; position: absolute; top: 4px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--borda); }
.cli-passos li.feito { color: var(--ok); font-weight: 600; }
.cli-passos li.feito::before { background: var(--ok); }

.cli-corpo h3 { font-size: 1rem; margin: 18px 0 8px; }
.cli-form { background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.campo-cli { display: block; font-weight: 500; font-size: .9rem; margin-bottom: 10px; }
.campo-cli:last-child { margin-bottom: 0; }
.campo-cli input { margin-top: 4px; }
.cli-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }

.cli-voltar { background: none; border: 0; color: var(--cor-primaria); font: inherit; font-weight: 600; padding: 4px 0; cursor: pointer; }

.cli-toast {
    position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 30;
    background: #222; color: #fff; padding: 11px 18px; border-radius: 99px; font-size: .92rem;
    max-width: calc(100% - 32px); text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.cli-toast.erro { background: var(--erro); }