Screen ID: CON-032
Flow: Home → Delivery Slot Selection
Previous: CON-030 Home Main
Next: Returns to CON-030 with selected slot

Overlay Pattern: Semi-transparent dark overlay (rgba 0,0,0,0.4) behind the bottom sheet. Tapping the overlay dismisses the sheet and returns to the home screen.

Bottom Sheet: Slides up from the bottom with rounded top corners (radius-xl). Has a drag handle at top and an X close button. Max height 85vh with scroll if content overflows.

Date Picker: Horizontally scrollable date chips. "Today" is pre-selected (active state with dark green background). Shows up to 5 days. Each chip shows day name and date number. Active chip has a checkmark.

Timeslots: Vertical list of available time windows for the selected date. Each slot shows: • Time range (left)
• Price or "FREE" (right)
• States: available (default), selected (green border + checkmark), unavailable/FULL (greyed out, not tappable)

Selected Slot (2:00-3:00 PM): Shows the timeslot--selected class with primary-colored border and subtle background tint. "FREE" label in green with a circular checkmark icon. This is the currently selected slot.

Unavailable Slot (5:00-6:00 PM): Uses timeslot--unavailable class with reduced opacity and cursor: not-allowed. "FULL" label in disabled color. Cannot be selected.

Confirm Button: Lime accent full-width button at the bottom. Tapping confirms the selected slot, updates the delivery banner on the home screen, and closes the bottom sheet.

Pricing Logic: Delivery fee varies by time slot. Free delivery available for off-peak slots or when order exceeds R 350.00 threshold. Pricing should update dynamically based on cart total.