Styled Paper - Copy this React, Mui Component to your project

/* Styling for the Order Item */ .order item { background: #fff; border radius: 12px; padding: 20px; margin: 15px 0; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .order item:hover { box shadow: 0 8px 16px rgba(0, 0, 0, 0.15); transform: translateY( 5px); } .order header { display: flex; justify content: space between; align items: center; margin bottom: 15px; font size: 18px; font weight: 600; } .status badge { font size: 14px; font weight: 600; padding: 5px 10px; border radius: 20px; text transform: capitalize; display: inline block; letter spacing: 1px; } .order content { margin top: 10px; font size: 14px; color: #666; } .order detail { margin: 8px 0; } .order detail strong { color: #333; font weight: 600; } .location info { display: flex; align items: center; margin bottom: 10px; } .location info .icon { color: #007bff; } .order actions { margin top: 15px; } .order actions .btn { font weight: 600; padding: 10px; margin bottom: 10px; border radius: 8px; text transform: uppercase; } .order actions .btn:hover { transform: scale(1.05); } /* Summary Card Styling */ .summary card { display: flex; align items: center; justify content: space between; background color: #f9f9f9; padding: 15px; border radius: 10px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .summary card:hover { box shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .summary card .icon { font size: 24px; color: #007bff; margin right: 15px; } .summary card p { margin: 0; font weight: 600; font size: 16px; } .summary card div { display: flex; flex direction: column; align items: flex start; } can you update this code