/* Scoped revision of the supplied payment-method annotations. Registration stays unchanged. */
.payment-section { display: grid; gap: 8px; margin-bottom: 16px; }
.payment-section h2 { margin: 0; }
.method-demo-label { color: var(--brand-muted); font: 10px/1.4 Arial, sans-serif; }
.payment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.payment-method {
  position: relative; min-width: 0; min-height: 60px; padding: 23px 8px 10px;
  color: var(--brand-text); border: 1px solid transparent; border-radius: 5px;
  background: var(--brand-field); cursor: pointer; text-align: left;
  font-size: 13px; line-height: 1.2;
}
.payment-method:hover { border-color: var(--brand-muted); }
.payment-method[aria-pressed="true"] { border-color: var(--brand-cyan); background: #252d4e; }
.method-badge { position: absolute; top: 5px; right: 7px; color: var(--brand-muted); font: 9px/1.2 Arial, sans-serif; }
.payment-method[data-type="crypto"] .method-badge { color: var(--brand-cyan); }
.payment-method.desktop-method { display: none; }
.withdrawal-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.text-action { padding: 0 2px; min-height: 26px; border: 0; background: transparent; color: var(--brand-cyan); cursor: pointer; font-size: 11px; }
.qr-page-heading { display: flex; justify-content: space-between; align-items: center; }
.qr-page-heading strong { font-size: 19px; }
.deposit-value-grid { grid-template-columns: minmax(0, 1.6fr) minmax(90px, 0.7fr); }
#legalAmount, #cryptoDepositAmount, #legalWithdrawAmount, #cryptoWithdrawAmount { font-size: 30px; height: 66px; font-weight: 600; }
.deposit-value-grid .select-shell { min-height: 66px; }
.deposit-value-grid .select-shell select { height: 66px; }
.input-shell:has(#legalAmount), .input-shell:has(#cryptoDepositAmount),
.input-shell:has(#legalWithdrawAmount), .input-shell:has(#cryptoWithdrawAmount) { min-height: 68px; }
.input-shell:has(#legalAmount) .currency-prefix, .input-shell:has(#cryptoDepositAmount) .currency-prefix,
.input-shell:has(#legalWithdrawAmount) .currency-prefix, .input-shell:has(#cryptoWithdrawAmount) .currency-prefix { font-size: 12px; }
.channel-panel { gap: 10px; }
.quick-grid .quick-amount { min-height: 44px; }
.payment-section .field-label-row { align-items: center; }
/* Mobile prototype only: a wide browser previews the same phone layout. */
.review-shell { width: min(100%, 426px); }
.review-header { width: min(100%, 390px); }
.review-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.phone-canvas { width: 390px; max-width: 100%; height: 844px; flex-shrink: 0; }
body.embed .phone-canvas { width: min(390px, 100%); height: min(844px, 100dvh); }
@media (max-width: 520px) {
  /* On a phone, use its viewport below the prototype's screen-switching bar. */
  .review-shell { height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
  .review-header { flex: 0 0 auto; margin-bottom: 4px; }
  .review-stage { min-height: 0; flex: 1 1 auto; width: 100%; padding: 0; }
  .phone-canvas { width: min(390px, 100%); height: 100%; min-height: 0; }
  body.embed .phone-canvas { height: 100dvh; }
}