/* HD Pay: checkout and receipt pages. Phone first; the organization's color is --hp-accent. */
:root {
	--hp-accent: #136fa5;
	--hp-ink: #111827;
	--hp-n: #1f2937;
	--hp-muted: #6b7280;
	--hp-line: #e5e8ee;
	--hp-bg: #f4f6f9;
	--hp-card: #ffffff;
	--hp-bad: #c4262c;
	--hp-ok: #1f8a4c;
	--hp-r: 16px;
	--hp-sh: 0 1px 2px rgba(17, 24, 39, .05), 0 8px 28px rgba(17, 24, 39, .06);
	--hp-tint: color-mix(in srgb, var(--hp-accent) 10%, #fff);
	--hp-ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.hp { margin: 0; min-height: 100vh; background: var(--hp-bg); color: var(--hp-n); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; display: flex; flex-direction: column; }
.hp a { color: var(--hp-accent); }
.hp-ic { flex: none; vertical-align: -3px; }
.hp-testbar { background: repeating-linear-gradient(-45deg, #fff4d6, #fff4d6 12px, #ffefc2 12px, #ffefc2 24px); color: #7a4b00; font-size: 13px; font-weight: 600; text-align: center; padding: 6px 12px; }
.hp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1040px; width: 100%; margin: 0 auto; padding: 18px 16px 6px; }
.hp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hp-ink) !important; font-weight: 700; font-size: 17px; min-width: 0; }
.hp-brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-brand img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.hp-brand__dot { width: 36px; height: 36px; border-radius: 10px; background: var(--hp-accent); color: #fff; display: grid; place-items: center; font-size: 17px; }
.hp-secure { display: inline-flex; align-items: center; gap: 6px; color: var(--hp-muted); font-size: 13px; white-space: nowrap; }
.hp-main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 10px 16px 32px; }
.hp-foot { text-align: center; font-size: 12.5px; color: var(--hp-muted); padding: 0 16px 26px; }
.hp-foot a { color: var(--hp-muted); }
.hp-card { background: var(--hp-card); border-radius: var(--hp-r); box-shadow: var(--hp-sh); padding: 22px; min-width: 0; }
.hp h1 { font-size: 24px; line-height: 1.2; color: var(--hp-ink); margin: 0 0 6px; letter-spacing: -.01em; }
.hp h2 { font-size: 16px; color: var(--hp-ink); margin: 0 0 12px; }
.hp-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hp-row--c { justify-content: center; }
.hp-sub { color: var(--hp-muted); margin: 0 0 18px; }
.hp-note { font-size: 13px; color: var(--hp-muted); margin: 10px 0 0; }

/* buttons and fields */
.hp-btn { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--hp-accent); color: #fff !important; font: inherit; font-weight: 650; padding: 12px 18px; border-radius: 12px; text-decoration: none; transition: transform .15s var(--hp-ease), box-shadow .2s, background .2s; }
.hp-btn:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--hp-accent) 35%, transparent); }
.hp-btn:active { transform: scale(.98); }
.hp-btn:disabled { opacity: .55; cursor: default; box-shadow: none; transform: none; }
.hp-btn--ghost { background: #fff; color: var(--hp-n) !important; box-shadow: inset 0 0 0 1px var(--hp-line); }
.hp-btn--ghost:hover { box-shadow: inset 0 0 0 1px #cfd5df; }
.hp-btn--sm { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.hp-btn--pay { width: 100%; font-size: 17px; padding: 15px 18px; margin-top: 6px; }
.hp-f { display: block; margin: 0 0 12px; }
.hp-f > span { display: block; font-size: 13px; font-weight: 600; color: var(--hp-n); margin: 0 0 5px; }
.hp-f input, .hp-f textarea { width: 100%; font: inherit; color: var(--hp-ink); background: #fff; border: 1px solid #d6dbe3; border-radius: 11px; padding: 11px 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.hp-f input:focus, .hp-f textarea:focus { border-color: var(--hp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-accent) 18%, transparent); }
.hp-f small { display: block; color: var(--hp-muted); font-size: 12.5px; margin-top: 4px; }
.hp-g2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 560px) { .hp-g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 6px 0 12px; }
.hp-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--hp-accent); }

/* checkout layout */
.hp-co { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 880px) { .hp-co { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; } .hp-co__sum { position: sticky; top: 16px; order: 2; } .hp-co__pay { order: 1; } }
.hp-loading { display: grid; place-items: center; min-height: 40vh; grid-column: 1 / -1; }
.hp-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--hp-accent) 20%, #fff); border-top-color: var(--hp-accent); animation: hp-spin .8s linear infinite; display: inline-block; }
@keyframes hp-spin { to { transform: rotate(360deg); } }

/* summary */
.hp-sum__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; background: none; border: 0; padding: 0; font: inherit; color: var(--hp-ink); cursor: pointer; text-align: left; }
.hp-sum__toggle b { font-size: 18px; }
.hp-sum__toggle .hp-ic { transition: transform .25s var(--hp-ease); }
.hp-sum.is-open .hp-sum__toggle .hp-ic { transform: rotate(180deg); }
.hp-sum__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--hp-ease); }
.hp-sum.is-open .hp-sum__body { grid-template-rows: 1fr; }
.hp-sum__body > div { overflow: hidden; }
@media (min-width: 880px) { .hp-sum__toggle { pointer-events: none; } .hp-sum__toggle .hp-ic { display: none; } .hp-sum__body { grid-template-rows: 1fr; } }
.hp-items { list-style: none; margin: 14px 0 0; padding: 0; }
.hp-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hp-line); animation: hp-in .35s var(--hp-ease) both; }
.hp-item:first-child { border-top: 0; }
.hp-item.is-bad { background: #fff5f5; border-radius: 12px; padding: 12px; margin: 4px -12px; }
@keyframes hp-in { from { opacity: 0; transform: translateY(6px); } }
.hp-item__img { width: 52px; height: 52px; border-radius: 11px; background: var(--hp-tint); background-size: cover; background-position: center; display: grid; place-items: center; color: var(--hp-accent); }
.hp-item__t b { display: block; color: var(--hp-ink); overflow-wrap: anywhere; }
.hp-item__t small { display: block; color: var(--hp-muted); font-size: 13px; overflow-wrap: anywhere; }
.hp-item__err { color: var(--hp-bad) !important; font-weight: 600; }
.hp-item__a { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.hp-item__tools { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hp-qty { display: inline-flex; align-items: center; border: 1px solid var(--hp-line); border-radius: 10px; overflow: hidden; }
.hp-qty button { width: 32px; height: 30px; border: 0; background: #fff; color: var(--hp-n); cursor: pointer; display: grid; place-items: center; }
.hp-qty button:disabled { opacity: .35; cursor: default; }
.hp-qty output { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.hp-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--hp-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hp-link:hover { color: var(--hp-bad); }
.hp-totals { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hp-line); }
.hp-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; margin: 4px 0; }
.hp-total b { font-size: 22px; color: var(--hp-ink); font-variant-numeric: tabular-nums; }
.hp-total--sub { color: var(--hp-muted); }
.hp-total--sub b { font-size: 15px; color: var(--hp-muted); }
.hp-keep { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; margin-top: 12px; text-decoration: none; font-weight: 600; }

/* payment methods */
.hp-step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.hp-step i { width: 24px; height: 24px; border-radius: 50%; background: var(--hp-tint); color: var(--hp-accent); font-style: normal; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.hp-step h2 { margin: 0; }
.hp-sect + .hp-sect { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hp-line); }
.hp-methods { display: grid; gap: 10px; }
.hp-method { display: block; border: 1px solid #d6dbe3; border-radius: 13px; padding: 13px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.hp-method:has(input:checked) { border-color: var(--hp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-accent) 15%, transparent); }
.hp-method__h { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--hp-ink); }
.hp-method__h input { width: 18px; height: 18px; margin: 0; accent-color: var(--hp-accent); }
.hp-method__h .hp-ic { color: var(--hp-accent); margin-left: auto; }
.hp-method__b { margin: 10px 0 0 28px; color: var(--hp-muted); font-size: 13.5px; }
.hp-method__b .hp-f { margin: 8px 0 0; }
#hp-stripe { margin-top: 12px; min-height: 40px; }
.hp-err { background: #fff1f1; color: #8f1d22; border-radius: 11px; padding: 10px 12px; font-size: 14px; margin: 12px 0 0; display: flex; gap: 8px; align-items: flex-start; animation: hp-shake .35s; }
@keyframes hp-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.hp-signin { font-size: 13.5px; color: var(--hp-muted); margin: -2px 0 12px; }
.hp-fine { font-size: 12.5px; color: var(--hp-muted); text-align: center; margin: 10px 0 0; }

/* messages and receipts */
.hp-msg, .hp-receipt { max-width: 620px; margin: 6px auto 0; text-align: center; }
.hp-msg__icon { width: 64px; height: 64px; border-radius: 50%; margin: 4px auto 14px; display: grid; place-items: center; background: var(--hp-tint); color: var(--hp-accent); }
.hp-msg__icon.is-ok { background: var(--hp-ok); color: #fff; animation: hp-pop .5s var(--hp-ease) both; }
.hp-msg__icon.is-ok .hp-ic path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: hp-draw .45s .25s var(--hp-ease) forwards; }
.hp-msg__icon.is-warn { background: #fff1f1; color: var(--hp-bad); }
.hp-msg__icon.is-wait { background: #fff6e5; color: #b86e00; }
@keyframes hp-pop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } }
@keyframes hp-draw { to { stroke-dashoffset: 0; } }
.hp-receipt { text-align: left; }
.hp-receipt h1, .hp-receipt .hp-sub { text-align: center; }
.hp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 12px; border-radius: 12px; background: #f7f8fb; }
.hp-facts div { min-width: 0; }
.hp-facts dt { font-size: 12px; color: var(--hp-muted); }
.hp-facts dd { margin: 0; font-weight: 650; color: var(--hp-ink); overflow-wrap: anywhere; font-size: 14px; }
.hp-lines { list-style: none; margin: 0; padding: 0; }
.hp-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--hp-line); }
.hp-lines__t b { color: var(--hp-ink); overflow-wrap: anywhere; }
.hp-lines__t small { display: block; color: var(--hp-muted); font-size: 13px; }
.hp-lines__a { font-weight: 650; font-variant-numeric: tabular-nums; }
.hp-lines__go { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.hp-tag { display: inline-block !important; background: #fff1f1; color: var(--hp-bad) !important; border-radius: 99px; padding: 0 8px; font-weight: 600; margin-top: 4px; }
.hp-receipt .hp-total { margin-top: 12px; }
.hp-receipt .hp-row { margin-top: 18px; }
.hp-empty { text-align: center; padding: 40px 22px; grid-column: 1 / -1; max-width: 520px; margin: 10px auto 0; }
.hp-empty .hp-msg__icon { color: var(--hp-muted); background: #eef0f4; }
@media (max-width: 420px) { .hp-card { padding: 18px 16px; } .hp h1 { font-size: 21px; } .hp-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hp-secure { font-size: 0; gap: 0; } .hp-secure .hp-ic { width: 18px; height: 18px; } }
@media print { .hp-testbar, .hp-secure, .hp-row, .hp-foot, .hp-lines__go { display: none !important; } body.hp { background: #fff; } .hp-card { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .hp-msg__icon.is-ok .hp-ic path { stroke-dashoffset: 0; } }

/* Subscriptions (HD Pay 1.2): renewal lines, invoices and the manage page. */
.hp-renews { display: inline-flex; align-items: center; gap: 5px; color: var(--hp-accent) !important; font-weight: 600; }
.hp-savenote { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--hp-tint); color: var(--hp-n); font-size: 13px; }
.hp-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-muted); }
.hp-who { margin: 0; line-height: 1.5; }
.hp-co--one { display: block; max-width: 640px; margin: 0 auto; }
.hp-subcard { display: grid; gap: 18px; animation: hp-rise .45s var(--hp-ease); }
.hp-subcard__top { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; }
.hp-subcard__top h1 { margin: 0 0 2px; font-size: 22px; }
.hp-subcard__top .hp-sub { margin: 0; }
.hp-subcard__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--hp-tint); color: var(--hp-accent); }
.hp-subcard .hp-facts { margin: 0; }
.hp-subcard .hp-sect { border-top: 1px solid var(--hp-line); padding-top: 16px; }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: #eef0f4; color: var(--hp-muted); }
.hp-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hp-chip.is-ok { background: #e3f5ea; color: var(--hp-ok); }
.hp-chip.is-warn { background: #fff1d6; color: #9a5b00; }
.hp-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-weight: 600; }
.hp-callout > span { flex: 1; min-width: 160px; }
.hp-callout.is-warn { background: #fff4e0; color: #7a4b00; }
.hp-callout.is-ok { background: #e3f5ea; color: #155c34; animation: hp-rise .35s var(--hp-ease); }
.hp-wallet { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.hp-minicard { position: relative; display: grid; gap: 2px; width: 220px; padding: 16px 18px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #0d2a4f, color-mix(in srgb, var(--hp-accent) 80%, #0d2a4f)); box-shadow: 0 14px 28px -16px rgba(13, 42, 79, .7); overflow: hidden; }
.hp-minicard::after { content: ""; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.hp-minicard b { font-size: 12px; letter-spacing: .12em; }
.hp-minicard span { font-size: 18px; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.hp-minicard small { opacity: .75; font-size: 12px; }
.hp-cardform { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--hp-bg); animation: hp-rise .3s var(--hp-ease); }
.hp-confirm { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: #fff7f5; box-shadow: inset 0 0 0 1px #f6d6cf; animation: hp-rise .3s var(--hp-ease); }
.hp-confirm p { margin: 0; }
.hp-confirm select { width: 100%; padding: 10px 12px; border: 1px solid var(--hp-line); border-radius: 10px; font: inherit; background: #fff; }
.hp-btn--warn { background: #c4462c; }
.hp-link--muted { color: var(--hp-muted) !important; background: none; border: 0; font: inherit; text-decoration: underline; cursor: pointer; padding: 6px; }
@keyframes hp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .hp-subcard__top { grid-template-columns: auto 1fr; } .hp-subcard__top .hp-chip { grid-column: 1 / -1; justify-self: start; } .hp-minicard { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hp-subcard, .hp-callout.is-ok, .hp-cardform, .hp-confirm { animation: none; } }

/* Discount codes (1.3.0) */
.hp-code { margin: 12px 0 0; }
.hp-link--plain { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--hp-accent); font-weight: 600; font-size: 14px; }
.hp-link--plain:hover { color: var(--hp-accent); text-decoration: underline; }
.hp-code__row { display: flex; gap: 8px; }
.hp-code__row input { flex: 1; min-width: 0; font: inherit; text-transform: uppercase; letter-spacing: .04em; color: var(--hp-ink); background: #fff; border: 1px solid #d6dbe3; border-radius: 11px; padding: 9px 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.hp-code__row input:focus { border-color: var(--hp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-accent) 18%, transparent); }
.hp-code__err { display: block; margin-top: 6px; color: var(--hp-bad); font-size: 13px; }
.hp-code.is-on { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--hp-ok) 9%, #fff); color: var(--hp-ok); animation: hp-code-in .35s var(--hp-ease) both; }
.hp-code.is-on > span { flex: 1; min-width: 0; color: var(--hp-n); text-align: left; display: grid; }
.hp-code.is-on b { letter-spacing: .04em; }
.hp-code.is-on small { display: block; color: var(--hp-muted); font-size: 12.5px; }
.hp-total--off, .hp-total--off b { color: var(--hp-ok) !important; }
.hp-total--off span { display: inline-flex; align-items: center; gap: 5px; }
@keyframes hp-code-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hp-code.is-on { animation: none; } }