/* ══════════════════════════════════════════════
       C-INPUT  —  campo de texto
    ══════════════════════════════════════════════ */
.c-input {
  display: block;
  width: 100%;
  padding: calc(var(--vw) * 9) calc(var(--vw) * 12);
  font-size: calc(var(--vw) * 16);
  font-family: inherit;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1.5px solid transparent;
  border-radius: calc(var(--vw) * 4);
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.c-input--white {
  background: var(--white);
}


.c-input::placeholder {
  color: var(--gray-400);
}

.c-input:focus {
  border-color: var(--primary-color);
  background: var(--white);
}

.c-input--error {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
}
.c-input--error::placeholder {
  color: var(--error);
}

.c-input__msg {
  display: none;
  margin-top: calc(var(--vw) * 3);
  font-size: calc(var(--vw) * 11);
  color: var(--error);
}

.c-input__field {
  display: flex;
  flex-direction: column;
}

/* show error messages */ 
.required-form-error + .required-form-error-text {
  display: block;
}