ProvidersStep mobile: unify control outlines + shadows, square drawer bottom

- Search, Filters, Sort by, and the List/Map toggle now share a
  neutral-300 1px border and a shadow-sm drop, so the strip reads as a
  coherent set of floating chips over the map (not a mix of different
  button chromes)
- Drawer card now runs edge-to-edge inside the drawer with its own
  border + shadow stripped; the drawer Paper provides the top radius
  and the bottom is explicitly squared (no stray MUI default radius
  leaking through)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/pages/ProvidersStep/ProvidersStep.tsx

@@ -623,9 +623,14 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
               sx={{
                 '& .MuiOutlinedInput-root': {
                   bgcolor: 'background.paper',
+                  boxShadow: 'var(--fa-shadow-sm)',
+                },
+                '& .MuiOutlinedInput-notchedOutline': {
+                  borderColor: 'var(--fa-color-neutral-300)',
+                  borderWidth: 1,
                 },
                 '& .MuiOutlinedInput-root.Mui-focused': {
-                  boxShadow: 'none',
+                  boxShadow: 'var(--fa-shadow-sm)',
                   '& .MuiOutlinedInput-notchedOutline': {
                     borderColor: 'var(--fa-color-neutral-300)',
                     borderWidth: 1,
@@ -646,7 +651,12 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                   '& .MuiButton-root': {
                     height: 32,
                     bgcolor: 'background.paper',
-                    '&:hover': { bgcolor: 'background.paper' },
+                    borderColor: 'var(--fa-color-neutral-300)',
+                    boxShadow: 'var(--fa-shadow-sm)',
+                    '&:hover': {
+                      bgcolor: 'background.paper',
+                      borderColor: 'var(--fa-color-neutral-300)',
+                    },
                     '&:focus-visible': { outline: 'none' },
                   },
                 }}
@@ -666,8 +676,13 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                 sx={{
                   height: 32,
                   bgcolor: 'background.paper',
+                  borderColor: 'var(--fa-color-neutral-300)',
+                  boxShadow: 'var(--fa-shadow-sm)',
                   textTransform: 'none',
-                  '&:hover': { bgcolor: 'background.paper' },
+                  '&:hover': {
+                    bgcolor: 'background.paper',
+                    borderColor: 'var(--fa-color-neutral-300)',
+                  },
                   '&:focus-visible': { outline: 'none' },
                 }}
               >
@@ -705,10 +720,12 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                 sx={{
                   ml: 'auto',
                   flexShrink: 0,
+                  boxShadow: 'var(--fa-shadow-sm)',
                   '& .MuiToggleButton-root': {
                     height: 32,
                     px: 1,
                     py: 0,
+                    borderColor: 'var(--fa-color-neutral-300)',
                     bgcolor: 'background.paper',
                     '&:hover': { bgcolor: 'background.paper' },
                     '&.Mui-selected': {
@@ -749,6 +766,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
               zIndex: 3,
               maxHeight: '60vh',
               overflow: 'auto',
+              borderRadius: 0,
               borderTopLeftRadius: 16,
               borderTopRightRadius: 16,
               boxShadow: 'var(--fa-shadow-lg)',
@@ -791,22 +809,23 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
               </IconButton>
             </Box>
 
-            {/* Single-provider drawer content — entire card clickable */}
+            {/* Single-provider drawer content — entire card clickable. Card
+                runs edge-to-edge inside the drawer with its own corners
+                squared; the drawer Paper provides the top radius. */}
             {drawerProvider && (
-              <Box sx={{ px: 1.5, pb: 1.5 }}>
+              <ProviderCard
-                <ProviderCard
+                name={drawerProvider.name}
-                  name={drawerProvider.name}
+                location={drawerProvider.location}
-                  location={drawerProvider.location}
+                verified={drawerProvider.verified}
-                  verified={drawerProvider.verified}
+                imageUrl={drawerProvider.imageUrl}
-                  imageUrl={drawerProvider.imageUrl}
+                logoUrl={drawerProvider.logoUrl}
-                  logoUrl={drawerProvider.logoUrl}
+                rating={drawerProvider.rating}
-                  rating={drawerProvider.rating}
+                reviewCount={drawerProvider.reviewCount}
-                  reviewCount={drawerProvider.reviewCount}
+                startingPrice={drawerProvider.startingPrice}
-                  startingPrice={drawerProvider.startingPrice}
+                onClick={() => onSelectProvider(drawerProvider.id)}
-                  onClick={() => onSelectProvider(drawerProvider.id)}
+                aria-label={`${drawerProvider.name}, ${drawerProvider.location}. Tap to view packages.`}
-                  aria-label={`${drawerProvider.name}, ${drawerProvider.location}. Tap to view packages.`}
+                sx={{ borderRadius: 0, boxShadow: 'none', border: 'none' }}
-                />
+              />
-              </Box>
             )}
 
             {/* Cluster list drawer content — tap row to drill in */}