/* KamiVerify - VPN subscriptions.
   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. */

/* ---- providers ------------------------------------------------------- */
.kvv-picks{display:flex;gap:.5625rem;overflow-x:auto;padding:.125rem .125rem .375rem;
  margin-bottom:1rem;-webkit-overflow-scrolling:touch}
.kvv-pick{flex:0 0 auto;min-width:9rem;display:flex;align-items:center;gap:.625rem;
  border:1.5px solid var(--border);border-radius:14px;padding:.6875rem .75rem;
  background:var(--card);color:var(--fg);font:inherit;cursor:pointer;position:relative;
  text-align:left;transition:border-color .14s}
.kvv-pick:hover{border-color:var(--fg)}
.kvv-pick.on{border-color:var(--fg);border-width:2px;padding:.625rem .6875rem}
.kvv-pick:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.kvv-tick{position:absolute;top:.4375rem;right:.4375rem;width:18px;height:18px;
  border-radius:50%;background:var(--invert);color:var(--invert-fg);
  display:grid;place-items:center;font-size:.625rem;font-weight:800}
.kvv-lg{width:1.8125rem;height:1.8125rem;border-radius:9px;flex:none;display:grid;
  place-items:center;font:800 .78125rem/1 var(--sans);color:#fff}
.kvv-lg.big{width:2.75rem;height:2.75rem;border-radius:13px;font-size:1.0625rem}
.kvv-lg.sm{width:2.125rem;height:2.125rem;border-radius:10px;font-size:1rem;
  background:var(--muted);color:var(--fg)}
.kvv-pt b{display:block;font-size:.8125rem;font-weight:750;letter-spacing:-.01em}
.kvv-pt > span{display:block;font-size:.65625rem;color:var(--muted-fg);margin-top:1px}

/* ---- the chosen one -------------------------------------------------- */
.kvv-detail{border:1px solid var(--border);border-radius:16px;overflow:hidden;
  background:var(--card)}
.kvv-dhead{padding:1rem;display:flex;align-items:flex-start;gap:.75rem}
.kvv-dt{min-width:0}
.kvv-dt h2{margin:0;font-size:1.125rem;font-weight:800;letter-spacing:-.02em}
.kvv-dt p{margin:2px 0 0;font-size:.75rem;color:var(--muted-fg)}
.kvv-dev{margin-left:auto;flex:none;font-size:.6875rem;font-weight:700;
  border:1px solid var(--border);border-radius:99px;padding:.3125rem .625rem;
  display:flex;align-items:center;gap:.375rem;white-space:nowrap}
.kvv-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}

.kvv-stats{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.kvv-stat{padding:.75rem .375rem;text-align:center;border-right:1px solid var(--border)}
.kvv-stat:last-child{border-right:0}
.kvv-stat b{display:block;font-size:.9375rem;font-weight:800;
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.kvv-stat span{display:block;font-size:.53125rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-fg);margin-top:3px}

.kvv-feats{padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.kvv-feat{display:flex;gap:.6875rem;align-items:center;background:var(--muted);
  border-radius:12px;padding:.6875rem .75rem}
.kvv-fi{width:1.875rem;height:1.875rem;border-radius:9px;background:var(--card);
  border:1px solid var(--border);display:grid;place-items:center;flex:none;font-size:.875rem}
.kvv-feat b{display:block;font-size:.8125rem;font-weight:750}
.kvv-feat span span{display:block;font-size:.71875rem;color:var(--muted-fg)}

/* ---- buying ---------------------------------------------------------- */
.kvv-buy{border-top:1px solid var(--border);padding:.875rem .75rem .75rem}
.kvv-lbl{display:block;font-size:.59375rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-fg);margin:.75rem 0 .4375rem}
.kvv-lbl:first-child{margin-top:0}

.kvv-durs{display:grid;grid-template-columns:1fr 1fr;gap:.5625rem}
.kvv-dur{border:1px solid var(--border);border-radius:12px;padding:.6875rem;
  text-align:center;font:750 .84375rem/1.3 var(--sans);background:var(--card);
  color:var(--fg);cursor:pointer}
.kvv-dur.on{background:var(--invert);color:var(--invert-fg);border-color:var(--invert)}
.kvv-dur:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.kvv-dur small{display:block;font-size:.65625rem;font-weight:600;opacity:.72;margin-top:2px}

.kvv-phonebox{display:flex;gap:.5rem;align-items:stretch;position:relative}
.kvv-dial{flex:none;display:flex;align-items:center;gap:.3125rem;padding:0 .75rem;
  border:1px solid var(--border);border-radius:11px;background:var(--muted);
  color:var(--fg);font:800 .8125rem/1 var(--sans);cursor:pointer}
.kvv-dial i{font-style:normal;font-size:.5625rem;opacity:.55}
.kvv-dial:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.kvv-inp{flex:1;min-width:0;font:inherit;font-size:.875rem;padding:.6875rem .75rem;
  border:1px solid var(--border);border-radius:11px;background:var(--bg);color:var(--fg)}
.kvv-inp:focus{outline:none;border-color:var(--fg)}

.kvv-sheet{position:absolute;top:calc(100% + .4375rem);left:0;z-index:30;width:17rem;
  max-width:100%;border:1px solid var(--border);border-radius:14px;background:var(--card);
  overflow:hidden;box-shadow:0 16px 40px var(--scrim)}
.kvv-sheet[hidden]{display:none}
.kvv-sh{padding:.625rem .75rem;border-bottom:1px solid var(--border);
  font-size:.59375rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-fg)}
.kvv-srch{display:block;width:100%;border:0;border-bottom:1px solid var(--border);
  padding:.625rem .75rem;font:inherit;font-size:.8125rem;background:var(--bg);color:var(--fg)}
.kvv-srch:focus{outline:none}
#kvvClist{max-height:14.5rem;overflow-y:auto}
.kvv-crow{display:flex;align-items:center;gap:.625rem;width:100%;padding:.5625rem .75rem;
  font:inherit;font-size:.8125rem;color:var(--fg);background:none;border:0;
  border-bottom:1px solid var(--border);cursor:pointer;text-align:left}
.kvv-crow:last-child{border-bottom:0}
.kvv-crow:hover{background:var(--muted)}
.kvv-crow.on{background:var(--muted);font-weight:750}
.kvv-crow .fl{font-size:.9375rem;flex:none}
.kvv-crow .cd{margin-left:auto;font:.75rem/1 var(--mono);color:var(--muted-fg)}
.kvv-cnone{padding:.875rem .75rem;font-size:.78125rem;color:var(--muted-fg)}

.kvv-resolved{margin:.5rem 0 0;font-size:.75rem;color:var(--muted-fg)}
.kvv-resolved b{color:var(--fg);font-family:var(--mono);font-weight:700}

.kvv-pricerow{display:flex;align-items:flex-end;justify-content:space-between;
  gap:.75rem;margin-top:.9375rem}
.kvv-k{font-size:.59375rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-fg)}
.kvv-price{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.kvv-bal{text-align:right}
.kvv-v{font-size:.9375rem;font-weight:800;font-variant-numeric:tabular-nums}
.kvv-v.short{color:var(--bad)}

.kvv-cta{display:block;width:100%;margin-top:.75rem;border:0;border-radius:12px;
  padding:.875rem;font:800 .90625rem/1.3 var(--sans);text-align:center;cursor:pointer;
  background:var(--invert);color:var(--invert-fg)}
.kvv-cta:disabled{cursor:default;opacity:1}
.kvv-cta.topup{background:var(--muted);color:var(--muted-fg);border:1px solid var(--border)}
.kvv-cta:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

.kvv-promise{margin-top:.625rem;display:flex;gap:.5625rem;background:var(--muted);
  border:1px solid var(--border);border-radius:12px;padding:.625rem .75rem;
  font-size:.71875rem;line-height:1.5}
.kvv-promise b{font-weight:750}

/* ---- their own orders ------------------------------------------------ */
.kvv-orders{margin-top:1.5rem}
.kvv-oh{margin-bottom:.625rem;font-size:.9375rem;font-weight:750;letter-spacing:-.015em}
.kvv-orow{border:1px solid var(--border);border-radius:14px;padding:.8125rem .875rem;
  background:var(--card);display:flex;gap:.75rem;align-items:center}
.kvv-orow + .kvv-orow{margin-top:.5625rem}
.kvv-om{flex:1;min-width:0}
.kvv-om b{display:block;font-size:.84375rem;font-weight:750}
.kvv-om > span{display:block;font-size:.71875rem;color:var(--muted-fg);margin-top:2px}
.kvv-tag{flex:none;font-size:.625rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:.25rem .5625rem;border-radius:6px}
.kvv-tag.wait{background:var(--wait-soft);color:var(--wait)}
.kvv-tag.ok{background:var(--ok-soft);color:var(--ok)}
.kvv-tag.ref{background:var(--bad-soft);color:var(--bad)}

.kvv-empty{border:1px solid var(--border);border-radius:16px;padding:1.5rem;
  text-align:center;background:var(--card)}
.kvv-empty b{display:block;font-size:.9375rem;font-weight:750}
.kvv-empty p{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted-fg)}

@media (max-width:420px){
  .kvv-stats{grid-template-columns:repeat(2,1fr)}
  .kvv-stat:nth-child(2){border-right:0}
  .kvv-stat:nth-child(-n+2){border-bottom:1px solid var(--border)}
}