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,9 +809,10 @@ 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
                 name={drawerProvider.name}
                 location={drawerProvider.location}
@@ -805,8 +824,8 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
                 startingPrice={drawerProvider.startingPrice}
                 onClick={() => onSelectProvider(drawerProvider.id)}
                 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 */}