cart: clean css 2

src/pages/cart/cart.module.css

@@ -5,24 +5,12 @@
   overflow: auto;
   scrollbar-width: none;
 }
+
 .cartLayout {
   max-width: 100%;
   padding: 16px 16px 12vh;
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
-  .cartLayout {
-    padding: 24px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .cartLayout {
-    padding: 32px;
-    max-width: 1400px;
-    margin: 0 auto;
-  }
-}
 .cartItem {
   padding: 16px;
   border-radius: 12px;
@@ -31,20 +19,6 @@
   justify-content: space-between;
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
-  .cartItem {
-    padding: 20px;
-    border-radius: 16px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .cartItem {
-    padding: 24px;
-    border-radius: 20px;
-  }
-}
-
 .youMightAlsoLikeContainer {
   display: flex;
   flex-direction: row;
@@ -58,56 +32,6 @@
   fill: var(--primary);
 }
 
-/* Prevent keyboard from appearing automatically on mobile */
-@media (max-width: 768px) {
-  .cartContainer input,
-  .cartContainer textarea,
-  .cartContainer select {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-touch-callout: none;
-    -webkit-tap-highlight-color: transparent;
-    font-size: 16px; /* Prevents zoom on iOS */
-  }
-
-  .cartContainer input:focus,
-  .cartContainer textarea:focus,
-  .cartContainer select:focus {
-    outline: none;
-    -webkit-tap-highlight-color: transparent;
-    font-size: 16px; /* Prevents zoom on iOS */
-  }
-
-  /* Additional mobile-specific rules */
-  .cartContainer input[type="text"],
-  .cartContainer input[type="email"],
-  .cartContainer input[type="tel"],
-  .cartContainer input[type="number"],
-  .cartContainer textarea {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border-radius: 0;
-  }
-}
-
-/* Enhanced responsive cart container */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .cartContainer {
-    padding: 24px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .cartContainer {
-    padding: 32px;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-}
-
 .cartContent {
   width: 100%;
 }
@@ -118,21 +42,6 @@
   gap: 16px;
 }
 
-/* Enhanced responsive cart items */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .cartItems {
-    gap: 20px;
-    margin-bottom: 32px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .cartItems {
-    gap: 24px;
-    margin-bottom: 40px;
-  }
-}
-
 .container {
   display: flex;
   gap: 16px;
@@ -146,21 +55,6 @@
   display: none;
 }
 
-/* Enhanced responsive container */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .container {
-    gap: 20px;
-    padding: 12px 0;
-  }
-}
-
-@media (min-width: 1025px) {
-  .container {
-    gap: 24px;
-    padding: 16px 0;
-  }
-}
-
 .menuItemImage {
   object-fit: cover;
   border-radius: 8px;
@@ -174,19 +68,6 @@
   transform: scale(1.05);
 }
 
-/* Enhanced responsive menu item images */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .menuItemImage {
-    border-radius: 12px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .menuItemImage {
-    border-radius: 16px;
-  }
-}
-
 .popularMenuItemImage {
   width: 73px;
   height: 73px;
@@ -231,59 +112,16 @@
   top: 5px !important;
 }
 
-/* Enhanced responsive item description */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .itemDescription {
-    font-size: 14px !important;
-  }
-}
-
-@media (min-width: 1025px) {
-  .itemDescription {
-    font-size: 16px !important;
-  }
-}
-
 .couponApplyIcon {
   margin-left: 8px;
   font-size: 14px;
 }
 
-/* Enhanced responsive coupon apply icon */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .couponApplyIcon {
-    margin-left: 10px;
-    font-size: 16px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .couponApplyIcon {
-    margin-left: 12px;
-    font-size: 18px;
-  }
-}
-
 .donateHandIcon {
   color: #ffb700;
   font-size: 24px;
 }
 
-/* Enhanced responsive donate hand icon */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .donateHandIcon {
-    font-size: 28px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .donateHandIcon {
-    font-size: 32px;
-  }
-}
-
-/* Enhanced responsive cart sidebar for desktop */
-
 /* Desktop Cart Layout Styles */
 .desktopCartContainer {
   max-width: 100vw;
@@ -550,7 +388,6 @@
   box-shadow: 0 0 0 0 !important;
 }
 
-
 [data-theme="dark"] .menuItemImage,
 [data-theme="dark"] .popularMenuItemImage {
   border-color: rgba(255, 255, 255, 0.1);
@@ -561,17 +398,12 @@
   color: rgba(255, 255, 255, 0.75) !important;
 }
 
-/* Enhanced responsive animations */
+.itemDescriptionIcons svg {
-@media (prefers-reduced-motion: no-preference) {
+  width: 18px;
-  .cartItems {
+  height: 18px;
-    animation: fadeInUp 0.6s ease-out;
-  }
-
-  .container {
-    animation: fadeInUp 1s ease-out;
-  }
 }
 
+/* Keyframe animations */
 @keyframes fadeInUp {
   from {
     opacity: 0;
@@ -583,87 +415,6 @@
   }
 }
 
-/* Enhanced responsive focus states */
-.cartContainer:focus,
-.menuItemImage:focus,
-.popularMenuItemImage:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-@media (min-width: 768px) {
-  .cartContainer:focus,
-  .menuItemImage:focus,
-  .popularMenuItemImage:focus {
-    outline-offset: 4px;
-  }
-}
-
-/* Enhanced responsive print styles */
-@media print {
-  .cartContainer {
-    background-color: white !important;
-    color: black !important;
-  }
-
-  .container {
-    display: none !important;
-  }
-}
-
-/* Enhanced responsive hover effects */
-@media (hover: hover) {
-  .menuItemImage:hover,
-  .popularMenuItemImage:hover {
-    transform: scale(1.05);
-  }
-
-  [data-theme="dark"] .orderSummary:hover {
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-  }
-}
-
-/* Enhanced responsive grid for you might also like section */
-@media (min-width: 768px) {
-  .responsive-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    gap: 16px;
-    overflow-x: visible;
-  }
-}
-
-@media (min-width: 1024px) {
-  .responsive-grid {
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 20px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .responsive-grid {
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 24px;
-  }
-}
-
-/* Enhanced responsive animations */
-@media (prefers-reduced-motion: no-preference) {
-  .desktopCartItem {
-    animation: fadeInUp 0.6s ease-out;
-  }
-
-  .desktopRecommendationCard {
-    animation: fadeInUp 0.6s ease-out;
-    animation-delay: calc(var(--animation-order, 0) * 0.1s);
-  }
-
-  .desktopSidebarCard {
-    animation: fadeInRight 0.6s ease-out;
-    animation-delay: calc(var(--animation-order, 0) * 0.1s);
-  }
-}
-
 @keyframes fadeInRight {
   from {
     opacity: 0;
@@ -675,34 +426,166 @@
   }
 }
 
-/* Enhanced focus states for accessibility */
+/* ===== AGGREGATED MEDIA QUERIES ===== */
-.desktopCartItem:focus-within,
+
-.desktopRecommendationCard:focus-within,
+/* Mobile devices (max-width: 768px) */
-.desktopSidebarCard:focus-within {
+@media (max-width: 768px) {
-  outline: 2px solid #1890ff;
+  /* Mobile input handling */
-  outline-offset: 2px;
+  .cartContainer input,
+  .cartContainer textarea,
+  .cartContainer select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: transparent;
+    font-size: 16px; /* Prevents zoom on iOS */
   }
 
-.desktopCheckoutButton:focus {
+  .cartContainer input:focus,
-  outline: 2px solid #ffffff;
+  .cartContainer textarea:focus,
-  outline-offset: 2px;
+  .cartContainer select:focus {
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    font-size: 16px; /* Prevents zoom on iOS */
   }
 
-/* Print styles for desktop */
+  .cartContainer input[type="text"],
-@media print {
+  .cartContainer input[type="email"],
-  .desktopCartContainer {
+  .cartContainer input[type="tel"],
-    background: none;
+  .cartContainer input[type="number"],
-    box-shadow: none;
+  .cartContainer textarea {
-  }
+    -webkit-appearance: none;
-
+    -moz-appearance: none;
-  .desktopMainContent,
+    appearance: none;
-  .desktopSidebarCard {
+    border-radius: 0;
-    box-shadow: none;
-    border: 1px solid #000;
   }
 }
 
-/* Responsive adjustments for large desktop */
+/* Tablet devices (min-width: 769px and max-width: 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .cartLayout {
+    padding: 24px;
+  }
+
+  .cartItem {
+    padding: 20px;
+    border-radius: 16px;
+  }
+
+  .cartContainer {
+    padding: 24px;
+  }
+
+  .cartItems {
+    gap: 20px;
+    margin-bottom: 32px;
+  }
+
+  .container {
+    gap: 20px;
+    padding: 12px 0;
+  }
+
+  .menuItemImage {
+    border-radius: 12px;
+  }
+
+  .itemDescription {
+    font-size: 14px !important;
+  }
+
+  .couponApplyIcon {
+    margin-left: 10px;
+    font-size: 16px;
+  }
+
+  .donateHandIcon {
+    font-size: 28px;
+  }
+}
+
+/* Desktop devices (min-width: 1025px) */
+@media (min-width: 1025px) {
+  .cartLayout {
+    padding: 32px;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+
+  .cartItem {
+    padding: 24px;
+    border-radius: 20px;
+  }
+
+  .cartContainer {
+    padding: 32px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .cartItems {
+    gap: 24px;
+    margin-bottom: 40px;
+  }
+
+  .container {
+    gap: 24px;
+    padding: 16px 0;
+  }
+
+  .menuItemImage {
+    border-radius: 16px;
+  }
+
+  .itemDescription {
+    font-size: 16px !important;
+  }
+
+  .couponApplyIcon {
+    margin-left: 12px;
+    font-size: 18px;
+  }
+
+  .donateHandIcon {
+    font-size: 32px;
+  }
+}
+
+/* Large screens (min-width: 768px) */
+@media (min-width: 768px) {
+  .cartContainer:focus,
+  .menuItemImage:focus,
+  .popularMenuItemImage:focus {
+    outline-offset: 4px;
+  }
+
+  .responsive-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 16px;
+    overflow-x: visible;
+  }
+}
+
+/* Extra large screens (min-width: 1024px) */
+@media (min-width: 1024px) {
+  .responsive-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 20px;
+  }
+}
+
+/* Large desktop screens (min-width: 1280px) */
+@media (min-width: 1280px) {
+  .responsive-grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 24px;
+  }
+}
+
+/* Extra large desktop screens (min-width: 1440px) */
 @media (min-width: 1440px) {
   .desktopCartContainer {
     max-width: 100vw;
@@ -736,7 +619,82 @@
   }
 }
 
-.itemDescriptionIcons svg {
+/* Reduced motion preference */
-  width: 18px;
+@media (prefers-reduced-motion: no-preference) {
-  height: 18px;
+  .cartItems {
+    animation: fadeInUp 0.6s ease-out;
+  }
+
+  .container {
+    animation: fadeInUp 1s ease-out;
+  }
+
+  .desktopCartItem {
+    animation: fadeInUp 0.6s ease-out;
+  }
+
+  .desktopRecommendationCard {
+    animation: fadeInUp 0.6s ease-out;
+    animation-delay: calc(var(--animation-order, 0) * 0.1s);
+  }
+
+  .desktopSidebarCard {
+    animation: fadeInRight 0.6s ease-out;
+    animation-delay: calc(var(--animation-order, 0) * 0.1s);
+  }
+}
+
+/* Hover effects for devices that support hover */
+@media (hover: hover) {
+  .menuItemImage:hover,
+  .popularMenuItemImage:hover {
+    transform: scale(1.05);
+  }
+
+  [data-theme="dark"] .orderSummary:hover {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* Print styles */
+@media print {
+  .cartContainer {
+    background-color: white !important;
+    color: black !important;
+  }
+
+  .container {
+    display: none !important;
+  }
+
+  .desktopCartContainer {
+    background: none;
+    box-shadow: none;
+  }
+
+  .desktopMainContent,
+  .desktopSidebarCard {
+    box-shadow: none;
+    border: 1px solid #000;
+  }
+}
+
+/* Focus states for accessibility */
+.cartContainer:focus,
+.menuItemImage:focus,
+.popularMenuItemImage:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+.desktopCartItem:focus-within,
+.desktopRecommendationCard:focus-within,
+.desktopSidebarCard:focus-within {
+  outline: 2px solid #1890ff;
+  outline-offset: 2px;
+}
+
+.desktopCheckoutButton:focus {
+  outline: 2px solid #ffffff;
+  outline-offset: 2px;
 }