From 67dee4f0d9661a08110a33c0736df08fd029db4d Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 12:26:34 +0330
Subject: [PATCH 01/21] fix question

---
 src/components/Componentes/question-renderer.tsx |  1 +
 src/components/Componentes/question-slider.tsx   | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Componentes/question-renderer.tsx b/src/components/Componentes/question-renderer.tsx
index dcf20c7..de9185c 100644
--- a/src/components/Componentes/question-renderer.tsx
+++ b/src/components/Componentes/question-renderer.tsx
@@ -117,6 +117,7 @@ export function QuestionRenderer({
       );
     case "slider":
     case "scale":
+    case "range":
       return (
         <QuestionSlider
           question={question}
diff --git a/src/components/Componentes/question-slider.tsx b/src/components/Componentes/question-slider.tsx
index cc827e0..5494ff7 100644
--- a/src/components/Componentes/question-slider.tsx
+++ b/src/components/Componentes/question-slider.tsx
@@ -86,7 +86,10 @@ export function QuestionSlider({
       ? Number(question.extras.placeHolder)
       : Math.round((min + max) / 2);
 
-  const isDesiredAgeRange = false;
+  const isDesiredAgeRange =
+    question.type === "range" ||
+    (question.id || "").toLowerCase().includes("desired_age") ||
+    (question.id || "").toLowerCase().includes("age_range");
 
   const thumbWidth = 18;
 
@@ -124,7 +127,7 @@ export function QuestionSlider({
   })();
 
   // Multi-state logic for Age Range Slider
-  let fromVal = 25;
+  let fromVal = 20;
   let toVal = 30;
   if (isDesiredAgeRange) {
     if (typeof storedValue === "string" && storedValue.includes("-")) {
@@ -140,6 +143,12 @@ export function QuestionSlider({
     } else if (typeof storedValue === "number") {
       fromVal = storedValue;
       toVal = Math.max(storedValue, max);
+    } else if (typeof question.extras?.placeHolder === "string") {
+      const match = question.extras.placeHolder.match(/(\d+)[^\d]+(\d+)/);
+      if (match) {
+        fromVal = Number(match[1]);
+        toVal = Number(match[2]);
+      }
     }
     fromVal = Math.max(min, Math.min(max, fromVal));
     toVal = Math.max(min, Math.min(max, toVal));

From ab3ed39b03f2b04a38de735121820959cae99836 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 13:20:05 +0330
Subject: [PATCH 02/21] fix client

---
 .../[slug]/question-detail-client.tsx         |  6 ++-
 src/hooks/marriage/use-section-data.ts        | 38 +++++++++++--------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/app/questions-list/[slug]/question-detail-client.tsx b/src/app/questions-list/[slug]/question-detail-client.tsx
index 1ec396f..937738b 100644
--- a/src/app/questions-list/[slug]/question-detail-client.tsx
+++ b/src/app/questions-list/[slug]/question-detail-client.tsx
@@ -270,12 +270,16 @@ export default function QuestionDetailClient({
   const profileId = useCurrentProfileId();
 
   const handleExit = useCallback(() => {
+    void queryClient.invalidateQueries({
+      queryKey: [...marriageQueryKeys.all, "form-overview"],
+      exact: false,
+    });
     if (onClose) {
       onClose();
       return;
     }
     router.replace(questionsListHref);
-  }, [onClose, questionsListHref, router]);
+  }, [onClose, questionsListHref, router, queryClient]);
 
   // Hardware back in the detail page = navigate back to questions list.
   // QuestionAnswersProvider's pagehide/unmount safety net will flush
diff --git a/src/hooks/marriage/use-section-data.ts b/src/hooks/marriage/use-section-data.ts
index 93202f5..38cab6a 100644
--- a/src/hooks/marriage/use-section-data.ts
+++ b/src/hooks/marriage/use-section-data.ts
@@ -149,22 +149,28 @@ export function applyProfilePatchResultToCache(
       const slug = String(queryKey[3] ?? "");
       queryClient.setQueryData(queryKey, patchSection(current, slug));
     });
-  queryClient.setQueryData(
-    marriageQueryKeys.formOverview("profile", locale),
-    (current: any) =>
-      current
-        ? {
-            ...current,
-            progress: data.progress,
-            sections: current.sections.map((section: any) => {
-              const progress =
-                data.affected_sections[section.id] ??
-                data.progress.sections_progress[section.id];
-              return progress ? { ...section, progress } : section;
-            }),
-          }
-        : current,
-  );
+  queryClient
+    .getQueriesData({
+      queryKey: [...marriageQueryKeys.all, "form-overview"],
+    })
+    .forEach(([queryKey, current]: [any, any]) => {
+      if (!current) return;
+      queryClient.setQueryData(queryKey, {
+        ...current,
+        progress: data.progress,
+        sections: current.sections?.map((section: any) => {
+          const progress =
+            data.affected_sections[section.id] ??
+            data.progress?.sections_progress?.[section.id];
+          return progress ? { ...section, progress } : section;
+        }),
+      });
+    });
+
+  void queryClient.invalidateQueries({
+    queryKey: [...marriageQueryKeys.all, "form-overview"],
+    exact: false,
+  });
 }
 
 export function useMarriageSectionDataQuery(

From 478d277c0ac5527c92a7d89aa17a18bab138246c Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 13:59:03 +0330
Subject: [PATCH 03/21] fix sheet

---
 src/components/Componentes/currency-sheet.tsx |  4 +-
 .../Componentes/question-birthplace.tsx       | 11 ++-
 .../Componentes/question-checkbox.tsx         | 78 ++++++++++++++++++-
 .../Componentes/question-date-sheet.tsx       |  4 +-
 .../Componentes/question-date.test.tsx        | 22 ++++++
 src/components/Componentes/question-phone.tsx |  4 +-
 .../Componentes/question-renderer.tsx         | 16 ++++
 .../Componentes/question-sheet.test.tsx       | 48 ++++++++++++
 src/components/Componentes/question-sheet.tsx |  4 +-
 9 files changed, 178 insertions(+), 13 deletions(-)

diff --git a/src/components/Componentes/currency-sheet.tsx b/src/components/Componentes/currency-sheet.tsx
index 22d00ad..766d83f 100644
--- a/src/components/Componentes/currency-sheet.tsx
+++ b/src/components/Componentes/currency-sheet.tsx
@@ -148,8 +148,8 @@ export function CurrencySheet({
         ].join(" ")}
       >
         {/* Header */}
-        <div className="flex items-center justify-between px-5 pt-3 pb-3 border-b border-[#F2F4F7]">
-          <h3 className="text-[17px] font-bold text-[#181818] truncate pr-2">
+        <div className="flex items-center justify-between gap-3 px-5 pt-3 pb-3 border-b border-[#F2F4F7]">
+          <h3 className="flex-1 min-w-0 text-[17px] font-bold leading-snug text-[#181818] line-clamp-2 break-words text-start">
             {sheetTitle}
           </h3>
           <button
diff --git a/src/components/Componentes/question-birthplace.tsx b/src/components/Componentes/question-birthplace.tsx
index 26fe3a1..3aaee2c 100644
--- a/src/components/Componentes/question-birthplace.tsx
+++ b/src/components/Componentes/question-birthplace.tsx
@@ -155,7 +155,12 @@ export function QuestionBirthplace({
   const { getAnswerValue, setAnswerValue, isLoading } = useQuestionAnswers();
   const rawValue = getAnswerValue(question);
 
-  const isResidence = question.ui_config?.enable_geoip === true;
+  const isResidence =
+    question.ui_config?.enable_geoip === true ||
+    question.ui_config?.location_kind === "residence" ||
+    question.id?.includes("residence") ||
+    question.id?.includes("living_area") ||
+    question.id?.includes("location");
   const storedRegion = isResidence ? getStoredUserGeoRegion() : null;
 
   const initial = parseValue(rawValue);
@@ -707,8 +712,8 @@ export function QuestionBirthplace({
               </div>
 
               {/* Header with Title and Close Button */}
-              <div className="flex items-center justify-between px-5 pt-2 pb-3 border-b border-[#F2F4F7]">
-                <h3 className="text-[17px] font-bold text-[#181818] truncate pr-2">
+              <div className="flex items-center justify-between gap-3 px-5 pt-2.5 pb-3 border-b border-[#F2F4F7]">
+                <h3 className="flex-1 min-w-0 text-[17px] font-bold leading-snug text-[#181818] line-clamp-2 break-words text-start">
                   {selectCountryPlaceholder}
                 </h3>
                 <button
diff --git a/src/components/Componentes/question-checkbox.tsx b/src/components/Componentes/question-checkbox.tsx
index 9d1e199..4d9dc64 100644
--- a/src/components/Componentes/question-checkbox.tsx
+++ b/src/components/Componentes/question-checkbox.tsx
@@ -23,8 +23,82 @@ export function QuestionCheckbox({
       ? [String(rawValue)]
       : [];
 
-  if (options.length === 0) {
-    return null;
+  const isSingleCheckbox = options.length === 0;
+
+  if (isSingleCheckbox) {
+    const isChecked = Boolean(
+      rawValue === true ||
+        rawValue === "true" ||
+        rawValue === "confirmed" ||
+        (Array.isArray(rawValue) && rawValue.length > 0),
+    );
+
+    const toggleSingle = () => {
+      setAnswerValue(question, isChecked ? null : ["confirmed"]);
+    };
+
+    const labelText =
+      question.description ||
+      question.title ||
+      "تأیید می‌کنم که نام، سن، تصویر و اطلاعات هویتی من با مدارک بارگذاری‌شده مطابقت دارد.";
+
+    return (
+      <div
+        className={[
+          "flex w-full flex-col gap-3.5 transition-opacity duration-200",
+          disabled ? "pointer-events-none opacity-30" : "",
+        ].join(" ")}
+      >
+        <QuestionTitle question={question} />
+
+        <div className="flex flex-col gap-3.5 pt-1">
+          <label
+            htmlFor={`checkbox-${question.id}`}
+            onClick={toggleSingle}
+            className={[
+              "cursor-pointer rounded-[16px] font-medium text-[14px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3.5 w-full px-5 py-4 text-start leading-relaxed",
+              isChecked
+                ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
+                : "bg-[#FAFAFA] text-[#181818] hover:bg-white shadow-[0_2px_6px_rgba(0,0,0,0.03)] border border-[#F0EDED]",
+            ].join(" ")}
+          >
+            <input
+              type="checkbox"
+              id={`checkbox-${question.id}`}
+              checked={isChecked}
+              disabled={disabled}
+              onChange={toggleSingle}
+              className="sr-only"
+            />
+            <div
+              className={[
+                "size-[20px] shrink-0 rounded-[6px] border-[2px] transition-all flex items-center justify-center",
+                isChecked
+                  ? "border-white bg-white text-[#F0445B]"
+                  : "border-[#D0D5DD] bg-white text-transparent",
+              ].join(" ")}
+            >
+              {isChecked && (
+                <svg
+                  width="12"
+                  height="10"
+                  viewBox="0 0 10 8"
+                  fill="none"
+                  className="stroke-current stroke-[2.5]"
+                >
+                  <path
+                    d="M1 4L3.5 6.5L9 1"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              )}
+            </div>
+            <span className="flex-1">{labelText}</span>
+          </label>
+        </div>
+      </div>
+    );
   }
 
   const toggleOption = (optionId: string) => {
diff --git a/src/components/Componentes/question-date-sheet.tsx b/src/components/Componentes/question-date-sheet.tsx
index 8075f61..a434dc0 100644
--- a/src/components/Componentes/question-date-sheet.tsx
+++ b/src/components/Componentes/question-date-sheet.tsx
@@ -294,8 +294,8 @@ export function QuestionDateSheet({
           isClosing ? "flutter-sheet-surface-exit" : "flutter-sheet-surface",
         ].join(" ")}
       >
-        <div className="flex items-center justify-between border-b border-[#F2F4F7] px-5 pb-3 pt-2">
-          <h3 className="truncate pr-2 text-[17px] font-bold text-[#181818]">
+        <div className="flex items-center justify-between gap-3 border-b border-[#F2F4F7] px-5 pb-3 pt-2.5">
+          <h3 className="flex-1 min-w-0 text-[17px] font-bold leading-snug text-[#181818] line-clamp-2 break-words text-start">
             {question.title}
           </h3>
           <button
diff --git a/src/components/Componentes/question-date.test.tsx b/src/components/Componentes/question-date.test.tsx
index 0f601dc..fbe7ab4 100644
--- a/src/components/Componentes/question-date.test.tsx
+++ b/src/components/Componentes/question-date.test.tsx
@@ -70,4 +70,26 @@ describe("QuestionDate", () => {
     expect(screen.queryByText("Age")).toBeNull();
     expect(screen.getByText("Select date")).toBeDefined();
   });
+
+  it("renders long date question title in sheet header with line-clamp-2 and without truncate", () => {
+    const longTitle =
+      "تاریخ دقیق تولد شما بر اساس مدارک شناسایی رسمی و شناسنامه معتبر";
+    const longDateQ = {
+      ...question,
+      title: longTitle,
+    };
+    render(<QuestionDate question={longDateQ} />);
+    fireEvent.click(screen.getByRole("button", { name: /select date/i }));
+
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toBeDefined();
+
+    const heading = dialog.querySelector("h3");
+    expect(heading).toBeDefined();
+    expect(heading?.textContent?.trim()).toBe(longTitle);
+    expect(heading).toHaveClass("line-clamp-2");
+    expect(heading).toHaveClass("flex-1");
+    expect(heading).not.toHaveClass("truncate");
+  });
 });
+
diff --git a/src/components/Componentes/question-phone.tsx b/src/components/Componentes/question-phone.tsx
index a1e7bee..050c093 100644
--- a/src/components/Componentes/question-phone.tsx
+++ b/src/components/Componentes/question-phone.tsx
@@ -816,8 +816,8 @@ export function QuestionPhone({
               ].join(" ")}
             >
               {/* Header with Title and Close Button */}
-              <div className="flex items-center justify-between px-5 pt-2 pb-3 border-b border-[#F2F4F7]">
-                <h3 className="text-[17px] font-bold text-[#181818] truncate pr-2">
+              <div className="flex items-center justify-between gap-3 px-5 pt-2.5 pb-3 border-b border-[#F2F4F7]">
+                <h3 className="flex-1 min-w-0 text-[17px] font-bold leading-snug text-[#181818] line-clamp-2 break-words text-start">
                   {selectCountryTitle}
                 </h3>
                 <button
diff --git a/src/components/Componentes/question-renderer.tsx b/src/components/Componentes/question-renderer.tsx
index de9185c..d0f7c27 100644
--- a/src/components/Componentes/question-renderer.tsx
+++ b/src/components/Componentes/question-renderer.tsx
@@ -33,6 +33,8 @@ export function QuestionRenderer({
 
   switch (question.type) {
     case "birthplace":
+    case "location":
+    case "residence":
       return (
         <QuestionBirthplace
           question={question}
@@ -125,6 +127,20 @@ export function QuestionRenderer({
         />
       );
     case "text":
+      if (
+        question.ui_config?.enable_geoip === true ||
+        question.ui_config?.location_kind === "residence" ||
+        question.id?.includes("approximate_location_of_current_living_area") ||
+        question.id?.includes("current_residence") ||
+        question.id?.includes("living_area")
+      ) {
+        return (
+          <QuestionBirthplace
+            question={question}
+            disabled={disabled}
+          />
+        );
+      }
       return (
         <QuestionText
           question={question}
diff --git a/src/components/Componentes/question-sheet.test.tsx b/src/components/Componentes/question-sheet.test.tsx
index fc038ba..a0ff248 100644
--- a/src/components/Componentes/question-sheet.test.tsx
+++ b/src/components/Componentes/question-sheet.test.tsx
@@ -433,4 +433,52 @@ describe("QuestionSheet component", () => {
     expect(screen.queryByText("Antigua and Barbuda")).toBeNull();
     expect(screen.queryByText("افغانستان")).toBeNull();
   });
+
+  it("renders long question title with line-clamp-2 and flex-1 classes in sheet header", () => {
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+
+    const longTitle =
+      "میزان پایبندی شما به مناسک و تکالیف شرعی و اعتقادات مذهبی در زندگی روزمره خانوادگی و اجتماعی";
+
+    const qLong = {
+      id: "religious_commitment_details",
+      title: longTitle,
+      type: "dropdown",
+      order: 1,
+      required: true,
+      isVisible: true,
+      description: "",
+      tooltip: "",
+      extras: { placeHolder: "انتخاب کنید" },
+      options: [
+        { id: "high", value: "high", label: "بسیار زیاد", order: 1 },
+        { id: "medium", value: "medium", label: "متوسط", order: 2 },
+      ],
+      ui_config: {},
+    } as QuestionField;
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <QuestionAnswersProvider slug="test" questions={[qLong]}>
+          <QuestionSheet question={qLong} />
+        </QuestionAnswersProvider>
+      </QueryClientProvider>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "انتخاب کنید" });
+    fireEvent.click(trigger);
+
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toBeDefined();
+
+    const heading = dialog.querySelector("h3");
+    expect(heading).toBeDefined();
+    expect(heading?.textContent?.trim()).toBe(longTitle);
+    expect(heading).toHaveClass("line-clamp-2");
+    expect(heading).toHaveClass("flex-1");
+    expect(heading).not.toHaveClass("truncate");
+  });
 });
+
diff --git a/src/components/Componentes/question-sheet.tsx b/src/components/Componentes/question-sheet.tsx
index 3787a08..1caa4c7 100644
--- a/src/components/Componentes/question-sheet.tsx
+++ b/src/components/Componentes/question-sheet.tsx
@@ -436,8 +436,8 @@ export function QuestionSheet({ question, disabled }: QuestionSheetProps) {
                 isClosing ? "flutter-sheet-surface-exit" : "flutter-sheet-surface",
               ].join(" ")}
             >
-              <div className="flex items-center justify-between px-5 pt-2 pb-3 border-b border-[#F2F4F7]">
-                <h3 className="text-[17px] font-bold text-[#181818] truncate pr-2">
+              <div className="flex items-center justify-between gap-3 px-5 pt-2.5 pb-3 border-b border-[#F2F4F7]">
+                <h3 className="flex-1 min-w-0 text-[17px] font-bold leading-snug text-[#181818] line-clamp-2 break-words text-start">
                   {question.title}
                 </h3>
                 <button

From 04866503776348da73c3178e3eb7be5c8f6be9cb Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 14:24:38 +0330
Subject: [PATCH 04/21] fix(checkbox): fix double-toggle event firing on single
 declaration checkbox

---
 src/components/Componentes/question-checkbox.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Componentes/question-checkbox.tsx b/src/components/Componentes/question-checkbox.tsx
index 4d9dc64..6c2c59d 100644
--- a/src/components/Componentes/question-checkbox.tsx
+++ b/src/components/Componentes/question-checkbox.tsx
@@ -54,7 +54,6 @@ export function QuestionCheckbox({
         <div className="flex flex-col gap-3.5 pt-1">
           <label
             htmlFor={`checkbox-${question.id}`}
-            onClick={toggleSingle}
             className={[
               "cursor-pointer rounded-[16px] font-medium text-[14px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3.5 w-full px-5 py-4 text-start leading-relaxed",
               isChecked

From d66506b39a5c561ea0ca62bc02e2660ae6ae93f9 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 14:33:32 +0330
Subject: [PATCH 05/21] fix(ui): make 4-option radio questions render
 vertically with radio indicators

---
 src/components/Componentes/question-checkbox.tsx | 5 +++--
 src/components/Componentes/question-radio.tsx    | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Componentes/question-checkbox.tsx b/src/components/Componentes/question-checkbox.tsx
index 6c2c59d..59c4224 100644
--- a/src/components/Componentes/question-checkbox.tsx
+++ b/src/components/Componentes/question-checkbox.tsx
@@ -113,9 +113,10 @@ export function QuestionCheckbox({
     );
   };
 
+  // Render horizontally only for 2-option binary choices
   const isShortOptions =
-    options.length <= 4 &&
-    options.every((opt) => String(opt.label || opt.value || "").length <= 15);
+    options.length <= 2 &&
+    options.every((opt) => String(opt.label || opt.value || "").length <= 10);
 
   return (
     <div
diff --git a/src/components/Componentes/question-radio.tsx b/src/components/Componentes/question-radio.tsx
index 826e785..480d1df 100644
--- a/src/components/Componentes/question-radio.tsx
+++ b/src/components/Componentes/question-radio.tsx
@@ -22,10 +22,10 @@ export function QuestionRadio({
     return null;
   }
 
-  // Render horizontally if all options are short (e.g. Single, Divorced, Widowed)
+  // Render horizontally only for 2-option binary choices (e.g. Yes/No, Male/Female)
   const isShortOptions =
-    options.length <= 4 &&
-    options.every((opt) => String(opt.label || opt.value || "").length <= 15);
+    options.length <= 2 &&
+    options.every((opt) => String(opt.label || opt.value || "").length <= 10);
 
   return (
     <div

From 4e128a8b087b1a2f7604ef2bf33fa0f4c40565bd Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 14:39:44 +0330
Subject: [PATCH 06/21] style(checkbox): remove box-shadow glow/blur and keep
 clean crisp borders

---
 src/components/Componentes/question-checkbox.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Componentes/question-checkbox.tsx b/src/components/Componentes/question-checkbox.tsx
index 59c4224..e967539 100644
--- a/src/components/Componentes/question-checkbox.tsx
+++ b/src/components/Componentes/question-checkbox.tsx
@@ -55,10 +55,10 @@ export function QuestionCheckbox({
           <label
             htmlFor={`checkbox-${question.id}`}
             className={[
-              "cursor-pointer rounded-[16px] font-medium text-[14px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3.5 w-full px-5 py-4 text-start leading-relaxed",
+              "cursor-pointer rounded-[16px] font-medium text-[14px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3.5 w-full px-5 py-4 text-start leading-relaxed border",
               isChecked
-                ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
-                : "bg-[#FAFAFA] text-[#181818] hover:bg-white shadow-[0_2px_6px_rgba(0,0,0,0.03)] border border-[#F0EDED]",
+                ? "bg-white text-[#181818] border-[#F0445B]"
+                : "bg-[#FAFAFA] text-[#181818] hover:bg-white border-[#F0EDED]",
             ].join(" ")}
           >
             <input
@@ -73,7 +73,7 @@ export function QuestionCheckbox({
               className={[
                 "size-[20px] shrink-0 rounded-[6px] border-[2px] transition-all flex items-center justify-center",
                 isChecked
-                  ? "border-white bg-white text-[#F0445B]"
+                  ? "border-[#F0445B] bg-[#F0445B] text-white"
                   : "border-[#D0D5DD] bg-white text-transparent",
               ].join(" ")}
             >
@@ -143,13 +143,13 @@ export function QuestionCheckbox({
               key={option.id}
               htmlFor={optionId}
               className={[
-                "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3",
+                "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3 border",
                 isShortOptions
                   ? "flex-1 min-w-[90px] px-5 py-3.5 text-center justify-center"
                   : "w-full px-5 py-4 text-start leading-snug",
                 isSelected
-                  ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
-                  : "bg-[#FAFAFA] text-[#181818] hover:bg-white shadow-[0_2px_6px_rgba(0,0,0,0.03)] border border-[#F0EDED]",
+                  ? "bg-[#F0445B] text-white border-[#F0445B]"
+                  : "bg-[#FAFAFA] text-[#181818] hover:bg-white border-[#F0EDED]",
               ].join(" ")}
             >
               <input

From ba6cd9257f2446f04d555fec359fe3f0dc0eae02 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 14:45:51 +0330
Subject: [PATCH 07/21] style(checkbox): make checkbox card styling 100%
 identical to radio boxes (pink background + white text on active)

---
 .../Componentes/question-checkbox.tsx         | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Componentes/question-checkbox.tsx b/src/components/Componentes/question-checkbox.tsx
index e967539..0093e76 100644
--- a/src/components/Componentes/question-checkbox.tsx
+++ b/src/components/Componentes/question-checkbox.tsx
@@ -55,10 +55,10 @@ export function QuestionCheckbox({
           <label
             htmlFor={`checkbox-${question.id}`}
             className={[
-              "cursor-pointer rounded-[16px] font-medium text-[14px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3.5 w-full px-5 py-4 text-start leading-relaxed border",
+              "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3 w-full px-5 py-4 text-start leading-snug",
               isChecked
-                ? "bg-white text-[#181818] border-[#F0445B]"
-                : "bg-[#FAFAFA] text-[#181818] hover:bg-white border-[#F0EDED]",
+                ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
+                : "bg-[#FAFAFA] text-[#181818] hover:bg-white shadow-[0_2px_6px_rgba(0,0,0,0.03)] border border-[#F0EDED]",
             ].join(" ")}
           >
             <input
@@ -71,19 +71,19 @@ export function QuestionCheckbox({
             />
             <div
               className={[
-                "size-[20px] shrink-0 rounded-[6px] border-[2px] transition-all flex items-center justify-center",
+                "size-[18px] shrink-0 rounded-[5px] border-[2px] transition-all flex items-center justify-center",
                 isChecked
-                  ? "border-[#F0445B] bg-[#F0445B] text-white"
+                  ? "border-white bg-white text-[#F0445B]"
                   : "border-[#D0D5DD] bg-white text-transparent",
               ].join(" ")}
             >
               {isChecked && (
                 <svg
-                  width="12"
-                  height="10"
+                  width="10"
+                  height="8"
                   viewBox="0 0 10 8"
                   fill="none"
-                  className="stroke-current stroke-[2.5]"
+                  className="stroke-current stroke-[2]"
                 >
                   <path
                     d="M1 4L3.5 6.5L9 1"
@@ -143,13 +143,13 @@ export function QuestionCheckbox({
               key={option.id}
               htmlFor={optionId}
               className={[
-                "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3 border",
+                "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3",
                 isShortOptions
                   ? "flex-1 min-w-[90px] px-5 py-3.5 text-center justify-center"
                   : "w-full px-5 py-4 text-start leading-snug",
                 isSelected
-                  ? "bg-[#F0445B] text-white border-[#F0445B]"
-                  : "bg-[#FAFAFA] text-[#181818] hover:bg-white border-[#F0EDED]",
+                  ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
+                  : "bg-[#FAFAFA] text-[#181818] hover:bg-white shadow-[0_2px_6px_rgba(0,0,0,0.03)] border border-[#F0EDED]",
               ].join(" ")}
             >
               <input

From e01bd5e142f666999b9a3ae989b65585c8396516 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 14:50:22 +0330
Subject: [PATCH 08/21] style(tests): optimize question text and options
 vertical spacing in test flow

---
 src/components/Componentes/test-questions-flow.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Componentes/test-questions-flow.tsx b/src/components/Componentes/test-questions-flow.tsx
index ba8b136..38329d3 100644
--- a/src/components/Componentes/test-questions-flow.tsx
+++ b/src/components/Componentes/test-questions-flow.tsx
@@ -306,7 +306,7 @@ export default function TestQuestionsFlow({
                   key={q.id}
                   aria-hidden={offset !== 0}
                   className={[
-                    "absolute inset-0 flex flex-col overflow-y-auto pt-2 pb-4 will-change-transform transition-transform duration-200 ease-in-out",
+                    "absolute inset-0 flex flex-col overflow-y-auto pt-3 pb-6 will-change-transform transition-transform duration-200 ease-in-out",
                     offset === 0 && !isSliding
                       ? "pointer-events-auto"
                       : "pointer-events-none",
@@ -316,14 +316,14 @@ export default function TestQuestionsFlow({
                   }}
                 >
                   {/* Question Title */}
-                  <div className="w-full min-h-[100px] sm:min-h-[120px] flex items-center justify-center my-3 sm:my-4 shrink-0 px-2">
-                    <h2 className="text-[17px] sm:text-[18px] font-bold text-[#1F2024] leading-[1.6] text-center w-full">
+                  <div className="w-full min-h-[110px] sm:min-h-[130px] flex items-center justify-center mt-3 mb-6 sm:mt-5 sm:mb-8 shrink-0 px-3">
+                    <h2 className="text-[18px] sm:text-[19px] font-bold text-[#1F2024] leading-[1.7] text-center w-full">
                       {q.text}
                     </h2>
                   </div>
 
                   {/* Answer Options Stack */}
-                  <div className="w-full flex flex-col gap-3 pb-3">
+                  <div className="w-full flex flex-col gap-3.5 pb-6">
                     {options.map((option) => {
                       const isSelected = qSelectedValue === option.value;
 

From 63d638c5df2f4e301f27029f42a35d8b3cae381e Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 17:56:06 +0330
Subject: [PATCH 09/21] fix(coordinator): hide bottom action button during
 keyboard open to prevent glow artifact

---
 src/app/globals.css                                 | 13 +++++++++++++
 src/components/Componentes/fix-to-the-end.tsx       |  2 +-
 src/components/Componentes/question-number.test.tsx |  3 ++-
 .../Componentes/question-viewport-coordinator.ts    |  3 ++-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index c4cb2a6..776ad95 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -412,6 +412,19 @@ body.section-overlay-open .app-shell {
   will-change: transform;
 }
 
+.question-fix-to-end {
+  transition:
+    opacity 200ms ease-out,
+    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: opacity, transform;
+}
+
+body.question-keyboard-open .question-fix-to-end {
+  opacity: 0 !important;
+  pointer-events: none !important;
+  transform: translate3d(0, 120%, 0) !important;
+}
+
 .page-background-none,
 .page-background-custom,
 .page-background-default {
diff --git a/src/components/Componentes/fix-to-the-end.tsx b/src/components/Componentes/fix-to-the-end.tsx
index 41a96a7..86ec978 100644
--- a/src/components/Componentes/fix-to-the-end.tsx
+++ b/src/components/Componentes/fix-to-the-end.tsx
@@ -12,7 +12,7 @@ export function FixToTheEnd({ children, className }: FixToTheEndProps) {
     <div
       style={{ paddingBottom: "calc(16px + var(--safe-bottom))" }}
       className={[
-        "fixed inset-x-0 bottom-0 z-20 mx-auto w-full sm:max-w-[375px] bg-[#F5F5F5]/95 px-[17px] pt-3 backdrop-blur-md",
+        "question-fix-to-end fixed inset-x-0 bottom-0 z-20 mx-auto w-full sm:max-w-[375px] bg-[#F5F5F5]/95 px-[17px] pt-3 backdrop-blur-md",
         className,
       ]
         .filter(Boolean)
diff --git a/src/components/Componentes/question-number.test.tsx b/src/components/Componentes/question-number.test.tsx
index c9f56e6..616ab55 100644
--- a/src/components/Componentes/question-number.test.tsx
+++ b/src/components/Componentes/question-number.test.tsx
@@ -40,10 +40,11 @@ describe("QuestionNumber Component", () => {
     type: "number",
     order: 1,
     required: true,
+    baseRequired: true,
     isVisible: true,
     description: "",
     tooltip: "",
-    extras: { placeHolder: "e.g. 3", range: [0, 20] },
+    extras: { placeHolder: "e.g. 3", range: [0, 20], options: [] },
     options: [],
     ui_config: {},
   };
diff --git a/src/components/Componentes/question-viewport-coordinator.ts b/src/components/Componentes/question-viewport-coordinator.ts
index e63b281..25f54d3 100644
--- a/src/components/Componentes/question-viewport-coordinator.ts
+++ b/src/components/Componentes/question-viewport-coordinator.ts
@@ -94,7 +94,8 @@ function setLift(nextLift: number) {
   const prevLift = currentLift;
   currentLift = Math.max(0, Math.round(nextLift));
   document.documentElement.style.setProperty(LIFT_VARIABLE, `${currentLift}px`);
-  const isOpen = currentLift > 0 && keyboardVisible && activeQuestionInput !== null;
+  const isOpen =
+    (currentLift > 0 || keyboardVisible) && activeQuestionInput !== null;
   document.body.classList.toggle("question-keyboard-open", isOpen);
   console.log(`[Coord] setLift: ${prevLift}px -> ${currentLift}px | visible: ${keyboardVisible} | class: ${isOpen}`);
 }

From fb4c3ed60e79d47a77a41997af87153d52af68a5 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 18:06:13 +0330
Subject: [PATCH 10/21] fix(coordinator): refine lift calculation to prevent
 overshooting top badge and add detailed geometry logging

---
 src/app/globals.css                           | 12 ++---
 .../question-viewport-coordinator.ts          | 46 +++++++++++++++----
 2 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 776ad95..f170926 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -237,12 +237,12 @@ html:lang(ar) body,
   }
 }
 
-body[data-page-background="none"] .app-shell {
-  background-image: none;
-}
-
-.app-shell:has(.page-background-none) {
-  background-image: none;
+body[data-page-background="none"] .app-shell,
+.app-shell:has(.page-background-none),
+body:has(.page-background-none),
+html:has(.page-background-none) {
+  background-image: none !important;
+  background-color: #F7F1F0 !important;
 }
 
 body[data-page-background="custom"] .app-shell {
diff --git a/src/components/Componentes/question-viewport-coordinator.ts b/src/components/Componentes/question-viewport-coordinator.ts
index 25f54d3..d4c2a81 100644
--- a/src/components/Componentes/question-viewport-coordinator.ts
+++ b/src/components/Componentes/question-viewport-coordinator.ts
@@ -29,11 +29,16 @@ const NON_KEYBOARD_INPUT_TYPES = new Set([
   "submit",
 ]);
 
+const DEFAULT_TOP_GAP = 28;
+const DEFAULT_BOTTOM_GAP = 16;
+
 export type QuestionLiftGeometry = {
   baseTop: number;
   baseBottom: number;
   visibleTop: number;
   visibleBottom: number;
+  topGap?: number;
+  bottomGap?: number;
   gap?: number;
 };
 
@@ -42,18 +47,28 @@ export function computeQuestionLift({
   baseBottom,
   visibleTop,
   visibleBottom,
+  topGap,
+  bottomGap,
   gap = QUESTION_GAP,
 }: QuestionLiftGeometry) {
+  const actualTopGap = topGap ?? gap ?? DEFAULT_TOP_GAP;
+  const actualBottomGap = bottomGap ?? gap ?? DEFAULT_BOTTOM_GAP;
   const contentHeight = baseBottom - baseTop;
-  const availableTop = visibleTop + gap;
-  const availableBottom = visibleBottom - gap;
+  const availableTop = visibleTop + actualTopGap;
+  const availableBottom = visibleBottom - actualBottomGap;
   const availableCenter = (availableTop + availableBottom) / 2;
   const contentCenter = baseTop + contentHeight / 2;
   const centerShift = Math.max(0, contentCenter - availableCenter);
   const overlapShift = Math.max(0, baseBottom - availableBottom);
   const maxShift = Math.max(0, baseTop - availableTop);
 
-  return Math.min(Math.max(centerShift, overlapShift), maxShift);
+  // When content is taller than available space, don't shove top to the extreme limit;
+  // prioritize keeping badge and title readable with comfortable top clearance.
+  const idealShift = contentHeight > (availableBottom - availableTop)
+    ? Math.min(overlapShift, maxShift)
+    : Math.max(centerShift, overlapShift);
+
+  return Math.min(idealShift, maxShift);
 }
 
 function isKeyboardInputTarget(
@@ -158,17 +173,30 @@ function updateLift() {
   const safeTop = Number.parseFloat(
     getComputedStyle(document.documentElement).getPropertyValue("--safe-top"),
   );
+  const visibleTop = Math.max(
+    Number.isFinite(safeTop) ? safeTop : 0,
+    snapList?.getBoundingClientRect().top ?? 0,
+  );
+  const visibleBottom = Math.min(...visibleBottomCandidates);
+
+  const badgeEl = content.querySelector<HTMLElement>(
+    '.rounded-full.bg-\\[\\#F8D7DA\\]',
+  );
+  const badgeTop = badgeEl ? badgeEl.getBoundingClientRect().top : null;
+  const inputRect = activeQuestionInput?.getBoundingClientRect();
 
   const computed = computeQuestionLift({
     baseTop,
     baseBottom,
-    visibleTop: Math.max(
-      Number.isFinite(safeTop) ? safeTop : 0,
-      snapList?.getBoundingClientRect().top ?? 0,
-    ),
-    visibleBottom: Math.min(...visibleBottomCandidates),
+    visibleTop,
+    visibleBottom,
+    topGap: DEFAULT_TOP_GAP,
+    bottomGap: DEFAULT_BOTTOM_GAP,
   });
-  console.log(`[Coord] computed lift: ${computed}px (baseTop: ${baseTop.toFixed(0)}, baseBottom: ${baseBottom.toFixed(0)}, kTop: ${keyboardTop?.toFixed(0)})`);
+
+  console.log(
+    `[Coord Geometry] lift: ${computed}px | content: [${baseTop.toFixed(0)}..${baseBottom.toFixed(0)}] h=${(baseBottom - baseTop).toFixed(0)} | vis: [${visibleTop.toFixed(0)}..${visibleBottom.toFixed(0)}] (kTop: ${keyboardTop?.toFixed(0)}) | badgeTop: ${badgeTop?.toFixed(0) ?? "none"} | input: [${inputRect?.top.toFixed(0) ?? "?"}..${inputRect?.bottom.toFixed(0) ?? "?"}]`,
+  );
   setLift(computed);
 }
 

From afe4909e4bb2207bc94e2554712d30c353ebe873 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 18:11:28 +0330
Subject: [PATCH 11/21] fix(textarea): make textarea responsive and keep
 continue button static at bottom with overlays-content viewport

---
 src/app/globals.css                                 | 13 -------------
 src/app/layout.tsx                                  |  1 +
 src/components/Componentes/question-textarea.tsx    |  2 +-
 .../Componentes/question-viewport-coordinator.ts    |  2 +-
 4 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index f170926..fe288c0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -412,19 +412,6 @@ body.section-overlay-open .app-shell {
   will-change: transform;
 }
 
-.question-fix-to-end {
-  transition:
-    opacity 200ms ease-out,
-    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: opacity, transform;
-}
-
-body.question-keyboard-open .question-fix-to-end {
-  opacity: 0 !important;
-  pointer-events: none !important;
-  transform: translate3d(0, 120%, 0) !important;
-}
-
 .page-background-none,
 .page-background-custom,
 .page-background-default {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d90d076..97a842a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -62,6 +62,7 @@ export const viewport: Viewport = {
   userScalable: false,
   viewportFit: "cover",
   themeColor: "#ffffff",
+  interactiveWidget: "overlays-content",
 };
 
 export default async function RootLayout({
diff --git a/src/components/Componentes/question-textarea.tsx b/src/components/Componentes/question-textarea.tsx
index 40e656c..34a0e9a 100644
--- a/src/components/Componentes/question-textarea.tsx
+++ b/src/components/Componentes/question-textarea.tsx
@@ -88,7 +88,7 @@ export function QuestionTextarea({
         placeholder={question.extras.placeHolder}
         disabled={disabled}
         rows={5}
-        className="h-[270px]"
+        className="h-[180px] sm:h-[220px] resize-none"
       />
       {description ? (
         <span className="block group-10 font-semibold text-[#747474]">
diff --git a/src/components/Componentes/question-viewport-coordinator.ts b/src/components/Componentes/question-viewport-coordinator.ts
index d4c2a81..2ca7e91 100644
--- a/src/components/Componentes/question-viewport-coordinator.ts
+++ b/src/components/Componentes/question-viewport-coordinator.ts
@@ -29,7 +29,7 @@ const NON_KEYBOARD_INPUT_TYPES = new Set([
   "submit",
 ]);
 
-const DEFAULT_TOP_GAP = 28;
+const DEFAULT_TOP_GAP = 48;
 const DEFAULT_BOTTOM_GAP = 16;
 
 export type QuestionLiftGeometry = {

From 10aa7b67eae3738f51fdc2efce977172f82a5f48 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 18:24:09 +0330
Subject: [PATCH 12/21] fix(assessment): remove shimmer on finish, use button
 3-dots loader and update form-overview cache on submit

---
 src/components/Componentes/test-questions-flow.tsx | 11 +----------
 src/hooks/marriage/use-cattell.ts                  |  5 ++++-
 src/hooks/marriage/use-glasser.ts                  | 10 +++++++++-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Componentes/test-questions-flow.tsx b/src/components/Componentes/test-questions-flow.tsx
index 38329d3..34fba72 100644
--- a/src/components/Componentes/test-questions-flow.tsx
+++ b/src/components/Componentes/test-questions-flow.tsx
@@ -12,7 +12,6 @@ import NavigationButton from "./navigation-button";
 import { PageBackground } from "./page-background";
 import StickyHeader from "./sticky-header";
 import TestExitSheet from "./test-exit-sheet";
-import TestLoadingScreen from "./test-loading-screen";
 
 export type QuestionOption = {
   id: string;
@@ -225,15 +224,6 @@ export default function TestQuestionsFlow({
     }
   };
 
-  if (isSubmitting) {
-    return (
-      <TestLoadingScreen
-        title="Analyzing and submitting responses"
-        subtitle="Please wait a moment while your answers are reviewed and registered."
-      />
-    );
-  }
-
   if (!currentQuestion) {
     return null;
   }
@@ -426,6 +416,7 @@ export default function TestQuestionsFlow({
                   !areAllQuestionsAnswered ||
                   isSubmitting
                 }
+                isLoading={isSubmitting}
                 onClick={handleFinishSubmit}
               >
                 {finishLabel}
diff --git a/src/hooks/marriage/use-cattell.ts b/src/hooks/marriage/use-cattell.ts
index 413d6cd..9c13234 100644
--- a/src/hooks/marriage/use-cattell.ts
+++ b/src/hooks/marriage/use-cattell.ts
@@ -86,9 +86,12 @@ export function useSubmitCattellAssessmentMutation(
         queryKey: marriageQueryKeys.cattellResult(),
       });
       queryClient.setQueriesData<FormSchemaResponse>(
-        { queryKey: ["marriage", "form-schema", "profile"] },
+        { queryKey: [...marriageQueryKeys.all, "form-overview"] },
         (schema) => markAssessmentCompleted(schema, "personality_test"),
       );
+      await queryClient.invalidateQueries({
+        queryKey: [...marriageQueryKeys.all, "form-overview"],
+      });
       await options?.onSuccess?.(data, variables, onMutateResult, context);
     },
   });
diff --git a/src/hooks/marriage/use-glasser.ts b/src/hooks/marriage/use-glasser.ts
index d4685a9..005d2b5 100644
--- a/src/hooks/marriage/use-glasser.ts
+++ b/src/hooks/marriage/use-glasser.ts
@@ -61,7 +61,7 @@ export function useSubmitGlasserAssessmentMutation(
         queryKey: marriageQueryKeys.glasserResult(),
       });
       queryClient.setQueriesData<FormSchemaResponse>(
-        { queryKey: ["marriage", "form-schema", "profile"] },
+        { queryKey: [...marriageQueryKeys.all, "form-overview"] },
         (schema) => {
           if (!schema) return schema;
           const slug = "glasser_5_needs_test";
@@ -84,11 +84,19 @@ export function useSubmitGlasserAssessmentMutation(
                   total_steps: 1,
                   completion_percent: 100,
                 },
+                glasser: {
+                  current_step: 1,
+                  total_steps: 1,
+                  completion_percent: 100,
+                },
               },
             },
           };
         },
       );
+      await queryClient.invalidateQueries({
+        queryKey: [...marriageQueryKeys.all, "form-overview"],
+      });
       await options?.onSuccess?.(data, variables, onMutateResult, context);
     },
   });

From 5cebb33ad1a60b548d8be4a0253263f00959d89b Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 18:29:33 +0330
Subject: [PATCH 13/21] fix(progress): sync completed assessment status and
 results with sectionProgressBySlug

---
 .../questions-list/questions-list-client.tsx  | 54 ++++++++++++++++---
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/app/questions-list/questions-list-client.tsx b/src/app/questions-list/questions-list-client.tsx
index d8e08c2..cdeca38 100644
--- a/src/app/questions-list/questions-list-client.tsx
+++ b/src/app/questions-list/questions-list-client.tsx
@@ -18,8 +18,8 @@ import QuestionCard from "@/components/Componentes/question-card";
 import RequiredStepsCard from "@/components/Componentes/required-steps-card";
 import type { MarriageField } from "@/hooks/marriage/types";
 import { marriageQueryKeys } from "@/hooks/marriage/query-keys";
-import { getCattellQuestions } from "@/hooks/marriage/use-cattell";
-import { getGlasserQuestions } from "@/hooks/marriage/use-glasser";
+import { getCattellQuestions, useCattellResultQuery } from "@/hooks/marriage/use-cattell";
+import { getGlasserQuestions, useGlasserResultQuery } from "@/hooks/marriage/use-glasser";
 import {
   getFormSection,
   useFormOverviewQuery,
@@ -97,6 +97,14 @@ export default function QuestionsListClient() {
     "profile",
     locale,
   );
+  const { data: glasserResult } = useGlasserResultQuery(locale, {
+    enabled: Boolean(profile?.id),
+    retry: false,
+  });
+  const { data: cattellResult } = useCattellResultQuery(locale, {
+    enabled: Boolean(profile?.id),
+    retry: false,
+  });
 
   const isSectionsLoading = false;
 
@@ -205,11 +213,46 @@ export default function QuestionsListClient() {
     const profileId = profile?.id;
     for (const slug of ["personality_test", "glasser_5_needs_test"]) {
       try {
+        // 1. Check backend test results
+        if (
+          (slug === "glasser_5_needs_test" && Boolean(glasserResult)) ||
+          (slug === "personality_test" && Boolean(cattellResult))
+        ) {
+          next.set(slug, 100);
+          continue;
+        }
+
+        // 2. Check local completion flag
+        if (typeof window !== "undefined") {
+          const completionKeys = [
+            profileId ? `marriage:user:${profileId}:sections:${slug}:completed` : null,
+            `marriage:sections:${slug}:completed`,
+            `marriage:sections:${slug}:answers`,
+          ].filter(Boolean) as string[];
+
+          let isLocalCompleted = false;
+          for (const key of completionKeys) {
+            const raw = window.localStorage.getItem(key);
+            if (raw) {
+              try {
+                const parsed = JSON.parse(raw);
+                if (parsed?.completed === true) {
+                  next.set(slug, 100);
+                  isLocalCompleted = true;
+                  break;
+                }
+              } catch {}
+            }
+          }
+          if (isLocalCompleted) continue;
+        }
+
+        // 3. If not completed, read draft progress
         let draft: any = null;
         if (profileId) {
           draft = readScopedAssessmentDraft(profileId, slug);
         }
-        if (!draft) {
+        if (!draft && typeof window !== "undefined") {
           const raw = window.localStorage.getItem(`marriage:tests:${slug}:draft`);
           draft = raw ? JSON.parse(raw) : null;
         }
@@ -220,7 +263,7 @@ export default function QuestionsListClient() {
       }
     }
     setLocalAssessmentProgress(next);
-  }, [overview, profile?.id]);
+  }, [overview, profile?.id, glasserResult, cattellResult]);
 
   const sectionProgressBySlug = useMemo(() => {
     const progressBySlug = new Map<string, number>();
@@ -236,8 +279,7 @@ export default function QuestionsListClient() {
       );
     }
     localAssessmentProgress.forEach((progress, slug) => {
-      if ((progressBySlug.get(slug) ?? 0) < 100)
-        progressBySlug.set(slug, progress);
+      progressBySlug.set(slug, progress);
     });
 
     // Add fallback for combined section from the schema adapter which attaches it to questionListItems directly

From 844cd189207ae1d785296716960b4ca592b25ff3 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Tue, 25 Aug 2026 19:03:39 +0330
Subject: [PATCH 14/21] feat(payment): show success toast with green indicator
 on subscription purchase before opening full profile

---
 src/app/new-match/new-match-client.tsx        | 12 +++++++++++
 .../request-accepted-client.tsx               | 20 +++++++++++++++++++
 src/components/Componentes/error-toast.tsx    |  2 +-
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index ae1c0d7..f292a03 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -20,6 +20,7 @@ import AdvisorActionsCard from "@/components/Componentes/advisor-actions-card";
 import MarriageAdvisorsOverlay, {
   useMarriageAdvisorsOverlay,
 } from "@/components/Componentes/marriage-advisors-overlay";
+import ErrorToast from "@/components/Componentes/error-toast";
 import MatchProfileOverlay, {
   useMatchProfileOverlay,
 } from "@/components/Componentes/match-profile-overlay";
@@ -502,6 +503,8 @@ export default function NewMatchClient() {
   const [paymentError, setPaymentError] = useState<string | null>(null);
   const [isInsufficientCoins, setIsInsufficientCoins] = useState(false);
 
+  const [showPaymentSuccessToast, setShowPaymentSuccessToast] = useState(false);
+
   const [appliedDiscount, setAppliedDiscount] =
     useState<CheckDiscountResult | null>(null);
 
@@ -539,6 +542,7 @@ export default function NewMatchClient() {
         discountCode: appliedDiscount?.valid ? appliedDiscount.code : undefined,
       });
       setIsPaymentSheetOpen(false);
+      setShowPaymentSuccessToast(true);
       openProfile();
     } catch (err: any) {
       console.error("Payment failed", err);
@@ -1166,6 +1170,14 @@ export default function NewMatchClient() {
       <MarriageAdvisorsOverlay open={isAdvisorOpen} onClose={closeAdvisors} />
 
       <MatchProfileOverlay open={isProfileOpen} onClose={closeProfile} />
+
+      {showPaymentSuccessToast && (
+        <ErrorToast
+          variant="success"
+          message={t["Payment successful"] || "Payment successful"}
+          onClose={() => setShowPaymentSuccessToast(false)}
+        />
+      )}
     </>
   );
 }
diff --git a/src/app/request-accepted/request-accepted-client.tsx b/src/app/request-accepted/request-accepted-client.tsx
index de9e659..02ddae0 100644
--- a/src/app/request-accepted/request-accepted-client.tsx
+++ b/src/app/request-accepted/request-accepted-client.tsx
@@ -9,6 +9,7 @@ import AdvisorActionsCard from "@/components/Componentes/advisor-actions-card";
 import MarriageAdvisorsOverlay, {
   useMarriageAdvisorsOverlay,
 } from "@/components/Componentes/marriage-advisors-overlay";
+import ErrorToast from "@/components/Componentes/error-toast";
 import MatchProfileOverlay, {
   useMatchProfileOverlay,
 } from "@/components/Componentes/match-profile-overlay";
@@ -199,6 +200,7 @@ export default function RequestAcceptedClient() {
     useState(false);
   const [hasConfirmedFemaleContact, setHasConfirmedFemaleContact] =
     useState(false);
+  const [showPaymentSuccessToast, setShowPaymentSuccessToast] = useState(false);
   const profileHref = localizePath("/new-match/profile", locale);
   const { data: profile, isLoading } = useMarriageProfileQuery({
     refetchInterval: 3000,
@@ -260,6 +262,7 @@ export default function RequestAcceptedClient() {
     : caseStatus === "payment_done" || caseStatus === "contacted"
       ? t["Contact info released"]
       : t["Request approved!"];
+  
   const primaryActionText = isFemaleProfile
     ? t["No Contact"] || t["No Contact Received"] || "No Contact"
     : t["View profile"];
@@ -272,6 +275,14 @@ export default function RequestAcceptedClient() {
     contactInfoQuery.data?.contact_info,
   );
 
+  const handlePrimaryAction = () => {
+    if (isFemaleProfile) {
+      setIsDismissReasonSheetOpen(true);
+    } else {
+      openProfile();
+    }
+  };
+
   const handleSecondaryAction = async () => {
     if (isFemaleProfile) {
       setIsContactReceivedConfirmOpen(true);
@@ -314,6 +325,7 @@ export default function RequestAcceptedClient() {
       }
 
       setIsSubscriptionSheetOpen(false);
+      setShowPaymentSuccessToast(true);
 
       if (caseId) {
         await contactInfoQuery.refetch();
@@ -773,6 +785,14 @@ export default function RequestAcceptedClient() {
         open={isProfileOpen}
         onClose={closeProfile}
       />
+
+      {showPaymentSuccessToast && (
+        <ErrorToast
+          variant="success"
+          message={t["Payment successful"] || "Payment successful"}
+          onClose={() => setShowPaymentSuccessToast(false)}
+        />
+      )}
     </>
   );
 }
diff --git a/src/components/Componentes/error-toast.tsx b/src/components/Componentes/error-toast.tsx
index b94a390..6adbab3 100644
--- a/src/components/Componentes/error-toast.tsx
+++ b/src/components/Componentes/error-toast.tsx
@@ -51,7 +51,7 @@ export default function ErrorToast({
   return (
     <div
       className={[
-        "fixed top-3.5 left-1/2 z-50 flex w-[calc(100%-32px)] max-w-[360px] -translate-x-1/2 items-start justify-between gap-3 rounded-[16px] bg-[#141414]/95 p-3.5 px-4 text-white shadow-[0_10px_30px_rgba(0,0,0,0.35)] backdrop-blur-md border border-white/5 border-t-[2.5px] transition-all duration-300 ease-out",
+        "fixed top-3.5 left-1/2 z-[70] flex w-[calc(100%-32px)] max-w-[360px] -translate-x-1/2 items-start justify-between gap-3 rounded-[16px] bg-[#141414]/95 p-3.5 px-4 text-white shadow-[0_10px_30px_rgba(0,0,0,0.35)] backdrop-blur-md border border-white/5 border-t-[2.5px] transition-all duration-300 ease-out",
         getBorderColor(),
         isVisible
           ? "translate-y-0 opacity-100 scale-100"

From 4808877b7106319977d7c6e73e40241a999257a1 Mon Sep 17 00:00:00 2001
From: Alireza <alireza@nwhco.ir>
Date: Tue, 25 Aug 2026 20:52:39 +0000
Subject: [PATCH 15/21] fix(i18n): pass locale headers in SSR fetch and ensure
 English fallback for match summary fields

---
 src/app/new-match/new-match-client.tsx |  1 +
 src/lib/marriage-field-formatter.ts    |  8 +++-
 src/lib/ssr-fetch.ts                   | 52 ++++++++++++++++++++++++--
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index f292a03..428bd17 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -119,6 +119,7 @@ const fieldCandidateMatchers = {
     "career",
   ],
   hobbies: [
+    "what_are_your_main_hobbies_and_interests",
     "your_hobbies_and_main_interests",
     "hobbies_and_interests",
     "hobbies",
diff --git a/src/lib/marriage-field-formatter.ts b/src/lib/marriage-field-formatter.ts
index 34f1628..53181e1 100644
--- a/src/lib/marriage-field-formatter.ts
+++ b/src/lib/marriage-field-formatter.ts
@@ -122,7 +122,13 @@ export function formatFieldLabel(
     return matchedCanonicalKey;
   }
 
-  // 5. Fallback
+  // 5. If rawLabel contains Persian/Arabic characters and active dictionary is English, use englishTitle
+  const hasPersian = /[؀-ۿ]/.test(rawLabel);
+  if (hasPersian && dictionary) {
+    return englishTitle || rawLabel;
+  }
+
+  // 6. Fallback
   return rawLabel || englishTitle;
 }
 
diff --git a/src/lib/ssr-fetch.ts b/src/lib/ssr-fetch.ts
index 3b704d0..54addc2 100644
--- a/src/lib/ssr-fetch.ts
+++ b/src/lib/ssr-fetch.ts
@@ -1,4 +1,6 @@
 // Server-only module: imported only by Server Components (page.tsx wrappers).
+import { cookies, headers } from "next/headers";
+import { defaultLocale, isLocale } from "@/translations/config";
 
 /**
  * Helper to get the API base URL for server-side fetches.
@@ -18,6 +20,41 @@ const DEFAULT_SSR_TIMEOUT_MS =
   Number(process.env.SSR_FETCH_TIMEOUT_MS) ||
   (process.env.NODE_ENV === "development" ? 15000 : 1500);
 
+async function resolveServerLocale(
+  localeOverride?: string | null,
+): Promise<string> {
+  if (localeOverride && isLocale(localeOverride)) {
+    return localeOverride;
+  }
+
+  try {
+    const cookieStore = await cookies();
+    const cookieLang =
+      cookieStore.get("HABIB_LANGUAGE")?.value ??
+      cookieStore.get("habib_language")?.value;
+    if (isLocale(cookieLang)) {
+      return cookieLang;
+    }
+  } catch {
+    // Ignore if called outside request context
+  }
+
+  try {
+    const headersList = await headers();
+    const headerLang = headersList
+      .get("accept-language")
+      ?.split(",")[0]
+      ?.split("-")[0];
+    if (isLocale(headerLang)) {
+      return headerLang;
+    }
+  } catch {
+    // Ignore if called outside request context
+  }
+
+  return defaultLocale;
+}
+
 /**
  * Fetches the marriage profile server-side.
  * Runs only on the server, typically inside a Next.js Server Component.
@@ -25,11 +62,13 @@ const DEFAULT_SSR_TIMEOUT_MS =
  *
  * @param token - The user authentication token
  * @param timeoutMs - Timeout in milliseconds (defaults to 15s in dev, 1.5s in prod)
+ * @param localeOverride - Optional locale override
  * @returns Profile data or null on failure
  */
 export async function fetchProfileSSR(
   token?: string | null,
   timeoutMs = DEFAULT_SSR_TIMEOUT_MS,
+  localeOverride?: string | null,
 ): Promise<any | null> {
   if (!token || token === "NO_TOKEN" || token.trim() === "") {
     console.log("🖥️ [SSR fetchProfileSSR] No valid token found in cookies.");
@@ -40,10 +79,11 @@ export async function fetchProfileSSR(
   const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
 
   try {
+    const lang = await resolveServerLocale(localeOverride);
     const baseUrl = getApiBaseUrl();
-    const url = `${baseUrl}/api/marriage/profile/main/`;
+    const url = `${baseUrl}/api/marriage/profile/main/?lang=${lang}`;
     console.log(
-      `🖥️ [SSR fetchProfileSSR] Fetching profile from ${url} with token: ${token.slice(0, 8)}...`,
+      `🖥️ [SSR fetchProfileSSR] Fetching profile from ${url} with token: ${token.slice(0, 8)}... (lang: ${lang})`,
     );
 
     const response = await fetch(url, {
@@ -53,6 +93,8 @@ export async function fetchProfileSSR(
       headers: {
         Accept: "application/json",
         Authorization: `Token ${token.trim()}`,
+        "Accept-Language": lang,
+        "X-User-Language": lang,
       },
     });
 
@@ -88,13 +130,15 @@ export async function fetchProfileSSR(
  */
 export async function fetchConfigSSR(
   timeoutMs = DEFAULT_SSR_TIMEOUT_MS,
+  localeOverride?: string | null,
 ): Promise<any | null> {
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
 
   try {
+    const lang = await resolveServerLocale(localeOverride);
     const baseUrl = getApiBaseUrl();
-    const url = `${baseUrl}/api/marriage/config/`;
+    const url = `${baseUrl}/api/marriage/config/?lang=${lang}`;
 
     const response = await fetch(url, {
       method: "GET",
@@ -102,6 +146,8 @@ export async function fetchConfigSSR(
       signal: controller.signal,
       headers: {
         Accept: "application/json",
+        "Accept-Language": lang,
+        "X-User-Language": lang,
       },
     });
 

From 5be5d8815e5153db82658ce96c7cf50d7172db1e Mon Sep 17 00:00:00 2001
From: Alireza <alireza@nwhco.ir>
Date: Tue, 25 Aug 2026 22:06:24 +0000
Subject: [PATCH 16/21] fix(ui): make top PageHeader sticky on new-match screen
 during scroll

---
 src/app/new-match/new-match-client.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index 428bd17..6b717f7 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -634,12 +634,14 @@ export default function NewMatchClient() {
       <>
         <PageBackground />
         <main
-          style={{
-            paddingTop: `${Math.max(12, top + 4)}px`,
-          }}
           className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
         >
-          <div className="shrink-0 mb-1">
+          <div
+            style={{
+              paddingTop: `${Math.max(12, top + 4)}px`,
+            }}
+            className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+          >
             <PageHeader profile={profile} />
           </div>
 
@@ -721,12 +723,14 @@ export default function NewMatchClient() {
       <PageBackground />
 
       <main
-        style={{
-          paddingTop: `${Math.max(12, top + 4)}px`,
-        }}
         className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
       >
-        <div className="shrink-0 mb-1">
+        <div
+          style={{
+            paddingTop: `${Math.max(12, top + 4)}px`,
+          }}
+          className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+        >
           <PageHeader profile={profile} />
         </div>
 

From dd0424e5a127f62d520b32c9a472a0430d3a3611 Mon Sep 17 00:00:00 2001
From: Alireza <alireza@nwhco.ir>
Date: Tue, 25 Aug 2026 22:18:59 +0000
Subject: [PATCH 17/21] fix(ui): unify PageHeader with Flutter AppBar specs
 (56px toolbar, safeArea, sticky blur)

---
 .../candidate-contact-client.tsx              |  4 +-
 .../finding-match/finding-match-client.tsx    |  4 +-
 src/app/new-match/new-match-client.tsx        | 18 +---
 .../request-accepted-client.tsx               |  4 +-
 src/app/request-sent/request-sent-client.tsx  |  4 +-
 src/components/Componentes/page-header.tsx    | 82 ++++++++++++-------
 6 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/src/app/candidate-contact/candidate-contact-client.tsx b/src/app/candidate-contact/candidate-contact-client.tsx
index 6c3e667..f31c167 100644
--- a/src/app/candidate-contact/candidate-contact-client.tsx
+++ b/src/app/candidate-contact/candidate-contact-client.tsx
@@ -130,7 +130,7 @@ export default function CandidateContactClient() {
           />
         ) : null}
 
-        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))]">
+        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pb-[calc(20px+var(--safe-bottom))]">
           <PageHeader
             className="-mx-[6px]"
             profile={profile}
@@ -353,7 +353,7 @@ export default function CandidateContactClient() {
         />
       ) : null}
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-36">
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pb-36">
         <PageHeader profile={profile} />
 
         <section className="flex flex-1 items-center justify-center">
diff --git a/src/app/finding-match/finding-match-client.tsx b/src/app/finding-match/finding-match-client.tsx
index f7f09ac..4a6edfc 100644
--- a/src/app/finding-match/finding-match-client.tsx
+++ b/src/app/finding-match/finding-match-client.tsx
@@ -87,9 +87,9 @@ export default function FindingMatchClient() {
 
       <main
         style={{ paddingBottom: "calc(100px + var(--safe-bottom))" }}
-        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] text-center"
+        className="-mx-[17px] flex min-h-screen flex-col px-[23px] text-center"
       >
-        <PageHeader className="-mx-[6px]" />
+        <PageHeader />
 
         <section className="mt-20 flex flex-1 flex-col items-center">
           <div className="relative h-[124px] w-[130px]" aria-hidden="true">
diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index 6b717f7..92d44a3 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -636,14 +636,7 @@ export default function NewMatchClient() {
         <main
           className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
         >
-          <div
-            style={{
-              paddingTop: `${Math.max(12, top + 4)}px`,
-            }}
-            className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
-          >
-            <PageHeader profile={profile} />
-          </div>
+          <PageHeader profile={profile} />
 
           <div
             style={{
@@ -725,14 +718,7 @@ export default function NewMatchClient() {
       <main
         className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
       >
-        <div
-          style={{
-            paddingTop: `${Math.max(12, top + 4)}px`,
-          }}
-          className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
-        >
-          <PageHeader profile={profile} />
-        </div>
+        <PageHeader profile={profile} />
 
         <div
           style={{
diff --git a/src/app/request-accepted/request-accepted-client.tsx b/src/app/request-accepted/request-accepted-client.tsx
index 02ddae0..1d5a7a0 100644
--- a/src/app/request-accepted/request-accepted-client.tsx
+++ b/src/app/request-accepted/request-accepted-client.tsx
@@ -538,8 +538,8 @@ export default function RequestAcceptedClient() {
         />
       ) : null}
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
-        <PageHeader className="-mx-[6px]" profile={profile} />
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pb-[calc(20px+var(--safe-bottom))] text-center">
+        <PageHeader profile={profile} />
 
         <div className="flex flex-1 flex-col justify-between gap-6 pt-4">
           <section className="flex flex-col items-center">
diff --git a/src/app/request-sent/request-sent-client.tsx b/src/app/request-sent/request-sent-client.tsx
index 01fa028..fe94f51 100644
--- a/src/app/request-sent/request-sent-client.tsx
+++ b/src/app/request-sent/request-sent-client.tsx
@@ -88,9 +88,9 @@ export default function RequestSentClient() {
 
       <main
         style={{ paddingBottom: "calc(40px + var(--safe-bottom))" }}
-        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] text-center"
+        className="-mx-[17px] flex min-h-screen flex-col px-[23px] text-center"
       >
-        <PageHeader className="-mx-[6px]" profile={profile} />
+        <PageHeader profile={profile} />
 
         <div className="flex flex-1 flex-col justify-between gap-16 pt-8">
           <section className="flex flex-col items-center">
diff --git a/src/components/Componentes/page-header.tsx b/src/components/Componentes/page-header.tsx
index 6d9603a..7b2ff83 100644
--- a/src/components/Componentes/page-header.tsx
+++ b/src/components/Componentes/page-header.tsx
@@ -22,14 +22,26 @@ type PageHeaderProps = {
    */
   enableProfileQuery?: boolean;
   profile?: any;
+  /**
+   * Whether the header is sticky at the top during scroll (matching Flutter AppBar).
+   * Defaults to true.
+   */
+  sticky?: boolean;
 };
 
+/**
+ * Standard AppBar for Marriage WebApp matching Flutter's Scaffold.appBar:
+ * - Toolbar Height: 56px (Flutter Material kToolbarHeight)
+ * - Top Safe Area: max(12px, var(--safe-top) + 4px)
+ * - Sticky at top during body scroll with frosted blur backdrop
+ */
 export function PageHeader({
   className,
   leftButton,
   rightButton,
   enableProfileQuery = true,
   profile: profileProp,
+  sticky = true,
 }: PageHeaderProps) {
   const { dictionary: t } = useI18n();
 
@@ -57,51 +69,61 @@ export function PageHeader({
 
   return (
     <header
-      className={["flex items-center justify-between pb-3", className]
+      style={{
+        paddingTop: "max(12px, calc(var(--safe-top) + 4px))",
+      }}
+      className={[
+        sticky
+          ? "sticky top-0 z-30 -mx-[17px] px-[17px] bg-[#F7F1F0]/90 backdrop-blur-md"
+          : "relative z-30 -mx-[17px] px-[17px]",
+        className,
+      ]
         .filter(Boolean)
         .join(" ")}
     >
-      {leftButton?.className?.includes("hidden") ? (
-        <div className="size-10 shrink-0" />
-      ) : (
-        <NavigationButton icon="back" profile={profile} {...leftButton} />
-      )}
-      <h1 className="font-faminela text-[20px] font-normal text-foreground">
-        {t["Habib Marriage"]}
-      </h1>
+      <div className="flex h-[56px] items-center justify-between">
+        {leftButton?.className?.includes("hidden") ? (
+          <div className="size-10 shrink-0" />
+        ) : (
+          <NavigationButton icon="back" profile={profile} {...leftButton} />
+        )}
 
-      {isCustomRightButton ? (
-        <NavigationButton
-          icon={iconFromProp || "support"}
-          profile={profile}
-          {...(iconFromProp === "support" ? { iconLabel: t["Support"] } : {})}
-          {...rightButtonRest}
-        />
-      ) : isMale ? (
-        <div className="flex items-center gap-2">
+        <h1 className="font-faminela text-[20px] font-normal text-[#171717] leading-none select-none">
+          {t["Habib Marriage"]}
+        </h1>
+
+        {isCustomRightButton ? (
           <NavigationButton
-            icon="subscription"
+            icon={iconFromProp || "support"}
             profile={profile}
-            iconLabel={t["Subscription Status"] || "Subscription"}
+            {...(iconFromProp === "support" ? { iconLabel: t["Support"] } : {})}
+            {...rightButtonRest}
           />
+        ) : isMale ? (
+          <div className="flex items-center gap-2">
+            <NavigationButton
+              icon="subscription"
+              profile={profile}
+              iconLabel={t["Subscription Status"] || "Subscription"}
+            />
+            <NavigationButton
+              icon="support"
+              profile={profile}
+              iconLabel={t["Support"]}
+              {...rightButtonRest}
+            />
+          </div>
+        ) : (
           <NavigationButton
             icon="support"
             profile={profile}
             iconLabel={t["Support"]}
             {...rightButtonRest}
           />
-        </div>
-      ) : (
-        <NavigationButton
-          icon="support"
-          profile={profile}
-          iconLabel={t["Support"]}
-          {...rightButtonRest}
-        />
-      )}
+        )}
+      </div>
     </header>
   );
 }
 
 export default PageHeader;
-

From a257745377d5deafc537ec3c19845e355c70f983 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Wed, 26 Aug 2026 09:30:30 +0330
Subject: [PATCH 18/21] Revert "fix(ui): unify PageHeader with Flutter AppBar
 specs (56px toolbar, safeArea, sticky blur)"

This reverts commit dd0424e5a127f62d520b32c9a472a0430d3a3611.
---
 .../candidate-contact-client.tsx              |  4 +-
 .../finding-match/finding-match-client.tsx    |  4 +-
 src/app/new-match/new-match-client.tsx        | 18 +++-
 .../request-accepted-client.tsx               |  4 +-
 src/app/request-sent/request-sent-client.tsx  |  4 +-
 src/components/Componentes/page-header.tsx    | 82 +++++++------------
 6 files changed, 54 insertions(+), 62 deletions(-)

diff --git a/src/app/candidate-contact/candidate-contact-client.tsx b/src/app/candidate-contact/candidate-contact-client.tsx
index f31c167..6c3e667 100644
--- a/src/app/candidate-contact/candidate-contact-client.tsx
+++ b/src/app/candidate-contact/candidate-contact-client.tsx
@@ -130,7 +130,7 @@ export default function CandidateContactClient() {
           />
         ) : null}
 
-        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pb-[calc(20px+var(--safe-bottom))]">
+        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))]">
           <PageHeader
             className="-mx-[6px]"
             profile={profile}
@@ -353,7 +353,7 @@ export default function CandidateContactClient() {
         />
       ) : null}
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pb-36">
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-36">
         <PageHeader profile={profile} />
 
         <section className="flex flex-1 items-center justify-center">
diff --git a/src/app/finding-match/finding-match-client.tsx b/src/app/finding-match/finding-match-client.tsx
index 4a6edfc..f7f09ac 100644
--- a/src/app/finding-match/finding-match-client.tsx
+++ b/src/app/finding-match/finding-match-client.tsx
@@ -87,9 +87,9 @@ export default function FindingMatchClient() {
 
       <main
         style={{ paddingBottom: "calc(100px + var(--safe-bottom))" }}
-        className="-mx-[17px] flex min-h-screen flex-col px-[23px] text-center"
+        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] text-center"
       >
-        <PageHeader />
+        <PageHeader className="-mx-[6px]" />
 
         <section className="mt-20 flex flex-1 flex-col items-center">
           <div className="relative h-[124px] w-[130px]" aria-hidden="true">
diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index 92d44a3..6b717f7 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -636,7 +636,14 @@ export default function NewMatchClient() {
         <main
           className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
         >
-          <PageHeader profile={profile} />
+          <div
+            style={{
+              paddingTop: `${Math.max(12, top + 4)}px`,
+            }}
+            className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+          >
+            <PageHeader profile={profile} />
+          </div>
 
           <div
             style={{
@@ -718,7 +725,14 @@ export default function NewMatchClient() {
       <main
         className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
       >
-        <PageHeader profile={profile} />
+        <div
+          style={{
+            paddingTop: `${Math.max(12, top + 4)}px`,
+          }}
+          className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+        >
+          <PageHeader profile={profile} />
+        </div>
 
         <div
           style={{
diff --git a/src/app/request-accepted/request-accepted-client.tsx b/src/app/request-accepted/request-accepted-client.tsx
index 1d5a7a0..02ddae0 100644
--- a/src/app/request-accepted/request-accepted-client.tsx
+++ b/src/app/request-accepted/request-accepted-client.tsx
@@ -538,8 +538,8 @@ export default function RequestAcceptedClient() {
         />
       ) : null}
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pb-[calc(20px+var(--safe-bottom))] text-center">
-        <PageHeader profile={profile} />
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
+        <PageHeader className="-mx-[6px]" profile={profile} />
 
         <div className="flex flex-1 flex-col justify-between gap-6 pt-4">
           <section className="flex flex-col items-center">
diff --git a/src/app/request-sent/request-sent-client.tsx b/src/app/request-sent/request-sent-client.tsx
index fe94f51..01fa028 100644
--- a/src/app/request-sent/request-sent-client.tsx
+++ b/src/app/request-sent/request-sent-client.tsx
@@ -88,9 +88,9 @@ export default function RequestSentClient() {
 
       <main
         style={{ paddingBottom: "calc(40px + var(--safe-bottom))" }}
-        className="-mx-[17px] flex min-h-screen flex-col px-[23px] text-center"
+        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] text-center"
       >
-        <PageHeader profile={profile} />
+        <PageHeader className="-mx-[6px]" profile={profile} />
 
         <div className="flex flex-1 flex-col justify-between gap-16 pt-8">
           <section className="flex flex-col items-center">
diff --git a/src/components/Componentes/page-header.tsx b/src/components/Componentes/page-header.tsx
index 7b2ff83..6d9603a 100644
--- a/src/components/Componentes/page-header.tsx
+++ b/src/components/Componentes/page-header.tsx
@@ -22,26 +22,14 @@ type PageHeaderProps = {
    */
   enableProfileQuery?: boolean;
   profile?: any;
-  /**
-   * Whether the header is sticky at the top during scroll (matching Flutter AppBar).
-   * Defaults to true.
-   */
-  sticky?: boolean;
 };
 
-/**
- * Standard AppBar for Marriage WebApp matching Flutter's Scaffold.appBar:
- * - Toolbar Height: 56px (Flutter Material kToolbarHeight)
- * - Top Safe Area: max(12px, var(--safe-top) + 4px)
- * - Sticky at top during body scroll with frosted blur backdrop
- */
 export function PageHeader({
   className,
   leftButton,
   rightButton,
   enableProfileQuery = true,
   profile: profileProp,
-  sticky = true,
 }: PageHeaderProps) {
   const { dictionary: t } = useI18n();
 
@@ -69,61 +57,51 @@ export function PageHeader({
 
   return (
     <header
-      style={{
-        paddingTop: "max(12px, calc(var(--safe-top) + 4px))",
-      }}
-      className={[
-        sticky
-          ? "sticky top-0 z-30 -mx-[17px] px-[17px] bg-[#F7F1F0]/90 backdrop-blur-md"
-          : "relative z-30 -mx-[17px] px-[17px]",
-        className,
-      ]
+      className={["flex items-center justify-between pb-3", className]
         .filter(Boolean)
         .join(" ")}
     >
-      <div className="flex h-[56px] items-center justify-between">
-        {leftButton?.className?.includes("hidden") ? (
-          <div className="size-10 shrink-0" />
-        ) : (
-          <NavigationButton icon="back" profile={profile} {...leftButton} />
-        )}
+      {leftButton?.className?.includes("hidden") ? (
+        <div className="size-10 shrink-0" />
+      ) : (
+        <NavigationButton icon="back" profile={profile} {...leftButton} />
+      )}
+      <h1 className="font-faminela text-[20px] font-normal text-foreground">
+        {t["Habib Marriage"]}
+      </h1>
 
-        <h1 className="font-faminela text-[20px] font-normal text-[#171717] leading-none select-none">
-          {t["Habib Marriage"]}
-        </h1>
-
-        {isCustomRightButton ? (
+      {isCustomRightButton ? (
+        <NavigationButton
+          icon={iconFromProp || "support"}
+          profile={profile}
+          {...(iconFromProp === "support" ? { iconLabel: t["Support"] } : {})}
+          {...rightButtonRest}
+        />
+      ) : isMale ? (
+        <div className="flex items-center gap-2">
           <NavigationButton
-            icon={iconFromProp || "support"}
+            icon="subscription"
             profile={profile}
-            {...(iconFromProp === "support" ? { iconLabel: t["Support"] } : {})}
-            {...rightButtonRest}
+            iconLabel={t["Subscription Status"] || "Subscription"}
           />
-        ) : isMale ? (
-          <div className="flex items-center gap-2">
-            <NavigationButton
-              icon="subscription"
-              profile={profile}
-              iconLabel={t["Subscription Status"] || "Subscription"}
-            />
-            <NavigationButton
-              icon="support"
-              profile={profile}
-              iconLabel={t["Support"]}
-              {...rightButtonRest}
-            />
-          </div>
-        ) : (
           <NavigationButton
             icon="support"
             profile={profile}
             iconLabel={t["Support"]}
             {...rightButtonRest}
           />
-        )}
-      </div>
+        </div>
+      ) : (
+        <NavigationButton
+          icon="support"
+          profile={profile}
+          iconLabel={t["Support"]}
+          {...rightButtonRest}
+        />
+      )}
     </header>
   );
 }
 
 export default PageHeader;
+

From 953ab545f8bc880d6dbe7eff6a77bf750ffe9197 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Wed, 26 Aug 2026 09:47:58 +0330
Subject: [PATCH 19/21] fix(ui): match AppBar specs exactly with Flutter 56px
 toolbar and safe area on scroll

---
 src/app/intro/intro-client.tsx             | 31 +++++++++++++---------
 src/app/new-match/new-match-client.tsx     |  8 +++---
 src/components/Componentes/page-header.tsx |  4 +--
 src/components/Componentes/slider-page.tsx |  4 +--
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/app/intro/intro-client.tsx b/src/app/intro/intro-client.tsx
index a2dc838..43bef57 100644
--- a/src/app/intro/intro-client.tsx
+++ b/src/app/intro/intro-client.tsx
@@ -125,19 +125,25 @@ export default function IntroClient() {
 
   return (
     <>
-      <div className="pt-[max(12px,calc(var(--safe-top)+4px))]">
+      <div
+        style={{
+          paddingTop: "max(12px, var(--safe-top))",
+        }}
+        className="sticky top-0 z-30 -mx-[17px] px-[17px] bg-[#F5F5F5]/90 backdrop-blur-md"
+      >
         <PageHeader profile={profile} />
-        <main className="pb-[calc(90px+var(--safe-bottom))]">
-          <div className="flex flex-col items-center mt-16">
-            <Image
-              src={"/assets/images/Group 1597880466.svg"}
-              alt={t["heavenly marriage"]}
-              width={168}
-              height={155}
-              priority
-              loading="eager"
-            />
-            <h2 className="group-16 text-[#475569] font-bold mt-5 text-center">
+      </div>
+      <main className="pb-[calc(90px+var(--safe-bottom))]">
+        <div className="flex flex-col items-center mt-16">
+          <Image
+            src={"/assets/images/Group 1597880466.svg"}
+            alt={t["heavenly marriage"]}
+            width={168}
+            height={155}
+            priority
+            loading="eager"
+          />
+          <h2 className="group-16 text-[#475569] font-bold mt-5 text-center">
               {t["A Path to Heavenly Marriage"]}
             </h2>
             <p className="text-center mt-2 group-12 text-[#4D4D4D]">
@@ -213,7 +219,6 @@ export default function IntroClient() {
             </div>
           </div>
         </main>
-      </div>
 
       <SectionOverlayHost
         open={isStepsOpen}
diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index 6b717f7..af5ac58 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -638,9 +638,9 @@ export default function NewMatchClient() {
         >
           <div
             style={{
-              paddingTop: `${Math.max(12, top + 4)}px`,
+              paddingTop: `${Math.max(12, top)}px`,
             }}
-            className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+            className="sticky top-0 z-30 -mx-[18px] px-[18px] bg-[#F7F1F0]/90 backdrop-blur-md"
           >
             <PageHeader profile={profile} />
           </div>
@@ -727,9 +727,9 @@ export default function NewMatchClient() {
       >
         <div
           style={{
-            paddingTop: `${Math.max(12, top + 4)}px`,
+            paddingTop: `${Math.max(12, top)}px`,
           }}
-          className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+          className="sticky top-0 z-30 -mx-[18px] px-[18px] bg-[#F7F1F0]/90 backdrop-blur-md"
         >
           <PageHeader profile={profile} />
         </div>
diff --git a/src/components/Componentes/page-header.tsx b/src/components/Componentes/page-header.tsx
index 6d9603a..fa7dcc9 100644
--- a/src/components/Componentes/page-header.tsx
+++ b/src/components/Componentes/page-header.tsx
@@ -57,7 +57,7 @@ export function PageHeader({
 
   return (
     <header
-      className={["flex items-center justify-between pb-3", className]
+      className={["flex h-[56px] items-center justify-between", className]
         .filter(Boolean)
         .join(" ")}
     >
@@ -66,7 +66,7 @@ export function PageHeader({
       ) : (
         <NavigationButton icon="back" profile={profile} {...leftButton} />
       )}
-      <h1 className="font-faminela text-[20px] font-normal text-foreground">
+      <h1 className="font-faminela text-[20px] font-normal text-foreground leading-none select-none">
         {t["Habib Marriage"]}
       </h1>
 
diff --git a/src/components/Componentes/slider-page.tsx b/src/components/Componentes/slider-page.tsx
index 30d5129..f59316d 100644
--- a/src/components/Componentes/slider-page.tsx
+++ b/src/components/Componentes/slider-page.tsx
@@ -133,8 +133,8 @@ export default function SliderPage({ onClose }: SliderPageProps = {}) {
           onClose={() => setSubmitError(null)}
         />
       )}
-      <header className="relative -mx-[17px] rounded-b-[32px] px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-3">
-        <div className="relative flex items-center justify-between">
+      <header className="relative -mx-[17px] rounded-b-[32px] px-[17px] pt-[max(12px,calc(var(--safe-top)))]">
+        <div className="relative flex h-[56px] items-center justify-between">
           <NavigationButton
             icon="back"
             iconLabel="Close slider"

From 674eb2a4a4672b50cd4c752b00049281e5fe98a6 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Wed, 26 Aug 2026 09:49:34 +0330
Subject: [PATCH 20/21] Revert "fix(ui): match AppBar specs exactly with
 Flutter 56px toolbar and safe area on scroll"

This reverts commit 953ab545f8bc880d6dbe7eff6a77bf750ffe9197.
---
 src/app/intro/intro-client.tsx             | 31 +++++++++-------------
 src/app/new-match/new-match-client.tsx     |  8 +++---
 src/components/Componentes/page-header.tsx |  4 +--
 src/components/Componentes/slider-page.tsx |  4 +--
 4 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/app/intro/intro-client.tsx b/src/app/intro/intro-client.tsx
index 43bef57..a2dc838 100644
--- a/src/app/intro/intro-client.tsx
+++ b/src/app/intro/intro-client.tsx
@@ -125,25 +125,19 @@ export default function IntroClient() {
 
   return (
     <>
-      <div
-        style={{
-          paddingTop: "max(12px, var(--safe-top))",
-        }}
-        className="sticky top-0 z-30 -mx-[17px] px-[17px] bg-[#F5F5F5]/90 backdrop-blur-md"
-      >
+      <div className="pt-[max(12px,calc(var(--safe-top)+4px))]">
         <PageHeader profile={profile} />
-      </div>
-      <main className="pb-[calc(90px+var(--safe-bottom))]">
-        <div className="flex flex-col items-center mt-16">
-          <Image
-            src={"/assets/images/Group 1597880466.svg"}
-            alt={t["heavenly marriage"]}
-            width={168}
-            height={155}
-            priority
-            loading="eager"
-          />
-          <h2 className="group-16 text-[#475569] font-bold mt-5 text-center">
+        <main className="pb-[calc(90px+var(--safe-bottom))]">
+          <div className="flex flex-col items-center mt-16">
+            <Image
+              src={"/assets/images/Group 1597880466.svg"}
+              alt={t["heavenly marriage"]}
+              width={168}
+              height={155}
+              priority
+              loading="eager"
+            />
+            <h2 className="group-16 text-[#475569] font-bold mt-5 text-center">
               {t["A Path to Heavenly Marriage"]}
             </h2>
             <p className="text-center mt-2 group-12 text-[#4D4D4D]">
@@ -219,6 +213,7 @@ export default function IntroClient() {
             </div>
           </div>
         </main>
+      </div>
 
       <SectionOverlayHost
         open={isStepsOpen}
diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index af5ac58..6b717f7 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -638,9 +638,9 @@ export default function NewMatchClient() {
         >
           <div
             style={{
-              paddingTop: `${Math.max(12, top)}px`,
+              paddingTop: `${Math.max(12, top + 4)}px`,
             }}
-            className="sticky top-0 z-30 -mx-[18px] px-[18px] bg-[#F7F1F0]/90 backdrop-blur-md"
+            className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
           >
             <PageHeader profile={profile} />
           </div>
@@ -727,9 +727,9 @@ export default function NewMatchClient() {
       >
         <div
           style={{
-            paddingTop: `${Math.max(12, top)}px`,
+            paddingTop: `${Math.max(12, top + 4)}px`,
           }}
-          className="sticky top-0 z-30 -mx-[18px] px-[18px] bg-[#F7F1F0]/90 backdrop-blur-md"
+          className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
         >
           <PageHeader profile={profile} />
         </div>
diff --git a/src/components/Componentes/page-header.tsx b/src/components/Componentes/page-header.tsx
index fa7dcc9..6d9603a 100644
--- a/src/components/Componentes/page-header.tsx
+++ b/src/components/Componentes/page-header.tsx
@@ -57,7 +57,7 @@ export function PageHeader({
 
   return (
     <header
-      className={["flex h-[56px] items-center justify-between", className]
+      className={["flex items-center justify-between pb-3", className]
         .filter(Boolean)
         .join(" ")}
     >
@@ -66,7 +66,7 @@ export function PageHeader({
       ) : (
         <NavigationButton icon="back" profile={profile} {...leftButton} />
       )}
-      <h1 className="font-faminela text-[20px] font-normal text-foreground leading-none select-none">
+      <h1 className="font-faminela text-[20px] font-normal text-foreground">
         {t["Habib Marriage"]}
       </h1>
 
diff --git a/src/components/Componentes/slider-page.tsx b/src/components/Componentes/slider-page.tsx
index f59316d..30d5129 100644
--- a/src/components/Componentes/slider-page.tsx
+++ b/src/components/Componentes/slider-page.tsx
@@ -133,8 +133,8 @@ export default function SliderPage({ onClose }: SliderPageProps = {}) {
           onClose={() => setSubmitError(null)}
         />
       )}
-      <header className="relative -mx-[17px] rounded-b-[32px] px-[17px] pt-[max(12px,calc(var(--safe-top)))]">
-        <div className="relative flex h-[56px] items-center justify-between">
+      <header className="relative -mx-[17px] rounded-b-[32px] px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-3">
+        <div className="relative flex items-center justify-between">
           <NavigationButton
             icon="back"
             iconLabel="Close slider"

From 2b4fb2e241f5a175facd64de5a427e1de0fef5d7 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Wed, 26 Aug 2026 10:24:28 +0330
Subject: [PATCH 21/21]  fix header

---
 src/components/Componentes/slider-page.tsx      | 4 ++--
 src/components/Componentes/slider-slide-one.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Componentes/slider-page.tsx b/src/components/Componentes/slider-page.tsx
index 30d5129..471a505 100644
--- a/src/components/Componentes/slider-page.tsx
+++ b/src/components/Componentes/slider-page.tsx
@@ -133,7 +133,7 @@ export default function SliderPage({ onClose }: SliderPageProps = {}) {
           onClose={() => setSubmitError(null)}
         />
       )}
-      <header className="relative -mx-[17px] rounded-b-[32px] px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-3">
+      <header className="relative pt-[max(12px,calc(var(--safe-top)+4px))] pb-3">
         <div className="relative flex items-center justify-between">
           <NavigationButton
             icon="back"
@@ -185,7 +185,7 @@ export default function SliderPage({ onClose }: SliderPageProps = {}) {
         </div>
       </header>
 
-      <main className="flex min-h-0 flex-1 overflow-hidden pt-6">
+      <main className="flex min-h-0 flex-1 overflow-hidden pt-3">
         <div
           className="flex h-full w-full transition-transform duration-300 ease-out"
           style={{ transform: `translateX(-${activeSlide * 100}%)` }}
diff --git a/src/components/Componentes/slider-slide-one.tsx b/src/components/Componentes/slider-slide-one.tsx
index d72be02..83a7ed6 100644
--- a/src/components/Componentes/slider-slide-one.tsx
+++ b/src/components/Componentes/slider-slide-one.tsx
@@ -60,7 +60,7 @@ export function SliderSlideOne({ index, onScrollToEnd }: SliderSlideOneProps) {
         }}
       >
         <SliderHeader index={index} title="Terms & Conditions" />
-        <div className="bg-[#F14B46]/10 py-2.5 px-3.5 border border-[#F14B46] rounded-xl mt-8">
+        <div className="bg-[#F14B46]/10 py-2.5 px-3.5 border border-[#F14B46] rounded-xl mt-4">
           <p className="text-[#F14B46] group-12 font-semibold text-center">
             Welcome to Habib Marriage. Please review our terms of service before
             proceeding. By registering and using this platform, you agree to