/* Password Strength Indicator Styles */

.password-strength-indicator {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.password-strength-indicator.strength-none {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.password-strength-indicator.strength-weak {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
}

.password-strength-indicator.strength-medium {
  background-color: #cff4fc;
  border: 1px solid #0dcaf0;
}

.password-strength-indicator.strength-strong {
  background-color: #d1e7dd;
  border: 1px solid #198754;
}

.strength-bar {
  height: 6px;
  background-color: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.strength-fill {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 3px;
}

.strength-none .strength-fill {
  background-color: #6c757d;
}

.strength-weak .strength-fill {
  background-color: #dc3545;
}

.strength-medium .strength-fill {
  background-color: #ffc107;
}

.strength-strong .strength-fill {
  background-color: #198754;
}

.strength-text {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.strength-text strong {
  font-weight: 600;
}

.requirements-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  font-size: 0.8125rem;
}

.requirements-list li {
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.requirements-list li.met {
  color: #198754;
}

.requirements-list li.unmet {
  color: #6c757d;
}

.requirements-list li i {
  margin-right: 0.5rem;
  width: 1rem;
}

/* Responsive */
@media (max-width: 576px) {
  .password-strength-indicator {
    font-size: 0.875rem;
  }
  
  .requirements-list {
    font-size: 0.75rem;
  }
}