/**
 * mb-base.css - base compartilhada de TODAS as páginas do app do
 * marketplace (index.php, busca.php, pedidos.php, premios.php, menu.php,
 * loja.php, checkout.php...).
 *
 * O que fica aqui: cores/variáveis da marca, reset, tipografia base,
 * o wrapper ".app", o padrão de foto/placeholder ".ph-img" e a barra de
 * navegação inferior (".nav") - tudo que é igual em toda página.
 *
 * O que NÃO fica aqui: estilo específico de cada tela (hero da Início,
 * cards de pedido, painel deslizante do Menu...) - isso continua no
 * <style> de cada arquivo, só o que se repete em 3+ páginas é que vem
 * pra cá. Se for mudar uma cor da marca ou o visual da barra inferior,
 * é só mexer neste arquivo - não precisa editar página por página.
 */

:root{
  --brand:#B8F23E; --brand-dk:#9BD62A; --glow:#B8F23E;
  --menubee:#03764D; --mint:#E4F2D8; --green-2:#03764D;
  --ink:#0C2E20; --ink-2:#164232; --honey:#F5D63D; --red:#E5484D; --red-2:#EA3B2E;
  --bg:#F2F5EC; --card:#FFFFFF; --muted:#6C7A70; --line:#E0E7D8; --line-2:#E4EADD; --soft:#E8EEE1;
  --font:'Plus Jakarta Sans',system-ui,sans-serif; --ease:cubic-bezier(.2,.9,.3,1); --app:100%;
  --shadow:0 1px 2px rgba(12,46,32,.04),0 4px 16px rgba(12,46,32,.06);
}
@media (min-width:768px){:root{--app:480px}}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;overflow-x:clip}
body{font-family:var(--font);color:var(--ink);background:#DDE6D5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block}
.ph,.ph-bold,.ph-fill,.ph-duotone{line-height:1;display:inline-block}

.app{position:relative;width:100%;max-width:var(--app);margin:0 auto;min-height:100dvh;background:var(--bg);overflow:hidden;padding-bottom:120px}
@media (min-width:768px){.app{box-shadow:0 0 0 1px rgba(0,0,0,.04),0 30px 80px rgba(0,0,0,.12)}}

/* ================= FOTO/PLACEHOLDER POR CATEGORIA ================= */
.ph-img{position:relative;overflow:hidden;background:var(--bgc,#EEF2EA);color:var(--fgc,#8BA37A);display:grid;place-items:center;container-type:size}
.ph-img>i{font-size:42cqmin;position:absolute}
.ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ================= TOAST ================= */
.toast{position:fixed;left:50%;top:14px;transform:translate(-50%,-160%);visibility:hidden;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:14px;font-size:13px;font-weight:700;transition:.4s var(--ease);max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.show{transform:translate(-50%,0);visibility:visible}

/* ================= BARRA INFERIOR (5 abas) ================= */
.fixed{position:fixed;left:50%;transform:translateX(-50%);width:min(var(--app),100%);padding:0 14px;z-index:40}
.nav-wrap{bottom:max(14px,env(safe-area-inset-bottom))}
.nav{height:66px;border-radius:24px;background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 9px;box-shadow:0 16px 36px rgba(12,46,32,.35)}
.nav a,.nav button{height:48px;display:flex;align-items:center;gap:7px;padding:0 13px;border-radius:17px;color:#8D948F;position:relative;transition:.3s var(--ease);font-size:13px;font-weight:800}
.nav a i,.nav button i{font-size:23px}
.nav a span,.nav button span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s var(--ease)}
.nav a.on,.nav button.on{background:var(--brand);color:var(--ink)}
.nav a.on span,.nav button.on span{max-width:84px}
.nav a .ping,.nav button .ping{display:none;max-width:none;overflow:visible;position:absolute;top:2px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--ink)}
.nav a.on .ping{border-color:var(--brand)}
.nav a .ping.show,.nav button .ping.show{display:block}

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