@charset "UTF-8";
/* =========================================================================
   YLLIME — Entrar, criar conta e recuperar senha

   A marcação dos formulários é do plugin de login e registro separados, com
   as classes do WooCommerce. Nada aqui recria campo: só veste o que ele
   entrega. Os campos em si já vêm da folha global — altura, borda e foco
   são os mesmos de todo formulário do site.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Cartão
   ------------------------------------------------------------------------- */
.auth{
  background:var(--c-canvas);
  padding:var(--section-y) var(--gutter);
  /* Alto o bastante para o cartão ficar no meio de uma tela, e não numa
     tira estreita logo abaixo do cabeçalho. */
  /* Sem rodapé embaixo, a faixa precisa preencher o que sobra da tela —
     senão o cinza acaba no meio e resta uma tira branca até o fim. */
  min-height:calc(100vh - 96px);
  display:grid;
  /*
   * align-content centraliza na vertical, e a coluna continua ocupando a
   * largura toda. Com place-content:center a coluna encolheria para o
   * tamanho do cartão, e aí o `width:100%` dele resolveria contra si mesmo
   * — em tela de 320px o cartão manteria os 26rem e estouraria para fora.
   */
  align-content:center;
  justify-items:center;
  gap:var(--s-5);
}

.auth__card{
  width:100%;
  max-width:26rem;
  padding:clamp(1.75rem,5vw,2.75rem);
  background:var(--c-surface);
  border:1px solid var(--c-line);
}

.auth__title{
  font-size:clamp(1.5rem,3vw,1.875rem);
  letter-spacing:var(--ls-tight);
  line-height:var(--lh-tight);
  color:var(--c-ink);
  margin-bottom:var(--s-3);
}

.auth__text{
  font-size:var(--t-sm);
  color:var(--c-muted);
  max-width:none;
  margin-bottom:var(--s-6);
}

.auth__back{
  margin:0;max-width:none;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
}
.auth__back a{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  color:var(--c-muted);
}
.auth__back a:hover{color:var(--c-green-700)}


/* -------------------------------------------------------------------------
   Formulário
   ------------------------------------------------------------------------- */
/* Bloco explícito, para o invólucro do plugin não herdar grade de lugar
   nenhum. Quem fazia isso era a nossa própria folha da conta — ver a nota
   em account.css. */
.wclrs{display:block}

.wclrs form{display:flex;flex-direction:column;gap:var(--s-4)}

/*
 * As linhas do WooCommerce são <p>, e herdariam o max-width:68ch da
 * tipografia — num cartão de 26rem isso não aparece, mas basta alguém
 * alargar o cartão para o campo parar de acompanhar. Melhor desarmar agora.
 */
.wclrs .form-row{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  margin:0;
  max-width:none;
}

.wclrs label{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}
.wclrs .required{color:var(--c-error);text-decoration:none;border:0}

/* Senha: espaço à direita para o botão de mostrar que o plugin injeta. */
.wclrs-password-row{position:relative}
.wclrs-password-row .password-input{display:block}
.wclrs-password-row input[type="password"],
.wclrs-password-row input[type="text"]{padding-right:6.5rem}

/*
 * Seletor com três classes de propósito: o plugin já posiciona este botão
 * com `top`, e uma regra mais fraca não conseguiria desarmar. Com top, height
 * e bottom os três declarados, o CSS descarta o bottom — era por isso que o
 * "Mostrar senha" ficava 7px acima do campo. `top:auto` devolve o comando ao
 * bottom, e o flex centraliza o texto na altura do campo.
 */
.wclrs .wclrs-password-row .wclrs-toggle,
.wclrs .wclrs-password-row .show-password-input{
  position:absolute;
  top:auto;
  bottom:0;
  right:var(--s-2);
  height:var(--control-h);
  display:flex;
  align-items:center;
  padding-inline:var(--s-3);
  border:0;background:none;
  font-family:inherit;
  font-size:var(--t-xs);
  color:var(--c-muted);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease);
}
.wclrs .wclrs-password-row .wclrs-toggle:hover{color:var(--c-green-700)}
.wclrs .wclrs-password-row .wclrs-toggle:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}


/* ---- Caixas de marcar ---- */
.wclrs .woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  /* Frase inteira, não rótulo de campo: volta ao corpo normal. */
  font-size:var(--t-sm);
  letter-spacing:normal;
  text-transform:none;
  color:var(--c-body);
  cursor:pointer;
}
.wclrs input[type="checkbox"]{
  flex:none;
  width:18px;height:18px;
  margin:2px 0 0;
  accent-color:var(--c-green-700);
}

/* A linha de ações guarda a caixa de "continuar conectado" e o botão. */
.wclrs-actions{gap:var(--s-5)}

/*
 * O formulário é uma coluna flex com gap, e o plugin deixa pelo caminho
 * filhos que não se veem: campos ocultos, o bloco de atribuição de pedido do
 * WooCommerce e um <p> que o navegador esvazia sozinho — ele fecha o
 * parágrafo ao encontrar um <div> dentro, porque <div> não pode morar em <p>.
 * Nenhum deles aparece, mas cada um cobra um gap.
 *
 * O `a` na lista não é enfeite: a linha do "Esqueceu a senha?" tem só um
 * link dentro, e sem ele nesta conta a regra apagava o link inteiro.
 */
.wclrs form > input[type="hidden"],
.wclrs form > wc-order-attribution-inputs,
.wclrs form > p:empty,
.wclrs form > p:not(:has(label, button, a, textarea, select, input:not([type="hidden"]))){display:none}

/*
 * No cadastro o plugin põe o aceite dos termos antes do campo de senha —
 * a pessoa concorda com o contrato e só depois escolhe a senha. Como o
 * formulário é uma coluna flex, dá para reordenar sem tocar na marcação.
 *
 * O botão é alvo direto, e não o <p> à volta: é justamente aquele parágrafo
 * que o navegador fecha antes da hora, e o botão acaba filho do formulário.
 */
.wclrs--register .wclrs-terms{order:1}
.wclrs--register .woocommerce-privacy-policy-text{order:2}
.wclrs--register form > button[type="submit"],
.wclrs--register form > p:has(button[type="submit"]){order:3}


/* ---- Botão ---- */
.wclrs button[type="submit"]{
  width:100%;
  height:var(--control-h);
  border:0;
  background:var(--c-green-700);
  color:#FFFFFF;
  font-family:inherit;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.wclrs button[type="submit"]:hover{background:var(--c-ink)}
.wclrs button[type="submit"]:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px}


/*
 * A tela de recuperar senha traz a própria instrução num <p> sem classe,
 * dizendo o mesmo que a frase de abertura do cartão — a pessoa lia duas
 * vezes a mesma coisa, em dois corpos diferentes. Fica a nossa.
 */
.wclrs--password form > p:not([class]){display:none}


/* ---- Links de apoio ---- */
.wclrs .lost_password{
  margin:0;max-width:none;
  text-align:center;
  font-size:var(--t-sm);
}
.wclrs .lost_password a{color:var(--c-muted);border-bottom:1px solid currentColor}
.wclrs .lost_password a:hover{color:var(--c-green-700)}

.wclrs-switch{
  margin:var(--s-6) 0 0;
  padding-top:var(--s-5);
  border-top:1px solid var(--c-line-soft);
  max-width:none;
  text-align:center;
  font-size:var(--t-sm);
  color:var(--c-muted);
}
.wclrs-switch a{
  color:var(--c-green-700);
  border-bottom:1px solid currentColor;
  margin-left:var(--s-1);
}


/* ---- Aviso de privacidade e força da senha ---- */
.wclrs .woocommerce-privacy-policy-text p{
  margin:0;max-width:none;
  font-size:var(--t-xs);
  line-height:var(--lh-snug);
  color:var(--c-muted);
}
/* Rede de segurança: se o aviso ainda escapar duplicado, o segundo some. */
.wclrs .woocommerce-privacy-policy-text + .woocommerce-privacy-policy-text{display:none}

.wclrs .woocommerce-password-strength{
  margin-top:var(--s-2);
  padding:var(--s-2) var(--s-3);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  text-align:center;
}
.wclrs .woocommerce-password-strength.short,
.wclrs .woocommerce-password-strength.bad{background:#FBF0EE;color:#6d251c}
.wclrs .woocommerce-password-strength.good{background:#FDF6E7;color:var(--c-warn)}
.wclrs .woocommerce-password-strength.strong{background:#EDF3E8;color:#33501f}
.wclrs .woocommerce-password-hint{
  margin:var(--s-2) 0 0;max-width:none;
  font-size:var(--t-xs);color:var(--c-muted);
}


/* ---- Avisos ---- */
/* Os avisos do WooCommerce já têm desenho na folha global; aqui só entram
   dentro do cartão, com a mesma largura do formulário. */
.auth .woocommerce-notices-wrapper:empty{display:none}
.auth .woocommerce-notices-wrapper > *{margin-bottom:var(--s-5)}