/* Checklist requisiti password con feedback live animato.
   Usata in: reset_password.html, register.html, profilo.html (cambio password).
   La logica JS è in static/js/pw-policy.js, le regole backend in app/validators.py. */

.pw-rules { list-style: none; padding: 0; margin: .5rem 0 0; }
.pw-rules li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: #9a93b0; padding: 2px 0;
  transition: color .3s ease;
}
.pw-rules li .rule-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid #cfc8e6; background: #fff;
  font-size: .7rem; color: transparent;
  transition: all .3s ease; flex-shrink: 0;
}
.pw-rules li.ok { color: var(--cdn-purple-700); }
.pw-rules li.ok .rule-icon {
  background: #3B6D11; border-color: #3B6D11; color: #fff;
  transform: scale(1.12);
}
.pw-rules li.ok .rule-text { animation: rulePop .3s ease; }
@keyframes rulePop {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

.pw-match { font-size: .85rem; margin-top: .35rem; display: none; align-items: center; gap: .4rem; }
.pw-match.show { display: flex; }
.pw-match.ok  { color: #3B6D11; }
.pw-match.no  { color: #A32D2D; }