/* =====================================================================
   RASTREIO — stepper vertical de status de entrega. Usa as variáveis de
   :root já definidas em styles.css e as classes .chk-* de checkout.css.
   ===================================================================== */

.rs-step { display: flex; gap: 12px; position: relative; padding-bottom: 26px; }
.rs-step:last-child { padding-bottom: 0; }
.rs-step__line {
  position: absolute; left: 11px; top: 26px; bottom: -2px; width: 2px;
  background: var(--line);
}
.rs-step.is-done .rs-step__line { background: var(--green); }

.rs-step__dot {
  width: 24px; height: 24px; border-radius: 999px; flex: none; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft); border: 2px solid var(--line); color: var(--muted);
  font-size: 11px; font-weight: 800;
}
.rs-step__dot svg { width: 13px; height: 13px; }
.rs-step.is-done .rs-step__dot { background: var(--green); border-color: var(--green); color: #fff; }
.rs-step.is-current .rs-step__dot { background: var(--primary); border-color: var(--primary); color: #fff; }

.rs-step__body { padding-top: 1px; }
.rs-step__title { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.rs-step.is-pending .rs-step__title { color: var(--muted); }
.rs-step__hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Botão flutuante "Rastrear pedido" ---------- */
.rs-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: #fff; padding: 13px 18px 13px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 800; box-shadow: var(--shadow-lg); text-decoration: none;
}
.rs-fab svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) {
  .rs-fab span { display: none; }
  .rs-fab { padding: 14px; }
}