/* ==========================================================================
   KamiVerify — SMS page additions.
   Loads AFTER kv_dashboard_bw.css, which supplies the tokens and the shell
   (brand, rail, drawer, top bar, buttons, pills, footer, tab bar).
   Only SMS-specific components live here.
   ========================================================================== */

.walletchip{display:flex;align-items:center;gap:.5rem;border:1px solid var(--border);border-radius:999px;padding:.375rem .75rem;background:var(--card)}
.walletchip .v{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}

/* ── country / server pickers ── */
.picker{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}
.pick{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--fg);cursor:pointer;text-align:left}
.pick:hover{background:var(--muted)}
.pick .b{flex:1;min-width:0;display:flex;flex-direction:column}
.pick .k{font-size:.5625rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-fg);font-weight:700}
.pick .v{font-size:.875rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.0625rem}
.pick svg{width:15px;height:15px;color:var(--muted-fg);flex:none}

.searchrow{display:flex;gap:.625rem;margin-top:.625rem;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:180px}
.search svg{position:absolute;left:.6875rem;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted-fg);pointer-events:none}
.search input{width:100%;padding:.5625rem .75rem .5625rem 2.125rem;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--fg)}
.search input::placeholder{color:var(--muted-fg)}
.search input:disabled{opacity:.6;cursor:not-allowed}
.toggle{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--muted-fg);white-space:nowrap;padding:.5rem .75rem;border:1px solid var(--border);border-radius:8px;background:var(--card);cursor:pointer}
.toggle input{width:15px;height:15px;accent-color:var(--fg)}

/* ── service list ── */
.svcmark{width:34px;height:34px;flex:none;border-radius:9px;background:var(--muted);border:1px solid var(--border);display:grid;place-items:center;font-size:.625rem;font-weight:800;color:var(--muted-fg)}
.svclist{display:flex;flex-direction:column}
.svcrow{display:flex;align-items:center;gap:.875rem;width:100%;padding:.75rem 1rem;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--fg);cursor:pointer;text-align:left;font:inherit}
.svcrow:last-child{border-bottom:0}
.svcrow:hover{background:var(--muted)}
.svcrow .b{flex:1;min-width:0;display:flex;flex-direction:column}
.svcrow .n{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svcrow .s{font-size:.6875rem;color:var(--muted-fg);font-family:var(--mono);font-variant-numeric:tabular-nums}
.svcrow .p{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.svcrow .chev{width:15px;height:15px;color:var(--muted-fg);flex:none}
.svcrow.out{opacity:.45;cursor:not-allowed}
/* balance will not cover this service — say so before they commit */
.svcrow.short .p,.svcrow.short .n{color:var(--muted-fg)}
.topup{display:inline-flex;align-items:center;gap:.3125rem;padding:2px 9px;border-radius:999px;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.035em;color:var(--bad);background:var(--bad-soft);white-space:nowrap}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted-fg);font-size:.8125rem}
.loading{padding:2.5rem 1rem;text-align:center;color:var(--muted-fg);font-size:.8125rem}

/* ── sheets ── */
.sheetwrap{position:fixed;inset:0;z-index:90;background:var(--scrim,rgba(10,10,10,.45));display:none;align-items:flex-end;justify-content:center}
.sheetwrap.open{display:flex}
.sheet{background:var(--bg);width:min(520px,100%);max-height:86vh;border-radius:14px 14px 0 0;border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.sheet-head{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border-bottom:1px solid var(--border)}
.sheet-head h2{font-size:1rem;margin:0}
.sheet-body{overflow:auto;padding:.75rem 1rem 1.25rem}
.optrow{display:flex;align-items:center;gap:.75rem;width:100%;padding:.6875rem .5rem;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--fg);cursor:pointer;text-align:left;font:inherit}
.optrow:last-child{border-bottom:0}
.optrow:hover{background:var(--muted)}
.optrow .flag{width:30px;height:30px;flex:none;border-radius:7px;background:var(--muted);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--mono);font-size:.5625rem;font-weight:800;color:var(--muted-fg)}
.optrow .b{flex:1;min-width:0;display:flex;flex-direction:column}
.optrow .n{font-size:.875rem;font-weight:600}
.optrow .s{font-size:.6875rem;color:var(--muted-fg);font-family:var(--mono)}
.optrow .ck2{margin-left:auto;width:15px;height:15px;flex:none;color:var(--fg);opacity:0}
.optrow[aria-current="true"] .ck2{opacity:1}
.optrow[aria-current="true"] .n{font-weight:700}

.confirm{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:9px;overflow:hidden;margin-bottom:.875rem}
.confirm > div{display:flex;justify-content:space-between;gap:1rem;padding:.625rem .875rem;border-bottom:1px solid var(--border);font-size:.8125rem}
.confirm > div:last-child{border-bottom:0}
.confirm span{color:var(--muted-fg)}
.confirm strong{text-align:right}
.confirm select{max-width:60%;border:1px solid var(--border);border-radius:6px;padding:.25rem .375rem;background:var(--card);color:var(--fg);font-size:.8125rem}
.confirm .total{background:var(--muted)}
.confirm .total strong{font-family:var(--mono);font-size:1.125rem}
.sheet-acts{display:flex;gap:.5rem}
.sheet-acts .btn{flex:1}

/* ── toast ── */
.toast{position:fixed;left:50%;bottom:5.5rem;transform:translateX(-50%);z-index:95;background:var(--primary);color:var(--primary-fg);border-radius:9px;padding:.625rem .875rem;font-size:.8125rem;font-weight:600;max-width:calc(100vw - 2rem);text-align:center;display:none}
.toast.show{display:block}
.toast.err{background:var(--bad);color:#fff}

@media (max-width:560px){ .picker{grid-template-columns:1fr} }
@media (min-width:1001px){ .toast{bottom:1.5rem} }

/* ---- VPN notice, above "Get a number" ----------------------------------
   Sits before a country, server or service is chosen, because that is the only
   moment the advice can prevent the problem instead of explaining it. It is not
   dismissible on purpose: a "got it" button hides it from exactly the returning
   customer who is about to forget. The detail folds away with <details>, so
   there is no script and the language toggle has nothing to get wrong. */
:root{ --sv-warnbg:#fdf6e7; --sv-warnbd:#dcc48c; --sv-warnfg:#5a4300; }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --sv-warnbg:#241d0c; --sv-warnbd:#5a4a1c; --sv-warnfg:#f6d689; }}
:root[data-theme="dark"]{ --sv-warnbg:#241d0c; --sv-warnbd:#5a4a1c; --sv-warnfg:#f6d689; }

.sv-vpn{border:1.5px solid var(--sv-warnbd);background:var(--sv-warnbg);
  border-radius:var(--radius);padding:.8125rem .875rem;margin-bottom:1rem;min-width:0}
.sv-vpnhead{display:flex;align-items:flex-start;gap:.625rem}
.sv-vpnico{width:22px;height:22px;flex:none;color:var(--sv-warnfg);margin-top:1px}
.sv-vpnico svg{width:22px;height:22px;display:block}
.sv-vpntitle{margin:0;flex:1;min-width:0;font-size:.875rem;font-weight:680;line-height:1.4;
  letter-spacing:-.01em;color:var(--fg)}

.sv-vpnlist{display:flex;gap:.375rem;flex-wrap:wrap;margin:.625rem 0 0;padding:0;list-style:none}
.sv-vpnlist li{font-size:.75rem;font-weight:660;padding:.25rem .5625rem;border-radius:999px;
  border:1px solid var(--sv-warnbd);background:var(--bg);color:var(--fg);white-space:nowrap}

.sv-vpndet{margin-top:.625rem}
.sv-vpndet > summary{display:inline-flex;align-items:center;gap:.375rem;cursor:pointer;
  font-size:.78125rem;font-weight:660;color:var(--fg);list-style:none;padding:.1875rem 0;
  width:max-content}
.sv-vpndet > summary::-webkit-details-marker{display:none}
.sv-vpndet > summary::after{content:"";width:.4375rem;height:.4375rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .16s}
.sv-vpndet[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.sv-vpndet > summary:focus-visible{outline:2px solid var(--fg);outline-offset:2px;border-radius:.25rem}
.sv-vpndet[open] > summary{margin-bottom:.5rem}
.sv-vpndet p{margin:0 0 .5rem;font-size:.8125rem;line-height:1.55;color:var(--fg)}
.sv-vpndet ul{margin:0;padding-left:1.125rem}
.sv-vpndet li{font-size:.8125rem;line-height:1.5;margin-bottom:.3125rem;color:var(--fg)}
.sv-vpndet li:last-child{margin-bottom:0}
.sv-vpnnote{margin:.625rem 0 0 !important;font-size:.78125rem;color:var(--muted-fg)}
@media (prefers-reduced-motion:reduce){.sv-vpndet > summary::after{transition:none}}