Fluent Forms submit button custom CSS not applying on frontend

Hi,

I’m running into an issue where my custom CSS for the Fluent Forms submit button is not being applied on the frontend.

I’ve tried the following CSS:

div.ff-default .ff_btn_style {
	border-radius: 9999px;
	font-size: 18px;
	font-weight: 600;
	padding: 12px 24px;
	transition: none !important;
}

form.fluent_form .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--accent) !important;
	border: 2px solid var(--accent);
}

form.fluent_form .ff-btn-submit:not(.ff_btn_no_style):focus, 
form.fluent_form .ff-btn-submit:not(.ff_btn_no_style):hover {
	background-color: var(--accent-hover) !important;
	border: 2px solid var(--accent-hover);
	opacity: 1;
}

However, most of the styling does not seem to take effect on the frontend.

My question is:
Would the recommended approach be to use a custom submit button instead (as described here: https://fluentforms.com/docs/custom-submit-button-in-fluent-forms/), or is there a more reliable way to properly override the default button styles?

Thanks in advance for your help.