/* Checkout steps, fields, shipping-method radios, alerts and checkboxes.
   Source: "Cart / checkout" in app/globals.css. Reused by the track page later. */

.steps { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.step { cursor: pointer; display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; color: var(--mute); font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; }
.step:disabled { cursor: default; }
.step .n { width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.step.on { color: var(--ink); }
.step.on .n { background: var(--orange); color: var(--white); }
.step.done .n { background: var(--ink); color: var(--card); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); }
.field input, .field select, .field textarea { height: 46px; border: 1px solid var(--line2); border-radius: var(--cc-card-radius, 10px); background: var(--white); padding: 0 14px; font-size: 15px; color: var(--ink); outline: 0; font-variant-numeric: tabular-nums; width: 100%; }
.field textarea { height: auto; min-height: 90px; padding: 12px 14px; }
.field input:focus, .field select:focus, .field textarea:focus { border: 1.5px solid var(--ink); }
.field.err input, .field.err select { border: 1.5px solid var(--red); }
.field .e { font-size: 12px; color: var(--red); font-weight: 600; }
.method { cursor: pointer; display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--line); background: var(--white); border-radius: 10px; padding: 16px 18px; text-align: left; width: 100%; color: var(--ink); }
.method.on { border-color: var(--ink); background: var(--cream); }
.method .dot { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--white); flex-shrink: 0; }
.method.on .dot { background: var(--orange); }
.alert { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; }
.alert.err { background: #FBE7E3; border: 1px solid var(--red); color: var(--red); }
.alert.info { background: var(--cream); border: 1px solid var(--orange); color: var(--ink2); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink2); cursor: pointer; }
.check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--orange); flex-shrink: 0; }