@charset "utf-8";

/* SI30 payment block (10 Nov 2026): the standard way an SI30 page shows how to pay.
   How to use it, the rules and the logo sources: ~/Desktop/SI30/PAYMENTS.md (kept out of site/).
   No scripts and no remote files: every logo is self-hosted in /assets/pay/.
   Loaded after si30.css; uses its band tokens (--hair, --muted, --paper), with fallbacks. */

/* ── accepted marks: one row, every mark the same height ─────────────────────
   32px tall, at least 8px apart (Apple Pay: clear space of a quarter of the mark's height;
   every brand: no mark smaller than another). Height is set, width follows the artwork, so
   nothing is stretched. */

.pay-marks {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pay-marks li { flex: none; margin: 0; line-height: 0; }

.pay-marks img {
  display: block;
  width: auto;
  height: 32px;
  max-width: none;
}

/* compact row, for a second buy button (a sticky or end-of-page row) */
.pay-marks--compact { gap: 8px; margin-top: 10px; }
.pay-marks--compact img { height: 24px; }

.pay-block__note { margin-top: 10px; }

/* ── PayID: built, switched OFF ──────────────────────────────────────────────
   Two keys, both needed to show it: data-payid="on" on .pay-block AND no hidden attribute on
   .pay-payid. Anything else renders nothing, even if this file fails to load (hidden attribute). */

.pay-payid[hidden],
.pay-block:not([data-payid="on"]) .pay-payid { display: none !important; }

.pay-block[data-payid="on"] .pay-payid {
  display: block;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--hair, rgba(244, 246, 247, 0.14));
}

.pay-payid__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pay-payid__h {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--paper, #F4F6F7);
}

/* PayID brandmark: at least 42px (digital minimum), clear space all round, never recoloured */
.pay-payid__mark {
  display: block;
  flex: none;
  width: auto;
  height: 44px;
  max-width: none;
  margin: 4px;
}

.pay-payid__steps {
  margin: 14px 0 0;
  padding-left: 1.4em;
  list-style: decimal;   /* si30.css resets ol to none */
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted, rgba(244, 246, 247, 0.70));
}

.pay-payid__steps li + li { margin-top: 8px; }
.pay-payid__steps li::marker { color: var(--paper, #F4F6F7); font-weight: 600; }

.pay-payid__steps b {
  color: var(--paper, #F4F6F7);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pay-payid__note { margin-top: 12px; }

/* light bands: dark text (use payid-black.png there, see PAYMENTS.md) */
.band--alloy .pay-payid__h,
.band--alloy .pay-payid__steps b,
.band--alloy .pay-payid__steps li::marker { color: var(--ink, #0E1215); }