/* Checkout modal — Ink & Ember theme (2026-07-28).
   Uses the theme.css custom properties so the modal reads as part of the site. */

.co-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,5,4,.86);backdrop-filter:blur(7px)}
.co-overlay.open{display:flex}

.co-modal{width:100%;max-width:420px;background:var(--surface,#1A1816);
  border:1px solid var(--line2,rgba(245,240,232,.16));border-radius:var(--radius-lg,8px);
  padding:28px 26px 24px;position:relative;
  box-shadow:0 0 0 1px rgba(245,165,36,.18),0 26px 70px rgba(0,0,0,.66);
  animation:coIn .18s ease-out}
@keyframes coIn{from{opacity:0;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.co-modal{animation:none}}

.co-x{position:absolute;top:11px;right:13px;background:none;border:none;color:var(--faint,#6B645C);
  font-size:25px;line-height:1;cursor:pointer;padding:4px 8px}
.co-x:hover{color:var(--cream,#F7F3EC)}

.co-head{margin-bottom:20px;padding-right:28px;border-bottom:1px solid var(--line,rgba(245,240,232,.09));
  padding-bottom:16px}
.co-plan{font-family:'Instrument Serif',Georgia,serif;font-size:24px;font-weight:400;
  color:var(--cream,#F7F3EC);line-height:1.1}
.co-price{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--amber,#F5A524);margin-top:6px;
  letter-spacing:.04em}

.co-msg{font-size:13.5px;color:var(--muted,#A8A096);line-height:1.68;margin:0 0 16px}
.co-msg b{color:var(--cream,#F7F3EC)}
.co-center{text-align:center}

.co-input{width:100%;padding:12px 14px;margin-bottom:11px;font-size:14px;font-family:inherit;
  color:var(--cream,#F7F3EC);background:var(--ink2,#121110);
  border:1px solid var(--line2,rgba(245,240,232,.16));border-radius:var(--radius,4px);outline:none}
.co-input:focus{border-color:var(--amber,#F5A524);box-shadow:0 0 0 3px rgba(245,165,36,.13)}
.co-input::placeholder{color:var(--faint,#6B645C)}
textarea.co-input{resize:vertical;min-height:76px;line-height:1.55}

.co-full{width:100%;display:block;text-align:center;margin-top:4px}

.co-or{text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;
  color:var(--faint,#6B645C);margin:16px 0 14px;text-transform:uppercase;letter-spacing:.16em;position:relative}
.co-or::before,.co-or::after{content:"";position:absolute;top:50%;width:38%;height:1px;
  background:var(--line,rgba(245,240,232,.09))}
.co-or::before{left:0}.co-or::after{right:0}

.co-err{display:none;margin-top:12px;padding:10px 13px;border-radius:var(--radius,4px);font-size:12.5px;
  line-height:1.55;color:#FFB4A8;background:rgba(232,85,47,.1);border:1px solid rgba(232,85,47,.3)}
.co-err.show{display:block}

.co-fine{font-size:11.5px;color:var(--faint,#6B645C);line-height:1.65;margin-top:15px}
.co-fine a{color:var(--amber,#F5A524)}

.co-spin{width:32px;height:32px;margin:16px auto 18px;border-radius:50%;
  border:2.5px solid rgba(245,240,232,.1);border-top-color:var(--amber,#F5A524);
  animation:coSpin .8s linear infinite}
@keyframes coSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.co-spin{animation-duration:1.8s}}

.co-ok{width:52px;height:52px;margin:8px auto 18px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:26px;font-weight:700;color:var(--up,#4ADE80);
  background:rgba(74,222,128,.1);border:2px solid rgba(74,222,128,.36)}

@media(max-width:480px){.co-modal{padding:24px 19px 20px}.co-plan{font-size:21px}}