Screen ID: CON-084
Flow: Orders → Active Order → Live Map Tracking
Previous: CON-083 Order Tracking Timeline
Next: CON-085 Order Rating (after delivery)

Full-screen Map: The map covers the entire screen. A CSS grid pattern simulates streets. In production, this would be a native map (Google Maps / Mapbox). The status bar is overlaid with a transparent gradient for readability.

Route Line: A dashed SVG path shows the route from the driver to the destination. An animated dot travels along the path to indicate active movement. In production, this would be a polyline drawn on the actual map from real GPS coordinates.

Driver Marker: The driver location is shown as a car icon inside a lime (#C9F06B) circle with a white border and pulse animation. The pulse effect communicates live/real-time tracking. Position updates every 10 seconds in production.

Destination Pin: The user's delivery address is marked with a dark green (#043F2D) circle containing a house icon, a stem, and a ground shadow. This pin remains fixed.

Bottom Card: A sliding card at the bottom shows: drag handle (for expanding), driver avatar placeholder, driver name "Themba M.", ETA badge "8 min away", action buttons for Call (primary dark green) and Message (outlined), and "View Status" lime button that links to the timeline view (CON-083).

Back Button: Floating white circular button at top-left with shadow. Returns to the previous screen (order timeline or order detail).

Interaction: The bottom card can be dragged up to reveal more details (in production). Tapping "Call" initiates a phone call. "Message" opens an in-app chat. "View Status" switches to the timeline view.