From cb7ba5dcdbb9ce909d944d12742cf34d01e70fdd Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Thu, 26 Mar 2026 17:39:44 +1100
Subject: [PATCH] Step 1 circle uses primary fill + align Input with Select
 styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- StepCircle gets `active` prop — brand-500 fill with white number (used on step 1)
- Input in step 4 now matches selectSx: bgcolor, disabled (opacity + dashed),
  error border, hover, focus — all consistent with steps 1-3

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../FuneralFinder/FuneralFinderV2.tsx          | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/FuneralFinder/FuneralFinderV2.tsx b/src/components/organisms/FuneralFinder/FuneralFinderV2.tsx
index 7a6750c..daedde2 100644
--- a/src/components/organisms/FuneralFinder/FuneralFinderV2.tsx
+++ b/src/components/organisms/FuneralFinder/FuneralFinderV2.tsx
@@ -77,13 +77,17 @@ const STEP_CIRCLE_SIZE = 48;
 function StepCircle({
   step,
   completed,
+  active = false,
   showConnector = false,
 }: {
   step: number;
   completed: boolean;
+  /** Use primary brand fill even when not completed (for the first/always-active step) */
+  active?: boolean;
   /** Show a vertical connector line below this circle to the next step */
   showConnector?: boolean;
 }) {
+  const usePrimary = completed || active;
   return (
     <Box
       sx={{
@@ -97,7 +101,7 @@ function StepCircle({
         position: 'relative',
         zIndex: 1,
         transition: 'background-color 200ms ease, color 200ms ease',
-        ...(completed
+        ...(usePrimary
           ? { bgcolor: 'var(--fa-color-brand-500)', color: 'common.white' }
           : { bgcolor: 'var(--fa-color-brand-200, #EBDAC8)', color: 'var(--fa-color-brand-700, #8B4E0D)' }),
         // Connector line from bottom of this circle toward the next
@@ -320,7 +324,7 @@ export const FuneralFinderV2 = React.forwardRef<HTMLDivElement, FuneralFinderV2P
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
           {/* Step 1: I'm looking to */}
           <Box sx={{ display: 'flex', gap: 2.5, alignItems: 'flex-end' }}>
-            <StepCircle step={1} completed={!!lookingTo} showConnector />
+            <StepCircle step={1} completed={!!lookingTo} active showConnector />
             <Box sx={{ flex: 1 }}>
               <Typography variant="body1" sx={{ fontWeight: 600, mb: 1, color: 'var(--fa-color-brand-700)' }}>
                 I&rsquo;m looking to&hellip;
@@ -421,6 +425,7 @@ export const FuneralFinderV2 = React.forwardRef<HTMLDivElement, FuneralFinderV2P
                   if (e.key === 'Enter') handleSubmit();
                 }}
                 sx={{
+                  bgcolor: 'var(--fa-color-surface-default, #fff)',
                   '& .MuiOutlinedInput-notchedOutline': {
                     borderColor: 'var(--fa-color-neutral-200)',
                     borderRadius: 'var(--fa-border-radius-md, 8px)',
@@ -433,6 +438,15 @@ export const FuneralFinderV2 = React.forwardRef<HTMLDivElement, FuneralFinderV2P
                     borderColor: 'var(--fa-color-brand-400)',
                     borderWidth: '1px',
                   },
+                  '&.Mui-disabled': {
+                    opacity: 0.6,
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderStyle: 'dashed',
+                    },
+                  },
+                  '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+                    borderColor: 'var(--fa-color-feedback-error-500, #d32f2f)',
+                  },
                   '& .MuiOutlinedInput-input': {
                     py: '14px',
                     px: 2,