fix(wizard): improve UX with step reordering and UI polish

- Reorder wizard steps: dates before sports (enables availability check)
- Add contentShape(Rectangle()) for full tap targets on all cards
- Fix route preference showing preselected value
- Fix sport cards having inconsistent heights
- Speed up step reveal animation (0.3s → 0.15s)
- Add debounced scroll delay to avoid interrupting selection

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

SportsTime/Features/Trip/Views/Wizard/Steps/DatesStep.swift

@@ -2,7 +2,7 @@
 //  DatesStep.swift
 //  SportsTime
 //
-//  Step 3 of the trip wizard - select travel dates.
+//  Step 2 of the trip wizard - select travel dates.
 //
 
 import SwiftUI
@@ -18,49 +18,22 @@ struct DatesStep: View {
         VStack(alignment: .leading, spacing: Theme.Spacing.md) {
             StepHeader(
                 title: "When would you like to travel?",
-                subtitle: "Pick your trip dates"
+                subtitle: "Tap to select start and end dates"
             )
 
-            VStack(spacing: Theme.Spacing.md) {
-                DatePicker(
-                    "Start Date",
-                    selection: $startDate,
-                    in: Date()...,
-                    displayedComponents: .date
-                )
-                .datePickerStyle(.compact)
-                .onChange(of: startDate) { _, newValue in
-                    // Ensure end date is after start date
-                    if endDate < newValue {
-                        endDate = newValue.addingTimeInterval(86400)
-                    }
-                    hasSetDates = true
-                    onDatesChanged()
-                }
-
-                DatePicker(
-                    "End Date",
-                    selection: $endDate,
-                    in: startDate...,
-                    displayedComponents: .date
-                )
-                .datePickerStyle(.compact)
-                .onChange(of: endDate) { _, _ in
-                    hasSetDates = true
-                    onDatesChanged()
-                }
+            DateRangePicker(
+                startDate: $startDate,
+                endDate: $endDate
+            )
+            .onChange(of: startDate) { _, _ in
+                // Only mark as complete when user has selected both dates (end > start)
+                updateHasSetDates()
+                onDatesChanged()
             }
-            .padding(Theme.Spacing.sm)
-            .background(Theme.cardBackgroundElevated(colorScheme))
-            .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
-
-            // Trip duration indicator
-            HStack {
-                Image(systemName: "calendar.badge.clock")
-                    .foregroundStyle(Theme.textMuted(colorScheme))
-                Text(durationText)
-                    .font(.subheadline)
-                    .foregroundStyle(Theme.textSecondary(colorScheme))
+            .onChange(of: endDate) { _, _ in
+                // Only mark as complete when user has selected both dates (end > start)
+                updateHasSetDates()
+                onDatesChanged()
             }
         }
         .padding(Theme.Spacing.lg)
@@ -72,15 +45,12 @@ struct DatesStep: View {
         }
     }
 
-    private var durationText: String {
-        let days = Calendar.current.dateComponents([.day], from: startDate, to: endDate).day ?? 0
-        if days == 0 {
-            return "Same day trip"
-        } else if days == 1 {
-            return "1 day trip"
-        } else {
-            return "\(days) day trip"
-        }
+    private func updateHasSetDates() {
+        // User must select both start and end dates (end date must be after start)
+        let calendar = Calendar.current
+        let startDay = calendar.startOfDay(for: startDate)
+        let endDay = calendar.startOfDay(for: endDate)
+        hasSetDates = endDay > startDay
     }
 }