cart: enhancements

src/components/ArabicPrice/ArabicPrice.tsx

@@ -56,14 +56,14 @@ const ArabicPrice: React.FC<ArabicPriceProps> = ({
           >
             {formattedPrice}
           </span>
-          <span style={{ margin: "0 2px" }} />
+          <span style={{ margin: "0 3px" }} />
           <span
             style={{
               fontSize: "14px",
               verticalAlign: "baseline",
               lineHeight: 1,
               position: "relative",
-              top: -3,
+              top: -2,
               ...(decorationStyle ?? {}),
               ...textStyle,
             }}

src/components/PaymentMethods/PaymentMethods.module.css

@@ -22,23 +22,28 @@
   border-radius: 30px !important;
 }
 
-.differentCardIcon{
+.differentCardIcon {
   position: relative;
-  top: 1px
+  top: 1px;
 }
 
 .eCardIcon {
   position: relative;
   top: 3px;
   margin-right: 4px;
+  margin-left: 0;
 }
 
+:global(.ant-app-rtl) .eCardIcon {
+  margin-right: 0;
+  margin-left: 4px;
+}
 /* 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;
+  border: 1.5px solid #d5d8da;
   background: transparent;
 }
 
@@ -59,6 +64,11 @@
   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;
@@ -68,12 +78,17 @@
   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;
+  border: 1.5px solid #d5d8da;
   background: transparent;
 }
 
@@ -93,6 +108,11 @@
   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;
@@ -102,3 +122,7 @@
   background: #ffb700;
 }
 
+:global(.ant-app-rtl) .circleCheckbox :global(.ant-radio-checked .ant-radio-inner::after) {
+  margin-left: auto;
+  margin-right: -9px;
+}