/* ============================================================
   Mind Theory — Checkout stylesheet (checkout.css)
   Loads after home.css and legal.css (reuses .mtl-header/.mtl-content
   for the page shell). Only checkout-specific rules live here: order
   summary card, the name/email form, and the Pay/Download buttons.
   Self-contained — does not modify home.css, legal.css or ebooks.css.
   ============================================================ */

.mtck-card{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-xs); max-width:520px; margin:0 auto 24px;
}
.mtck-summary{ display:flex; align-items:center; gap:16px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--border-soft); }
.mtck-summary h2{ font-size:1.15rem; margin:0 0 4px; color:var(--text-head); }
.mtck-summary .price{ font-size:1.3rem; font-weight:800; color:var(--pink-deep); }
.mtck-summary .was{ font-size:.9rem; color:var(--text-meta); text-decoration:line-through; margin-left:8px; }

.mtck-field{ margin-bottom:16px; }
.mtck-field label{ display:block; font-size:.86rem; font-weight:700; color:var(--text-head); margin-bottom:6px; }
.mtck-field input{
  width:100%; padding:12px 16px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-soft); background:#fff;
  font-family:var(--font-body); font-size:.95rem; color:var(--text-head);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mtck-field input:focus{ outline:none; border-color:var(--pink-deep); box-shadow:0 0 0 4px rgba(199,39,95,.1); }

.mtck-error{
  background:#FDECEC; border:1px solid #F3C6C6; color:#B23B3B;
  padding:11px 15px; border-radius:var(--radius-md); font-size:.88rem; font-weight:600; margin-bottom:16px; display:none;
}
.mtck-pay-btn{
  width:100%; justify-content:center; padding:14px 0; font-size:1rem;
  border-radius:999px; border:0; cursor:pointer;
  background:linear-gradient(180deg,#FF4C82,var(--pink-deep)); color:#fff; font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 26px -10px rgba(217,21,83,.5);
  display:flex; align-items:center; gap:8px;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), opacity .2s ease;
}
.mtck-pay-btn:hover{ transform:translateY(-2px); }
.mtck-pay-btn:disabled{ opacity:.6; cursor:wait; transform:none; }
.mtck-pay-btn .spinner{
  width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:mtckSpin .7s linear infinite; display:none;
}
.mtck-pay-btn.is-loading .spinner{ display:inline-block; }
@keyframes mtckSpin{ to{ transform:rotate(360deg); } }

.mtck-secure-note{ text-align:center; font-size:.78rem; color:var(--text-meta); margin-top:14px; display:flex; align-items:center; justify-content:center; gap:6px; }

.mtck-status-icon{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.mtck-status-icon.success{ background:#E3F6EA; color:#1F9C79; }
.mtck-status-icon.failure{ background:#FDECEC; color:#C7275F; }
.mtck-status-icon.cancel{ background:var(--bg-soft); color:var(--text-meta); }

.mtck-download-btn{
  display:inline-flex; align-items:center; gap:8px; margin:6px 6px 0 0;
  padding:12px 22px; border-radius:999px; font-weight:800; font-size:.9rem; color:#fff;
  background:linear-gradient(180deg,#1868E8,var(--blue-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 22px -10px rgba(12,79,199,.48);
}

.mtck-order-number{ font-family:monospace; background:var(--bg-soft); padding:2px 8px; border-radius:6px; font-size:.9rem; }