/* WooCommerce's password strength meter (its password-strength-meter.js), under a new password on
   the registration and recovery forms: read as the field's validation message, nopCommerce's
   field-validation-error, with its hint in the muted copy under it. A strong enough password reads
   in the delivered order's green. */
.woocommerce-password-strength {
  font-size: var(--font-size-xs);
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
  color: var(--color-danger);
}

.woocommerce-password-strength.good {
  color: var(--color-muted);
}

.woocommerce-password-strength.strong {
  color: var(--color-status-complete-ink);
}

.woocommerce-password-hint {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
}

/* Until the password is strong enough the meter disables the form's button: it stays in place,
   faded, as the board's step arrows do, and does not darken under the pointer. */
:is(.registration-page, .password-recovery-page) .button-1:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  :is(.registration-page, .password-recovery-page) .button-1:disabled:hover {
    background-color: var(--color-action);
  }
}

/* The customer's details (myaccount/form-edit-account.php): WooCommerce's note under its display
   name and the line saying its password fields are optional read as the meter's hint does. A note
   makes its field taller than the one beside it: the field keeps its rows at the top, so the two
   inputs stay on one line. */
.customer-info-page .field-note {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
}

.customer-info-page .form-fields > .inputs {
  align-content: start;
}

/* nopCommerce's password panel was a page of its own, narrower than the account's panels; under the
   personal details it takes their width. */
.customer-info-page .change-password-form {
  max-width: none;
}

.change-password-form__note {
  margin: 0 0 var(--space-lg);
}