order: fix payment summary

src/components/PaymentDetails/PaymentDetails.module.css

@@ -4,22 +4,12 @@
 
 /* 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;
@@ -30,57 +20,39 @@
 /* Enhanced responsive summary rows */
 @media (min-width: 769px) and (max-width: 1024px) {
   .summaryRow {
-    padding: 12px 0;
+    padding: 6px 0;
     font-size: 16px;
   }
+  .summaryDivider {
+    margin: 20px 0 !important;
+  }
+  .totalRow {
+    font-size: 18px;
+  }
 }
 
 @media (min-width: 1025px) {
   .summaryRow {
-    padding: 16px 0;
+    padding: 8px 0;
     font-size: 18px;
   }
+  .summaryDivider {
+    margin: 24px 0 !important;
+  }
+  .totalRow {
+    font-size: 20px;
+  }
 }
 
 .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,36 +74,6 @@
   margin-top: 16px;
 }
 
-/* Enhanced responsive animations */
-@media (prefers-reduced-motion: no-preference) {
-  .orderSummary {
-    animation: fadeInUp 0.8s ease-out;
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Enhanced responsive focus states */
-.orderSummary:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-@media (min-width: 768px) {
-  .orderSummary:focus {
-    outline-offset: 4px;
-  }
-}
-
 /* Enhanced responsive print styles */
 @media print {
   .orderSummary {
@@ -139,18 +81,3 @@
     border: 1px solid #ccc !important;
   }
 }
-
-/* Enhanced responsive hover effects */
-@media (hover: hover) {
-  .orderSummary:hover {
-    transform: translateY(-2px);
-  }
-
-  .menuItemImage:hover {
-    transform: scale(1.05);
-  }
-
-  [data-theme="dark"] .orderSummary:hover {
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-  }
-}

src/components/PaymentDetails/PaymentDetails.tsx

@@ -15,13 +15,9 @@ export default function PaymentDetails({ order }: { order?: Order }) {
         <ProTitle style={{ fontSize: 18 }}>{t("cart.orderSummary")}</ProTitle>
         <Divider style={{ margin: "15px 0 15px 0" }} />
         <Space direction="vertical" style={{ width: "100%" }}>
-        
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
             <ProText strong>{t("cart.totalAmount")}</ProText>
-            <ArabicPrice 
+            <ArabicPrice price={order?.total_price || 0} strong />
-              price={order?.total_price || 0} 
-              strong
-            />
           </div>
         </Space>
       </Card>