E-Commerce Order Return Request Form

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="return-card" onsubmit="return false;"><h3>Request Return</h3><p>Order #ORD-98214</p><label>REASON FOR RETURN</label><select required><option>Defective / Damaged Item</option><option>Wrong Size Received</option><option>Item Not as Pictured</option></select><label>RETURN METHOD</label><div class="ret-opts"><label><input type="radio" name="ret" checked> Refund to Original Card</label><label><input type="radio" name="ret"> Store Credit (+5% Bonus)</label></div><button type="submit" class="ret-btn">Submit Return Request</button></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.return-card { width: 210px; background: #ffffff; border-radius: 16px; padding: 18px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.return-card h3 { margin: 0; font-size: 13px; font-weight: 800; color: #0f172a; }
.return-card p { margin: 1px 0 10px; font-size: 7px; font-weight: 700; color: #64748b; }
.return-card label { display: block; font-size: 6px; font-weight: 800; color: #64748b; margin: 6px 0 3px; letter-spacing: 0.5px; }
.return-card select { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px; font-size: 8px; color: #0f172a; outline: none; background: #fff; box-sizing: border-box; }
.ret-opts { font-size: 7px; color: #334155; display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.ret-opts label { margin: 0; font-weight: 600; cursor: pointer; }
.ret-btn { width: 100%; background: #dc2626; color: #fff; border: none; border-radius: 6px; padding: 8px; font-size: 8px; font-weight: 800; cursor: pointer; }