.input-wrapper {
  width: 100%;
}

input[type="text"] {
  cursor: text !important;
}

.custom-input {
  width: 100%;
  appearance: none;
  position: relative;
  background-color: #ffffff;
  color: #474747;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 125%;

  @media (width <= 768px) {
    padding: 8px 16px;
    font-size: 12px;
  }

  &.input-transparent {
    background-color: #ffffff66;
    color: white;

    &::placeholder {
      color: white;
    }
  }
}

.custom-input:focus-visible,
.custom-input.focus {
  outline: none;
}

/* Добавьте в ваш style.css или в head */
.input-error {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: none;
}

.input-error.active {
  display: block;
}

input.border-error {
  border: 2px solid #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.1) !important;
}