Recurring payment button showing in a different color and position than editor

User in 14691016-hc reached to us mentioning that even though they've added a different background color for the payment button and it was showing centered in the page editor view, the published page showed a dark button (with dark font) and misplaced to the left.
I was able to reproduce this on a test site and with different themes.

#### Steps to reproduce the issue

1. Go to a page
2. Insert the Recurring payment button, add a recurring payment plan, specify a price, description and renew interval, click Add amount. The button is added to the page
3. Notice the current color of the button and position.
4. Click Preview or Publish
5. The button is added in a dark background color (with dark color over dark font) and the location is pushed to the left side.
6. Change the background color of the button (and it might refresh/update but the first time the button is added, it doesn't show the original color on the editor)

#### What I expected
To see the button's background color and position as in the editor view

#### What happened instead
It showed a different background color and with a different position

How it looks on the editor:


How it looks on the published page:

Reproduce the Recurring payment button issue by comparing its editor, preview, and published-page appearance across themes. Trace where the button's background color and positioning are applied, then verify that the published button matches the editor in color, text contrast, and alignment.

Written by the indexing model from the issue text.