/* =============================================================
   CHECKOUT.CSS — Steps, address, payment, order success
   ============================================================= */

.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-7); align-items: start; }

/* stepper bar */
.steps { display: flex; align-items: center; justify-content: center; gap: 0; margin: var(--s-5) 0 var(--s-8); }
.step { display: flex; align-items: center; gap: 10px; }
.step .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c-bg-soft); color: var(--c-muted); font-weight: var(--fw-bold); border: 2px solid var(--c-border-strong); transition: all var(--t-base); }
.step.active .num { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.step.done .num { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.step .lbl { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--c-text-soft); }
.step.active .lbl { color: var(--c-text-strong); }
.step .bar { width: clamp(30px, 8vw, 90px); height: 2px; background: var(--c-border-strong); margin: 0 12px; }
.step.done .bar { background: var(--c-success); }

.co-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-6); margin-bottom: var(--s-5); }
.co-card h3 { margin-bottom: var(--s-5); display: flex; align-items: center; gap: 10px; }
.co-card .num-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; font-size: var(--fs-sm); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form-grid .full { grid-column: 1 / -1; }

/* address cards */
.addr-card { border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); padding: var(--s-4); cursor: pointer; transition: all var(--t-base); position: relative; }
.addr-card:hover { border-color: var(--c-primary); }
.addr-card.selected { border-color: var(--c-primary); background: var(--c-primary-tint); }
.addr-card .tag { font-size: var(--fs-2xs); }

/* delivery options */
.deliv-opt { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); padding: var(--s-4); cursor: pointer; transition: all var(--t-base); }
.deliv-opt.selected { border-color: var(--c-primary); background: var(--c-primary-tint); }
.deliv-opt .ic { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-primary-tint); color: var(--c-primary); display: grid; place-items: center; }

/* payment methods */
.pay-methods { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.pay-tabs { background: var(--c-bg-alt); border-right: 1px solid var(--c-border); }
.pay-tab { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: var(--fw-semibold); border-left: 3px solid transparent; }
.pay-tab.active { background: #fff; border-left-color: var(--c-primary); color: var(--c-primary); }
.pay-tab svg { width: 22px; height: 22px; }
.pay-tab small { display: block; font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--c-muted); }
.pay-panel { padding: var(--s-6); }
.card-visual { background: var(--g-dark); border-radius: var(--r-lg); padding: var(--s-5); color: #fff; aspect-ratio: 16/9; max-width: 360px; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: var(--s-5); position: relative; overflow: hidden; }
.card-visual::after { content:""; position:absolute; right:-40px; top:-40px; width: 160px; height: 160px; border-radius: 50%; background: var(--g-primary); opacity:.5; }
.card-visual .chip { width: 42px; height: 32px; border-radius: 6px; background: var(--g-gold); position: relative; z-index: 2; }
.card-visual .num { font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: .12em; position: relative; z-index: 2; }
.upi-apps { display: flex; gap: 12px; flex-wrap: wrap; }
.upi-app { border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); padding: 14px 18px; cursor: pointer; font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 8px; }
.upi-app.selected { border-color: var(--c-primary); background: var(--c-primary-tint); }

/* ORDER SUCCESS */
.success-wrap { text-align: center; max-width: 560px; margin: var(--s-9) auto; }
.success-check { width: 110px; height: 110px; border-radius: 50%; background: var(--c-success-bg); display: grid; place-items: center; margin: 0 auto var(--s-5); position: relative; }
.success-check::before { content:""; position:absolute; inset:0; border-radius:50%; border: 2px solid var(--c-success); animation: ringScale 1.4s var(--ease-out) infinite; }
.success-check svg { width: 56px; height: 56px; stroke: var(--c-success); stroke-width: 4; fill: none; stroke-dasharray: 60; animation: checkDraw .7s var(--ease-out) forwards .2s; }
.fail-check { width: 110px; height: 110px; border-radius: 50%; background: var(--c-danger-bg); display: grid; place-items: center; margin: 0 auto var(--s-5); color: var(--c-danger); }

.order-track-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-6); text-align: left; margin-top: var(--s-6); }

/* confetti container */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast); overflow: hidden; }
.confetti-piece { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: confettiFall linear forwards; }

@media (max-width: 980px){ .checkout-layout { grid-template-columns: 1fr; } .pay-methods { grid-template-columns: 1fr; } .pay-tabs { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--c-border); } .pay-tab { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; } .pay-tab.active { border-left: none; border-bottom-color: var(--c-primary); } .form-grid { grid-template-columns: 1fr; } }