/* ============================================================
   AXELERATE BOOKS — the checkout panel inside an entry.

   Opened by "Get the scripts" (books-buy.js). It sits under the
   buy button in the entry's text column and takes the entry's own
   ink, hairlines and buy colour, so it reads as part of the entry
   and not as a box dropped on it. Hidden with `hidden` (display:
   none), never opacity, so the main site's audit does not count it
   as an unrevealed element.
   ============================================================ */
.d-checkout{margin:22px 0 6px;padding:20px 22px 18px;border:1px solid var(--hair);border-radius:4px;
  background:color-mix(in srgb,var(--press-ink) 6%,transparent)}
.d-ck-lead{font-family:var(--serif);font-size:clamp(14px,1.1vw,16px);line-height:1.55;color:var(--dim);margin:0 0 14px}
.d-ck-fields{display:flex;flex-direction:column;gap:12px}
.d-ck-field{display:flex;flex-direction:column;gap:5px}
.d-ck-field label{font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.15vw,16px);color:var(--press-ink)}
.d-ck-field input{width:100%;height:44px;padding:0 12px;border:1px solid var(--hair);border-radius:3px;
  background:color-mix(in srgb,var(--press-ink) 5%,transparent);color:var(--press-ink);
  font-family:var(--serif);font-size:16px;line-height:1;outline:none;
  transition:border-color 140ms,background-color 140ms}
.d-ck-field input::placeholder{color:var(--dim);opacity:.8}
.d-ck-field input:focus{border-color:var(--press-ink);background:color-mix(in srgb,var(--press-ink) 9%,transparent)}
.d-ck-field small{font-family:var(--serif);font-size:13px;color:var(--dim)}
.d-ck-error{margin:0;padding:9px 12px;border-radius:3px;font-family:var(--serif);font-size:14.5px;line-height:1.45;
  background:color-mix(in srgb,#B3261E 16%,transparent);color:var(--press-ink);
  border:1px solid color-mix(in srgb,#B3261E 45%,transparent)}
.d-ck-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:4px 0 0}
.d-ck-actions .d-buybtn{cursor:pointer;border:0}
.d-ck-actions .d-buybtn:disabled{opacity:.6;cursor:wait;transform:none}
.d-ck-cancel{cursor:pointer;background:none;border:0;padding:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(14px,1.15vw,16px);color:var(--dim);text-decoration:underline;text-underline-offset:4px}
.d-ck-cancel:hover{color:var(--press-ink)}
.d-ck-note{margin:6px 0 0;font-family:var(--serif);font-size:13.5px;line-height:1.5;color:var(--dim)}
.d-ck-note a{color:var(--press-ink);text-decoration:underline;text-underline-offset:4px}

/* back from the payment page: the result, in the same panel */
.d-ck-status{padding:2px 0}
.d-ck-title{margin:0 0 6px;font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.4vw,21px);line-height:1.25;color:var(--press-ink)}
.d-ck-text{margin:0 0 14px;font-family:var(--serif);font-size:clamp(14px,1.1vw,16px);line-height:1.55;color:var(--press-ink)}
.d-ck-status.is-wait .d-ck-title::before{content:"";display:inline-block;width:12px;height:12px;margin:0 9px 0 0;
  border:2px solid var(--press-ink);border-right-color:transparent;border-radius:50%;vertical-align:-1px;
  animation:ckSpin 900ms linear infinite}
@keyframes ckSpin{to{transform:rotate(360deg)}}
.d-ck-status.is-paid .d-ck-title::before{content:"\2713";display:inline-block;margin-right:8px}
.d-ck-status.is-failed .d-ck-title::before{content:"\2715";display:inline-block;margin-right:8px}
.d-ck-status .d-buybtn{text-decoration:none}

@media (max-width:560px){
  .d-checkout{padding:16px 16px 14px}
}
@media (prefers-reduced-motion:reduce){
  .d-ck-status.is-wait .d-ck-title::before{animation:none}
}