body { background: #f8faf8; }
.card { border-radius: 12px; }
.veg-dot { display:inline-block; width:12px; height:12px; border:2px solid #198754; border-radius:3px; position:relative; }
.veg-dot::after { content:''; position:absolute; inset:2px; background:#198754; border-radius:50%; }
.nonveg-dot { display:inline-block; width:12px; height:12px; border:2px solid #b02a37; border-radius:3px; position:relative; }
.nonveg-dot::after { content:''; position:absolute; inset:2px; background:#b02a37; border-radius:50%; }
.timeline { display:flex; gap:0; margin: 1.5rem 0; }
.tstep { flex:1; text-align:center; position:relative; font-size:.8rem; color:#999; }
.tstep .dot { width:34px; height:34px; border-radius:50%; background:#dee2e6; color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto 6px; font-weight:bold; }
.tstep.done { color:#198754; }
.tstep.done .dot { background:#198754; }
.tstep.now { color:#0d6efd; font-weight:bold; }
.tstep.now .dot { background:#0d6efd; box-shadow:0 0 0 5px rgba(13,110,253,.2); }
.tstep::before { content:''; position:absolute; top:17px; left:-50%; width:100%; height:3px; background:#dee2e6; z-index:-1; }
.tstep:first-child::before { display:none; }
.tstep.done::before { background:#198754; }