/* NetStore Auth: painel de entrada (conta, lost-password, carrinho e checkout), nas cores do netstore-ui */

.ns-auth{
  --ns-font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ns-ink:#1B2430; --ns-dim:#5B6672; --ns-mute:#8A94A0; --ns-line:#E3E8E8;
  --ns-teal-strong:#0B7A6F; --ns-teal-hover:#097064; --ns-teal-tint:#E7F6F4; --ns-surface:#F6F8F8;
  --ns-error:#C4282D; --ns-error-tint:#FDECEC;
  box-sizing:border-box; font-family:var(--ns-font); color:var(--ns-ink); text-align:left;
}
.ns-auth *, .ns-auth *::before, .ns-auth *::after{ box-sizing:border-box; }
.ns-auth [hidden]{ display:none!important; }

/* conta, lost-password e checkout: cartão no meio da página */
.ns-auth--account, .ns-auth--checkout{
  max-width:440px; margin:8px auto 48px; padding:32px 32px 24px;
  background:#fff; border:1px solid var(--ns-line); border-radius:20px;
  box-shadow:0 18px 40px -28px rgba(27,36,48,.35);
}
.ns-auth--checkout{ max-width:480px; margin-top:0; }

/* carrinho: dentro do resumo, separado por uma linha */
.ns-auth--cart{ margin:4px 0 0; padding:20px 0 0; border-top:1px solid var(--ns-line); }

.ns-auth-icon{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; margin:0 0 16px;
  border-radius:14px; background:var(--ns-teal-tint); color:var(--ns-teal-strong);
}
.ns-auth--cart .ns-auth-icon{ display:none; }
.ns-auth .ns-auth-title{
  margin:0 0 8px; padding:0; font-family:var(--ns-font); font-size:26px; line-height:1.2; font-weight:800;
  letter-spacing:-.02em; color:var(--ns-ink);
}
.ns-auth--cart .ns-auth-title{ font-size:18px; font-weight:700; letter-spacing:-.01em; }
.ns-auth .ns-auth-lead{ margin:0 0 20px; font-size:15px; line-height:1.55; color:var(--ns-dim); }
.ns-auth--cart .ns-auth-lead{ margin-bottom:16px; font-size:14px; }

.ns-auth-step{ margin:0; }
.ns-auth .ns-auth-label{ display:block; margin:0 0 6px; font-size:14px; font-weight:600; color:var(--ns-ink); }
/* o Astra e o CSS do site pegam input e button com seletores fortes: as medidas do painel vão com !important */
.ns-auth .ns-auth-input{
  display:block; width:100%; height:50px!important; margin:0 0 12px; padding:0 14px!important;
  font:500 16px/1 var(--ns-font)!important; color:var(--ns-ink)!important; background:#fff!important;
  border:1.5px solid var(--ns-line)!important; border-radius:12px!important; box-shadow:none!important; outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.ns-auth .ns-auth-input::placeholder{ color:var(--ns-mute); opacity:1; }
.ns-auth .ns-auth-input:focus{ border-color:var(--ns-teal-strong)!important; box-shadow:0 0 0 4px rgba(11,122,111,.14)!important; }
.ns-auth .ns-auth-code{
  height:58px!important; font-size:26px!important; font-weight:700!important; letter-spacing:.35em; text-align:center;
  font-variant-numeric:tabular-nums; padding-left:calc(14px + .35em)!important;
}

.ns-auth .ns-auth-btn{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; margin:0; padding:12px 20px!important;
  font:700 16px/1.2 var(--ns-font)!important; color:#fff!important; background:var(--ns-teal-strong)!important;
  border:0!important; border-radius:12px!important; box-shadow:none!important; cursor:pointer; text-transform:none; letter-spacing:0;
  transition:background-color .12s;
}
.ns-auth .ns-auth-btn:hover{ background:var(--ns-teal-hover)!important; color:#fff!important; }
.ns-auth .ns-auth-btn:focus-visible{ outline:3px solid var(--ns-ink); outline-offset:2px; }
.ns-auth .ns-auth-btn[disabled]{ opacity:.7; cursor:progress; }

.ns-auth .ns-auth-sent{ margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--ns-dim); overflow-wrap:anywhere; }
.ns-auth .ns-auth-sent strong{ color:var(--ns-ink); font-weight:700; }
.ns-auth .ns-auth-help{ margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--ns-dim); }
.ns-auth .ns-auth-link{
  display:inline; margin:0 0 0 4px; padding:2px 0!important; min-height:0; font-family:var(--ns-font)!important; font-weight:600!important;
  font-size:inherit!important; line-height:inherit; color:var(--ns-teal-strong)!important; background:none!important; border:0!important;
  border-radius:0; box-shadow:none!important; text-decoration:underline; text-underline-offset:3px; cursor:pointer; text-transform:none;
  letter-spacing:0;
}
.ns-auth .ns-auth-link:hover{ color:var(--ns-teal-hover)!important; }
.ns-auth .ns-auth-link[disabled]{ color:var(--ns-mute)!important; text-decoration:none; cursor:default; }
.ns-auth .ns-auth-link:focus-visible{ outline:2px solid var(--ns-teal-strong); outline-offset:2px; }

.ns-auth .ns-auth-msg{ margin:12px 0 0; font-size:14px; line-height:1.45; }
/* Turnstile: invisível, só aparece quando o Cloudflare pede um clique */
.ns-auth .ns-auth-captcha{ display:none; }
.ns-auth .ns-auth-captcha.is-visible{ display:block; margin:14px 0 0; min-height:65px; }
.ns-auth .ns-auth-msg:empty{ display:none; }
.ns-auth .ns-auth-msg.is-ok{ color:var(--ns-teal-strong); }
.ns-auth .ns-auth-msg.is-error{ padding:10px 12px; color:var(--ns-error); background:var(--ns-error-tint); border-radius:10px; }

.ns-auth .ns-auth-fine{ margin:18px 0 0; font-size:12.5px; line-height:1.5; color:var(--ns-mute); }
.ns-auth .ns-auth-fine a{ color:var(--ns-dim); text-decoration:underline; text-underline-offset:2px; }
.ns-auth .ns-auth-fine a:hover{ color:var(--ns-teal-strong); }
.ns-auth form + .ns-auth-fine{ margin-top:16px; }

@media (max-width:544px){
  .ns-auth--account, .ns-auth--checkout{ margin:0 0 32px; padding:24px 20px 20px; border-radius:16px; box-shadow:none; }
  .ns-auth .ns-auth-title{ font-size:23px; }
  .ns-auth--cart .ns-auth-title{ font-size:18px; }
}