/* Success state */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847; /* Success text color */
  background-color: #DFF0D8; /* Success background color */
  border: 1px solid #D6E9C6; /* Success border color */
}

/* Error state */
input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48; /* Error text color */
  background-color: #F2DEDE; /* Error background color */
  border: 1px solid #EED3D7; /* Error border color */
}

/* Error message list */
.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 1.5em;
  opacity: 0;
  color: #B94A48;
  transition: all 0.3s ease-in-out; /* Smooth transition for error visibility */
  -o-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

/* Display errors when errors are present */
.parsley-errors-list.filled {
  opacity: 1;
}

/* Individual error messages */
.parsley-errors-list li {
  padding-left: 20px; /* Add space for error icons */
  position: relative;
}

/* Error icon for each error message */
.parsley-errors-list li:before {
  content: '\26A0'; /* Warning sign */
  color: #B94A48;
  font-size: 1.2em;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Success icon for each field */
input.parsley-success:valid,
select.parsley-success:valid,
textarea.parsley-success:valid {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Cpath fill="%23468A46" d="M6.4 11.2l-4.8-4.8 1.6-1.6 3.2 3.2 6.4-6.4 1.6 1.6-8 8z"/%3E%3C/svg%3E'); /* Green check icon for success */
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px; /* Add padding for the check icon */
}

/* Input focus state */
input:focus.parsley-success,
select:focus.parsley-success,
textarea:focus.parsley-success {
  border-color: #4cae4c; /* Focus border color for success */
  box-shadow: 0 0 5px rgba(72, 182, 72, 0.5); /* Focus shadow */
}

/* Input focus state */
input:focus.parsley-error,
select:focus.parsley-error,
textarea:focus.parsley-error {
  border-color: #b94a48; /* Focus border color for error */
  box-shadow: 0 0 5px rgba(186, 36, 36, 0.5); /* Focus shadow */
}

/* General input error states */
input.parsley-error:focus,
select.parsley-error:focus,
textarea.parsley-error:focus {
  border-color: #b94a48;
  box-shadow: 0 0 5px rgba(186, 36, 36, 0.5);
}

/* Tooltip style for Parsley errors (optional) */
.parsley-tooltip {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 5px;
  font-size: 0.9em;
  border-radius: 3px;
  display: none; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.parsley-tooltip.parsley-error {
  display: block;
  opacity: 1;
}

/* Tooltip arrow */
.parsley-tooltip:before {
  content: '';
  position: absolute;
  top: -6px;
  left: 10px;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #f8d7da transparent transparent transparent;
}

/* Optional: Enhance input fields' appearance for accessibility */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #007bff; /* Default blue focus color */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}