/* NetStore Wallet: página Balance da conta, saldo no painel e a forma de pagamento no checkout. Mesmo visual do
 * netstore-ui (Plus Jakarta Sans, teal #0B7A6F, raio 12 px, botões de 48 a 50 px). O Astra pega input e button com
 * seletores fortes: as medidas vão com !important, como no ns-checkout.css. */

/* o tema pode deixar content-box: com width 100% e padding o campo passaria da coluna */
.ns-wallet *, .ns-wallet-pay *{ box-sizing:border-box; }

.ns-wallet, .ns-wallet-pay, .ns-wallet-painel{
  --nsw-font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* --nsw-mute com 4,87:1 no branco (AA em 13 px); o #8A94A0 de antes dava 3,08:1 */
  --nsw-ink:#1B2430; --nsw-dim:#5B6672; --nsw-mute:#69727E; --nsw-line:#E3E8E8;
  --nsw-teal:#0B7A6F; --nsw-teal-hover:#097064; --nsw-tint:#E7F6F4; --nsw-surface:#F6F8F8; --nsw-error:#C4282D;
  font-family:var(--nsw-font); color:var(--nsw-ink);
}

/* ---------- página Balance ---------- */
.ns-wallet{ display:grid; grid-template-columns:minmax(0, 1fr); gap:28px; }
.ns-wallet h2.ns-wallet__titulo{ margin:0 0 14px!important; font:800 20px/1.25 var(--nsw-font)!important; color:var(--nsw-ink)!important; letter-spacing:-.01em; }

.ns-wallet__saldo{ padding:22px 20px; background:var(--nsw-tint); border-radius:16px; }
.ns-wallet h2.ns-wallet__rotulo{ margin:0!important; font:600 14px/1.4 var(--nsw-font)!important; color:var(--nsw-dim)!important; }
.ns-wallet__valor{ margin:6px 0 4px!important; font:800 40px/1.1 var(--nsw-font); letter-spacing:-.02em; color:var(--nsw-ink); font-variant-numeric:tabular-nums; }
.ns-wallet__valor.is-negativo{ color:var(--nsw-error); }
.ns-wallet__ajuda{ margin:0!important; font:500 14px/1.5 var(--nsw-font); color:var(--nsw-dim); }
.ns-wallet__alerta{ margin:12px 0 0!important; font:600 14px/1.5 var(--nsw-font); color:var(--nsw-error); }

.ns-wallet__form{ margin:0; }
.ns-wallet__off{ margin:0 0 14px!important; padding:12px 14px; font:600 14px/1.5 var(--nsw-font); color:var(--nsw-dim); background:var(--nsw-surface); border-radius:12px; }
.ns-wallet fieldset.ns-wallet__valores{ margin:0!important; padding:0!important; border:0!important; min-width:0; }
.ns-wallet fieldset.ns-wallet__valores[disabled]{ opacity:.55; }
.ns-wallet legend.ns-wallet__legenda{ margin:0 0 10px; padding:0; font:600 14px/1.4 var(--nsw-font); color:var(--nsw-ink); }

/* 3 por linha; 6 só quando a coluna do formulário passa de 480 px (vale a largura dela, não a da tela) */
.ns-wallet__form{ container-type:inline-size; }
.ns-wallet__chips{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
@container (min-width:480px){ .ns-wallet__chips{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.ns-wallet__chip{ position:relative; display:block; margin:0!important; cursor:pointer; }
.ns-wallet__chip input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.ns-wallet__chip span{
  display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 8px;
  font:700 16px/1 var(--nsw-font); color:var(--nsw-ink); background:#fff;
  border:1.5px solid var(--nsw-line); border-radius:12px; font-variant-numeric:tabular-nums;
  transition:border-color .15s, background-color .15s, color .15s;
}
.ns-wallet__chip:hover span{ border-color:#C9D3D3; }
.ns-wallet__chip input:checked + span{ color:var(--nsw-teal); background:var(--nsw-tint); border-color:var(--nsw-teal); }
.ns-wallet__chip input:focus-visible + span{ outline:3px solid var(--nsw-teal); outline-offset:2px; }

.ns-wallet__outro{ display:grid; gap:6px; margin:14px 0 0!important; }
.ns-wallet__outro label{ font:600 14px/1.4 var(--nsw-font); color:var(--nsw-ink); }
.ns-wallet__campo{ position:relative; display:block; }
.ns-wallet__campo > span{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font:600 16px/1 var(--nsw-font); color:var(--nsw-dim); pointer-events:none; }
.woocommerce .ns-wallet .ns-wallet__campo input[type="number"],
.ns-wallet .ns-wallet__campo input[type="number"]{
  box-sizing:border-box!important; width:100%!important; height:48px!important; margin:0!important; padding:0 14px 0 30px!important;
  font:500 16px/1 var(--nsw-font)!important; color:var(--nsw-ink)!important; background:#fff!important;
  border:1.5px solid var(--nsw-line)!important; border-radius:12px!important; box-shadow:none!important; -moz-appearance:textfield;
}
.ns-wallet .ns-wallet__campo input::-webkit-outer-spin-button,
.ns-wallet .ns-wallet__campo input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ns-wallet .ns-wallet__campo input:focus{ border-color:var(--nsw-teal)!important; box-shadow:0 0 0 4px rgba(11,122,111,.14)!important; outline:none; }
.ns-wallet__dica{ font:500 13px/1.4 var(--nsw-font); color:var(--nsw-mute); }

/* meio de pagamento: lista de opções com o rádio à esquerda, a linha inteira é o alvo do toque */
.ns-wallet fieldset.ns-wallet__meios{ margin:20px 0 0!important; padding:0!important; border:0!important; min-width:0; }
.ns-wallet fieldset.ns-wallet__meios[disabled]{ opacity:.55; }
.ns-wallet ul.ns-wallet__opcoes{ display:grid; gap:8px; margin:0!important; padding:0!important; list-style:none; }
.ns-wallet ul.ns-wallet__opcoes li{ margin:0!important; padding:0!important; }
.ns-wallet__opcao{
  display:flex; align-items:flex-start; gap:12px; margin:0!important; padding:14px 16px; cursor:pointer;
  background:#fff; border:1.5px solid var(--nsw-line); border-radius:12px; transition:border-color .15s, background-color .15s;
}
.ns-wallet__opcao:hover{ border-color:#C9D3D3; }
.ns-wallet__opcao:has(input:checked){ background:var(--nsw-tint); border-color:var(--nsw-teal); }
.ns-wallet__opcao:has(input:focus-visible){ outline:3px solid var(--nsw-teal); outline-offset:2px; }
.ns-wallet .ns-wallet__opcao input[type="radio"]{ flex:none; width:20px!important; height:20px!important; margin:1px 0 0!important; accent-color:var(--nsw-teal); cursor:pointer; }
.ns-wallet__opcao-texto{ display:grid; gap:2px; min-width:0; }
.ns-wallet__opcao-nome{ font:700 15px/1.35 var(--nsw-font); color:var(--nsw-ink); }
.ns-wallet__opcao-desc{ font:500 13px/1.45 var(--nsw-font); color:var(--nsw-dim); }

.ns-wallet__termos{ margin:16px 0 14px!important; font:500 13px/1.5 var(--nsw-font); color:var(--nsw-dim); }
.woocommerce .ns-wallet button.ns-wallet__botao,
.ns-wallet button.ns-wallet__botao{
  display:flex!important; align-items:center; justify-content:center; width:100%!important; min-height:50px!important; margin:0!important; padding:0 22px!important;
  font:700 16px/1 var(--nsw-font)!important; color:#fff!important; background:var(--nsw-teal)!important;
  border:0!important; border-radius:12px!important; box-shadow:none!important; cursor:pointer;
}
.woocommerce .ns-wallet button.ns-wallet__botao:hover{ background:var(--nsw-teal-hover)!important; }
.ns-wallet button.ns-wallet__botao:focus-visible{ outline:3px solid var(--nsw-teal); outline-offset:2px; }
.ns-wallet button.ns-wallet__botao[disabled]{ opacity:.55; cursor:not-allowed; }
.ns-wallet__depois{ margin:10px 0 0!important; font:500 13px/1.5 var(--nsw-font); color:var(--nsw-mute); text-align:center; }

/* histórico: lista no celular, tabela a partir de 600 px */
.ns-wallet__vazio{ margin:0!important; font:500 14px/1.5 var(--nsw-font); color:var(--nsw-dim); }
.ns-wallet__tabela + .ns-wallet__vazio{ margin-top:12px!important; }
.ns-wallet ul.ns-wallet__lista{ margin:0!important; padding:0!important; list-style:none; border-top:1px solid var(--nsw-line); }
.ns-wallet ul.ns-wallet__lista li{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"desc mov" "data mov";
  gap:2px 12px; align-items:center; margin:0!important; padding:14px 0; border-bottom:1px solid var(--nsw-line);
}
.ns-wallet__lista .ns-wallet__desc{ grid-area:desc; font:600 15px/1.35 var(--nsw-font); color:var(--nsw-ink); overflow-wrap:anywhere; }
.ns-wallet__lista .ns-wallet__data{ grid-area:data; font:500 13px/1.4 var(--nsw-font); color:var(--nsw-mute); }
.ns-wallet__lista .ns-wallet__mov{ grid-area:mov; font:700 15px/1 var(--nsw-font); }
.ns-wallet__mov{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.ns-wallet__mov.is-mais{ color:var(--nsw-teal)!important; }
.ns-wallet__mov.is-menos{ color:var(--nsw-ink)!important; }
.ns-wallet__historico a{ color:var(--nsw-teal)!important; text-decoration:none; }
.ns-wallet__historico a:hover{ text-decoration:underline; }

.ns-wallet table.ns-wallet__tabela{ display:none; width:100%; margin:0!important; border:0!important; border-collapse:collapse; background:none!important; font-family:var(--nsw-font); }
.ns-wallet table.ns-wallet__tabela th{
  padding:0 12px 10px!important; font:600 13px/1.3 var(--nsw-font)!important; color:var(--nsw-dim)!important;
  text-align:left; background:none!important; border:0!important; border-bottom:1px solid var(--nsw-line)!important;
}
.ns-wallet table.ns-wallet__tabela td{
  padding:14px 12px!important; font:500 15px/1.4 var(--nsw-font); color:var(--nsw-ink); background:none!important;
  border:0!important; border-bottom:1px solid var(--nsw-line)!important; vertical-align:middle;
}
.ns-wallet table.ns-wallet__tabela th:first-child, .ns-wallet table.ns-wallet__tabela td:first-child{ padding-left:0!important; white-space:nowrap; color:var(--nsw-dim); }
.ns-wallet table.ns-wallet__tabela th:last-child, .ns-wallet table.ns-wallet__tabela td:last-child{ padding-right:0!important; }
.ns-wallet table.ns-wallet__tabela .ns-wallet__num{ text-align:right; font-weight:700; }

@media (min-width:600px){
  .ns-wallet ul.ns-wallet__lista{ display:none; }
  .ns-wallet table.ns-wallet__tabela{ display:table; }
  .ns-wallet__saldo{ padding:26px 24px; }
}
@media (min-width:922px){
  .ns-wallet{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:32px; align-items:start; }
  .ns-wallet__historico{ grid-column:1 / -1; }
  .ns-wallet__form{ padding:24px; border:1px solid var(--nsw-line); border-radius:16px; }
}

/* ---------- painel inicial da conta ---------- */
.ns-wallet-painel{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:20px 0 0!important; padding:14px 16px;
  font:500 15px/1.4 var(--nsw-font); background:var(--nsw-tint); border-radius:12px;
}
.ns-wallet-painel__rotulo{ color:var(--nsw-dim); }
.ns-wallet-painel strong{ font-weight:800; font-variant-numeric:tabular-nums; }
.ns-wallet-painel a{ margin-left:auto; font-weight:700; color:var(--nsw-teal)!important; text-decoration:none; }

/* ---------- checkout: forma de pagamento "Account balance" ---------- */
/* a caixa da forma de pagamento: o WooCommerce (e o Astra) pintam de cinza (#dcd7e2 / #dfdcde) com uma seta, e o
 * cinza e o vermelho do texto ficavam abaixo de 4,5:1. Aqui fica branca, com a borda e o raio do checkout. */
.woocommerce #payment div.payment_box.payment_method_ns_wallet,
#payment div.payment_box.payment_method_ns_wallet{
  margin:12px 0 0!important; padding:16px!important; color:#1B2430!important;
  background:#fff!important; border:1px solid #E3E8E8!important; border-radius:12px!important; box-shadow:none!important;
}
.woocommerce #payment div.payment_box.payment_method_ns_wallet::before,
#payment div.payment_box.payment_method_ns_wallet::before{ display:none!important; content:none!important; }
.ns-wallet-pay{ display:grid; gap:8px; font-size:14px; }
.ns-wallet-pay p{ margin:0!important; }
.ns-wallet-pay__linha{ display:flex; justify-content:space-between; gap:12px; font:500 15px/1.4 var(--nsw-font); color:var(--nsw-dim); }
.ns-wallet-pay__linha strong{ color:var(--nsw-ink); font-weight:800; font-variant-numeric:tabular-nums; }
.ns-wallet-pay__nota{ font:500 13px/1.5 var(--nsw-font); color:var(--nsw-dim); }
.ns-wallet-pay__falta{ font:600 14px/1.5 var(--nsw-font); color:var(--nsw-error); }
.woocommerce .ns-wallet-pay a.ns-wallet-pay__botao, .ns-wallet-pay a.ns-wallet-pay__botao{
  display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px;
  font:700 15px/1 var(--nsw-font); color:var(--nsw-teal)!important; text-decoration:none!important;
  background:#fff; border:1.5px solid var(--nsw-teal); border-radius:12px;
}
.ns-wallet-pay a.ns-wallet-pay__botao:hover{ background:var(--nsw-tint); }
.ns-wallet-pay a.ns-wallet-pay__botao:focus-visible{ outline:3px solid var(--nsw-teal); outline-offset:2px; }