/* Payments — js/7-pay.js. One SeaPay tokens from bank.css; Night and Day alike. */

/* the five kinds */
.pay-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pay-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 196px; padding: 20px 20px 18px; border-radius: 20px; border: 1px solid var(--sp-line); background: var(--sp-card); color: var(--sp-text); text-align: left; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.pay-tile:hover:not(:disabled) { border-color: var(--sp-rose-line); transform: translateY(-1px); }
.pay-tile:disabled { opacity: 0.55; cursor: default; }
.pay-tile.is-busy { opacity: 0.7; }
.pay-tile-ic { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-rose-soft); color: var(--sp-rose); margin-bottom: 6px; }
.pay-tile-t { font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--sp-ink); }
.pay-tile-d { font-size: 12.5px; color: var(--sp-muted); line-height: 1.5; }
.pay-tile-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sp-rose); }
.pay-tile:disabled .pay-tile-go { color: var(--sp-label); }
.pay-foot { margin-top: 22px; font-size: 12.5px; }
.pay-stop { max-width: 640px; }
.pay-stop .serif, .pay-done .serif { font-size: 26px; color: var(--sp-ink); margin-bottom: 6px; }
.pay-done { max-width: 720px; }

/* a form: sections on the left, what the payment is on the right */
.pay { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pay-form { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pay-form.mass { max-width: 1000px; }
.pay-sec { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; padding: 22px 22px 24px; border-radius: 20px; border: 1px solid var(--sp-line); background: var(--sp-card); }
.pay-cap h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--sp-ink); }
.pay-cap p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sp-muted); }
.pay-body { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pay-form.mass .pay-sec { grid-template-columns: 1fr; gap: 14px; }
.sub-h { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sp-rose); margin-top: 6px; }
.sub-h:first-child { margin-top: 0; }
.pay-to { display: flex; align-items: center; gap: 14px; }
.small { font-size: 12px; margin: 0; line-height: 1.45; }
.pay-side { position: sticky; top: 0; }
.pay-side .card { padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.pay-side .kv { grid-template-columns: 92px minmax(0, 1fr); font-size: 12.5px; padding: 7px 0; }
.pay-side .btn { width: 100%; }
.pay-side-foot p { margin: 0; font-size: 12px; }
.pay-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* bank details found by the IBAN or the SWIFT */
.autofill { border-radius: 14px; border: 1px dashed var(--sp-line); padding: 6px 14px; background: var(--sp-hover); }
.autofill .kv { font-size: 12.5px; }
.note.internal a { color: inherit; font-weight: 600; }

/* amount */
.amt-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.amt-row .field input { font-family: var(--font-display); font-size: 22px; height: 46px; letter-spacing: 0.01em; }
.amt-row .field.sel select { height: 46px; }
.amt-spin { position: absolute; right: 12px; top: 37px; }
.amt-msg:empty { display: none; }
.amt-msg .lnk { font-size: 12px; }
.count-chars { position: absolute; right: 12px; top: 0; font-size: 11px; color: var(--sp-label); }
.cleaned { color: var(--sp-warn); }

/* the exchange rate */
.fx { border-radius: 14px; padding: 12px 14px; background: var(--sp-rose-soft); border: 1px solid var(--sp-rose-line); display: flex; flex-direction: column; gap: 4px; }
.fx-h { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-rose); }
.fx-left { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--sp-dim); }
.fx-left.exp { color: var(--sp-warn); }
.fx-l { font-family: var(--font-display); font-size: 17px; color: var(--sp-ink); }
.fx-note { font-size: 11.5px; color: var(--sp-muted); }
.fx-slot:empty { display: none; }

/* SEPA Instant */
.express { display: flex; gap: 14px; align-items: flex-start; }
.express-t { font-size: 13.5px; font-weight: 600; color: var(--sp-ink); }
.switch { flex: 0 0 auto; position: relative; width: 44px; height: 26px; border-radius: 13px; border: 1px solid var(--sp-line); background: var(--sp-chip); cursor: pointer; padding: 0; transition: background 0.15s ease; }
.switch i { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 10px; background: var(--sp-ink); transition: transform 0.15s ease; }
.switch.on { background: var(--sp-rose); border-color: var(--sp-rose); }
@media (pointer: coarse) { .switch::after { content: ''; position: absolute; inset: -10px -4px; } }
.switch.on i { transform: translateX(18px); background: #fff; }
.switch:disabled { opacity: 0.45; cursor: default; }

/* documents */
.att-list { display: flex; flex-direction: column; gap: 8px; }
.att-list:empty { display: none; }
.att { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--sp-line); background: var(--sp-panel); }
.att > svg { color: var(--sp-rose); flex: 0 0 auto; }
.att-n { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--sp-ink); overflow-wrap: anywhere; }
.att-r { display: flex; align-items: center; gap: 6px; }
.att-r .field.compact select { width: 190px; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; border-radius: 18px; border: 1.5px dashed var(--sp-line); color: var(--sp-dim); text-align: center; cursor: pointer; font-size: 13px; transition: border-color 0.15s ease, background 0.15s ease; }
.drop svg { color: var(--sp-rose); }
.drop:hover, .drop.over, .drop:focus-visible { border-color: var(--sp-rose-line); background: var(--sp-rose-soft); }

/* the slide-in: review, code, result */
.cf { display: flex; flex-direction: column; gap: 14px; }
.rv { border-radius: 16px; border: 1px solid var(--sp-line); background: var(--sp-card); padding: 12px 16px; }
.rv > .lbl { margin-bottom: 4px; }
.rv .kv { font-size: 12.5px; padding: 7px 0; }
.rv-type { border-color: var(--sp-rose-line); }
.rv-type .field input { font-family: var(--font-display); font-size: 22px; height: 48px; }
.cf-path:empty { display: none; }
.ack { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sp-ink); }
.result { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0; }
.result-ic { width: 60px; height: 60px; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; }
.result.ok .result-ic { background: var(--sp-ok-soft); color: var(--sp-ok); }
.result.warn .result-ic { background: var(--sp-warn-soft); color: var(--sp-warn); }
.result.bad .result-ic { background: var(--sp-bad-soft); color: var(--sp-bad); }
.result-t { font-size: 30px; line-height: 1.1; color: var(--sp-ink); }
.result-who { font-size: 14px; color: var(--sp-dim); }
.result-who b { color: var(--sp-ink); font-weight: 600; }
.found:empty { display: none; }

/* mass payment rows */
.mtable { border-radius: 16px; border: 1px solid var(--sp-line); overflow: clip; }
.mrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 140px; gap: 12px; align-items: center; width: 100%; padding: 11px 14px; border: 0; border-top: 1px solid var(--sp-line2); background: transparent; color: var(--sp-dim); text-align: left; font-size: 12.5px; cursor: pointer; }
.mrow:first-child { border-top: 0; }
.mrow:hover { background: var(--sp-hover); }
.mrow.mhead { cursor: default; font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-label); background: transparent; }
.mrow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .r { text-align: right; color: var(--sp-ink); }
.mrow .mono { font-family: var(--mono); font-size: 12px; }
.mrow .mic { color: var(--sp-ok); display: inline-flex; }
.mrow.bad { background: var(--sp-bad-soft); }
.mrow.bad .mic { color: var(--sp-bad); }
.total .fig.dim { color: var(--sp-dim); font-size: 20px; }

@media (max-width: 1100px) {
  .pay { grid-template-columns: 1fr; }
  .pay-side { position: static; }
}
@media (max-width: 860px) {
  .pay-sec { grid-template-columns: 1fr; gap: 12px; padding: 18px 16px 20px; }
  .pay-tiles { grid-template-columns: 1fr; }
  .pay-tile { min-height: 0; }
  .amt-row { grid-template-columns: 92px minmax(0, 1fr); }
  .mrow { grid-template-columns: 22px minmax(0, 1fr) 110px; }
  .mrow > span:nth-child(2), .mrow > span:nth-child(4) { display: none; }
  .att { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px 10px; }
  .att-r { grid-column: 1 / -1; width: auto; }
  .att-r .field.compact { flex: 1 1 auto; }
  .att-r .field.compact select { width: 100%; }
  .pay-actions { flex-direction: column-reverse; }
  .pay-actions .btn { width: 100%; }
}

/* pay from a document (js/8d-paydoc.js) */
.paydoc { display: flex; flex-direction: column; gap: 10px; }
.paydoc .drop[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
.paydoc-status:empty { display: none; }
.paydoc-lines { margin: 6px 0 0; padding-left: 20px; font-size: 12.5px; line-height: 1.6; color: var(--sp-dim); }