/* Validation wrapper */
.validation-wrapper { position: relative; display: inline; width: 100%; }
  .validation-wrapper input { width: 100%; padding-right: 40px; }
/* Validation icon */
.validation-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.validation-icon--loading { opacity: 1; border: 2px solid #ccc; border-top-color: #333; border-radius: 50%; animation: validation-spin 0.6s linear infinite; }
.validation-icon--valid { opacity: 1; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2328a745"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>'); background-size: contain; background-repeat: no-repeat; }
.validation-icon--invalid { opacity: 1; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23dc3545"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>'); background-size: contain; background-repeat: no-repeat; }
.validation-icon--hint { opacity: 1; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23007bff"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>'); background-size: contain; background-repeat: no-repeat; }

@keyframes validation-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}
/* Hint list */
.validation-hints { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); list-style: none; margin: 4px 0 0; padding: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s, opacity 0.2s; z-index: 1000; }
.validation-hints--visible { max-height: 300px; opacity: 1; overflow-y: auto; }
.validation-hints li { padding: 10px 12px; cursor: pointer; transition: background 0.15s; }
  .validation-hints li:hover { background: #f0f0f0; }
  .validation-hints li:not(:last-child) { border-bottom: 1px solid #eee; }