* { box-sizing:border-box; margin:0; padding:0; font-family:Roboto, Arial, sans-serif; }
body { background:#fff; color:#333; padding-bottom:80px; min-height:100vh; }
.header-container { color:#fff; padding:15px; position:sticky; top:0; z-index:100; }
.header-content { display:flex; align-items:center; gap:15px; max-width:500px; margin:0 auto; }
.back-button { cursor:pointer; font-size:20px; }
.header-title { font-size:17px; font-weight:500; }

.progress-stepper { display:flex; justify-content:space-between; padding:12px 16px; background:#fff; border-bottom:1px solid #f0f0f0; }
.step { flex:1; text-align:center; position:relative; }
.step-circle { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 5px; border:1px solid #dbdbdb; font-size:12px; color:#878787; background:#fff; }
.step-label { font-size:12px; color:#878787; }
.step.active .step-circle { background:#2874f0; color:#fff; border-color:#2874f0; }
.step.active .step-label { color:#2874f0; font-weight:500; }
.step.completed .step-circle { background:#2874f0; color:#fff; border-color:#2874f0; }

.form-container, .card-section { max-width:500px; margin:0 auto; padding:15px; background:#fff; }
.form-group { margin-bottom:15px; }
.form-group label { display:block; margin-bottom:6px; font-size:13px; color:#878787; font-weight:500; }
.form-group input, .form-group select {
  width:100%; padding:12px; border:1px solid #e0e0e0; border-radius:4px; font-size:14px;
  font-family:inherit; color:#212121; background:#fff;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
.form-group select {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23878787' stroke-width='1.5' fill='none' fill-rule='evenodd'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
.form-group input:focus, .form-group select:focus {
  outline:none; border-color:#2874f0; box-shadow:0 0 0 2px rgba(40,116,240,.12);
}
.row { display:flex; gap:10px; }
.row .col { flex:1; }
.status-text { font-size:12px; color:#ff5722; margin-top:4px; }
.address-type-options { display:flex; gap:15px; margin-top:10px; }
.address-type-options label { border:1px solid #dcdcdc; padding:8px 16px; border-radius:20px; font-size:14px; }

.save-button, .page-footer { position:fixed; bottom:0; left:0; right:0; padding:15px; background:#fff; border-top:1px solid #e0e0e0; text-align:center; }
.btn-primary, .continue-btn { background:#fb641b; color:#fff; border:none; padding:12px; width:100%; max-width:500px; border-radius:4px; font-size:16px; font-weight:500; cursor:pointer; }

.product-card { display:flex; gap:12px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #f0f0f0; }
.product-card img { width:80px; height:80px; object-fit:contain; }
.product-name { font-size:13px; font-weight:500; margin-bottom:6px; }
.actions-container { display:flex; align-items:center; gap:14px; margin-top:6px; }
.qty-control { display:flex; align-items:center; border:1px solid #c2c2c2; border-radius:4px; }
.qty-btn { background:#fff; border:none; width:26px; height:26px; font-weight:bold; cursor:pointer; }
.qty-input { width:32px; text-align:center; border:none; border-left:1px solid #c2c2c2; border-right:1px solid #c2c2c2; }
.remove-link { color:#dc3545; font-size:12px; text-decoration:none; font-weight:500; }

.price-details-card { border:1px solid #e0e0e0; border-radius:8px; padding:14px; }
.price-details-row { display:flex; justify-content:space-between; margin-bottom:14px; font-size:13px; }
.total-amount-row { font-weight:bold; border-top:1px dashed #e0e0e0; padding-top:12px; }
.savings-banner { background:#e4f8e8; color:#388e3c; font-weight:500; padding:10px; border-radius:8px; margin-top:8px; }
.footer-price { font-weight:bold; font-size:16px; }