/* Card checkout (features.firebaseCheckout; docs/back-office.md). Shipped only while the flag is on, so a default build is byte-identical to one that never had it. */
.who-extra { margin: 6px 0 4px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.who-title { margin: 0 0 6px; font-size: 1.05rem; }
.consent { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 16px; line-height: 1.45; font-weight: 600; }
.consent input { flex: none; margin-top: 3px; width: 22px; height: 22px; }
.consent a { font-weight: 700; }
.pay-card-button { width: 100%; font-size: 16px; gap: 0; padding-inline: 15px; margin-top: 12px; }
.pay-line { text-align: center; margin: 8px 0 0; }
/* ui-fix D3 U5: the next paragraph's links carry 13px of padding-block (D1 T1) that overlapped this line by 13px; leave that much room under it */
.pay-line#sold-by { margin-bottom: 13px; }
.paid-section { max-width: 44rem; }
/* D1 T26: one left edge per page (the .wrap gutter at each width), not a block floating 240px in. */
.paid-section { margin-left: max(48px, calc((100% - var(--wrap)) / 2)); margin-right: auto; }
@media (max-width: 1100px) { .paid-section { margin-left: 32px; } }
@media (max-width: 767px) { .paid-section { margin-left: 18px; } }
.paid-status { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin: 0 0 14px; }
.paid-status[data-state="paid"] { color: var(--accent); }
.paid-actions p { margin: 0 0 14px; }
/* D1 T25: the payment confirmation actions are a row with a gap; the second action is the quiet one. [hidden] must still hide the row. */
#paid-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#paid-actions[hidden] { display: none; }
#paid-actions > p { flex: 1 0 100%; margin: 0; }
#paid-actions .button:not(:only-of-type):last-of-type { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
#paid-actions .button:not(:only-of-type):last-of-type:hover { background: var(--tint); border-color: var(--accent); color: var(--ink); }
@media (max-width: 640px) { #paid-actions .button { width: 100%; } }