/*
 * Erro no site todo (usuário, 22 e 23/10/2026: clientes mais velhas).
 * 1. Erro é informação, em azul: o texto do erro fica no azul de informação (INFORMATION do Figma, #154a87; contraste AA
 *    no branco), no lugar do vermelho e do rosa; as caixas de erro ficam com o fundo e a borda no mesmo azul, claros.
 *    Os !important passam por cima das cores de cada tela (login, cadastro, checkout), que têm seletores mais fortes. A
 *    janela de resposta da Linx (.the-modal) e os avisos novos com role="alert" (já em azul) não mudam de cor.
 * 2. Erro com movimento: quando a cliente tenta seguir e há um erro na tela, a MENSAGEM do erro treme e pisca; a cada
 *    nova tentativa, de novo. O campo não treme ("chamar atenção ao erro, e não ao campo"). Com "menos movimento" no
 *    aparelho, só pisca. Quem aplica é o Scripts/jv/erro.js (todas as páginas e o checkout) e, no leilão, o
 *    Scripts/jv/leilao-lance.js.
 * O tremor usa a propriedade translate, e não transform, para somar com o que o elemento já tiver: janela centrada com
 * transform não sai do lugar. O piscar é uma sombra interna, e não a cor de fundo, para valer também nas caixas com o
 * fundo azul abaixo (um fundo com !important ignora a animação).
 */
:root {
  --jv-erro-texto: var(--jv-color-info, #154a87);
  --jv-erro-fundo: rgb(21 74 135 / 8%);
  --jv-erro-borda: rgb(21 74 135 / 30%);
  --jv-erro-piscar: rgb(21 74 135 / 14%);
}

/* 1. Erro é informação, em azul. */
span.error,
label.error,
.field-validation-error,
.validation-summary-errors,
.validationMessage,
small[class^="erro-"],
.errors,
.error-message,
.alert-error,
.wd-error-summary,
.modal-outofstock-errors,
.callback.alert,
.callback-message.alert {
  color: var(--jv-erro-texto) !important;
}

/* Dentro das caixas, o texto acompanha o azul; links e botões ficam como estão. */
:is(.errors, .alert-error, .wd-error-summary, .validation-summary-errors, .callback.alert, .callback-message.alert) :not(a, button, svg, svg *) {
  color: inherit !important;
}

/* Caixas: o aviso que sai do campo no login, no cadastro e no recuperar senha (rosa no CSS antigo) e as caixas de erro
   da Linx e do checkout. */
body .input-wrapper span.error,
.errors,
.alert-error,
.wd-error-summary,
.validation-summary-errors,
.callback.alert,
.callback-message.alert {
  border-color: var(--jv-erro-borda) !important;
  background-color: var(--jv-erro-fundo) !important;
}

/* 1b. A mensagem de erro padrão (usuário, 26/10/2026: "melhorar o padding do texto com o fundo, está muito grudado nos
   cantos; o fundo do erro deve ser do tamanho do erro; o erro acompanha o ícone de informação"): caixa do tamanho do
   texto, 8px por 12px de respiro, cantos arredondados, texto em 14px e o "i" de informação do redesenho
   (Images/jv/informacao.svg, de DEVELOP FILES/008_FECHAR PEDIDO/information-error.svg) à esquerda, alinhado à 1ª linha.
   Vale para o erro do campo (login, cadastro e recuperar senha: a Linx o põe absoluto, colado no canto do campo, em
   10,8px; aqui ele volta ao fluxo, embaixo do campo), para o aviso do nome completo do cadastro e para as caixas de
   erro da Linx e do checkout, inclusive listas (cada item numa linha, ao lado do mesmo ícone), para os avisos com
   role="alert" (aro e Avise-me da PDP; usuário, 26/10: "cadê o padding nos erros que têm o bg que treme") e para a
   mensagem do bloco do lance do leilão (o texto dela vem num <span> só, para a grade). Grade em linha: o ícone na 1ª
   coluna e o texto (ou os itens) na 2ª. Os !important vencem o CSS antigo de cada tela, como nas cores; o display fica
   sem !important, porque o jQuery validate esconde o erro corrigido com display:none em linha. */
body .input-wrapper span.error,
label.error,
.field-validation-error,
.validation-summary-errors,
small[class^="erro-"],
.errors,
.error-message,
.alert-error,
.wd-error-summary,
.modal-outofstock-errors,
.callback.alert,
.callback-message.alert,
[role="alert"],
.jv-lance__mensagem:not(:empty) {
  position: static !important;
  inset: auto !important;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--jv-space-2);
  align-items: start;
  box-sizing: border-box;
  width: fit-content !important;
  max-width: 100%;
  margin: var(--jv-space-1) 0 var(--jv-space-2) !important;
  padding: var(--jv-space-2) var(--jv-space-3) !important;
  border: 1px solid var(--jv-erro-borda) !important;
  border-radius: var(--jv-radius-sm) !important;
  background-color: var(--jv-erro-fundo) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: var(--jv-size-label) !important;
  font-weight: var(--jv-weight-regular);
  line-height: 1.35 !important;
  text-align: left;
  white-space: normal !important;
}

:is(body .input-wrapper span.error, label.error, .field-validation-error, .validation-summary-errors, small[class^="erro-"], .errors, .error-message, .alert-error, .wd-error-summary, .modal-outofstock-errors, .callback.alert, .callback-message.alert, [role="alert"], .jv-lance__mensagem:not(:empty))::after {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 20;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1em;
  background: url("../../../Images/jv/informacao.svg") center / contain no-repeat;
}

/* O texto e os itens de lista ficam na 2ª coluna; a setinha que o CSS antigo desenhava no balão sai. */
:is(body .input-wrapper span.error, label.error, .field-validation-error, .validation-summary-errors, small[class^="erro-"], .errors, .error-message, .alert-error, .wd-error-summary, .modal-outofstock-errors, .callback.alert, .callback-message.alert, [role="alert"], .jv-lance__mensagem:not(:empty)) > * {
  grid-column: 2;
}

span.error::before,
.alert-error::after {
  display: none !important;
}

/* Escondido continua escondido (os avisos da PDP nascem com hidden e o erro corrigido some). */
:is(body .input-wrapper span.error, label.error, .field-validation-error, .validation-summary-errors, small[class^="erro-"], .errors, .error-message, .alert-error, .wd-error-summary, .modal-outofstock-errors, .callback.alert, .callback-message.alert, [role="alert"], .jv-lance__mensagem:not(:empty))[hidden] {
  display: none !important;
}

/* O campo com erro acompanha: borda e fundo no mesmo azul claro (o CSS antigo pinta de amarelo; o cadastro pintava de
   vermelho). Regra do usuário de 23/10/2026: erro é informação, nunca vermelho nem rosa. */
input.error,
select.error,
textarea.error,
.input-validation-error {
  border-color: var(--jv-erro-borda) !important;
  background-color: var(--jv-erro-fundo) !important;
}

/* 2. Erro com movimento. */
.jv-tremer {
  animation: jv-tremer 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both, jv-piscar 0.6s ease both;
}

/* Texto em linha (span) não se move com translate: durante o tremor ele vira inline-block. */
.jv-tremer--linha {
  display: inline-block;
}

@keyframes jv-tremer {
  10%, 90% { translate: -2px 0; }
  20%, 80% { translate: 4px 0; }
  30%, 50%, 70% { translate: -6px 0; }
  40%, 60% { translate: 6px 0; }
}

@keyframes jv-piscar {
  30%, 60% { box-shadow: inset 0 0 0 100vmax var(--jv-erro-piscar); }
}

@media (prefers-reduced-motion: reduce) {
  .jv-tremer {
    animation: jv-piscar 0.6s ease both;
  }
}

/* 3. Janela do erro que só vem no endereço (?errorMessage=, Scripts/jv/erro.js), no visual da "Deseja excluir o
   produto?" do carrinho (Styles/jv/components/carrinho-excluir.css; usuário, 23/10/2026): cartão claro centrado, logo,
   a carinha e o título no azul de informação, o texto do erro, "Fechar" com contorno verde e "Entre em contato" azul,
   pelo WhatsApp. No computador, horizontal, com o ícone grande à esquerda, sem o logo. */
.jv-erro-janela {
  inline-size: min(calc(100vw - 2rem), 22.5rem);
  max-inline-size: none;
  max-block-size: calc(100vh - 2rem);
  margin: auto; /* o reset do site (* { margin: 0 }) tira o centro do <dialog> */
  padding: var(--jv-space-6);
  overflow-y: auto;
  border: 0;
  border-radius: var(--jv-radius-md);
  background: var(--jv-color-bg);
  box-shadow: var(--jv-shadow-popover);
  color: var(--jv-color-text);
  font-family: var(--jv-font-sans);
  text-align: center;
}

/* O foco fica na própria janela ao abrir (sem contorno); nos botões, só com o teclado. */
.jv-erro-janela:focus {
  outline: none;
}

.jv-erro-janela[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jv-space-4);
}

.jv-erro-janela::backdrop {
  background: color-mix(in srgb, #ffffff 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.jv-erro-janela__logo {
  display: block;
  inline-size: 7rem;
  block-size: auto;
}

.jv-erro-janela__icone {
  flex: none;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  color: var(--jv-color-info);
}

.jv-erro-janela__titulo {
  display: block;
  font-size: var(--jv-text-2xl);
  font-weight: var(--jv-weight-bold);
  line-height: var(--jv-leading-heading);
  color: var(--jv-color-info);
  text-wrap: balance;
}

.jv-erro-janela__texto {
  margin: 0;
  font-size: var(--jv-size-body);
  line-height: var(--jv-leading-normal);
  color: var(--jv-color-text);
}

.jv-erro-janela__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--jv-space-3);
  inline-size: 100%;
  margin-block-start: var(--jv-space-2);
}

.jv-erro-janela__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: var(--jv-touch-min);
  margin: 0;
  padding: var(--jv-space-3) var(--jv-space-6);
  border: var(--jv-border-thick) solid var(--jv-color-info);
  border-radius: var(--jv-radius-pill);
  background: var(--jv-color-info);
  color: var(--jv-color-text-inverse);
  font-family: var(--jv-font-sans);
  text-decoration: none;
  white-space: nowrap; /* "Entre em contato" numa linha só */
  cursor: pointer;
}

.jv-erro-janela__botao--fechar {
  border-color: var(--jv-color-action);
  background: var(--jv-color-surface);
  color: var(--jv-color-text);
}

.jv-erro-janela__botao-icone {
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-inline-end: var(--jv-space-2);
  fill: currentColor;
}

.jv-erro-janela__botao:focus-visible {
  outline: 2px solid var(--jv-color-focus);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .jv-erro-janela {
    inline-size: min(calc(100vw - 4rem), 42.5rem);
    padding: var(--jv-space-10);
    text-align: start;
  }

  .jv-erro-janela[open] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--jv-space-6);
    row-gap: var(--jv-space-3);
    align-items: center;
  }

  .jv-erro-janela__logo {
    display: none;
  }

  .jv-erro-janela__icone {
    grid-column: 1;
    grid-row: 1 / span 3;
    inline-size: 8.75rem;
    block-size: 8.75rem;
  }

  .jv-erro-janela__titulo,
  .jv-erro-janela__texto,
  .jv-erro-janela__acoes {
    grid-column: 2;
  }

  .jv-erro-janela__titulo {
    font-family: var(--jv-font-display);
    font-size: var(--jv-size-heading);
    text-wrap: wrap;
  }

  .jv-erro-janela__acoes {
    flex-direction: row;
  }

  .jv-erro-janela__acoes .jv-erro-janela__botao {
    flex: 1 1 auto;
    padding-inline: var(--jv-space-5);
  }

  /* Entre em contato à esquerda e Fechar à direita, como o Excluir e o Voltar do carrinho no computador. */
  .jv-erro-janela__botao--fechar {
    order: 1;
  }
}