/* Validation styles */
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: var(--font-size-sm);
  color: #dc3545;
}

.is-invalid {
  border-color: #dc3545 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* This ensures that feedback is displayed when the show-error class is applied */
.invalid-feedback.show-error {
  display: block !important;
}

/* This ensures feedback is displayed when the input has the is-invalid class */
.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Special handling for input groups */
.input-group .is-invalid {
  position: relative;
  z-index: 2;
}

/* Handle the phone error visibility explicitly */
#phone-error.show-error,
#contact-phone-error.show-error {
  display: block !important;
}

/* Fix for phone error display in quote form */
.form-group .invalid-feedback.show-error {
  display: block !important;
}

/* Additional style for input groups with validation */
.input-group.is-invalid .input-group-text,
.input-group .is-invalid {
  border-color: #dc3545 !important;
}

/* Ensure proper spacing between inputs and feedback messages */
.form-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-group .invalid-feedback {
  margin-top: 0.25rem;
}