/* ==========================================================================
   Checkout + manage-subscription pages.
   Reuses the contact page's card/form styling; only the pieces unique to
   billing live here. Brand tokens only — never hardcode a hex.
   ========================================================================== */

/* Order summary ----------------------------------------------------------- */
.checkout-summary {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 24px 0;
}
.checkout-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  font-size: .98rem;
}
.checkout-summary__row + .checkout-summary__row {
  border-top: 1px solid rgba(92, 61, 78, 0.08);
}
.checkout-summary__row span { color: var(--muted); }
.checkout-summary__row strong { color: var(--heading); font-family: var(--font-heading); }
.checkout-summary__note {
  margin: 12px 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
}

/* "What's included" list. Self-contained rather than reusing .plan-includes,
   because program.css is not loaded on this page. */
.checkout-includes {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.checkout-includes li {
  position: relative;
  padding-left: 30px;
  font-size: .92rem;
  color: var(--body);
  line-height: 1.5;
}
.checkout-includes li svg {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
}
.checkout-includes li.lead {
  font-weight: 600;
  color: var(--heading);
  font-family: var(--font-heading);
}

.checkout-back {
  font-family: var(--font-heading);
  font-size: .95rem;
  color: var(--accent);
  text-decoration: none;
}
.checkout-back:hover { color: var(--accent-hover); }

.checkout-hint {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--muted);
}

.checkout-secure {
  margin: 14px 0 0;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}

/* Honeypot — hidden from people, present for bots. Mirrors contact.css. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Manage subscription ----------------------------------------------------- */
.manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: start;
}

.manage-card {
  background: var(--warm-cream);
  border: 1px solid rgba(92, 61, 78, 0.10);
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: var(--shadow);
}
.manage-card + .manage-card,
.manage-card--cancel { margin-top: 0; }
.manage-card--cancel { margin-top: 24px; }
.manage-card--narrow { max-width: 560px; margin: 0 auto; }
.manage-card h2 {
  margin-top: 0;
  font-size: 1.35rem;
}

.manage-status {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--heading);
  margin: 0 0 18px;
}
.manage-status--active,
.manage-status--authenticated { background: var(--dusty-rose); color: var(--warm-cream); }
.manage-status--halted,
.manage-status--signature_failed { background: var(--deep-rose); color: var(--warm-cream); }
.manage-status--cancelled,
.manage-status--completed,
.manage-status--expired { background: rgba(92, 61, 78, 0.10); color: var(--muted); }

.manage-details { margin: 0; }
.manage-details > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(92, 61, 78, 0.08);
}
.manage-details > div:last-child { border-bottom: 0; }
.manage-details dt { color: var(--muted); font-size: .95rem; margin: 0; }
.manage-details dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--heading);
  text-align: right;
}

.manage-payments { list-style: none; margin: 0; padding: 0; }
.manage-payments li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(92, 61, 78, 0.08);
  font-size: .95rem;
}
.manage-payments li:last-child { border-bottom: 0; }
.manage-payments__amount {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--heading);
  margin-left: auto;
}
.manage-payments__status {
  font-size: .8rem;
  color: var(--muted);
  text-transform: capitalize;
  min-width: 68px;
  text-align: right;
}

.manage-cancel-now {
  display: block;
  margin: 0 0 18px;
  font-size: .92rem;
  color: var(--muted);
}
.manage-cancel-now input { margin-right: 8px; }

@media (max-width: 720px) {
  .manage-card { padding: 22px 20px; }
  .manage-details > div { flex-direction: column; gap: 2px; }
  .manage-details dd { text-align: left; }
}