cart: enhance order summary styles

src/components/OrderSummary/OrderSummary.module.css

@@ -2,24 +2,10 @@
   padding: 16px !important;
 }
 
-/* Enhanced responsive order summary */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .orderSummary {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-}
-
 .orderSummary {
   transition: all 0.3s ease;
 }
 
-/* Enhanced responsive order summary */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .orderSummary {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-}
-
 .summaryRow {
   display: flex;
   justify-content: space-between;
@@ -27,60 +13,15 @@
   font-size: 16px;
 }
 
-/* Enhanced responsive summary rows */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .summaryRow {
-    padding: 12px 0;
-    font-size: 16px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .summaryRow {
-    padding: 16px 0;
-    font-size: 18px;
-  }
-}
-
 .summaryDivider {
   margin: 8px 0 !important;
 }
 
-/* Enhanced responsive summary divider */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .summaryDivider {
-    margin: 20px 0 !important;
-  }
-}
-
-@media (min-width: 1025px) {
-  .summaryDivider {
-    margin: 24px 0 !important;
-  }
-}
-
 .totalRow {
   font-weight: bold;
   font-size: 16px;
 }
 
-/* Enhanced responsive total row */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .totalRow {
-    font-size: 18px;
-    padding-top: 20px;
-    margin-top: 12px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .totalRow {
-    font-size: 20px;
-    padding-top: 24px;
-    margin-top: 16px;
-  }
-}
-
 .desktopOrderSummary {
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   border: 1px solid rgba(0, 0, 0, 0.08);
@@ -102,13 +43,13 @@
   margin-top: 16px;
 }
 
-/* Enhanced responsive animations */
+/* Enhanced responsive focus states */
-@media (prefers-reduced-motion: no-preference) {
+.orderSummary:focus {
-  .orderSummary {
+  outline: 2px solid var(--primary);
-    animation: fadeInUp 0.8s ease-out;
+  outline-offset: 2px;
-  }
 }
 
+/* Enhanced responsive animations */
 @keyframes fadeInUp {
   from {
     opacity: 0;
@@ -120,27 +61,61 @@
   }
 }
 
-/* Enhanced responsive focus states */
+/* ===== MEDIA QUERIES ===== */
-.orderSummary:focus {
+
-  outline: 2px solid var(--primary);
+/* Tablet styles (769px - 1024px) */
-  outline-offset: 2px;
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 
+  .summaryRow {
+    padding: 12px 0;
+    font-size: 16px;
+  }
+
+  .summaryDivider {
+    margin: 20px 0 !important;
+  }
+
+  .totalRow {
+    font-size: 18px;
+    padding-top: 20px;
+    margin-top: 12px;
+  }
+}
+
+/* Desktop styles (1025px+) */
+@media (min-width: 1025px) {
+  .summaryRow {
+    padding: 8px 0;
+    font-size: 18px;
+  }
+
+  .summaryDivider {
+    margin: 0 !important;
+  }
+
+  .totalRow {
+    font-size: 20px;
+  }
+}
+
+/* Focus states for larger screens */
 @media (min-width: 768px) {
   .orderSummary:focus {
     outline-offset: 4px;
   }
 }
 
-/* Enhanced responsive print styles */
+/* Reduced motion preferences */
-@media print {
+@media (prefers-reduced-motion: no-preference) {
   .orderSummary {
-    box-shadow: none !important;
+    animation: fadeInUp 0.8s ease-out;
-    border: 1px solid #ccc !important;
   }
 }
 
-/* Enhanced responsive hover effects */
+/* Hover effects for devices that support hover */
 @media (hover: hover) {
   .orderSummary:hover {
     transform: translateY(-2px);
@@ -154,3 +129,11 @@
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   }
 }
+
+/* Print styles */
+@media print {
+  .orderSummary {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+}

src/components/OrderSummary/OrderSummary.tsx

@@ -10,7 +10,6 @@ import styles from "./OrderSummary.module.css";
 export default function OrderSummary() {
   const { t } = useTranslation();
   const subtotal = useAppSelector(selectCartTotal);
-  const { isRTL } = useAppSelector((state) => state.locale);
   const tax = subtotal * 0.1; // 10% tax
   const total = subtotal + tax;
 
@@ -21,39 +20,21 @@ export default function OrderSummary() {
         <Divider style={{ margin: "15px 0 15px 0" }} />
         <Space direction="vertical" style={{ width: "100%" }}>
           <div className={styles.summaryRow}>
-            <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
+            <ProText type="secondary">{t("cart.basketTotal")}</ProText>
-              {t("cart.basketTotal")}
+            <ArabicPrice price={subtotal} />
-            </ProText>
-            <ArabicPrice 
-              price={subtotal} 
-              style={{ color: "rgba(67, 78, 92, 1)" }}
-            />
           </div>
           <div className={styles.summaryRow}>
-            <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
+            <ProText type="secondary">{t("cart.discount")}</ProText>
-              {t("cart.discount")}
+            <ArabicPrice price={0} />
-            </ProText>
-            <ArabicPrice 
-              price={0} 
-              style={{ color: "rgba(67, 78, 92, 1)" }}
-            />
           </div>
           <div className={styles.summaryRow}>
-            <ProText style={{ color: "rgba(67, 78, 92, 1)" }}>
+            <ProText type="secondary">{t("cart.riderTip")}</ProText>
-              {t("cart.riderTip")}
+            <ArabicPrice price={tax} />
-            </ProText>
-            <ArabicPrice 
-              price={tax} 
-              style={{ color: "rgba(67, 78, 92, 1)" }}
-            />
           </div>
           <Divider className={styles.summaryDivider} />
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
-            <ProText strong>{t("cart.totalAmount")}</ProText>
+            <ProText strong type="secondary">{t("cart.totalAmount")}</ProText>
-            <ArabicPrice 
+            <ArabicPrice price={total} strong />
-              price={total} 
-              strong
-            />
           </div>
         </Space>
       </Card>

src/index.css

@@ -15,7 +15,7 @@
   --primary2: #ffc600;
   --secondary: #09237d;
   --text-color: #fff;
-  --text-color-gray: #5f6c7b;
+  --text-color-gray: #5f6c7b; /* rgba(67, 78, 92, 1); */
   --success: #03b100;
   --danger: #dc3545;
   --primary-glow: radial-gradient(
@@ -43,6 +43,8 @@
   --secondary-background: #0a0a0a;
   --secondary-foreground: #ffffff;
   --border: #363636;
+  --text-color: #000;
+  --text-color-gray: #5f6c7b; /* rgba(67, 78, 92, 1); */
 }
 
 html,

src/pages/cart/components/CartDesktopLayout.tsx

@@ -217,7 +217,6 @@ export default function CartDesktopLayout() {
               {/* Order Summary */}
               <Card
                 className={`${styles.desktopOrderSummary} ${styles.desktopSidebarCard}`}
-                style={{ "--animation-order": 4 } as React.CSSProperties}
               >
                 <OrderSummary />
               </Card>