CON-022 | Map Confirm Address - Fresh Food Market

CON-022 | Map Confirm Address

Type: Map-based address confirmation (no bottom navigation)
Purpose: Let user visually confirm and fine-tune pin placement for their delivery address
Navigation: Back to CON-021; "Confirm Address" goes to CON-023-address-details-form.html

Map area: Takes top ~60% of screen height (min 380px)
Bottom card: White with top rounded corners (16px radius), slides up over map edge
Pin: Centered on map, stays fixed while map pans underneath
Background: Map placeholder with grid pattern and simulated road lines

Map pin: 44px container | #043F2D background | Rotated diamond shape | Lime accent icon inside | Drop shadow
Pin shadow: 20x6px ellipse | 15% black opacity | Below pin
Recenter button: 44px circle | White background | #043F2D icon | Shadow-md | Bottom-right of map
Drag hint: Pill shape | 60% black background | White text 10px | Bottom-center of map
Address display: 40px icon container | Main: Alexandria 16px Bold | Secondary: Alatsi 12px #6B7280
Confirm button: Full-width | 52px height | Lime #C9F06B | Alexandria 16px Bold | #043F2D text

Map is interactive -- user can pan/zoom to adjust pin position
The pin stays centered; the map moves underneath it
Address text updates in real-time via reverse geocoding as pin position changes
Recenter button snaps map back to detected/searched location
Drag hint disappears after first map interaction
"Confirm Address" navigates to the address details form with geocoded data pre-filled

Recenter button has aria-label for screen readers
Map area should announce "Interactive map. Drag to adjust delivery pin location." for assistive tech
Confirm button is large (52px) for easy tap target