/* Banks & file formats: the format picker (FormatPicker in src/views/payment.tsx). */

.fmt-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem 1.25rem; align-items: start; }
.fmt-group { min-width: 0; }
.fmt-group > .eyebrow { margin-bottom: .45rem; }
.fmt-bank + .fmt-bank { margin-top: .7rem; }
.fmt-bank-name { margin: 0 0 .3rem; font-size: .8rem; font-weight: 600; color: var(--text); }

/* A segmented list: one rounded box, rows split by hairlines. */
.fmt-items { list-style: none; margin: 0; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.fmt-items li + li { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.fmt-items li:has(.on) + li, .fmt-items li + li:has(.on) { border-top-color: transparent; }

.fmt-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: 7px 10px; border-radius: 9px; color: var(--text); font-size: .88rem; font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.fmt-item:hover { background: color-mix(in srgb, var(--text) 5%, transparent); text-decoration: none; }
.fmt-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
/* Selected: the same accent wash as the active sidebar item. */
.fmt-item.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.fmt-item.off .fmt-name { color: var(--text-2); }

.fmt-name { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; line-height: 1.3; }
.fmt-meta { display: inline-flex; align-items: center; gap: .35rem; flex: none; margin-left: auto; }
.fmt-meta .badge { font-size: .72rem; padding: .15rem .5rem; }
.fmt-ext { font: 600 .68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--text-2);
  padding: .22rem .4rem; border: 1px solid var(--border); border-radius: 6px; }

/* The five-step flow at the top of /admin/banks (BankFlow in src/views/payment.tsx). */
.bank-flow { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; counter-reset: bf; }
.bank-flow li { position: relative; display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .8rem .9rem;
  border: 1px solid var(--border); border-radius: 14px; background: var(--glass); backdrop-filter: blur(12px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.bank-flow li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
/* Arrow between steps. */
.bank-flow li + li::before { content: ''; position: absolute; left: -.75rem; top: 50%; width: .75rem; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, var(--border), color-mix(in srgb, var(--accent) 55%, transparent)); }
.bank-flow li + li::after { content: ''; position: absolute; left: -5px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-right: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); transform: rotate(45deg); }
.bf-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.bf-ico svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bank-flow li:last-child .bf-ico { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.bf-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bf-n { font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.bf-txt strong { font-size: .88rem; color: var(--text); }
.bf-txt small { font-size: .74rem; color: var(--text-2); }
@media (max-width: 1100px) { .bf-txt small { display: none; } }
@media (max-width: 760px) {
  .bank-flow { grid-template-columns: 1fr; gap: .5rem; }
  .bank-flow li { padding: .6rem .8rem; }
  .bf-txt small { display: block; }
  .bank-flow li + li::before { left: 34px; top: -.5rem; width: 2px; height: .5rem; margin: 0; background: color-mix(in srgb, var(--accent) 45%, transparent); }
  .bank-flow li + li::after { display: none; }
}