Javascript - problem with selected/focused button formatting

Hi,
I am using the Qualtrics classic layout, and have applied some Javascript to transform an NPS question from the standard square boxes, to some circles. It is also controlling the colour formatting of the response options (screenshot, and Javascript below).
The issue I am facing is the formatting of the response option when selected. (please note I have auto-advance switched on) I would like it to go deep purple when selected (#512698), however the background colour remains purple. If I click 'back' and return to the page, it is purple, just not when it is first selected and still focused. I thought the second line with q-checked.q-focused would solve this, but it is not.
NB: I also have the following code in the custom CSS, for formatting of the rest of the survey.
Any advice on how to solve would be much appreciated.
Javascript for NPS question:
Qualtrics.SurveyEngine.addOnload(function()
{
if("${e://Field/isMobile}"==0){
jQuery("#"+ this.questionId +" label.SingleAnswer").css({"border":"5px solid #FFFFFF","border-radius":"50%","color":"#FFFFFF","font-weight":"bold","background-color":"#CECECE"}) 


jQuery("#"+ this.questionId +" label.SingleAnswer.q-checked.q-focused").css({"border":"5px solid #FFFFFF","border-radius":"50%","color":"#FFFFFF","font-weight":"bold","background-color":"#CECECE"}) 
}