/* The pay page. One structure, two looks, chosen by the host it is served on
 * (pay.js sets .theme-dfive or .theme-radiant on <html>).
 *
 *   Dfive    - the dfive.us sheet: grey paper, ink, one orange signal, square
 *              corners, uppercase monospace labels (site/site.css).
 *   Radiant  - the myradhealth.com page: blush and warm paper, plum and
 *              copper, Cormorant headings, pill buttons, room to breathe.
 *
 * Each theme sets the same handful of variables; nothing below the themes
 * names a colour or a typeface directly. --accent may be replaced by the
 * entity's own colour (Billing settings), set by pay.js on <html>.
 *
 * Light only, on purpose: an invoice is paper, and it prints.
 * Fonts are self-hosted or the system's - this origin loads no font service.
 */

@font-face {
  font-family: "Cormorant";
  src: url("cormorant-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

.theme-dfive {
  --outer: #dcdfdb; --bg: #e7e9e6; --paper: #f3f4f2; --field: #fbfbfa;
  --ink: #141617; --soft: #555c58; --line: #c3c8c4; --theme-accent: #d24e1b; --accent-ink: #b0400f;
  --ok: #1f6f4a; --bad: #a3271b;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", system-ui, sans-serif;
  --label: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 0px; --btn-radius: 0px; --display-weight: 600; --display-track: -0.01em;
  --label-size: 11px; --label-track: 0.08em; --amount-size: clamp(40px, 9vw, 64px);
}
.theme-radiant {
  --outer: #f8eae9; --bg: #f8eae9; --paper: #fffdfb; --field: #fffdfb;
  --ink: #1a1614; --soft: #5a4e48; --line: #ead9d5; --theme-accent: #8b4a5b; --accent-ink: #8b4a5b;
  --ok: #4a6b55; --bad: #8f3a3a;
  --sans: "Montserrat", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --label: "Montserrat", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius: 14px; --btn-radius: 999px; --display-weight: 500; --display-track: 0;
  --label-size: 10.5px; --label-track: 0.26em; --amount-size: clamp(46px, 10vw, 72px);
}
html { --accent: var(--theme-accent); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--outer); color: var(--ink);
  font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  padding: 0 0 env(safe-area-inset-bottom);
}
.theme-radiant body { font-weight: 300; }

.pay { max-width: 760px; margin: 0 auto; padding: 28px 18px 56px; min-height: 100vh; background: var(--bg); }
.theme-dfive .pay { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.pay-wait { color: var(--soft); padding: 40px 0; text-align: center; }

.label { display: block; font: 500 var(--label-size)/1.4 var(--label); letter-spacing: var(--label-track);
  text-transform: uppercase; color: var(--soft); margin: 0 0 4px; }
.strong { font-weight: 600; }
.theme-radiant .strong { font-weight: 500; }
.fine { color: var(--soft); font-size: 13px; margin: 12px 0 0; }

/* ── who it is from ─────────────────────────────────────────────────── */
.pay-brand { padding: 6px 2px 22px; }
.pay-name { font: var(--display-weight) 24px/1.1 var(--display); letter-spacing: var(--display-track); }
.theme-dfive .pay-name { text-transform: none; border-bottom: 3px solid var(--accent); padding-bottom: 4px; }
.theme-radiant .pay-brand { text-align: center; padding: 18px 2px 30px; }
.theme-radiant .pay-name { font-size: 34px; color: var(--accent); }

/* ── cards ──────────────────────────────────────────────────────────── */
.pay-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; margin: 0 0 16px; }
.theme-radiant .pay-card { padding: 34px 32px; box-shadow: 0 1px 0 rgba(139, 74, 91, 0.04); }

/* ── the amount, and paying it ──────────────────────────────────────── */
.pay-hero { border-top: 3px solid var(--accent); }
.theme-radiant .pay-hero { border-top-width: 1px; text-align: center; }
.pay-amount { font: var(--display-weight) var(--amount-size)/1.02 var(--display); letter-spacing: var(--display-track);
  margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.pay-amount.is-words { font-size: clamp(30px, 6.5vw, 44px); line-height: 1.1; }
.pay-when { margin: 0; color: var(--soft); font-size: 17px; }
.is-paid { border-top-color: var(--ok); }
.is-paid .pay-amount { color: var(--ok); }
.is-void .pay-amount { color: var(--soft); }

.pay-box { margin: 24px 0 0; }
.btn { font: 500 15px/1 var(--label); cursor: pointer; border-radius: var(--btn-radius);
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); padding: 15px 22px; }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-pay { background: var(--ink); color: var(--paper); font-size: 17px; padding: 18px 30px; width: 100%; max-width: 420px; }
.btn-pay:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.btn-quiet { border-color: var(--line); color: var(--soft); background: transparent; font-size: 13px; padding: 11px 16px; }
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); }
.theme-radiant .btn { text-transform: uppercase; letter-spacing: 0.24em; font-size: 12px; border: 2px solid var(--accent); color: var(--accent); }
.theme-radiant .btn-pay { background: var(--accent); color: #fffdfb; font-size: 13px; padding: 19px 34px; }
.theme-radiant .btn-pay:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }
.theme-radiant .btn-quiet { border-width: 1px; border-color: var(--line); color: var(--soft); font-size: 11px; }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.pay-err { color: var(--bad); margin: 12px 0 0; }
#checkout { margin: 4px -8px 0; min-height: 320px; text-align: left; }

.pay-how { margin: 26px 0 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--accent); text-align: left; }
.theme-radiant .pay-how { border-left-width: 1px; }
.pay-test { background: #fff4c2; color: #5c4a00; border: 1px solid #e3cc6a; padding: 10px 14px; margin: 0 0 16px;
  font: 500 13px/1.4 var(--label); border-radius: var(--radius); }

/* ── the invoice ────────────────────────────────────────────────────── */
.inv { font-size: 15px; }
.inv-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start;
  border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.inv-from { font: var(--display-weight) 20px/1.2 var(--display); letter-spacing: var(--display-track); margin-bottom: 4px; }
.theme-radiant .inv-from { font-size: 26px; color: var(--accent); }
.inv-small { color: var(--soft); font-size: 13.5px; }
.inv-meta { text-align: right; }
.inv-num { font: var(--display-weight) 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.inv-parties { display: flex; justify-content: space-between; gap: 24px; margin: 22px 0 4px; }
.inv-dates { text-align: right; display: grid; gap: 10px; align-content: start; }
.inv-lines { width: 100%; border-collapse: collapse; margin: 24px 0 0; }
.inv-lines th { text-align: left; font: 500 var(--label-size)/1.4 var(--label); letter-spacing: var(--label-track);
  text-transform: uppercase; color: var(--soft); padding: 0 0 9px; border-bottom: 1.5px solid var(--ink); }
.theme-radiant .inv-lines th { border-bottom: 1px solid var(--accent); }
.inv-lines td { padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.inv-lines .num { text-align: right; white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }
.inv-lines tfoot td { border-bottom: 0; padding: 9px 0 0; color: var(--soft); }
.inv-lines tfoot .total td { color: var(--ink); font-weight: 600; font-size: 18px; padding-top: 16px; }
.theme-radiant .inv-lines tfoot .total td { font: 500 24px/1.2 var(--display); }
.inv-memo { margin: 24px 0 0; padding: 14px 16px; background: var(--bg); border-radius: var(--radius); }
.inv-paid { margin: 24px 0 0; color: var(--soft); font-size: 14px; }
.inv-foot { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--soft); font-size: 13px; }

.pay-actions { display: flex; justify-content: flex-end; margin: 4px 0 26px; }
.theme-radiant .pay-actions { justify-content: center; }
.pay-foot { color: var(--soft); font-size: 12.5px; text-align: center; }
.pay-problem { text-align: center; margin-top: 12vh; }
.pay-problem h1 { font: var(--display-weight) 30px/1.2 var(--display); margin: 0 0 10px; }
.pay-problem p { color: var(--soft); margin: 0; }

@media (max-width: 560px) {
  .pay { padding: 18px 12px 44px; }
  .pay-card, .theme-radiant .pay-card { padding: 22px 18px; }
  .inv-head, .inv-parties { flex-direction: column; gap: 14px; }
  .inv-meta, .inv-dates { text-align: left; }
  .inv-lines th:nth-child(2), .inv-lines td:nth-child(2), .inv-lines th:nth-child(3), .inv-lines td:nth-child(3) { display: none; }
  .btn-pay { max-width: none; }
  #checkout { margin: 4px -10px 0; }
}

/* Printing gives the invoice: no button, no form, no coloured page. */
@media print {
  html, body, .pay { background: #ffffff !important; }
  .pay { border: 0 !important; padding: 0; max-width: none; min-height: 0; }
  .pay-box, .pay-actions, .pay-test, .pay-err { display: none !important; }
  .pay-card { border: 0; padding: 0 0 18px; box-shadow: none !important; }
  .pay-hero { border-top: 0; text-align: left !important; }
  .pay-amount { font-size: 32px; }
}