.orderSummary :global(.ant-card-body) { padding: 16px !important; } .orderSummary { transition: all 0.3s ease; } .summaryRow { display: flex; justify-content: space-between; align-items: center; font-size: 16px; min-height: 24px; } .summaryDivider { margin: 0 !important; } .totalRow { font-weight: bold; font-size: 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; } /* Enhanced responsive focus states */ .orderSummary:focus { outline: 2px solid var(--primary); outline-offset: 2px; } /* Enhanced responsive animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ===== MEDIA QUERIES ===== */ /* Tablet styles (769px - 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .summaryRow { font-size: 16px; } .summaryDivider { margin: 10px 0 !important; } .totalRow { font-size: 18px; } } /* Desktop styles (1025px+) */ @media (min-width: 1025px) { .summaryRow { font-size: 18px; } .summaryDivider { margin: 10px 0 !important; } .totalRow { font-size: 20px; } } /* Focus states for larger screens */ @media (min-width: 768px) { .orderSummary:focus { outline-offset: 4px; } }