/* Where we pay a client: a bank account or an M-Pesa phone number.
   partials/payout-fields — used by sign-up and Finance → Payment accounts. */
.po-methods { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.po-method { position: relative; margin: 0; cursor: pointer; }
.po-method input { position: absolute; opacity: 0; pointer-events: none; }
.po-method-body {
    display: flex; align-items: center; gap: .65rem; height: 100%;
    padding: .75rem .8rem; border: 1.5px solid var(--tuqio-border); border-radius: 12px;
    background: var(--tuqio-card, #fff); transition: border-color .15s, background-color .15s;
}
.po-method-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 1rem; }
.po-method-icon.is-mpesa { background: var(--tuqio-success-dark); }
.po-method-icon.is-bank { background: var(--tuqio-navy); }
.po-method-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.po-method-text b { font-size: .88rem; color: var(--tuqio-heading, var(--tuqio-navy)); }
.po-method-text small { font-size: .72rem; color: var(--tuqio-muted); }
.po-method:hover .po-method-body { border-color: var(--tuqio-navy); }
.po-method input:focus-visible + .po-method-body { box-shadow: 0 0 0 3px var(--tuqio-navy-soft, rgba(30, 21, 72, .15)); }
.po-method input:checked + .po-method-body { border-color: var(--tuqio-navy); background: var(--tuqio-surface); box-shadow: inset 0 0 0 1px var(--tuqio-navy); }

.po-field { margin-bottom: 1rem; }
.po-label { display: block; font-size: .8rem; font-weight: 600; color: var(--tuqio-text); margin-bottom: .35rem; }
.po-label small { font-weight: 400; color: var(--tuqio-muted); }
.po-hint { font-size: .75rem; color: var(--tuqio-muted); margin-top: .3rem; }
.po-error { font-size: .78rem; color: var(--tuqio-danger-dark, #b91c1c); margin-top: .3rem; }
.po-field.has-error .form-control { border-color: var(--tuqio-danger); }
.po-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 400px) { .po-row { grid-template-columns: 1fr; } }
.po [hidden] { display: none !important; }

.po-note { display: flex; gap: .55rem; align-items: flex-start; font-size: .76rem; color: var(--tuqio-muted); padding: .65rem .75rem; border-radius: 10px; background: var(--tuqio-surface); }
.po-note i { color: var(--tuqio-navy); margin-top: .1rem; }
@media (max-width: 575.98px) { .po .form-control { font-size: 16px; } }

/* The bank list (Select2) sized like the other fields. */
.po .select2-container--bootstrap-5 .select2-selection { min-height: 42px; border-radius: 6px; border-color: var(--tuqio-border); display: flex; align-items: center; }
.po .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { padding-left: .8rem; font-size: .9rem; color: var(--tuqio-text); }
.po .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--tuqio-muted); }
.po .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.po .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--tuqio-navy); box-shadow: 0 0 0 3px var(--tuqio-navy-soft, rgba(30, 21, 72, .15)); }
.po .po-field.has-error .select2-selection { border-color: var(--tuqio-danger); }
.po-bank-dropdown .select2-results__options { max-height: 260px; }
@media (max-width: 575.98px) {
    .po .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
    .po-bank-dropdown .select2-search__field { font-size: 16px; }
}