/* ---------- Acompanhamento do pedido ---------- */
.m-track { --st: var(--brand); display: flex; flex-direction: column; gap: 14px; padding: 18px 0 8px; }
.m-track.st-aguardando { --st: #b7791f; } .m-track.st-preparando { --st: #f18a32; } .m-track.st-pronto { --st: #199b7b; } .m-track.st-entregue { --st: #199b7b; } .m-track.st-cancelado { --st: #dc2626; }
.m-track-head { text-align: center; }
.m-track-ic { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: var(--st); background: color-mix(in srgb, var(--st) 13%, var(--surface)); }
.m-track-head small { display: block; font-size: 13px; font-weight: 600; color: var(--txt2); }
.m-track-head h2 { margin: 4px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong); }
.m-track-head .m-sub { margin: 0; }
.m-track-steps { list-style: none; margin: 0; padding: 14px 10px; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); position: relative; }
.m-track-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--txt2); }
.m-track-steps li::before { content: ''; position: absolute; top: 11px; right: 50%; width: 100%; height: 3px; background: var(--line2); z-index: 0; }
.m-track-steps li:first-child::before { display: none; }
.m-track-steps li.done::before, .m-track-steps li.cur::before { background: var(--st); }
.m-track-steps i { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--surface); border: 3px solid var(--line2); }
.m-track-steps li.done i { background: var(--st); border-color: var(--st); }
.m-track-steps li.cur i { border-color: var(--st); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 18%, transparent); }
.m-track-steps li.cur { color: var(--ink-strong); }
.m-track-steps i svg { display: block; }
.m-track-ic svg { width: 30px; height: 30px; }

/* Em andamento: a linha até a próxima etapa vai se preenchendo em loop, o ponto atual pulsa
 * e o ícone grande "respira". Ao mudar de etapa, a linha recém-concluída se completa. */
@media (prefers-reduced-motion: no-preference) {
  .m-track-steps li.next::before {
    background: linear-gradient(90deg, var(--st), color-mix(in srgb, var(--st) 55%, transparent)) no-repeat left / 0% 100%, var(--line2);
    animation: m-track-flow 1.8s cubic-bezier(.45, 0, .25, 1) infinite;
  }
  .m-track-steps li.cur i { animation: m-track-ring 1.8s ease-out infinite; }
  .m-track-ic.live { animation: m-track-glow 2.4s ease-in-out infinite; }
  .m-track-ic.live svg { animation: m-track-bob 2.4s ease-in-out infinite; }
  .m-track.st-pronto .m-track-ic.live svg { animation-name: m-track-ride; animation-duration: 1.2s; }
  .m-track.changed .m-track-steps li.cur::before {
    background: linear-gradient(var(--st), var(--st)) no-repeat left / 100% 100%, var(--line2);
    animation: m-track-fill 700ms cubic-bezier(.16, 1, .3, 1) backwards;
  }
  .m-track.changed .m-track-steps li.cur i { animation: m-pop 480ms cubic-bezier(.16, 1, .3, 1), m-track-ring 1.8s 480ms ease-out infinite; }
}
@keyframes m-track-flow {
  0% { background-size: 0% 100%, auto; }
  70% { background-size: 100% 100%, auto; opacity: 1; }
  100% { background-size: 100% 100%, auto; opacity: .35; }
}
@keyframes m-track-fill { from { background-size: 0% 100%, auto; } }
@keyframes m-track-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st) 45%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}
@keyframes m-track-glow { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--st) 10%, transparent); } }
@keyframes m-track-bob { 50% { transform: translateY(-3px); } }
@keyframes m-track-ride { 0%, 100% { transform: translateX(-2px) rotate(-2deg); } 50% { transform: translateX(2px) rotate(1deg); } }
.m-track-cancel { padding: 14px 16px; border-radius: 14px; background: rgb(220 38 38 / 7%); border: 1px solid rgb(220 38 38 / 25%); font-size: 14px; line-height: 1.5; color: var(--ink); display: grid; gap: 6px; }
.m-track-cancel p { margin: 0; }
.m-track-cancel:empty { display: none; }
.m-track-items { border: 1px solid var(--line); border-radius: 14px; padding: 2px 14px; background: var(--surface); }
.m-track-items summary { cursor: pointer; padding: 11px 0; font-size: 14px; font-weight: 700; color: var(--ink-strong); }
.m-track-items ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink); }
.m-track-items small { display: block; color: var(--txt2); font-size: 12.5px; }
.m-track-live { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -4px 0 0 !important; font-size: 12.5px !important; }
.m-track-live i { width: 8px; height: 8px; border-radius: 50%; background: #199b7b; }
@media (prefers-reduced-motion: no-preference) {
  .m-track-live i { animation: m-live 1.6s ease-in-out infinite; }
  .m-track.changed .m-track-head { animation: m-pix-in 420ms cubic-bezier(.16, 1, .3, 1); }
  .m-track.changed .m-track-ic { animation: m-pop 480ms cubic-bezier(.16, 1, .3, 1); }
}
@keyframes m-live { 50% { opacity: .35; } }
@keyframes m-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.m-spin { display: block; width: 28px; height: 28px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: #32bcad; animation: m-spin .8s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .m-pixpay-qr { animation: m-pix-in 420ms cubic-bezier(.16, 1, .3, 1); }
}