fix order tracking UI alignment

Author: Mishra-coder

frontend/src/components/AccountModal.jsx

@@ -141,8 +141,10 @@ const AccountModal = ({ user, onClose, onLogout, orders, onCancelOrder }) => {
                 <div className="od-tracking">
                   {TRACKING_STEPS.map((step, i) => (
                     <div key={step} className="track-step">
-                      <div className={`track-dot ${i === 0 ? 'active' : ''}`} />
-                      {i < TRACKING_STEPS.length - 1 && <div className="track-line" />}
+                      <div className="track-left">
+                        <div className={`track-dot ${i === 0 ? 'active' : ''}`} />
+                        {i < TRACKING_STEPS.length - 1 && <div className="track-line" />}
+                      </div>
                       <div className="track-info">
                         <p className={`track-label ${i === 0 ? 'active' : ''}`}>{step}</p>
                         {i === 0 && <p className="track-date">{formatDate(selectedOrder.placedAt)}</p>}

frontend/src/index.css

@@ -1156,13 +1156,14 @@ ul {
 .od-cancel-btn:hover { border-color: #e85d04; color: #e85d04; }
 
 /* Tracking */
-.od-tracking { display: flex; flex-direction: column; padding: 8px 0; }
-.track-step { display: flex; gap: 14px; }
-.track-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #ddd; background: #fff; flex-shrink: 0; margin-top: 3px; }
-.track-dot.active { background: #e85d04; border-color: #e85d04; }
-.track-line { width: 2px; height: 36px; background: #eee; margin-left: 6px; }
-.track-info { padding-bottom: 8px; }
-.track-label { font-size: 13px; font-weight: 600; color: #aaa; }
+.od-tracking { display: flex; flex-direction: column; padding: 12px 0; }
+.track-step { display: flex; align-items: flex-start; gap: 16px; }
+.track-left { display: flex; flex-direction: column; align-items: center; width: 18px; flex-shrink: 0; }
+.track-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ddd; background: #fff; flex-shrink: 0; }
+.track-dot.active { background: #e85d04; border-color: #e85d04; box-shadow: 0 0 0 4px rgba(232,93,4,0.12); }
+.track-line { width: 2px; height: 36px; background: #eee; margin: 0 auto; }
+.track-info { padding-bottom: 4px; flex: 1; }
+.track-label { font-size: 14px; font-weight: 600; color: #bbb; line-height: 1.6; }
 .track-label.active { color: #1a1a1a; font-weight: 800; }
 .track-date { font-size: 12px; color: #aaa; margin-top: 2px; }
 .od-cancelled-badge { color: #dc2626; font-weight: 700; font-size: 14px; padding: 12px 0; }