/* HoneyKiss, área de conta.
   Estilos exclusivos das telas de conta. Cabeçalho, rodapé, botões e o painel
   da sacola vêm de components.css: aqui só entra o que não existe em nenhum
   outro lugar do site. */

.account{display:flex;justify-content:center;
  padding:clamp(3rem,8vw,6rem) 1.25rem clamp(4rem,9vw,7rem)}

/* Coluna estreita e centralizada: um formulário curto espalhado na largura
   toda obriga o olho a percorrer a tela inteira entre um campo e o próximo. */
.account__box{width:100%;max-width:440px}

.account__title{font-family:var(--font-display);font-weight:600;text-align:center;
  font-size:clamp(2.75rem,7vw,4rem);line-height:1.05;margin-bottom:2rem}

.account__intro{font-size:14px;color:var(--color-muted);text-align:center;
  line-height:1.6;margin-bottom:1.5rem}

/* Número grande da página 404. Decorativo: o título logo abaixo é que diz
   o que aconteceu, por isso ele fica fora da leitura de tela. */
.account__codigo{font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(4.5rem,14vw,7.5rem);color:var(--color-cream-deep);
  -webkit-text-stroke:2px var(--color-gold);margin-bottom:.5rem}

.account__form{display:flex;flex-direction:column;gap:.6rem}

/* O rótulo de cada campo fica só para leitor de tela: o texto visível é o
   placeholder, dentro da caixa. O <label> continua existindo porque o
   placeholder some assim que a pessoa começa a digitar, e sem ele o campo
   ficaria sem nome para quem não enxerga a tela. */
.field{display:flex;flex-direction:column}
.field__input{width:100%;height:var(--btn-h);padding:0 20px;
  background:var(--color-background);color:var(--color-ink);
  border:1px solid var(--color-border);border-radius:var(--radius-pill);
  font-family:var(--font-ui);font-size:15px;
  transition:border-color var(--dur) var(--ease)}
.field__input::placeholder{color:var(--color-muted)}
.field__input:focus{border-color:var(--color-ink);outline:none}
.field__input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
/* Só marca erro depois da validação, nunca enquanto a pessoa ainda digita. */
.field__input[aria-invalid="true"]{border-color:var(--color-sale)}

.account__status:empty{display:none}
.account__status{font-size:13px;text-align:center;color:var(--color-muted);margin-top:.25rem}
.account__status[data-erro="true"]{color:var(--color-sale)}

.account__links{display:flex;flex-direction:column;align-items:center;gap:.85rem;
  margin-top:2rem;font-size:14px}
.account__links a{color:var(--color-ink);text-decoration:underline;text-underline-offset:4px;
  min-height:24px;transition:color var(--dur) var(--ease)}
.account__links a:hover{color:var(--color-primary)}