/* Tema "app" do cardápio (liga por loja com TEMA: "app" no config). Visual de aplicativo de delivery:
   topo escuro (menu, nome, pessoa, carrinho, busca com filtro e banner), folha clara por cima (categorias em círculo,
   destaques com selo e avaliação, faixa de promoção) e barra de baixo com Início, Cardápio, Pedido, Ofertas e Mais.
   Só muda o cardápio do cliente. As lojas sem TEMA continuam com o visual padrão. A cor de destaque é a da loja (COR1 e COR2). */
html.tema-app{
  --tela:#0e0f11;
  --tela2:#1f2124;
  --borda-escura:#34373c;
  --creme:#fafafa;
  --linha:#ececec;
  --tinta:#1a1a1a;
  --suave:#767676;
  --verde-tag:#7fa63a;
  --titulo:'Anton','Oswald','Montserrat',system-ui,sans-serif;
  --script:'Kaushan Script','Caveat',cursive;
}
.tema-app .so-tema{display:revert}
.tema-app body{background:var(--creme);color:var(--tinta)}

/* ---------- topo: menu, nome da loja, pessoa e carrinho ---------- */
.tema-app .topo{background:var(--tela);color:#fff}
.tema-app .topo-in{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:6px;height:auto;min-height:60px;padding:8px 12px}
.tema-app .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;position:relative;flex:none}
.tema-app .ic:active{background:rgba(255,255,255,.1)}
.tema-app .ic-dir{display:flex;align-items:center;gap:0}
.tema-app #btnMeuPedido{display:none}
.tema-app .badge-topo{position:absolute;top:3px;right:0;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--coral);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.tema-app .marca{justify-content:center;text-align:center;min-width:0;gap:9px}
.tema-app .marca>div{display:flex;flex-direction:column;align-items:center;min-width:0}
.tema-app .logo{width:42px;height:42px;background:#222;box-shadow:0 0 0 2px var(--coral)}
.tema-app .ola{color:#8b9098;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tema-app .ola.mesa{color:var(--verde-tag)}
.tema-app .marca strong{font-family:var(--titulo);font-weight:400;font-size:21px;line-height:1.02;letter-spacing:.04em;text-transform:uppercase;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.tema-app .marca strong .n2{color:var(--coral)}
.tema-app .marca .pill{background:none;box-shadow:none;border:0;padding:3px 0 0;font-size:10.5px;color:#c9cdd3;letter-spacing:.06em;text-transform:uppercase}
/* logo larga (nome da loja em letras grandes): no topo ela substitui o nome em texto */
.tema-app .logo.logo-larga{width:auto;height:54px;max-width:230px;border-radius:0;background:none;box-shadow:none}
.tema-app.tem-logo .marca{flex-direction:column;align-items:center;gap:2px}
.tema-app.tem-logo .logo:not(.logo-larga){width:58px;height:58px}
.tema-app.tem-logo .marca strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tema-app.tem-logo .ola:not(.mesa){display:none}
.tema-app.tem-logo .marca>div{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:2px 10px}
/* sem banner: não deixa um buraco escuro embaixo da busca */
.tema-app .carrossel:has(.slides:empty){display:none}
.tema-app .capa:has(.slides:empty){padding-bottom:42px}
.tema-app .menu-logo{height:60px;width:auto;max-width:230px;object-fit:contain;align-self:flex-start;margin-bottom:8px}
.tema-app .mini-abas{background:var(--tela);box-shadow:0 10px 22px rgba(0,0,0,.45)}
.tema-app .aba{background:var(--tela2);border-color:var(--borda-escura);color:#d6d9de}
.tema-app .aba.ativa{background:var(--coral);color:#fff;border-color:transparent}

/* ---------- capa escura: busca e banner ---------- */
.tema-app .layout{padding-top:0}
.tema-app .capa{background:var(--tela);color:#fff;margin:0 -16px;padding:6px 16px 50px}
.tema-app .busca{background:var(--tela2);border:1px solid var(--borda-escura);box-shadow:none;border-radius:999px;color:#9aa0a9;margin-top:0}
.tema-app .busca input{color:#fff;font-size:15px}
.tema-app .busca input::placeholder{color:#8a9099}
.tema-app .filtro{width:50px;height:50px;border-radius:50%;background:var(--tela2);border:1px solid var(--borda-escura);color:#fff;display:grid;place-items:center;flex:none}
.tema-app .carrossel{margin-top:14px}
.tema-app .slides{border-radius:0;box-shadow:none;margin:0 -16px}
.tema-app .slide{height:262px;padding:22px 16px 38px;background-position:right center;background-color:var(--tela)}
.tema-app .slide::before{background:linear-gradient(90deg,#0e0f11 0%,rgba(14,15,17,.92) 30%,rgba(14,15,17,.35) 62%,rgba(14,15,17,0) 100%)}
.tema-app .slide>*{max-width:60%}
.tema-app .slide .tag{font-family:var(--script);font-size:23px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--verde-tag);line-height:1}
.tema-app .slide h2{font-family:var(--titulo);font-style:normal;font-weight:400;text-transform:uppercase;font-size:clamp(38px,11.5vw,50px);line-height:.98;letter-spacing:.01em;margin:6px 0 10px}
.tema-app .slide h2 em{display:block;color:var(--coral);font-style:normal}
.tema-app .slide p{font-size:13px;line-height:1.4;color:#e8e6e2;max-width:54%}
.tema-app .slide .cta{background:var(--coral);box-shadow:none;text-transform:uppercase;letter-spacing:.05em;font-size:13px;font-weight:800;padding:5px 6px 5px 20px;gap:14px;margin-top:14px}
.tema-app .slide .cta svg{width:30px;height:30px;padding:7px;border-radius:50%;background:#fff;color:var(--coral)}
.tema-app .pontos{bottom:14px;gap:7px}
.tema-app .pontos i{width:7px;height:7px;background:rgba(255,255,255,.85)}
.tema-app .pontos i.on{width:7px;border-radius:50%;background:var(--coral)}

/* ---------- folha clara por cima da capa ---------- */
.tema-app .folha{position:relative;background:var(--creme);margin:-30px -16px 0;padding:18px 16px 8px;border-radius:26px 26px 0 0}
.tema-app .cats{margin-top:0}
.tema-app .abas{gap:12px}
.tema-app .cat-c{width:62px;font-size:11px;font-weight:600;color:#1a1a1a;gap:7px}
/* os círculos das categorias mostram sempre o ícone (as fotos aparecem nos Destaques da casa) */
.tema-app .cat-c .foto{width:54px;height:54px;background:#fff!important;background-image:none!important;border:1px solid #ededed;box-shadow:0 3px 10px rgba(0,0,0,.06);color:#2a2a2a}
.tema-app .cat-c .foto .ico,.tema-app .cat-c .foto:not(.sem-foto) .ico{display:block;width:25px;height:25px;stroke-width:1.7}
.tema-app .cat-c.ativa{color:#1a1a1a}
.tema-app .cat-c.ativa .foto{background:var(--coral)!important;border-color:var(--coral);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--coral) 38%,transparent)}
.tema-app .abas-wrap::before{background:linear-gradient(90deg,var(--creme) 25%,rgba(250,250,250,0))}
.tema-app .abas-wrap::after{background:linear-gradient(270deg,var(--creme) 25%,rgba(250,250,250,0))}
.tema-app .seta{background:#fff;color:var(--coral);box-shadow:0 2px 10px rgba(0,0,0,.15)}

/* destaques: 3 cards por tela, foto, selo no canto, avaliação e + redondo */
.tema-app .destaques{margin-top:10px}
.tema-app .tit-sec{font-size:17px;font-weight:800;color:#1a1a1a}
.tema-app .ver-tudo{font-size:12.5px;font-weight:700;color:var(--coral);text-decoration:none;white-space:nowrap}
.tema-app .dest{padding:10px 16px 14px;gap:9px}
.tema-app .dcard{flex:0 0 calc((100vw - 50px) / 3);min-width:112px;max-width:210px;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.08);border:1px solid #f0f0f0;background:#fff}
.tema-app .dcard .img{height:72px}
.tema-app .dcard .selo{top:0;left:0;border-radius:0 0 9px 0;background:var(--coral);font-size:8.5px;padding:4px 8px;letter-spacing:.3px}
.tema-app .dcard:nth-child(3n+2) .selo{background:#3f7d2e}
.tema-app .dcard:nth-child(3n) .selo{background:#e19a1c}
.tema-app .dcard .corpo{padding:9px 9px 10px;gap:2px}
.tema-app .dcard h3{font-size:12.5px;font-weight:800;line-height:1.2;color:#1a1a1a}
.tema-app .dcard .d{font-size:10px;line-height:1.35;color:#6b6b6b;min-height:0;-webkit-line-clamp:3}
.tema-app .d-nota{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:#444;margin-top:3px}
.tema-app .d-nota svg{color:var(--coral);flex:none}
.tema-app .dcard .rod{padding-top:6px;gap:4px}
.tema-app .dcard .preco{font-size:15px;font-weight:800;color:#1a1a1a;line-height:1.05}
.tema-app .dcard .preco small{display:block;font-size:9px;margin:0 0 -1px;color:#777}
.tema-app .add{width:34px;height:34px;background:var(--coral);box-shadow:none}
.tema-app .dcard .add{width:30px;height:30px}
.tema-app .dcard .add svg{width:18px;height:18px}
.tema-app .dcard .add.escolher{font-size:0;width:30px;height:30px;padding:0;border-radius:50%}
.tema-app .dcard .add.escolher::before{content:"+";font-size:21px;font-weight:600;line-height:1}
.tema-app .dcard .img.sem-foto{background:radial-gradient(circle at 28% 30%,color-mix(in srgb,var(--coral) 60%,#0e0f11),#0e0f11 78%)!important}

/* faixa de promoção (config PROMO: tag, titulo, sub, selo, botao, cat, foto) */
.tema-app .promo{background:var(--tela);color:#fff;border-radius:16px;border:1px solid #2a2d31;margin:8px 0 6px;position:relative;overflow:hidden;min-height:128px;padding:16px 16px 16px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;justify-content:center}
.tema-app .promo .p-foto{position:absolute;right:0;top:0;bottom:0;width:calc(58% + 2px);background-size:cover;background-position:center}
.tema-app .promo .p-foto::after{content:"";position:absolute;inset:0 0 0 -2px;background:linear-gradient(90deg,var(--tela) 0%,rgba(14,15,17,.4) 55%,rgba(14,15,17,0) 100%)}
.tema-app .promo>*:not(.p-foto){position:relative;z-index:2}
.tema-app .promo .p-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-tag)}
.tema-app .promo h3{font-family:var(--titulo);font-weight:400;text-transform:uppercase;font-size:30px;line-height:1;letter-spacing:.01em;max-width:62%}
.tema-app .promo p{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#e6e3de;max-width:60%}
.tema-app .promo .cta{margin-top:8px;display:inline-flex;align-items:center;gap:10px;background:var(--coral);color:#fff;font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;padding:4px 5px 4px 14px;border-radius:999px}
.tema-app .promo .cta svg{width:24px;height:24px;padding:5px;border-radius:50%;background:#fff;color:var(--coral)}
.tema-app .promo .p-selo{position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(-6deg);z-index:3;width:78px;height:78px;border-radius:50%;background:#4d7a22;border:3px solid #fafafa;display:grid;place-items:center;text-align:center;font-family:var(--titulo);font-size:23px;line-height:1;box-shadow:0 6px 14px rgba(0,0,0,.4)}

/* itens do cardápio */
.tema-app .secao h2{font-weight:800}
.tema-app .card{border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.06);border:1px solid #f0f0f0}
.tema-app .rodape{border-color:var(--linha)}
.tema-app .nota{color:#777}

/* ---------- barra de baixo: Início, Cardápio, Pedido, Ofertas, Mais ---------- */
.tema-app .nav-baixo{background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.1);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.tema-app .nav-baixo button{color:#1f1f1f;font-size:10.5px;font-weight:600}
.tema-app .nav-baixo button.on{color:var(--coral)}
.tema-app .nav-baixo button.on svg{fill:currentColor}
.tema-app .fab{color:var(--coral)!important}
.tema-app .fab-bola{width:74px;height:74px;margin-top:-38px;flex-direction:column;gap:1px;background:var(--coral);border:5px solid #fff;box-shadow:0 10px 24px color-mix(in srgb,var(--coral) 50%,transparent);display:flex;align-items:center;justify-content:center;padding-top:2px}
.tema-app .fab-bola svg{width:25px;height:25px}
.tema-app .fab-bola #fabTxt{color:#fff;font-size:9.5px;font-weight:700;line-height:1;white-space:nowrap}
.tema-app .badge{background:#111;color:#fff;border-color:#fff;top:-6px;right:-6px}
.tema-app .enviar{background:var(--coral)}

/* ---------- menu lateral (botão de três riscos) ---------- */
.menu-veu{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70}
.menu-lat{position:fixed;left:0;top:0;bottom:0;width:min(82vw,320px);background:var(--tela);color:#fff;z-index:71;padding:22px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:12px 0 40px rgba(0,0,0,.5)}
.menu-lat h2{font-family:var(--titulo);font-weight:400;text-transform:uppercase;font-size:24px;letter-spacing:.04em;margin-bottom:2px}
.menu-lat small{color:#9aa0a9;font-size:12.5px;margin-bottom:12px}
.menu-lat a,.menu-lat button.m-item{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:12px;color:#fff;text-decoration:none;font-weight:700;font-size:15px;text-align:left;width:100%}
.menu-lat a:active,.menu-lat button.m-item:active{background:var(--tela2)}
.menu-lat svg{color:var(--coral);flex:none}

/* ---------- computador: capa vira um cartão escuro dentro da coluna ---------- */
@media(min-width:960px){
  .tema-app .capa{margin:10px 0 0;border-radius:24px;padding:14px 16px 50px;overflow:hidden}
  .tema-app .slides{margin:0 -16px}
  .tema-app .folha{margin:-30px 0 0;padding:20px 4px 8px}
  .tema-app .dcard{flex-basis:210px}
}

/* botão de chamar garçom fica acima da barra de baixo */
html.tema-app #btnGarcom{bottom:calc(92px + env(safe-area-inset-bottom));padding:10px 16px;font-size:14px}