.orderSummary :global(.ant-card-body) { padding: 16px !important; } .profileImage { border-radius: 50%; width: 50px; height: 50px; } /* Enhanced responsive order summary */ @media (min-width: 769px) and (max-width: 1024px) { .orderSummary { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } } .fascanoIcon { position: relative; top: 3px; } .locationIcon { position: relative; top: 3px; } .orderDishIcon { display: flex; justify-content: center; align-items: center; width: 100%; } .orderCard :global(.ant-card-body) { display: flex; flex-direction: column; justify-content: flex-start; } .orderCard :global(.ant-card-body) > *:not(:last-child) { margin-bottom: 3.5rem; } .orderSummary { transition: all 0.3s ease; } .invoiceIcon { position: relative; top: 3px; } .timeIcon { position: relative; top: 3px; } /* 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; align-items: center; 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); } .desktopSummaryRow { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 16px; } .desktopTotalRow { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; margin-top: 16px; } [data-theme="dark"] .orderSummary { background-color: #181818 !important; border-color: #363636 !important; } [data-theme="dark"] .orderSummary:hover { background-color: #363636 !important; border-color: #424242 !important; } [data-theme="dark"] .summaryRow { color: #b0b0b0; } [data-theme="dark"] .totalRow { color: #ffffff; border-top-color: #424242; } /* 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 { box-shadow: none !important; 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); } } .backToHomePage { width: 100%; height: 48px; display: flex; justify-content: flex-start; padding: 12px 18px !important; row-gap: 10px; transition: all 0.3s ease; border-radius: 50px; } .backToHomePage :global(.ant-card-body) { padding: 0px !important; text-align: start; width: 100%; } .nextIcon { width: 24px; height: 24px; } .backIcon { width: 24px; height: 24px; } .inviteToBillCard { width: 100%; height: 48px; display: flex; justify-content: flex-start; padding: 12px 18px !important; row-gap: 10px; transition: all 0.3s ease; border-radius: 50px; } .inviteToBillCard :global(.ant-card-body) { padding: 0px !important; text-align: start; width: 100%; } .orderDetailsContainer { display: flex; flex-direction: column; padding: 16px; gap: 16px; overflow: auto; scrollbar-width: none; height: calc(92vh - 80px); } /* CheckoutButton Styles */ .orderDetailsButtonContainer { width: 100%; padding: 16px 16px 0; position: sticky; bottom: 0; left: 0; height: 80px; display: flex; flex-direction: row; justify-content: space-around; gap: 1rem; background-color: var(--secondary-background); box-shadow: none; z-index: 999; } /* Dark theme styles for checkout */ :global(.darkApp) .orderDetailsButtonContainer { background-color: #000000 !important; } .button { width: 100%; height: 48px; margin-bottom: 16px; box-shadow: none; }