/* ---------- Aviso no topo ("Link copiado!", "Chave Pix copiada!") ---------- */
.m-toast {
  position: fixed; top: 16px; left: 50%; z-index: 80; max-width: calc(100vw - 32px);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 700;
  padding: 11px 18px; border-radius: 999px; box-shadow: 0 12px 28px var(--brand-glow);
  transform: translate(-50%, -150%); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.m-toast.err { background: #b42318; }
.m-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Barra da sacola ---------- */
/* Sticky no fluxo da página, logo antes do rodapé: enquanto rola, gruda 16px acima da base da tela;
 * no fim da página para em cima do rodapé, sem sobrepor */
.m-cartbar {
  position: sticky; bottom: 16px; align-self: center; flex: none; margin: 8px auto 16px;
  width: calc(100% - 32px); max-width: 540px; z-index: 30;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; border: none; border-radius: 16px; padding: 15px 20px;
  display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 14px 30px var(--brand-glow); transition: transform .15s, box-shadow .15s;
}
.m-cartbar:hover { transform: translateY(-2px); }

/* ---------- Barra "Pedido #ABCD" (pedido em andamento) ----------
 * Fica DEPOIS de .m-cartbar de propósito: mesma especificidade, então estas regras vencem.
 *  em andamento → cor da loja (como a sacola), ícone e texto na cor de contraste, status em selo translúcido
 *  Pix a pagar  → verde-água do Pix
 *  cancelado / entregue → fundo neutro, selo vermelho / verde
 * Hover: sobe 2px e escurece levemente (nunca clareia). */
.m-pixbar { --bar-fg: var(--on-brand, #fff); color: var(--bar-fg); gap: 12px; transition: transform .15s, box-shadow .15s, filter .15s, background-color .15s; }
.m-pixbar .m-pixbar-ic { color: var(--bar-fg); flex: none; }
.m-pixbar .m-pixbar-label { flex: 1; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-pixbar .m-pixbar-pill {
  /* altura ≤ ícone (22px): o selo não deixa a barra mais alta que a da sacola */
  flex: none; padding: 3px 10px; line-height: 16px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
  color: var(--bar-fg); background: color-mix(in srgb, var(--bar-fg) 18%, transparent); font-variant-numeric: tabular-nums;
}
.m-pixbar .m-pixbar-pill:empty { display: none; }
.m-pixbar.is-pix .m-pixbar-pill { min-width: 3.6em; text-align: center; } /* tempo do Pix sem "tremer" */
.m-pixbar:hover { filter: brightness(.93); }

.m-pixbar.is-pix { --bar-fg: #fff; background: linear-gradient(135deg, #32bcad 0%, #22968a 100%); box-shadow: 0 14px 30px rgb(50 188 173 / 32%); }

/* Cancelado: sempre vermelho (nos dois temas), mesmo formato das outras barras; status em vermelho claro */
.m-pixbar.is-cancel {
  --bar-fg: #fff; background: linear-gradient(135deg, #e5484d 0%, #c62a2f 100%); box-shadow: 0 14px 30px rgb(220 38 38 / 30%);
}
.m-pixbar.is-cancel .m-pixbar-pill { color: #fecaca; background: rgb(255 255 255 / 14%); }

/* Entregue: neutro com check e selo verdes (mesmo formato) */
/* contorno por sombra interna (borda de verdade deixaria a barra 2px mais alta) */
.m-pixbar.is-done { --bar-fg: var(--ink-strong); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2), var(--shadow-lg); }
.m-pixbar.is-done:hover { filter: none; background: var(--soft-2); }
.m-pixbar.is-done .m-pixbar-ic { color: #15803d; }
.m-pixbar.is-done .m-pixbar-pill { color: #15803d; background: rgb(22 163 74 / 12%); }
body[data-theme="dark"] .m-pixbar.is-done .m-pixbar-ic, body[data-theme="dark"] .m-pixbar.is-done .m-pixbar-pill { color: #86efac; }
body[data-theme="dark"] .m-pixbar.is-done .m-pixbar-pill { background: rgb(74 222 128 / 14%); }
/* Entra subindo quando aparece (primeiro item na sacola, voltar da sacola) */
@media (prefers-reduced-motion: no-preference) {
  .m-cartbar { animation: m-bar-in 380ms cubic-bezier(.16, 1, .3, 1); }
}
@keyframes m-bar-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.m-cartbar-ic { position: relative; display: flex; }
.m-cartbar-ic b { position: absolute; top: -7px; right: -11px; background: #fff; color: var(--brand); border-radius: 10px; font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; }