/* Mensagem de erro por campo e marca de campo válido (assets/js/pages/cadastro.js) */
.campo-erro {
    display: block;
    margin: -14px 0 14px;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #d93025;
}

.campo-erro[hidden] { display: none; }

/* Campos lado a lado (par "Nome do sócio" e "CPF do sócio" em PJ, senha e confirmação na etapa 1):
   dentro de .input-group o input perde a margem de baixo (cadastro.css:147-149), então a margem
   negativa do padrão jogaria a mensagem sobre a borda do campo. Aqui ela ocupa espaço próprio. */
.input-wrapper > .campo-erro { margin: 4px 0 0; }

/* o select já tem margem embaixo; a mensagem entra logo abaixo dele */
select + .campo-erro,
.checkbox-wrapper + .campo-erro { margin-top: -12px; }

/* as regras existentes de cadastro.css cobrem só input; selects seguem o mesmo padrão */
select.error { border: 1px solid #d93025 !important; }
select.valid { border: 1px solid #34a853 !important; }

/* indicação discreta de campo preenchido corretamente */
input.valid,
select.valid {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2334a853' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* no select a seta já usa o fundo; mantém as duas imagens */
select.valid {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2334a853' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"),
        url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-position: right 34px center, right 12px center;
    background-size: 16px, 16px;
}

/* o campo de senha tem o olho de mostrar/ocultar no canto direito */
.password-field input.valid { background-image: none; }

/* checkbox dos termos: só a cor da mensagem, sem borda */
input[type="checkbox"].error + label { color: #d93025; }