.input-wrapper {
  width: fit-content;
  margin-bottom: 20px;
}
.input-container {
  position: relative;
  display: flex;
  width: fit-content;
  border-radius: 10px;
}
/* Remove outline padrão e adiciona estilo personalizado quando focado */
.input-container input:focus, span.icon:focus {
  outline: none;
}

/* Estilo personalizado para o ícone quando o input está focado */
.input-container input:focus + .icon {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Sobrescreve os estilos de autopreenchimento */
.input-container input:-webkit-autofill,
.input-container input:-webkit-autofill:hover, 
.input-container input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: #646464 !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Para Firefox */
.input-container input:autofill {
  background-color: var(--input-bg) !important;
  color: #646464 !important;
}
.input-container input {
  padding: 10px 10px 10px 0px;
  background-color: var(--input-bg);
  font-size: 12px;
  min-width: 250px;
  border-radius: 0 10px 10px 0;
  border: 1px solid #707070;
  border-left: none;
  color: #646464;
}

.input-container .icon {
  font-size: 20px;
  background-color: var(--input-bg);
  width: 50px;
  height: 60px;
  color: #797979;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px;
  border: 1px solid #707070;
  border-right: none;
}

.error-message {
  color: var(--error-color);
  font-size: 12px;
  margin-top: 2px;
}