:root { --primary-color: #ea580c; --secondary-color: #ee6e01; --background-color: #fff7ed; --text-light: #ffffff; --text-dark: #0f172a; --border-radius: 2rem; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, sans-serif; } body { background-color: var(--background-color); min-height: 100vh; display: flex; flex-direction: column; color: var(--text-dark); padding: 1rem; } .container { width: min(90%, 800px); margin: 2rem auto; background-color: white; padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--shadow); } .order-details { margin-bottom: 1.5rem; padding: 1rem; background-color: #f1f5f9; border-radius: 0.5rem; } .order-details h3 { margin-bottom: 1rem; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 0.5rem; } .order-details p { margin-bottom: 0.5rem; } .map { height: 250px; margin-top: 1rem; border-radius: var(--border-radius); overflow: hidden; } .confirm-button-container { margin-bottom: 1rem; } .confirm-button { display: block; width: 100%; padding: 0.875rem; background-color: var(--primary-color); color: var(--text-light); border: none; border-radius: var(--border-radius); font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease; } .confirm-button:hover { background-color: var(--secondary-color); } @media (max-width: 640px) { .container { width: 95%; padding: 1rem; } }