/* nimiq.sale app CSS, part 10 — the tail of app.2.css (Pay screen, buyer-trust fingerprint, and
   the tile-appearance picker). Split out ONLY to stay under the repo's 800-line-per-file CI guard.
   Linked in index.html IMMEDIATELY AFTER app.2.css so every rule keeps its cascade position. */

/* ---- Pay screen ---- */
/* The payment-info-line component sits flush to the page-body padding; pull its own
   horizontal margins in to align with the rest of the body content and give it breathing
   room below before the QR. */
.payment-info-line {
  margin: 0 0 4px;
}

.payment-info-line .info-line {
  margin-left: 0;
  margin-right: 0;
}

/* The component's amount color/weight (light-blue, bold) come from payment-info-line.css.
   Size the NIM amount up so it reads as the primary value. */
.payment-info-line .amounts > .amount {
  font-size: 2.75rem;
}

.payment-info-line .amounts .fiat-amount {
  margin-top: 2px;
  color: var(--muted-text);
  font-size: 1.75rem;
  font-weight: 600;
  opacity: 1;
}

.payment-info-line .account .label {
  font-size: 1.75rem;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compress the account row's vertical padding so the line stays short and the
   amount headline + QR + fingerprint all fit the fixed card (the upstream 1.75rem
   vertical padding is generous for a standalone checkout; our card is denser). */
.payment-info-line .account {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.pay-qr-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
}

/* ---- #56: the single-sale buyer-pays column FILLS the card ---- */
/* Every rule below is scoped under .pay-screen. The split buyer-pays surface (#38) shares
   .pay-qr-row and .merchant-fingerprint with this screen and carries its own progress strip and
   share nav, so it keeps the top-anchored stack above verbatim and is pixel-untouched by this block.

   Before this, showPay stacked its blocks from the top of the flex-grow .page-body and nothing
   distributed the leftover, so on the live path (empty footer, no simulated strip) roughly the
   bottom 45% of the card was dead white while the QR sat at a hardcoded 116px. Now the amount line
   and the buyer-trust fingerprint sit at the two ends and the QR region between them takes every
   remaining pixel, which is also what turns the QR size into a measurement (public/js/pay-fit.js).

   The body has to be the flex CONTAINER: it takes its own height from flex-grow, and on a phone the
   card itself is `height: auto` between a min and a max (app.5.css), so a percentage height on a
   child of the body does NOT resolve and a `min-height: 100%` column silently content-sizes
   (measured: a 142px QR region inside a 411px body). Same move #50 made for .checkout-panel. */
.page-body:has(> .pay-screen) {
  display: flex;
  flex-direction: column;
}

.pay-screen {
  display: flex;
  flex-direction: column;
  /* Fills the body; content taller than the card grows past it and the body scrolls. */
  flex: 1 0 auto;
}

/* The two ends keep their intrinsic height, and the QR region's margin is the ONLY gap between the
   three blocks, so the minimum breathing room is stated once. In the roomy case the flex centring
   inside the region supplies the rest. */
.pay-screen .payment-info-line,
.pay-screen .merchant-fingerprint {
  flex: 0 0 auto;
  margin: 0;
}

.pay-screen .pay-status-live {
  flex: 0 0 auto;
}

/* The hero region: takes all remaining height and centres the QR + its caption in it, so any
   leftover reads as balanced breathing room around the thing a customer scans, never as a dead
   band under the address. It never SHRINKS: where the card cannot seat the QR floor the column
   grows and the body scrolls (the #50 rule), rather than clipping or hiding anything. */
.pay-screen .pay-qr-row {
  flex: 1 0 auto;
  justify-content: center;
  margin: 12px 0;
}

/* #61: on a TALL phone the QR is capped by the card's WIDTH, so the region above cannot spend the
   leftover height on a bigger square and instead centres a 348px QR inside a ~594px region: two
   ~130px voids that read as a broken screen, which is exactly what Andrew reported at 440px.

   watchPayQr sets this class (and flex-grow:0 on the region) only when the width is what is
   binding. The surplus then belongs to the COLUMN, which spreads it evenly above, between and
   below the three blocks, so no single gap is large enough to read as a hole. On a short phone the
   width is NOT binding, the class is absent, and the region keeps taking every pixel exactly as
   #56 intended, so nothing about those sizes changes. */
.pay-screen.pay-screen--distribute {
  justify-content: space-evenly;
}

/* The row's own 8px gap is then the only space between the QR and its caption, which is what lets
   the measured caption height compute an exact square. */
.pay-screen .pay-scan-line {
  margin: 0;
}

/* Payment-status live region: zero-height on the normal path (no layout shift); spaced only when
   it holds a banner (the offline/reconnect state). */
.pay-status-live:empty {
  display: none;
}
.pay-status-live:not(:empty) {
  margin-top: 12px;
}

.pay-qr-row .qr-code {
  display: block;
}

.pay-scan-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}

.pay-instruction {
  text-align: center;
  color: var(--muted-text);
  font-size: 2rem;
  margin: 0;
}

/* small "Accepts Nimiq" mark (pay screen only) */
.accepts-nimiq {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.accepts-nimiq .accepts-hex {
  display: inline-flex;
  line-height: 0;
}

.accepts-nimiq .accepts-text {
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--muted-text);
}

/* ---- Buyer-trust merchant fingerprint (pay screen) ---- */
.merchant-fingerprint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
}

.merchant-fingerprint .fingerprint-row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

.merchant-fingerprint .identicon {
  flex: 0 0 auto;
}

/* the chunked address wraps at the 4-char block boundaries, never mid-chunk */
.merchant-fingerprint .address-display {
  font-size: 1.375rem;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: normal;
}

.merchant-fingerprint .fingerprint-caption {
  font-size: 1.375rem;
  color: var(--muted-text);
  margin: 0;
  text-align: center;
}

.pay-detail {
  margin-top: 20px;
}

.pay-detail .detail-label {
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--muted-text);
  margin: 0 0 4px;
}

.pay-detail .copyable {
  font-family: 'Fira Mono', monospace;
  font-size: 1.625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 10px 12px;
}

/* ticker spacing: a tight, consistent gap before the NIM ticker instead of a full-width
   Fira-Mono space (the amount span is mono, so a literal space rendered too wide). */
.amount .currency {
  margin-left: 0.4em;
}

/* The Review row's tile when a colour is set: the swatch IS the content, so no plus glyph. */
.row-photo.has-color {
  border-style: solid;
  border-color: transparent;
}

/* The Sell tile's colour block reuses the photo thumb's box exactly, so a coloured tile and a
   photographed one measure identically and the #51 density numbers do not move. */
.tap-thumb-color {
  display: block;
}

/* ---- the picker itself ---- */
/* FIVE across, two rows. Six across put the last swatch hard against the card's padding and clipped
   it (Andrew: "the red is cut off"): a 390px phone card leaves ~280px inside its padding, and six
   44px targets plus five gaps needs more than that. Five fits with room, and ten colours divide into
   two even rows. min-width:0 on the cells lets them shrink rather than overflow on a 320px phone. */
.tile-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 4px;
}

.tile-swatch {
  aspect-ratio: 1;
  min-height: 44px; /* WCAG 2.5.5 tap floor */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  /* Resting ring is the same hairline the catalog tiles use, so an unselected swatch reads as a
     control rather than a floating blob. */
  box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.08);
}

/* Selection is a full ring in the app's own action colour — the deliberate feedback ring the brand
   rules allow on a SELECTED interactive element, not a decorative one-sided accent. */
.tile-swatch.selected {
  box-shadow: 0 0 0 3px var(--nimiq-light-blue);
}

@media (hover: hover) {
  .tile-swatch:hover {
    box-shadow: inset 0 0 0 2px rgba(31, 35, 72, 0.25);
  }
  .tile-swatch.selected:hover {
    box-shadow: 0 0 0 3px var(--nimiq-light-blue);
  }
}

/* "Use a photo" is the PRIMARY action here (Andrew: "use a photo should be the primary thing
   anyways"), so it is a full-width pill on its own line with the quieter actions beneath it, rather
   than one of three equal small pills. */
.tile-appearance-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.tile-appearance-actions .nq-button {
  min-width: 0;
  width: 100%;
  margin: 0;
}

.tile-appearance-secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}