/* =====================================================================
   Loja do Avo | Login do checkout | lda-login v1.1 | 17/10/2026
   Onde fica: arquivo proprio /c/checkout/lda-login.css, chamado no topo do
   template "Login Autenticado" com ?v=N (versao na URL evita cache velho).
   O login.css original nao foi alterado.
   Reverter: tirar o <link> e o <script> do template e limpar o cache.
   ===================================================================== */

/* ---------- 0. Sem "pisca": a tela antiga nao aparece antes da nova ----------
   O conteudo do login fica invisivel ate o lda-login.js marcar o body.
   Trava de seguranca: se o JS falhar, a tela aparece sozinha em 1,2 s. */
body:not(.lda-login) section.fbits-responsive-login {
  opacity: 0;
  animation: lda-revela 0s linear 1.2s forwards;
}
body.lda-login section.fbits-responsive-login { animation: lda-entra .18s ease-out; }
@keyframes lda-revela { to { opacity: 1; } }
@keyframes lda-entra { from { opacity: 0; } to { opacity: 1; } }

/* O lda-checkout.js (via GTM) insere no login o titulo e as etapas do checkout
   e um aviso de dados: aqui eles duplicariam o que o layout novo ja mostra. */
body.lda-login .lda-hero,
body.lda-login .lda-login-trust { display: none !important; }

/* ---------- 1. Correcoes que valem mesmo se o JS nao carregar ---------- */
.fbits-label.fbits-label-login input,
.fbits-label.fbits-label-login input.form-control {
  color: #171717;              /* antes #a8b0ba: contraste 2,2:1 */
  text-transform: none;        /* antes uppercase: e-mail aparecia em maiusculas */
  font-size: 18px;             /* 16px ou mais evita zoom automatico no iPhone */
  border: 1px solid #8a948f;   /* borda visivel (contraste 3:1) */
  border-radius: 8px;
  padding: 0 16px;
  text-align: left;
}
.fbits-label.fbits-label-login input::placeholder { color: #6b7570; text-transform: none; }
.fbits-label.fbits-label-login input:focus,
.fbits-label.fbits-label-login input:focus-visible {
  outline: 3px solid #103023;
  outline-offset: 2px;
  border-color: #103023;
  box-shadow: none;
}
.fbits-responsive-login a:focus-visible,
.fbits-responsive-login button:focus-visible {
  outline: 3px solid #103023;
  outline-offset: 3px;
}

/* ---------- 2. Layout novo (so quando o lda-login.js marca o body) ---------- */
body.lda-login { background: #f6f4ef; }
body.lda-login .fbits-responsive-login {
  max-width: 480px;
  margin: 24px auto 40px;
  padding: 24px 16px 0;
  text-align: left;
}

/* etapas */
.lda-lg-etapas { display: flex; justify-content: center; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.lda-lg-etapas li { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #555; }
.lda-lg-etapas li + li::before { content: ""; width: 18px; height: 2px; background: #c9cfcb; margin-right: 2px; }
.lda-lg-etapas .n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #8a948f; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.lda-lg-etapas .ok .n { background: #f1eada; border-color: #103023; color: #103023; }
.lda-lg-etapas .atual { color: #103023; font-weight: 700; }
.lda-lg-etapas .atual .n { background: #103023; border-color: #103023; color: #fff; }

/* cartao */
.lda-lg-card {
  background: #fff;
  border: 1px solid #dfe3e0;
  border-radius: 14px;
  padding: 28px 24px 24px;
}
body.lda-login .login-titulo { font-size: 26px; line-height: 1.25; color: #171717; margin: 0 0 6px; text-align: left; }
body.lda-login .fbits-subtitle-login { font-size: 17px; line-height: 1.45; color: #444; margin: 0 0 20px; text-align: left; }
body.lda-login .fbits-box-login,
body.lda-login .fbits-box-login form,
body.lda-login .fbits-box-login .form-inline,
body.lda-login .fbits-box-login .fbits-label { width: 100%; max-width: none; margin-left: 0; margin-right: 0; float: none; padding: 0; }
body.lda-login .fbits-box-login .form-inline { margin-bottom: 14px; }

/* rotulos fixos */
.lda-lg-rotulo { display: block; font-size: 17px; font-weight: 700; color: #171717; margin: 0 0 8px; text-align: left; }
body.lda-login .fbits-label.fbits-label-login input { height: 56px; width: 100%; }
body.lda-login .fbits-label.fbits-label-login { position: relative; display: block; }

/* mostrar senha: area de toque de 48px */
body.lda-login .fbits-btn-show-password {
  position: absolute; right: 4px; bottom: 4px; top: auto;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #444; z-index: 2;
}
body.lda-login .fbits-btn-show-password i { font-size: 22px; }

/* botoes principais */
body.lda-login .fbits-box-login .btn.btn-success,
.lda-lg-continuar,
body.lda-login .fbits-btn-recuperar-senha {
  display: block; width: 100%; height: 56px; border: 0; border-radius: 10px;
  background: #103023; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; cursor: pointer;
}
body.lda-login .fbits-box-login .btn.btn-success:hover,
.lda-lg-continuar:hover { background: #294333; }
.lda-lg-continuar[disabled], body.lda-login .btn.btn-success[disabled] { opacity: .7; cursor: wait; }

/* erro do campo */
.lda-lg-erro { display: none; margin: 8px 0 0; font-size: 16px; color: #a1261b; font-weight: 500; }
.lda-lg-erro.on { display: block; }
body.lda-login input[aria-invalid="true"] { border-color: #a1261b !important; }
body.lda-login .validation-summary-errors { background: #fdf1ef; border: 1px solid #e3b4ad; border-radius: 8px; padding: 12px 14px; color: #7d1d14; font-size: 16px; text-align: left; }
body.lda-login .validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* linha "Entrando como" */
.lda-lg-quem { display: none; align-items: center; justify-content: space-between; gap: 12px; background: #f1eada; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; font-size: 16px; color: #171717; line-height: 1.4; }
.lda-lg-quem strong { overflow-wrap: anywhere; }
.lda-lg-quem button { background: none; border: 0; color: #103023; font-weight: 700; text-decoration: underline; font-size: 16px; min-height: 44px; padding: 0 4px; cursor: pointer; flex: 0 0 auto; }

/* links de apoio */
.lda-lg-links { margin: 16px 0 0; padding: 0; list-style: none; }
.lda-lg-links li { margin: 0 0 6px; font-size: 16px; color: #333; line-height: 1.4; }
.lda-lg-links button, .lda-lg-voltar {
  background: none; border: 0; padding: 8px 0; min-height: 44px; text-align: left;
  color: #103023; font-weight: 700; font-size: 16px; text-decoration: underline; cursor: pointer;
}

/* separador e botoes secundarios */
.lda-lg-ou { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: #555; font-size: 16px; }
.lda-lg-ou::before, .lda-lg-ou::after { content: ""; flex: 1; height: 1px; background: #dfe3e0; }
body.lda-login .fbits-social-login { width: 100%; max-width: none; margin: 0; padding: 0; float: none; }
body.lda-login .fbits-social-login::before { content: none; display: none; } /* tira "OU ENTRE USANDO AS REDES SOCIAIS" */
body.lda-login .fbits-social-login .btn.google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 52px; border-radius: 10px; margin: 0 0 12px;
  background: #fff; color: #171717; border: 1px solid #8a948f;
  font-size: 17px; font-weight: 500; text-transform: none;
}
body.lda-login button.btn.google { color: #171717 !important; background: #fff !important; border: 1px solid #8a948f !important; line-height: 1.2; }
body.lda-login button.btn.google:hover { background: #f6f4ef !important; }
/* o login.css nativo deixa o texto branco no hover/foco (celular): mantem legivel */
body.lda-login .fbits-social-login .btn.cadastro:hover,
body.lda-login .fbits-social-login .btn.cadastro:focus { color: #103023; background: #f6f4ef; }
body.lda-login button.btn.google:focus { color: #171717 !important; }
body.lda-login .fbits-box-login .btn.btn-success:active { background: #294333 !important; } /* antes azul #00315b */
body.lda-login .fbits-social-login .btn.google i { display: none; }
body.lda-login .fbits-social-login .btn.google .lda-g { width: 20px; height: 20px; }
body.lda-login .fbits-social-login .btn.cadastro {
  display: block; width: 100%; height: 52px; border-radius: 10px; margin: 0;
  background: #fff; color: #103023; border: 2px solid #103023;
  font-size: 17px; font-weight: 700; text-transform: none;
  height: auto; min-height: 52px; padding: 10px 12px; white-space: normal; line-height: 1.3;
}

/* recuperacao de senha */
body.lda-login .ainda-senha,
body.lda-login #RecuperarSenha > a.fbits-link-senha { display: none; }
body.lda-login #RecuperarSenha { font-size: 0; margin: 0; }           /* esconde o texto solto nativo */
body.lda-login #RecuperarSenha > * { font-size: 16px; }
body.lda-login .fbits-form-recuperacao-senha { max-height: none !important; overflow: visible; }
body.lda-login #RecuperarSenhaForm { display: none; }
body.lda-login.lda-modo-recuperar #RecuperarSenhaForm { display: block; }
body.lda-login .fbits-mensagem-recuperacao-senha:not(:empty) { margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: #eef4f0; color: #103023; font-size: 16px; text-align: left; }
.lda-lg-rec-titulo { display: none; font-size: 22px; font-weight: 700; color: #171717; margin: 0 0 6px; }
.lda-lg-rec-texto { display: none; font-size: 16px; color: #444; margin: 0 0 16px; line-height: 1.45; }
body.lda-modo-recuperar .lda-lg-rec-titulo, body.lda-modo-recuperar .lda-lg-rec-texto { display: block; }
body.lda-login #RecuperarSenha > .lda-lg-rec-titulo { font-size: 22px; } /* vence o 16px do bloco */

/* ajuda */
.lda-lg-ajuda { margin: 18px 0 0; text-align: center; font-size: 16px; color: #333; }
.lda-lg-ajuda a { color: #103023; font-weight: 700; text-decoration: underline; }
.lda-nw { white-space: nowrap; }

/* ---------- 3. Estados do fluxo (e-mail primeiro) ---------- */
/* etapa 1: so o e-mail */
body.lda-passo-email .lda-campo-senha,
body.lda-passo-email .fbits-box-login .btn.btn-success,
body.lda-passo-email #recaptcha-checkbox-container,
body.lda-passo-email .lda-lg-links,
body.lda-passo-email .fbits-social-login .btn.cadastro { display: none !important; }
/* etapa 2: senha */
body.lda-passo-senha .lda-campo-email,
body.lda-passo-senha .lda-lg-continuar { display: none !important; }
body.lda-passo-senha .lda-lg-quem { display: flex; }
/* modo recuperar: some o login */
body.lda-modo-recuperar .fbits-box-login form.form-horizontal:not(#RecuperarSenhaForm),
body.lda-modo-recuperar .lda-lg-cabecalho,
body.lda-modo-recuperar .fbits-social-login,
body.lda-modo-recuperar .lda-lg-ou,
body.lda-modo-recuperar .lda-lg-links { display: none !important; }

@media (max-width: 480px) {
  body.lda-login .fbits-responsive-login { margin-top: 16px; padding: 0 12px; }
  .lda-lg-card { padding: 22px 16px 18px; border-radius: 12px; }
  body.lda-login .login-titulo { font-size: 24px; }
  .lda-lg-etapas li { font-size: 14px; }
  .lda-lg-etapas li + li::before { width: 10px; }
}
@media (min-width: 992px) {
  body.lda-login .fbits-responsive-login { margin-top: 40px; }
  body.lda-login .fbits-label.fbits-label-login input { font-size: 17px; }
}

@media (max-width: 380px) {
  .lda-lg-etapas { gap: 4px; }
  .lda-lg-etapas li { font-size: 13px; gap: 4px; }
  .lda-lg-etapas .n { width: 22px; height: 22px; font-size: 12px; }
  .lda-lg-etapas li + li::before { width: 6px; }
}