/* =============================
   FORM VALIDATION STYLES
   ============================= */

/* Default state */
input.form-control {
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* ✅ Valid input */
input.valid {
  border: 2px solid #28a745 !important;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23009600' d='M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-480a224 224 0 1 0 0 448 224 224 0 1 0 0-448zm83.1 134.6c5.2-7.1 15.2-8.7 22.3-3.5s8.7 15.2 3.5 22.3l-128 176c-2.8 3.8-7 6.2-11.7 6.5s-9.3-1.3-12.6-4.6l-64-64c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l50.7 50.7 117-160.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 20px 20px;
}

/* ❌ Invalid input */
input.invalid {
  border: 2px solid #dc3545 !important;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff0000' d='M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-480a224 224 0 1 0 0 448 224 224 0 1 0 0-448zm0 352a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm0-256c13.5 0 24.3 11.4 23.5 24.9l-7.6 136c-.5 8.5-7.5 15.1-16 15.1s-15.5-6.6-16-15.1l-7.6-136c-.8-13.5 10-24.9 23.5-24.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 20px 20px;
}

/* =============================
   TOOLTIP STYLES
   ============================= */
.fv-tooltip {
  position: absolute;
  background: #ff4d4d;
  color: #fff;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 9999;
  animation: fadeIn 0.2s ease-in-out;
}

/* Tooltip arrow */
.fv-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 20px;
  border-width: 6px;
  border-style: solid;
  border-color: #ff4d4d transparent transparent transparent;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}