add order details & enhance the checkout page

src/components/ProRatioGroups/ProRatioGroups.module.css

@@ -17,3 +17,92 @@
   width: 24px !important;
   height: 24px !important;
 }
+
+/* Make AntD checkbox look like a circular check indicator (scoped via CSS modules) */
+.circleCheckbox :global(.ant-checkbox-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #d5d8da;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+/* Replace AntD checkmark with a filled inner circle when checked (match SVG) */
+.circleCheckbox :global(.ant-checkbox-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
+.circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}
+
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-checkbox-checked .ant-checkbox-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}
+
+/* Apply same circular style to Radio buttons */
+.circleCheckbox :global(.ant-radio-inner) {
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  border: 1.5px solid #d5d8da;
+  background: transparent;
+}
+
+.circleCheckbox :global(.ant-radio-checked .ant-radio-inner) {
+  border-radius: 50% !important;
+  background: transparent;
+  border-color: #ffb700;
+}
+
+.circleCheckbox :global(.ant-radio-inner::after) {
+  content: "";
+  border: 0 !important;
+  transform: none !important;
+  width: 0;
+  height: 0;
+  left: 50%;
+  top: 50%;
+}
+
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-inner::after) {
+  left: auto;
+  right: 50%;
+}
+
+.circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  border-radius: 50%;
+  background: #ffb700;
+}
+
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}

src/components/ProRatioGroups/ProRatioGroups.tsx

@@ -42,9 +42,7 @@ const ProRatioGroups = ({
             <Radio
               key={option.value}
               value={option.value}
-              // style={{
-              //   height: 48,
-              // }}
+              className={styles.circleCheckbox}
             >
               <div
                 style={{