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] 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