.checkout-overlay{background:rgba(0,0,0,0.85);position:fixed;inset:0;z-index:9000;background:rgba(4,6,12,0.94);backdrop-filter:blur(18px);display:none;align-items:center;justify-content:center;padding:20px;}
.checkout-overlay.open{display:flex;}
.checkout-modal{background:#ffffff;border:1px solid rgba(208,24,11,0.3);width:100%;max-width:900px;max-height:92vh;overflow-y:auto;position:relative;box-shadow:0 0 140px rgba(208,24,11,0.15),0 48px 100px rgba(0,0,0,0.8);animation:modalIn 0.38s cubic-bezier(.16,1,.3,1) both;}
@keyframes modalIn{from{opacity:0;transform:translateY(36px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.checkout-modal::-webkit-scrollbar{width:4px;}.checkout-modal::-webkit-scrollbar-thumb{background:var(--orange);}
.co-header{display:flex;align-items:center;justify-content:space-between;padding:22px 32px 18px;border-bottom:1px solid rgba(0,0,0,0.1);background:#111111;position:sticky;top:0;z-index:10;backdrop-filter:blur(14px);}
.co-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:2px;color:#ffffff;display:flex;align-items:center;gap:10px;}.co-title .ot{color:#ff6b4a;}
.co-close{width:34px;height:34px;border:1px solid var(--border);background:transparent;color:var(--muted2);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}.co-close:hover{border-color:#D0180B;color:#D0180B;}
.co-summary{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;background:rgba(208,24,11,0.06);border-bottom:1px solid rgba(208,24,11,0.14);flex-wrap:wrap;gap:10px;}
.co-summary-label{font-size:12px;color:var(--muted2);}.co-summary-order{font-weight:600;font-size:14px;}.co-summary-usd{font-family:'Bebas Neue',sans-serif;font-size:34px;color:#D0180B;}
/* ─── CHECKOUT PROGRESS TRACKER ─── */
.co-steps{
  display:flex;align-items:flex-start;
  gap:0;padding:22px 32px 20px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.15);
  position:relative;
}

/* horizontal line connecting all step circles */
.co-steps::before{
  content:'';
  position:absolute;
  top:43px; /* center of the 36px circle */
  left:calc(32px + 18px); /* left pad + half circle */
  right:calc(32px + 18px);
  height:2px;
  background:var(--border);
  z-index:0;
}
/* progress fill line — driven by JS class on .co-steps */
.co-steps::after{
  content:'';
  position:absolute;
  top:43px;
  left:calc(32px + 18px);
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--orange),var(--cyan));
  z-index:1;
  transition:width 0.5s cubic-bezier(.4,0,.2,1);
}
.co-steps[data-prog="1"]::after{width:0;}
.co-steps[data-prog="2"]::after{width:calc((100% - 64px - 36px) / 3);}
.co-steps[data-prog="3"]::after{width:calc((100% - 64px - 36px) / 3 * 2);}
.co-steps[data-prog="4"]::after{width:calc(100% - 64px - 36px);}

.co-step-connector{display:none;} /* replaced by ::before/after pseudo */

.co-step-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  flex:1;position:relative;z-index:2;
  cursor:default;
}
.co-step-num{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;font-family:'DM Sans',sans-serif;
  background:#ffffff;
  border:2px solid rgba(255,255,255,0.1);
  color:var(--muted2);
  transition:all 0.35s cubic-bezier(.4,0,.2,1);
  position:relative;
}
/* step icon inside the number circle */
.co-step-num::before{
  content:attr(data-icon);
  font-size:15px;
  position:absolute;
  transition:opacity 0.2s;
}
.co-step-num-text{opacity:0;font-size:13px;transition:opacity 0.2s;}

.co-step-label{
  font-size:10px;
  font-family:'DM Sans',sans-serif;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#666666;
  text-align:center;
  line-height:1.3;
  white-space:nowrap;
  transition:color 0.3s;
}

/* active state */
.co-step-item.active .co-step-num{
  background:var(--orange);
  border-color:#D0180B;
  color:#fff;
  box-shadow:0 0 20px rgba(208,24,11,0.45), 0 0 0 4px rgba(208,24,11,0.12);
  transform:scale(1.12);
}
.co-step-item.active .co-step-num::before{opacity:1;}
.co-step-item.active .co-step-label{color:#111111;font-weight:700;}

/* done state */
.co-step-item.done .co-step-num{
  background:var(--green);
  border-color:#16A34A;
  color:#fff;
  box-shadow:0 0 16px rgba(0,232,123,0.3);
}
.co-step-item.done .co-step-num::before{content:'✓';font-size:14px;}
.co-step-item.done .co-step-label{color:#16A34A;}

/* mobile: hide labels, keep circles */
@media(max-width:640px){
  .co-steps{padding:16px 20px 14px;}
  .co-steps::before{left:calc(20px + 16px);right:calc(20px + 16px);top:37px;}
  .co-steps::after{left:calc(20px + 16px);top:37px;}
  .co-step-num{width:32px;height:32px;font-size:12px;}
  .co-steps[data-prog="2"]::after{width:calc((100% - 40px - 32px) / 3);}
  .co-steps[data-prog="3"]::after{width:calc((100% - 40px - 32px) / 3 * 2);}
  .co-steps[data-prog="4"]::after{width:calc(100% - 40px - 32px);}
  .co-step-label{font-size:9px;letter-spacing:0;}
}
.co-body{padding:32px;}
.co-section-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#D0180B;margin-bottom:20px;display:flex;align-items:center;gap:10px;}
.co-section-label::before{content:'';width:20px;height:1px;background:var(--orange);}
.crypto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px;}
.crypto-btn{background:#ffffff;border:1px solid var(--border);padding:16px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;transition:all 0.22s;position:relative;overflow:hidden;}
.crypto-btn::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transition:transform 0.22s;}
.crypto-btn:hover{border-color:rgba(208,24,11,0.35);background:#f8f8f8;}.crypto-btn:hover::after{transform:scaleX(1);}
.crypto-btn.selected{border-color:#D0180B;background:rgba(208,24,11,0.09);box-shadow:0 0 24px rgba(208,24,11,0.12);}.crypto-btn.selected::after{transform:scaleX(1);}
.crypto-btn.selected::before{content:'\2713';position:absolute;top:6px;right:8px;font-size:10px;color:#D0180B;font-weight:700;}
.crypto-icon{width:44px;height:44px;display:grid;place-items:center;line-height:1;}.crypto-icon img{width:40px;height:40px;display:block;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(13,24,38,.16));}.crypto-name{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:0.8px;color:#111111;text-align:center;line-height:1.3;}
.crypto-price{font-size:10px;color:#666666;text-align:center;font-family:'JetBrains Mono',monospace;}
.crypto-amount-badge{font-size:9px;color:#16A34A;font-family:'JetBrains Mono',monospace;text-align:center;}
.co-info-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:12px 16px;background:rgba(0,207,255,0.04);border:1px solid rgba(0,207,255,0.1);}
.co-info-bar span{font-size:12px;color:var(--muted2);}
.co-btn-proceed{width:100%;padding:15px;background:var(--orange);border:none;color:#fff;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.22s;letter-spacing:0.4px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;}
.co-btn-proceed:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,0.16) 50%,transparent 70%);transform:translateX(-200%);transition:transform 0.5s;}
.co-btn-proceed:hover::before{transform:translateX(200%);}.co-btn-proceed:hover:not(:disabled){background:var(--orange2);box-shadow:0 14px 44px rgba(208,24,11,0.38);}
.co-btn-proceed:disabled{background:var(--muted);cursor:not-allowed;opacity:0.7;}
.co-payment{display:none;}.co-payment.active{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.co-qr-side{display:flex;flex-direction:column;align-items:center;gap:18px;}
.qr-frame{width:224px;height:224px;padding:14px;background:#ffffff;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 50px rgba(208,24,11,0.15),0 20px 40px rgba(0,0,0,0.5);}
.qr-frame img{width:196px;height:196px;display:none;}
.qr-loading{width:196px;height:196px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#f5f5f5;color:#666;font-size:11px;font-family:'JetBrains Mono',monospace;}
.qr-spinner{width:28px;height:28px;border:2px solid #ddd;border-top-color:#FF5500;border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.qr-scan-label{font-size:11px;color:#666666;font-family:'JetBrains Mono',monospace;letter-spacing:1px;}
.timer-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;}
.timer-svg{width:96px;height:96px;}
.timer-ring-bg{stroke:rgba(0,0,0,0.12);fill:none;stroke-width:5;}
.timer-ring-prog{stroke:var(--orange);fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:251.3;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1s linear,stroke 0.5s;}
.timer-label{font-size:10px;color:#444444;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:2px;text-transform:uppercase;}
.timer-expired-label{color:#FF4444 !important;animation:timerFlash 0.6s ease-in-out infinite;}
@keyframes timerFlash{0%,100%{opacity:1;}50%{opacity:0.3;}}
.co-refresh-btn{background:transparent;border:1px solid var(--border);color:var(--muted2);font-size:11px;padding:7px 16px;cursor:pointer;font-family:'JetBrains Mono',monospace;letter-spacing:0.5px;transition:all 0.2s;}
.co-refresh-btn:hover{border-color:#D0180B;color:#D0180B;}
.co-addr-side{display:flex;flex-direction:column;gap:14px;}
.co-crypto-chosen{display:flex;align-items:center;gap:14px;padding:16px;background:#ffffff;border:1px solid rgba(208,24,11,0.15);}
.co-crypto-chosen .cicon{width:50px;height:50px;display:grid;place-items:center;line-height:1;flex:0 0 50px;}.co-crypto-chosen .cicon img{width:46px;height:46px;display:block;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(13,24,38,.18));}.co-crypto-chosen .cname{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:1px;}
.co-crypto-chosen .cnet{font-size:11px;color:#666666;font-family:'JetBrains Mono',monospace;margin-top:2px;}
.net-badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;margin-top:4px;}
.net-erc20{background:rgba(98,126,234,0.12);color:#7292ea;border:1px solid rgba(98,126,234,0.25);}
.net-trc20{background:rgba(255,60,60,0.1);color:#ff5555;border:1px solid rgba(255,60,60,0.22);}
.net-btc{background:rgba(247,147,26,0.1);color:#f7931a;border:1px solid rgba(247,147,26,0.25);}
.net-ltc{background:rgba(185,200,225,0.1);color:#b9c8e1;border:1px solid rgba(185,200,225,0.22);}
.net-sol{background:rgba(153,69,255,0.1);color:#9945ff;border:1px solid rgba(153,69,255,0.25);}
.net-xmr{background:rgba(255,102,0,0.1);color:#ff6a00;border:1px solid rgba(255,102,0,0.25);}
.net-zec{background:rgba(235,164,12,0.1);color:#eba40c;border:1px solid rgba(235,164,12,0.25);}
.co-confirmed-badge{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:rgba(0,232,123,0.06);border:1px solid rgba(0,232,123,0.22);}
.co-confirmed-icon{flex-shrink:0;margin-top:1px;}
.co-confirmed-text{font-size:12px;color:#16A34A;font-weight:600;margin-bottom:4px;}
.co-confirmed-addr{font-family:'JetBrains Mono',monospace;font-size:10px;color:#16A34A;font-weight:600;word-break:break-all;line-height:1.6;}
.co-amount-box{background:#111111;border:none;padding:16px;}
.co-amount-label{font-size:10px;color:rgba(255,255,255,0.6);font-family:'JetBrains Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;}
.co-amount-crypto{font-family:'Bebas Neue',sans-serif;font-size:42px;line-height:1;color:#ffffff;display:flex;align-items:flex-end;gap:8px;}
.co-amount-sym{font-size:22px;color:#D0180B;margin-bottom:6px;}
.co-amount-usd{font-size:12px;color:#666666;margin-top:6px;}
.co-addr-box{background:#ffffff;border:2px solid #111111;padding:14px 16px;}
.co-addr-label{font-size:10px;color:#666666;font-family:'JetBrains Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;}
.co-addr-row{display:flex;align-items:flex-start;gap:8px;}
.co-addr-text{font-family:'JetBrains Mono',monospace;font-size:11px;color:#111111;font-weight:600;word-break:break-all;flex:1;line-height:1.6;}
.co-copy-btn{flex-shrink:0;padding:7px 13px;background:transparent;border:1px solid var(--border);color:var(--muted2);font-size:11px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all 0.2s;white-space:nowrap;}
.co-copy-btn:hover{border-color:#2563EB;color:#2563EB;}.co-copy-btn.copied{border-color:#16A34A;color:#16A34A;}
.co-note{font-size:11px;color:var(--muted2);line-height:1.65;padding:12px 14px;border-left:2px solid rgba(208,24,11,0.35);background:rgba(255,255,255,0.02);}
.co-back{background:transparent;border:1px solid var(--border);color:var(--muted2);padding:9px 18px;cursor:pointer;font-size:12px;font-family:'DM Sans',sans-serif;transition:all 0.2s;display:inline-flex;align-items:center;gap:6px;margin-bottom:24px;}
.co-back:hover{border-color:rgba(255,255,255,0.2);color:#111111;}
@media(max-width:640px){.crypto-grid{grid-template-columns:repeat(2,1fr);}.co-payment.active{grid-template-columns:1fr;}.co-body{padding:20px;}.co-header,.co-summary{padding-left:20px;padding-right:20px;}}


/* ─── CONTACT FORM STEP ─── */
.co-field-group{display:flex;flex-direction:column;gap:6px;}
.co-field-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);}
.co-field-input{
  background:#ffffff;border:1px solid var(--border);
  color:#111111;padding:12px 14px;
  font-family:'DM Sans',sans-serif;font-size:14px;
  outline:none;transition:border-color 0.2s,box-shadow 0.2s;
  width:100%;
}
.co-field-input:focus{border-color:#D0180B;box-shadow:0 0 0 3px rgba(208,24,11,0.08);}
.co-field-input::placeholder{color:#666666;}
.co-field-input.error{border-color:#ff4444;box-shadow:0 0 0 3px rgba(255,68,68,0.08);}
textarea.co-field-input{font-family:'DM Sans',sans-serif;}
@media(max-width:640px){
  #co-step1b .co-field-group+.co-field-group{margin-top:0;}
  #co-step1b > div[style*="grid"]{grid-template-columns:1fr !important;}
}