.bsvpay-amount { font-size: 1.6em; font-weight: 700; letter-spacing: .02em; }
.bsvpay-amount-wrap, .bsvpay-address-wrap { margin: .75em 0; }
.bsvpay-address { font-family: monospace; word-break: break-all; }
.bsvpay-qr { margin: 1em 0; max-width: 240px; }
.bsvpay-qr svg { width: 100%; height: auto; }
.bsvpay-disclaimer { font-style: italic; margin-top: 1em; }
.bsvpay-countdown { font-weight: 600; }
.bsvpay-status-verified { color: #1a7f37; font-weight: 700; }
.bsvpay-status-mismatch { color: #b35900; font-weight: 700; }
.bsvpay-copy { margin-left: .5em; }
.bsvpay-table td, .bsvpay-table th { vertical-align: top; }
.bsvpay-challenge-text { font-family: monospace; white-space: pre; background: #f6f6f6; padding: 1em; overflow-x: auto; }
.bsvpay-note { color: #555; }
.bsvpay-submit-status { border-left: 4px solid #0b5fff; background: #f4f7ff; padding: 1em 1.25em; margin: 0 0 1.5em; }
.bsvpay-submit-status p { margin-top: 0; }
.bsvpay-submit-paid { border-left-color: #1a7f37; background: #f2fbf4; }
.bsvsearch-pay-mc-locked { border-left: 4px solid #b35900; background: #fff8f0; padding: .75em 1em; }

/* ------------------------------------------------------------------
 * 4.9.1 -- two meanings for a notice, and figures you can find.
 *
 *   blocked : you cannot go further until you do something.  Dark orange.
 *   next    : this is your next step.  BLUE, not green -- green already
 *             means DONE on this site in four places (submission fee paid,
 *             access granted, address verified, licence granted), and one
 *             colour may carry one meaning. Blue is what the review-fee
 *             box has used since 3.x, so "next" is already blue here.
 *
 * Colour is never the only signal: the left border and the prefix word
 * carry the meaning on their own, so these read the same in greyscale and
 * to a colour-blind reader. Orange / blue / green also separate far better
 * than orange / green, which is the pair most often confused.
 *
 * ⚠ Two of these notices had NO styling that ever reached the node form
 * before 4.9.1 -- pay.css arrives there only through the addresses
 * library, which the paywall libraries now depend on. The writer's lock
 * notice was plain text on the one form that shows it.
 * ------------------------------------------------------------------ */

.bsvpay-blocked,
.bsvsearch-pay-mc-locked,
.bsvsearch-pay-licence-locked,
.bsvpay-section-hint {
  border-left: 4px solid #b9530f;
  background: #fdf3ec;
  color: #6a3209;
  padding: .75em 1em;
  margin: 0 0 1.25em;
}

/* The prefix word goes only on the two long notices, which begin with a
   sentence. The in-section hint already starts with the word "Locked". */
.bsvpay-blocked::before,
.bsvsearch-pay-mc-locked::before,
.bsvsearch-pay-licence-locked::before {
  content: "Locked: ";
  font-weight: 700;
}

/* "Next step" already exists and is already blue (.bsvpay-submit-status,
   with .bsvpay-submit-paid turning it green when it is done). .bsvpay-next
   is declared so the next notice written has a name to reach for. */
.bsvpay-next {
  border-left: 4px solid #0b5fff;
  background: #f4f7ff;
  color: #16305c;
  padding: .75em 1em;
  margin: 0 0 1.25em;
}

.bsvpay-next::before {
  content: "Next: ";
  font-weight: 700;
}

.bsvpay-section-hint {
  margin: 0 0 1em;
  font-size: .95em;
}

/* --- S5: the figures a writer acts on.
 *
 * Drupal's own %placeholder wraps a value in <em class="placeholder">, so
 * there is no hand-built markup anywhere in this. The net line used to be
 * bold END TO END, which is exactly why the numbers did not stand out --
 * they looked like every word around them. The line goes back to normal
 * weight and the figures carry the weight instead.
 *
 * p.bsvpay-net-line, not .bsvpay-net-line: paywall.css sets bold on that
 * class and loads after this file, so this needs the extra specificity
 * rather than the luck of load order. */
p.bsvpay-net-line {
  font-weight: 400;
}

.bsvpay-net-line .placeholder,
.bsvpay-blocked .placeholder,
.bsvpay-section-hint .placeholder,
.bsvsearch-pay-mc-locked .placeholder,
.bsvsearch-pay-licence-locked .placeholder,
.bsvsearch-pay-earn .placeholder {
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}

/* --- S6: eighteen Topics in a single column waste the width.
 * Both selectors are here on purpose: the class is set on the widget, and
 * whether that lands on the checkboxes container itself or on a fieldset
 * around it depends on the widget's theme wrapper. One of the two matches;
 * neither does any harm. */
.form-checkboxes.bsvpay-topics-grid,
.bsvpay-topics-grid .form-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
  gap: .15em 1.25em;
}

/* --- the three earn sections got no styling of their own in 4.9.0. */
.bsvsearch-pay-earn-intro {
  margin-top: 0;
  color: #4a4f57;
}