CSS badge shifts to the right inside Forminator form when injected via JavaScript (flex alignment issue)

I’m working on a WordPress page that uses the Forminator plugin to generate a multi-step form.
After the user spins a prize wheel (custom JS), I inject a badge element directly under the “Total” calculation field using JavaScript:

total.insertAdjacentElement("afterend", badge);

The badge is supposed to appear centered under the total field.

Here is the HTML output of the badge:

<div id="maxi-service-badge" class="badge-visible"> ⭐ FREE Interior Oven Cleaning </div>

And here is my CSS:

#maxi-service-badge { visibility: hidden !important; opacity: 0 !important; width: auto !important; max-width: 320px !important; margin: 14px auto 0 auto !important; text-align: center !important; align-self: center !important; padding: 12px 26px; background: #00c853; border-radius: 999px; } #maxi-service-badge.badge-visible { visibility: visible !important; opacity: 1 !important; }

Everything works except one problem:
The badge sometimes aligns to the right instead of centering, depending on how Forminator internally rebuilds the form. Its parent container appears to use display: flex, and the item is inheriting right-alignment from the parent.

align-self: center !important; margin: 0 auto;

…the badge still snaps to the right after certain form updates.

I need a reliable CSS solution to keep the injected badge centered inside any flex container, regardless of how Forminator re-renders the DOM.

How do I enforce consistent centering of this injected element inside dynamically generated parent containers?

If you would like to view the live page, here it is: https://maxicleanco.com/residential-quote/ unfortunately you do need to fill out the form until you get to the step where the code is implemented (Total).