/* KamiVerify - add funds, country first.
   Loaded after kv_dashboard_bw.css and kv_sms_bw.css. Every colour comes from
   tokens those already define, so light, dark and the system default are
   handled without a rule here knowing which is in force. */


/* ---- steps ---------------------------------------------------------- */
.kvd-step{margin-bottom:1.5rem}
.kvd-step[hidden]{display:none}
.kvd-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.625rem}
.kvd-num{width:1.375rem;height:1.375rem;border-radius:50%;flex:none;display:grid;
  place-items:center;font:750 .6875rem/1 var(--mono);background:var(--invert);color:var(--invert-fg)}
.kvd-num.done{background:var(--ok);color:#fff}
.kvd-title{font-size:.9375rem;font-weight:720;letter-spacing:-.015em}
.kvd-edit{margin-left:auto;font:650 .78125rem/1 var(--sans);color:var(--muted-fg);background:none;
  border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:.25rem}
.kvd-edit:hover{color:var(--fg)}
.kvd-edit[hidden]{display:none}

.kvd-chosen{display:flex;align-items:center;gap:.75rem;border:1px solid var(--border);
  border-radius:var(--radius);padding:.625rem .75rem;background:var(--muted)}
.kvd-chosen .fl{font-size:1.375rem;line-height:1;flex:none}
.kvd-chosen .t{display:block;font-size:.9375rem;font-weight:700}
.kvd-chosen .s{display:block;font-size:.75rem;color:var(--muted-fg);margin-top:1px}


/* ---- search + country rows ------------------------------------------ */
.kvd-search{display:flex;align-items:center;gap:.5rem;border:1.5px solid var(--border);
  background:var(--card);border-radius:var(--radius);padding:.6875rem .75rem;margin-bottom:.75rem}
.kvd-search:focus-within{border-color:var(--fg)}
.kvd-search > svg{width:17px;height:17px;flex:none;color:var(--muted-fg)}
.kvd-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);
  font:inherit;font-size:.9375rem;padding:0;outline:none}
.kvd-search input::placeholder{color:var(--muted-fg)}
.kvd-search input::-webkit-search-cancel-button{display:none}

.kvd-rows{display:flex;flex-direction:column;gap:.4375rem}

.kvd-row{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;font:inherit;
  color:var(--fg);border:1.5px solid var(--border);background:var(--card);
  border-radius:var(--radius);padding:.6875rem .75rem;cursor:pointer;transition:border-color .14s}
.kvd-row:hover{border-color:var(--fg)}
.kvd-row:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
/* [hidden] is display:none in the UA sheet and the rule above sets display:flex,
   which wins. Without this the search filter hides nothing. */
.kvd-row[hidden]{display:none}
.kvd-row.off{cursor:not-allowed;opacity:.6}
.kvd-row.off:hover{border-color:var(--border)}

.kvd-flag{font-size:1.5rem;line-height:1;flex:none;width:1.875rem;text-align:center}
.kvd-main{flex:1;min-width:0}
.kvd-name{font-size:.9375rem;font-weight:700;letter-spacing:-.01em}
.kvd-ops-line{font-size:.78125rem;color:var(--muted-fg);margin-top:1px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.kvd-badge{flex:none;font:700 .6875rem/1 var(--mono);letter-spacing:.05em;padding:.3125rem .4375rem;
  border-radius:5px;background:var(--invert);color:var(--invert-fg)}
.kvd-row.off .kvd-badge{background:var(--wait-soft);color:var(--wait)}
.kvd-chev{flex:none;width:16px;height:16px;color:var(--muted-fg)}

.kvd-none{text-align:center;color:var(--muted-fg);font-size:.875rem;padding:1.25rem 0;margin:0}
.kvd-none[hidden]{display:none}
.kvd-soon{margin:.875rem 0 0;font-size:.8125rem;line-height:1.6;color:var(--muted-fg);
  border-top:1px solid var(--border);padding-top:.75rem}
.kvd-soon[hidden]{display:none}


/* ---- fields ---------------------------------------------------------- */
.kvd-field{margin-bottom:1rem}
.kvd-lbl{display:block;font:650 .78125rem/1 var(--sans);color:var(--muted-fg);margin-bottom:.375rem}

.kvd-inp{display:block;width:100%;min-width:0;font:inherit;font-size:.9375rem;color:var(--fg);
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:.6875rem .75rem}
.kvd-inp:focus{outline:none;border-color:var(--fg)}

.kvd-amtwrap{display:flex;gap:.4375rem}
.kvd-cur{flex:none;display:grid;place-items:center;padding:0 .75rem;border-radius:var(--radius);
  border:1.5px solid var(--border);background:var(--muted);color:var(--muted-fg);
  font:700 .8125rem/1 var(--mono)}

.kvd-quick{display:flex;gap:.375rem;flex-wrap:wrap;margin-top:.5rem}
.kvd-qb{font:650 .78125rem/1 var(--sans);padding:.4375rem .625rem;border-radius:99px;
  border:1px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer}
.kvd-qb:hover{border-color:var(--fg)}

.kvd-conv{margin:.5rem 0 0;font-size:.78125rem;color:var(--muted-fg)}
.kvd-conv b{color:var(--fg);font-variant-numeric:tabular-nums}
.kvd-conv:empty{display:none}

.kvd-ops{display:grid;gap:.4375rem;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr))}
.kvd-op{display:flex;align-items:center;justify-content:center;padding:.6875rem .5rem;
  border:1.5px solid var(--border);background:var(--card);border-radius:var(--radius);
  font:650 .875rem/1 var(--sans);color:var(--fg);cursor:pointer}
.kvd-op:hover{border-color:var(--fg)}
.kvd-op[aria-pressed="true"]{border-color:var(--fg);background:var(--muted)}

.kvd-phone{display:flex;gap:.4375rem}
.kvd-dial{flex:none;display:grid;place-items:center;padding:0 .75rem;border-radius:var(--radius);
  border:1.5px solid var(--border);background:var(--muted);color:var(--muted-fg);
  font:700 .875rem/1 var(--mono)}
.kvd-hint{margin:.375rem 0 0;font-size:.75rem;color:var(--muted-fg)}

.kvd-note{margin:0;padding:.6875rem .8125rem;border-radius:var(--radius);
  background:var(--wait-soft);color:var(--wait);font-size:.8125rem;line-height:1.55}


/* ---- nothing configured ---- */
.kvd-empty{border:1.5px dashed var(--border);border-radius:var(--radius);
  padding:2rem 1.25rem;text-align:center}
.kvd-emptyt{margin:0 0 .375rem;font-size:.9375rem;font-weight:700;letter-spacing:-.01em}
.kvd-emptyd{margin:0;font-size:.84375rem;line-height:1.55;color:var(--muted-fg)}


/* ---- pay bar ---------------------------------------------------------- */
.kvd-paybar{position:sticky;bottom:0;z-index:20;margin:0 -1rem;
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background:var(--bg);border-top:1px solid var(--border);
  display:flex;align-items:center;gap:.875rem}
.kvd-paybar[hidden]{display:none}
.kvd-bb{flex:1;min-width:0}
.kvd-bbk{display:block;font:700 8.5px/1 var(--mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-fg)}
.kvd-bbv{display:block;font-size:1.125rem;font-weight:800;letter-spacing:-.025em;margin-top:3px;
  font-variant-numeric:tabular-nums}
.kvd-bbs{display:block;font-size:.75rem;color:var(--muted-fg);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ---- waiting for the PIN ---------------------------------------------
   There is nowhere to send the customer: the prompt is already on their
   handset. So the page waits with them rather than redirecting. */
.kvd-wait{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;padding:1rem}
.kvd-wait[hidden]{display:none}
.kvd-wait-bd{position:absolute;inset:0;background:var(--scrim)}
.kvd-wait-in{position:relative;width:100%;max-width:22rem;background:var(--card);color:var(--fg);
  border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.25rem 1.125rem;
  text-align:center}
.kvd-wait-in h3{margin:.875rem 0 .5rem;font-size:1.0625rem;font-weight:760;letter-spacing:-.02em}
.kvd-wait-in p{margin:0;font-size:.875rem;line-height:1.55;color:var(--muted-fg)}
.kvd-waitsub{margin-top:.5rem !important;font-size:.78125rem !important}
.kvd-wait-acts{margin-top:1.125rem}
.kvd-wait-acts .btn{width:100%;justify-content:center;text-align:center}

.kvd-spin{width:2.25rem;height:2.25rem;margin:0 auto;border-radius:50%;
  border:2.5px solid var(--border);border-top-color:var(--fg);animation:kvd-turn .8s linear infinite}
.kvd-spin.ok{border-color:var(--ok);animation:none;position:relative}
.kvd-spin.ok::after{content:"";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--ok);font:800 1.125rem/2.25rem var(--sans);content:"\2713"}
.kvd-spin.bad{border-color:var(--bad);animation:none;position:relative}
.kvd-spin.bad::after{content:"\2715";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--bad);font:800 1.125rem/2.25rem var(--sans)}

@keyframes kvd-turn{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .kvd-spin{animation:none}
  .kvd-row{transition:none}
}

/* Build marker: kv_deposit_bw.css 20260827a */


/* ---- tabs -------------------------------------------------------------
   Three of them, and they are the routing: the home country is served by a
   different processor from everywhere else, so it gets its own tab. That
   makes the split visible without naming either company. */
.kvd-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.25rem;padding:.25rem;
  background:var(--muted);border-radius:99px;margin-bottom:1.25rem}
.kvd-tab{display:flex;flex-direction:column;align-items:center;gap:.1875rem;
  padding:.5625rem .375rem;border:0;border-radius:99px;background:transparent;
  color:var(--muted-fg);font:650 .8125rem/1.15 var(--sans);cursor:pointer;text-align:center}
.kvd-tab svg{width:16px;height:16px}
.kvd-tab[aria-selected="true"]{background:var(--invert);color:var(--invert-fg)}
.kvd-tab:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* ---- step rail ---- */
.kvd-steps{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem}
.kvd-steps[hidden]{display:none}
.kvd-st{display:flex;align-items:center;gap:.4375rem;font:650 .8125rem/1 var(--sans);
  color:var(--muted-fg)}
.kvd-st .n{width:1.25rem;height:1.25rem;border-radius:50%;display:grid;place-items:center;
  font:750 .625rem/1 var(--mono);background:var(--muted);color:var(--muted-fg)}
.kvd-st.on{color:var(--fg)}
.kvd-st.on .n{background:var(--invert);color:var(--invert-fg)}
.kvd-st.done .n{background:var(--ok);color:#fff}
.kvd-stline{flex:1;height:1px;background:var(--border)}

/* ---- the "where are you paying from" card ---- */
.kvd-prompt{display:flex;gap:.875rem;align-items:flex-start;border:1px solid var(--border);
  background:var(--card);border-radius:var(--radius);padding:.875rem;margin-bottom:1.125rem}
.kvd-pic{width:2.25rem;height:2.25rem;border-radius:.625rem;flex:none;display:grid;
  place-items:center;background:var(--muted);color:var(--fg)}
.kvd-pic svg{width:19px;height:19px}
.kvd-prompt b{display:block;font-size:.9375rem;font-weight:720;letter-spacing:-.015em}
.kvd-prompt > span > span{display:block;font-size:.8125rem;color:var(--muted-fg);
  margin-top:.1875rem;line-height:1.5}

/* ---- amount ---- */
.kvd-amtbox{border:1.5px solid var(--border);background:var(--card);border-radius:var(--radius);
  padding:.875rem;margin-bottom:1.25rem}
.kvd-amtin{display:flex;align-items:baseline;gap:.5rem;border-bottom:1px solid var(--border);
  padding-bottom:.75rem;margin-bottom:.75rem}
.kvd-amtin .c{font:700 .8125rem/1 var(--mono);color:var(--muted-fg);flex:none}
.kvd-amtin input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);
  font:800 1.75rem/1.1 var(--sans);letter-spacing:-.03em;outline:none;padding:0;
  font-variant-numeric:tabular-nums}
.kvd-amtin input::placeholder{color:var(--border)}

.kvd-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:.4375rem}
.kvd-chip{font:700 .84375rem/1 var(--sans);padding:.6875rem .25rem;border-radius:.625rem;
  border:1px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer;
  font-variant-numeric:tabular-nums}
.kvd-chip:hover{border-color:var(--fg)}
.kvd-chip[aria-pressed="true"]{background:var(--invert);color:var(--invert-fg);
  border-color:var(--invert)}

/* ---- phone ---- */
.kvd-phonebox{border:1.5px solid var(--border);background:var(--card);border-radius:var(--radius);
  display:flex;align-items:center;overflow:hidden;margin-bottom:.5rem}
.kvd-phonebox:focus-within{border-color:var(--fg)}
.kvd-phonebox .d{flex:none;padding:.8125rem .75rem;font:700 .9375rem/1 var(--mono);
  color:var(--muted-fg);border-right:1px solid var(--border)}
.kvd-phonebox input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);
  font:650 .9375rem/1 var(--sans);padding:.8125rem .75rem;outline:none;letter-spacing:.02em}

/* ---- review ---- */
.kvd-review{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;
  margin-bottom:1rem}
.kvd-rrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem .875rem;border-bottom:1px solid var(--border);font-size:.875rem}
.kvd-rrow:last-child{border-bottom:0}
.kvd-rrow .k{color:var(--muted-fg);font:700 .6875rem/1.4 var(--mono);text-transform:uppercase;
  letter-spacing:.08em}
.kvd-rrow .v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.kvd-rrow.total{background:var(--muted)}
.kvd-rrow.total .v{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em}

.kvd-note.info{background:var(--muted);color:var(--muted-fg)}
.kvd-chg{margin-left:auto;font:700 .8125rem/1 var(--sans);color:var(--fg);background:none;
  border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:.25rem}
.kvd-chg[hidden]{display:none}
.kvd-fl{width:2.25rem;height:2.25rem;border-radius:.5rem;background:var(--muted);flex:none;
  display:grid;place-items:center;font-size:1.25rem}

/* ---- admin-only diagnostic --------------------------------------------
   Shown to nobody but an admin, and only while the page has nothing to
   show. An empty list has several causes that look identical from outside,
   and guessing between them is expensive. */
.kvd-diag{border:1.5px dashed var(--border);border-radius:var(--radius);padding:.875rem;
  margin-bottom:1.25rem;font-size:.8125rem}
.kvd-diag > b{display:block;font-size:.875rem;font-weight:750;margin-bottom:.5rem}
.kvd-diag > b span{font-weight:600;color:var(--muted-fg)}
.kvd-diag table{width:100%;border-collapse:collapse}
.kvd-diag th{text-align:left;font:700 .625rem/1 var(--mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-fg);padding:0 .5rem .375rem 0}
.kvd-diag td{padding:.3125rem .5rem .3125rem 0;border-top:1px solid var(--border);
  vertical-align:top;line-height:1.5}
.kvd-diag td.m{font-family:var(--mono);font-size:.75rem}
.kvd-diag td:first-child{width:1.25rem;font-weight:800}
.kvd-diag em{display:block;font-style:normal;color:var(--bad);font-size:.75rem;margin-top:.1875rem}
.kvd-diagnote{margin:.5rem 0 0;color:var(--muted-fg);font-size:.75rem;line-height:1.55}

/* The same panel when nothing is actually wrong. Green, and quieter, so a
   working page does not look like a warning. */
.kvd-diag.ok { border-color: #1e6b3a; background: #0d1a12; }
.kvd-diag.ok > b { color: #4ade80; }

/* The minimum, said before anything is typed.
   Quiet by default; the input's own invalid state does the shouting. */
.kvd-min {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--kvd-dim, #9aa0a6);
}
.kvd-chip.min { position: relative; padding-right: 34px; }
.kvd-chip.min em {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--kvd-chipmin-bg, rgba(255,255,255,.14));
  color: var(--kvd-chipmin-fg, inherit);
}
.kvd-chip[aria-pressed="true"].min em {
  background: rgba(0,0,0,.16);
}

/* Below the minimum: the box itself is marked, so the number being complained
   about is the one the customer is looking at. */
.kvd-amtin.bad {
  border-color: var(--kvd-warn-line, #4a3a10);
  background: var(--kvd-warn-bg, #2a2007);
}
.kvd-short {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kvd-warn, #f0b849);
}
.kvd-short::before { content: "\26A0"; margin-right: 6px; }