/* NAV STEPS */
.nav-steps{display:flex;align-items:center;gap:0}
.step{display:flex;align-items:center;gap:.5rem;font-family:'Rajdhani',sans-serif;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:.3rem .8rem}
.step.act{color:var(--green3)}
.step.done{color:var(--green2)}
.step-num{width:20px;height:20px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex-shrink:0}
.step.done .step-num{background:var(--green2);border-color:var(--green2);color:#fff}
.step.act .step-num{background:var(--green3);border-color:var(--green3);color:var(--bg)}
.step-sep{width:20px;height:1px;background:var(--border);flex-shrink:0}

/* LAYOUT */
.checkout-wrap{max-width:1200px;margin:0 auto;padding:3rem 5vw;display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start;position:relative;z-index:1}

/* SECTION BLOCK */
.block{background:var(--card);border:1px solid var(--border);margin-bottom:1px}
.block-head{padding:1.2rem 1.8rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem}
.block-num{width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-family:'Rajdhani',sans-serif;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.block-title{font-family:'Rajdhani',sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--white)}
.block-body{padding:1.8rem}

/* FORM */
.form-row{margin-bottom:1.2rem}
.form-row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}
label{display:block;font-family:'Rajdhani',sans-serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
label .req{color:var(--green3);margin-left:.15rem}
.fi{width:100%;background:var(--dark);border:1px solid var(--border2);color:var(--white);padding:.75rem 1rem;font-size:.88rem;font-family:'DM Sans',sans-serif;outline:none;transition:all .25s;-webkit-appearance:none;border-radius:0}
.fi:focus{border-color:var(--green2);box-shadow:0 0 0 3px rgba(34,160,77,.1)}
.fi::placeholder{color:rgba(237,245,239,.2)}
.fi.error{border-color:var(--red)!important;box-shadow:0 0 0 2px rgba(192,57,43,.15)!important}
select.fi{cursor:pointer}
.fi-note{font-size:.72rem;color:var(--muted);font-weight:300;margin-top:.3rem}

/* Phone + contact preference row */
.phone-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem}
.contact-pref-group label{margin-bottom:.6rem}
.contact-options{display:flex;gap:.4rem}
.contact-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.6rem .4rem;border:1px solid var(--border2);background:var(--dark);cursor:pointer;transition:all .2s;font-family:'Rajdhani',sans-serif;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact-opt:hover{border-color:var(--green2);background:var(--green-dim);color:var(--text)}
.contact-opt.selected{border-color:var(--green3);background:var(--green-dim);color:var(--green3)}
.contact-opt-icon{font-size:1.2rem}
input[type=radio].contact-radio{display:none}

/* ══ BANK TRANSFER BOX ══ */
.payment-methods{margin-bottom:1.2rem}
.pay-option{border:1px solid var(--border2);background:var(--dark);margin-bottom:.5rem;cursor:pointer;transition:all .2s}
.pay-option.selected{border-color:var(--green2);background:var(--green-dim)}
.pay-option-head{padding:1rem 1.2rem;display:flex;align-items:center;gap:.9rem}
.pay-radio-circle{width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.pay-option.selected .pay-radio-circle{border-color:var(--green2)}
.pay-radio-circle::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--green2);opacity:0;transition:opacity .2s}
.pay-option.selected .pay-radio-circle::after{opacity:1}
.pay-title{font-family:'Rajdhani',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white)}
.pay-subtitle{font-size:.72rem;color:var(--muted);font-weight:300;margin-left:auto}

/* Bank transfer details box */
.bank-details{display:none;border-top:1px solid var(--border);padding:1.5rem 1.2rem;animation:fadeIn .3s ease}
.pay-option.selected .bank-details{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.bank-alert{background:rgba(212,168,67,.08);border:1px solid rgba(212,168,67,.25);border-left:3px solid var(--gold);padding:1rem 1.2rem;margin-bottom:1.2rem;display:flex;gap:.8rem}
.bank-alert-icon{font-size:1.1rem;flex-shrink:0;margin-top:.1rem}
.bank-alert p{font-size:.78rem;color:var(--text);font-weight:300;line-height:1.6}
.bank-alert strong{color:var(--gold);font-weight:600}

.bank-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);margin-bottom:1rem}
.bank-info-cell{background:var(--card2);padding:.8rem 1rem}
.bank-info-label{font-family:'Rajdhani',sans-serif;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.bank-info-value{font-family:'Rajdhani',sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.04em;color:var(--white);display:flex;align-items:center;gap:.5rem}
.copy-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:.6rem;padding:.15rem .4rem;cursor:pointer;font-family:'Rajdhani',sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:all .2s;flex-shrink:0}
.copy-btn:hover{border-color:var(--green2);color:var(--green3)}
.copy-btn.copied{border-color:var(--green2);color:var(--green3);background:var(--green-dim)}

.bank-ref-box{background:rgba(26,122,58,.08);border:1px solid rgba(26,122,58,.2);padding:1rem 1.2rem;display:flex;align-items:center;gap:.8rem}
.bank-ref-box p{font-size:.78rem;color:var(--text);font-weight:300;line-height:1.5}
.bank-ref-box strong{color:var(--green3);font-family:'Rajdhani',sans-serif;letter-spacing:.05em}

/* Crypto option */
.crypto-details{display:none;border-top:1px solid var(--border);padding:1.5rem 1.2rem}
.pay-option.selected .crypto-details{display:block}
.crypto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}
.crypto-coin{border:1px solid var(--border2);background:var(--dark);padding:.8rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;transition:all .2s;font-family:'Rajdhani',sans-serif;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crypto-coin:hover,.crypto-coin.sel{border-color:var(--green2);color:var(--green3);background:var(--green-dim)}
.crypto-icon{font-size:1.4rem}
.crypto-wallet{background:var(--card2);border:1px solid var(--border);padding:.8rem 1rem;font-size:.72rem;color:var(--text);font-family:'Rajdhani',sans-serif;letter-spacing:.06em;word-break:break-all;line-height:1.5;display:flex;align-items:center;justify-content:space-between;gap:.5rem}

/* ══ ORDER NOTES ══ */
.order-notes-wrap textarea.fi{height:90px;resize:vertical;line-height:1.5}

/* ══ ORDER SUMMARY (right sidebar) ══ */
.order-summary{position:sticky;top:88px}
.summary-head{padding:1.2rem 1.8rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.summary-title{font-family:'Rajdhani',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--white)}
.summary-count{font-family:'Rajdhani',sans-serif;font-size:.68rem;letter-spacing:.1em;color:var(--muted)}
.summary-items{padding:1rem 1.8rem}
.summary-item{display:flex;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--border)}
.summary-item:last-child{border-bottom:none}
.item-img{width:48px;height:48px;background:var(--dark);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;position:relative}
.item-qty-badge{position:absolute;top:-6px;right:-6px;background:var(--green);color:#fff;font-family:'Rajdhani',sans-serif;font-size:.55rem;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.item-info{flex:1;min-width:0}
.item-name{font-family:'Rajdhani',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-brand{font-size:.65rem;color:var(--muted);font-weight:300}
.item-price{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--green3);letter-spacing:.04em;flex-shrink:0}

.summary-totals{padding:1rem 1.8rem;border-top:1px solid var(--border)}
.total-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;font-size:.82rem;color:var(--muted)}
.total-row.main{padding:.8rem 0;border-top:1px solid var(--border);margin-top:.3rem}
.total-row.main .tl{font-family:'Rajdhani',sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.total-row.main .tv{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--green3);letter-spacing:.04em}
.total-row .tl{font-weight:300}
.total-row .tv{font-family:'Rajdhani',sans-serif;font-weight:600;color:var(--text)}
.total-row .tv.green{color:var(--green3)}
.coupon-row{display:flex;gap:0;margin-top:.8rem}
.coupon-input{flex:1;background:var(--dark);border:1px solid var(--border2);color:var(--white);padding:.6rem .9rem;font-size:.8rem;font-family:'DM Sans',sans-serif;outline:none;border-right:none;transition:border .2s}
.coupon-input:focus{border-color:var(--green2)}
.coupon-input::placeholder{color:rgba(237,245,239,.2)}
.coupon-btn{background:none;border:1px solid var(--border2);color:var(--muted);font-family:'Rajdhani',sans-serif;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.6rem 1rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.coupon-btn:hover{border-color:var(--green2);color:var(--green3)}

.free-ship-bar{margin:.8rem 0;background:var(--dark);border:1px solid var(--border);padding:.7rem 1rem}
.free-ship-track{height:4px;background:var(--border);margin:.4rem 0;position:relative}
.free-ship-fill{height:4px;background:linear-gradient(90deg,var(--green),var(--green3));width:72%;transition:width .5s}
.free-ship-label{font-size:.68rem;color:var(--text);font-weight:300}
.free-ship-label span{color:var(--green3);font-weight:500}

/* Place order button */
.place-order-btn{width:100%;background:var(--green);color:#fff;font-family:'Rajdhani',sans-serif;font-size:.92rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:1.1rem;border:1px solid var(--green);cursor:pointer;transition:all .3s;margin:1.2rem 0 .8rem;position:relative;overflow:hidden}
.place-order-btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.12);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.place-order-btn:hover{background:var(--green2);border-color:var(--green2);box-shadow:0 0 30px var(--green-glow)}
.place-order-btn:hover::before{transform:scaleX(1)}
.place-order-btn:active{transform:scale(.99)}

.secure-badges{display:flex;align-items:center;justify-content:center;gap:.8rem;padding-bottom:.5rem;flex-wrap:wrap}
.sec-badge{font-family:'Rajdhani',sans-serif;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.3rem}

/* ══ CONFIRMATION PAGE ══ */
.confirm-wrap{max-width:640px;margin:0 auto;padding:4rem 5vw;text-align:center;position:relative;z-index:1}
.confirm-icon{font-size:4rem;margin-bottom:1.5rem;animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.confirm-title{font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:.04em;margin-bottom:.8rem}
.confirm-title span{color:var(--green3)}
.confirm-sub{font-size:.9rem;color:var(--muted);font-weight:300;line-height:1.7;margin-bottom:2.5rem}
.confirm-boxes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);margin-bottom:2rem;text-align:left}
.confirm-box{background:var(--card);padding:1.5rem}
.confirm-box-title{font-family:'Rajdhani',sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green3);margin-bottom:.8rem}
.confirm-box-val{font-size:.85rem;color:var(--text);font-weight:300;line-height:1.6}
.confirm-box-val strong{color:var(--white);font-weight:500;display:block}

/* Bank transfer confirmation */
.bank-confirm{background:var(--card);border:1px solid rgba(212,168,67,.25);margin-bottom:2rem;text-align:left}
.bank-confirm-head{background:rgba(212,168,67,.08);border-bottom:1px solid rgba(212,168,67,.2);padding:1.2rem 1.8rem;display:flex;align-items:center;gap:.8rem}
.bank-confirm-head h3{font-family:'Rajdhani',sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.bank-confirm-body{padding:1.5rem 1.8rem}
.bank-confirm-steps{list-style:none;display:flex;flex-direction:column;gap:.8rem}
.bank-confirm-steps li{display:flex;align-items:flex-start;gap:.8rem;font-size:.82rem;color:var(--text);font-weight:300;line-height:1.6}
.step-circle{width:22px;height:22px;border-radius:50%;background:var(--green-dim);border:1px solid rgba(34,160,77,.3);display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-size:.65rem;font-weight:700;color:var(--green3);flex-shrink:0;margin-top:.05rem}

.bank-confirm-details{background:var(--dark);border:1px solid var(--border);padding:1.2rem;margin:1.2rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.bcd-item .bcd-label{font-family:'Rajdhani',sans-serif;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.bcd-item .bcd-val{font-size:.82rem;color:var(--white);font-weight:400;font-family:'Rajdhani',sans-serif;letter-spacing:.03em}
.bcd-item .bcd-val.highlight{color:var(--green3);font-size:.95rem;font-weight:600}

.urgent-notice{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.25);border-left:3px solid var(--red);padding:1rem 1.2rem;margin-top:1rem;font-size:.78rem;color:var(--text);font-weight:300;line-height:1.6}
.urgent-notice strong{color:#e74c3c}

/* Mobile */
@media(max-width:900px){.checkout-wrap{grid-template-columns:1fr}.order-summary{position:static}.nav-steps{display:none}}
@media(max-width:600px){.block-body{padding:1.2rem}.form-row.two-col,.form-row.three-col{grid-template-columns:1fr}.phone-contact-row{grid-template-columns:1fr}.bank-info-grid{grid-template-columns:1fr}.confirm-boxes{grid-template-columns:1fr}.bank-confirm-details{grid-template-columns:1fr}.contact-options{gap:.3rem}}
