cart: enhacne desktop styles

src/components/OrderSummary/OrderSummary.module.css

@@ -65,12 +65,8 @@
 
 /* Tablet styles (769px - 1024px) */
 @media (min-width: 769px) and (max-width: 1024px) {
-  .orderSummary {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-
   .summaryRow {
-    padding: 12px 0;
+    padding: 6px 0;
     font-size: 16px;
   }
 
@@ -80,15 +76,13 @@
 
   .totalRow {
     font-size: 18px;
-    padding-top: 20px;
-    margin-top: 12px;
   }
 }
 
 /* Desktop styles (1025px+) */
 @media (min-width: 1025px) {
   .summaryRow {
-    padding: 8px 0;
+    padding: 4px 0;
     font-size: 18px;
   }
 
@@ -124,10 +118,6 @@
   .menuItemImage:hover {
     transform: scale(1.05);
   }
-
-  [data-theme="dark"] .orderSummary:hover {
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-  }
 }
 
 /* Print styles */

src/pages/cart/components/CartDesktopLayout.tsx

@@ -30,9 +30,7 @@ interface CartDesktopLayoutProps {
 
 export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
   const { t } = useTranslation();
-  const { items } = useAppSelector(selectCart);
+  const { items, orderType } = useAppSelector(selectCart);
-
-  const orderType = localStorage.getItem("orderType");
 
   return (
     <>
@@ -167,45 +165,22 @@ export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
             <div className={styles.desktopSidebar}>
               <YouMightAlsoLike />
 
-              <div className={styles.desktopSidebarCard}>
               <SpecialRequestCard />
-              </div>
 
-              <div
-                className={styles.desktopSidebarCard}
-                style={{ "--animation-order": 1 } as React.CSSProperties}
-              >
               <CouponCard />
-              </div>
 
               {orderType === OrderType.Pickup && <CarPlateCard />}
 
               {(orderType === OrderType.Delivery ||
                 orderType === OrderType.Pickup) && <TimeEstimateCard />}
 
-              <div
-                className={styles.desktopSidebarCard}
-                style={{ "--animation-order": 1 } as React.CSSProperties}
-              >
               <RewardWaiterCard />
-              </div>
 
               {/* Table Number */}
-              {orderType === OrderType.DineIn && (
+              {orderType === OrderType.DineIn && <TableNumberCard />}
-                <div
-                  className={styles.desktopSidebarCard}
-                  style={{ "--animation-order": 3 } as React.CSSProperties}
-                >
-                  <TableNumberCard />
-                </div>
-              )}
 
               {/* Order Summary */}
-              <Card
-                className={`${styles.desktopOrderSummary} ${styles.desktopSidebarCard}`}
-              >
               <OrderSummary />
-              </Card>
             </div>
           </Col>
         </Row>

src/pages/restaurant/page.tsx

@@ -87,6 +87,7 @@ export default function RestaurantPage() {
       </div>
 
       <div className={styles.homeContainer}>
+        <div className={styles.homeContainerContent}>
           <div style={{ textAlign: "center", maxWidth: "100%" }}>
             <div className={styles.logoContainer}>
               <img
@@ -130,6 +131,7 @@ export default function RestaurantPage() {
             </Link>
           </div>
         </div>
+      </div>
 
       {/* Order Details Bottom Sheet - Moved outside the container */}
       <OrderDetailsBottomSheet

src/pages/restaurant/restaurant.module.css

@@ -113,17 +113,6 @@
    MOBILE MEDIA QUERIES (≤ 768px)
    =========================================== */
 
-/* Mobile - Small screens */
-@media (max-width: 480px) {
-  .homeContainer {
-    height: 100vh;
-    min-height: 100vh;
-    width: 100vw;
-    margin: 0;
-    padding: 0;
-  }
-}
-
 /* Mobile - General */
 @media (max-width: 768px) {
   .section {
@@ -140,15 +129,6 @@
   }
 }
 
-/* Mobile - Landscape orientation */
-@media (max-height: 500px) and (orientation: landscape) {
-  .homeContainer {
-    height: 100vh;
-    min-height: 100vh;
-    background-attachment: scroll;
-  }
-}
-
 /* Mobile - Services grid */
 @media (max-width: 769px) {
   .servicesGrid {
@@ -185,6 +165,14 @@
     text-align: center;
   }
 
+  .homeContainerContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+  }
+
   .logo {
     width: 140px;
     height: 140px;
@@ -308,13 +296,6 @@
    DESKTOP MEDIA QUERIES (≥ 1025px)
    =========================================== */
 
-/* Large screens */
-@media (min-width: 1200px) {
-  .homeContainer {
-    background-attachment: fixed;
-  }
-}
-
 /* Desktop */
 @media (min-width: 1025px) {
   .languageSwitch,
@@ -337,6 +318,15 @@
     text-align: center;
   }
 
+  .homeContainerContent {
+    margin: 6vh 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+  }
+
   .logo {
     width: 120px;
     height: 120px;
@@ -514,10 +504,18 @@
     gap: 32px;
   }
 
+  .homeContainerContent {
+    margin: 12vh 0 !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0px;
+  }
+
   .logo {
     width: 140px;
     height: 140px;
-    margin: 0 auto 24px;
     border-radius: 24px !important;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
     border: 4px solid rgba(255, 255, 255, 0.95);
@@ -799,14 +797,6 @@
   color: #ffffff;
 }
 
-:global(.darkApp) .homeContainer h1,
-:global(.darkApp) .homeContainer h2,
-:global(.darkApp) .homeContainer h3,
-:global(.darkApp) .homeContainer h4,
-:global(.darkApp) .homeContainer h5,
-:global(.darkApp) .homeContainer h6 {
-  color: #ffffff;
-}
 
 :global(.darkApp) .homeContainer p,
 :global(.darkApp) .homeContainer span {
@@ -815,7 +805,7 @@
 
 :global(.darkApp) .homeServiceCard {
   background-color: rgba(255, 183, 0, 0.12) !important;
-  border-color: #363636 !important;
+  border-color: var(--border) !important;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
 }