/* checkout.css — matches the --ink/--asphalt/--bone/--accent tokens already in the site */

.co-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(11,11,12,0.72);
  display:none; align-items:flex-end; justify-content:center;
  backdrop-filter:blur(3px);
}
.co-overlay *{ -webkit-tap-highlight-color:transparent; }
.co-submit:focus-visible, .co-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.co-overlay.open{ display:flex; }
@media(min-width:700px){ .co-overlay{ align-items:center; } }

.co-modal{
  background:var(--ink); color:var(--bone); width:100%; max-width:460px;
  max-height:92vh; overflow-y:auto; border-top:1px solid var(--line);
  padding:28px 24px 32px; position:relative;
  font-family:'Archivo',sans-serif;
}
@media(min-width:700px){ .co-modal{ border:1px solid var(--line); } }

.co-close{
  position:absolute; top:18px; right:18px; background:none; border:none; color:var(--bone);
  font-family:'JetBrains Mono',monospace; font-size:20px; cursor:pointer; opacity:0.6; line-height:1;
}
.co-close:hover{ opacity:1; }

.co-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; color:var(--accent);
  text-transform:uppercase; margin-bottom:6px;
}
.co-product{ display:flex; gap:14px; align-items:center; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.co-product img{ width:56px; height:56px; object-fit:cover; background:var(--asphalt); }
.co-product-name{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:17px; }
.co-product-price{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--concrete); margin-top:2px; }

.co-step{ display:none; }
.co-step.active{ display:block; }

.co-label{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--concrete);
  text-transform:uppercase; display:block; margin-bottom:6px; margin-top:14px;
}
.co-label:first-child{ margin-top:0; }

.co-input, .co-select{
  width:100%; background:var(--asphalt); border:1px solid var(--line); color:var(--bone);
  padding:12px 14px; font-family:'Archivo',sans-serif; font-size:14px; outline:none;
}
.co-input:focus, .co-select:focus{ border-color:var(--accent); }
.co-row{ display:flex; gap:10px; }
.co-row > *{ flex:1; }

.co-pay-request{ margin:20px 0 6px; min-height:44px; }
.co-divider{
  display:flex; align-items:center; gap:12px; margin:18px 0;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.1em; color:var(--concrete);
}
.co-divider::before, .co-divider::after{ content:''; flex:1; height:1px; background:var(--line); }

#co-card-element{
  background:var(--asphalt); border:1px solid var(--line); padding:13px 14px; margin-top:4px;
}

.co-submit{
  width:100%; margin-top:22px; background:var(--bone); color:var(--ink); border:1px solid var(--bone);
  font-family:'JetBrains Mono',monospace; font-weight:600; font-size:13px; letter-spacing:0.08em;
  text-transform:uppercase; padding:16px; cursor:pointer; transition:all 0.2s ease;
}
.co-submit:hover{ background:transparent; color:var(--bone); }
.co-submit:disabled{ opacity:0.5; cursor:not-allowed; }

.co-secure{
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--concrete);
  text-align:center; margin-top:12px; letter-spacing:0.04em;
}
.co-secure b{ color:var(--accent); }

.co-crypto-status{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--concrete);
  text-align:center; margin:14px 0 10px;
}
.co-crypto-btn{ background:transparent; color:var(--bone); border:1px solid var(--bone); }
.co-crypto-btn:hover{ background:var(--bone); color:var(--ink); }

.co-error{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent);
  margin-top:10px; display:none;
}
.co-error.show{ display:block; }

.co-success{ text-align:center; padding:20px 0; }
.co-success h3{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:26px; margin-bottom:10px; }
.co-success p{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--concrete); line-height:1.6; }
.co-success .co-order-id{ color:var(--bone); margin-top:14px; word-break:break-all; }

.co-spinner{
  width:16px; height:16px; border:2px solid rgba(11,11,12,0.3); border-top-color:var(--ink);
  border-radius:50%; display:inline-block; animation:co-spin 0.6s linear infinite; vertical-align:middle; margin-right:8px;
}
@keyframes co-spin{ to{ transform:rotate(360deg); } }