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/RegionsStep.swift

@@ -11,37 +11,19 @@ struct RegionsStep: View {
     @Environment(\.colorScheme) private var colorScheme
     @Binding var selectedRegions: Set<Region>
 
-    private let columns = [
-        GridItem(.flexible()),
-        GridItem(.flexible())
-    ]
-
     var body: some View {
         VStack(alignment: .leading, spacing: Theme.Spacing.md) {
             StepHeader(
                 title: "Where do you want to go?",
-                subtitle: "Select one or more regions"
+                subtitle: "Tap the map to select regions"
             )
 
-            LazyVGrid(columns: columns, spacing: Theme.Spacing.sm) {
-                ForEach(Region.allCases.filter { $0 != .crossCountry }) { region in
-                    RegionCard(
-                        region: region,
-                        isSelected: selectedRegions.contains(region),
-                        onTap: { toggleRegion(region) }
-                    )
+            RegionMapSelector(
+                selectedRegions: $selectedRegions,
+                onToggle: { region in
+                    toggleRegion(region)
                 }
-            }
-
-            if !selectedRegions.isEmpty {
-                HStack {
-                    Image(systemName: "mappin.circle.fill")
-                        .foregroundStyle(Theme.warmOrange)
-                    Text("\(selectedRegions.count) region\(selectedRegions.count == 1 ? "" : "s") selected")
-                        .font(.subheadline)
-                        .foregroundStyle(Theme.textSecondary(colorScheme))
-                }
-            }
+            )
         }
         .padding(Theme.Spacing.lg)
         .background(Theme.cardBackground(colorScheme))
@@ -61,40 +43,6 @@ struct RegionsStep: View {
     }
 }
 
-// MARK: - Region Card
-
-private struct RegionCard: View {
-    @Environment(\.colorScheme) private var colorScheme
-    let region: Region
-    let isSelected: Bool
-    let onTap: () -> Void
-
-    var body: some View {
-        Button(action: onTap) {
-            VStack(spacing: Theme.Spacing.xs) {
-                Image(systemName: region.iconName)
-                    .font(.title)
-                    .foregroundStyle(isSelected ? Theme.warmOrange : Theme.textSecondary(colorScheme))
-
-                Text(region.shortName)
-                    .font(.caption)
-                    .fontWeight(.medium)
-                    .foregroundStyle(isSelected ? Theme.warmOrange : Theme.textPrimary(colorScheme))
-                    .multilineTextAlignment(.center)
-            }
-            .frame(maxWidth: .infinity)
-            .padding(.vertical, Theme.Spacing.md)
-            .background(isSelected ? Theme.warmOrange.opacity(0.1) : Color.clear)
-            .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
-            .overlay(
-                RoundedRectangle(cornerRadius: Theme.CornerRadius.medium)
-                    .stroke(isSelected ? Theme.warmOrange : Theme.textMuted(colorScheme).opacity(0.3), lineWidth: isSelected ? 2 : 1)
-            )
-        }
-        .buttonStyle(.plain)
-    }
-}
-
 // MARK: - Preview
 
 #Preview {