handle rtl styles

src/components/CustomBottomSheet/RateBottomSheet.tsx

@@ -52,7 +52,13 @@ export function RateBottomSheet() {
 
     // Calculate which part of the star was clicked
     // Divide star into 4 parts: 0-25% = 0.25, 25-50% = 0.5, 50-75% = 0.75, 75-100% = 1.0
-    const clickPercentage = clickX / starWidth;
+    let clickPercentage = clickX / starWidth;
+    
+    // In RTL mode, invert the click percentage since stars are displayed in reverse
+    if (isRTL) {
+      clickPercentage = 1 - clickPercentage;
+    }
+    
     let starValue = 0;
 
     if (clickPercentage <= 0.25) {
@@ -179,7 +185,7 @@ export function RateBottomSheet() {
                     style={{
                       position: "absolute",
                       top: 0,
-                      left: 0,
+                      ...(isRTL ? { right: 0 } : { left: 0 }),
                       width: `${fillPercentage}%`,
                       height: "100%",
                       overflow: "hidden",
@@ -194,7 +200,7 @@ export function RateBottomSheet() {
                       style={{
                         position: "absolute",
                         top: 0,
-                        left: 0,
+                        ...(isRTL ? { right: 0 } : { left: 0 }),
                         width: 40,
                         height: 40,
                       }}