/* ============================================================
   Choice Media — Checkout
   ============================================================ */

.checkout { padding: 8rem 5vw 5rem; }
.checkout-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 2.5rem;
  align-items: start;
}

/* ---- Order summary ---- */
.co-summary {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--card-bg); padding: 2rem 1.8rem;
  position: sticky; top: 6rem;
}
.co-plan-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.4rem 0 0.3rem; }
.co-plan-tagline { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.4rem; }
.co-amount { display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.co-amount-num { font-family: 'Space Grotesk', sans-serif; font-size: 2.6rem; font-weight: 700; color: var(--accent); line-height: 1; }
.co-amount-label { color: var(--muted); font-size: 0.9rem; }
.co-breakdown { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.co-breakdown li { display: flex; justify-content: space-between; font-size: 0.92rem; color: #c4d0e4; padding: 0.35rem 0; }
.co-breakdown-total { border-top: 1px solid var(--border); margin-top: 0.4rem; padding-top: 0.7rem !important; font-weight: 700; color: var(--white); }
.co-recurring-note { font-size: 0.88rem; color: #c4d0e4; margin-top: 1rem; line-height: 1.6; }
.co-summary-text { font-size: 0.85rem; color: var(--muted); margin-top: 1.2rem; line-height: 1.6; }
.co-secure { font-size: 0.78rem; color: var(--muted); margin-top: 1.2rem; }
.co-secure-bottom { text-align: center; margin-top: 1rem; }

/* ---- Form ---- */
.co-form-wrap { min-width: 0; }
.co-section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin: 1.8rem 0 1rem;
}
.co-section-label:first-child { margin-top: 0; }
.co-field { margin-bottom: 1rem; }
.co-field label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.4rem; }
.co-field input, .co-field select {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  color: var(--white); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.95rem;
  font-family: 'DM Sans', sans-serif;
}
.co-field input:focus, .co-field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30,127,255,0.15);
}
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.co-row-3 { grid-template-columns: 2fr 1fr 1fr; }

.co-check {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: 0.84rem; color: #c4d0e4; line-height: 1.55;
  margin-top: 1.2rem; cursor: pointer;
}
.co-check input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
.co-check a { color: var(--accent); }

.co-pay-btn {
  width: 100%; margin-top: 1.8rem;
  background: var(--accent); color: var(--black);
  border: none; border-radius: 100px; padding: 1rem 1.5rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem;
  cursor: pointer; transition: background 0.2s, transform 0.15s;
  box-shadow: 0 0 40px rgba(30,127,255,0.3);
}
.co-pay-btn:hover { background: #fff; transform: translateY(-1px); }
.co-pay-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.co-alert {
  background: rgba(224,85,85,0.12); border: 1px solid rgba(224,85,85,0.4);
  color: #f0a0a0; border-radius: 10px; padding: 0.9rem 1.1rem;
  font-size: 0.9rem; margin-bottom: 1.4rem;
}

/* ---- Thank-you ---- */
.co-done { max-width: 620px; margin: 0 auto; text-align: center; }
.co-done .co-check-icon { font-size: 3rem; }
.co-done h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; margin: 0.6rem 0 0.6rem; }
.co-done p { color: #c4d0e4; font-size: 1rem; line-height: 1.7; margin-bottom: 0.8rem; }
.co-done .co-ref { color: var(--muted); font-size: 0.85rem; }
.co-done .btn-primary { margin-top: 1.6rem; }

@media (max-width: 820px) {
  .checkout-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .co-summary { position: static; }
  .checkout { padding: 7rem 5vw 4rem; }
}