Bootstrap Accordion CSS styling when active

I am trying to get my accordion buttons to keep a purple background colour when shown and return to white when closed, and also to remove the blue highlight border once clicked. I am working with boostrap v5. This is the CSS that I've tried, which achieves the results in the images below:

    .accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:focus ,.accordion-button:active  {
  background-color: #5500C9 !important;
    color:#FFF !important;
    text-decoration: none !important;
     border: hidden !important;
          }

<div class="accordion-item ">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button collapsed mb-3 border-bottom" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> How to sell my motorbike? </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse border mb-3 bg-dark text-white" aria-labelledby="headingOne" data-bs-parent="#motorbikeAccordion">
              <div class="accordion-body"> <strong>How do I sell my motorbike to you?</strong> Selling your motorbike to us is easy. We operate three simple steps. Enter your motorbike's registration in the box above and confirm we've found the right bike. After that we will ask for some details about your motorbike such as the mileage, condition and accessories. Once we've received your contact details we will be in touch within just 24 hours. </div>
            </div>
          </div>

1: The collapsed state:

2: Hover state:

3: Show state:

4: Final state when you remove focus (click away)

The bootstrap offical docs are extremely limited on information for accordions.

Question: I'd like to remove the border on the show state (3), and on the final state when the accordion is open and the user has clicked away, for the background to remain purple until the accordion is closed and then returned to white.