Issues styling embedded custom code - textarea focus state

Hey! So I have been working on a website I’m exporting to be converted into a Shopify theme. As part of this, I have added in some custom code (a label and textarea) on the product page within the add to cart element for capturing messages at checkout. That all is working just fine.

The problem comes from the textarea’s focus state. When selected it applies a black line border, whereas all of my other inputs through the site with a focus state are purple around their border. (using the class “selected-feild-area” as a combo class to apply the focus state to things that need it. It doesn’t work in the embed.

I have tried to apply the class as a second class in the code, I have tried writing the style inline with the embed, I have tried styling the focus state of the main class that the form uses. None of it seems to overwrite the black line that appears for the border. I don’t even know where the style is coming from. The element does not have any class with a focus state and I don’t think there is an “all textarea” default class like headers or links.

Does anyone have any clues where I’m going wrong?

Here is my site Read-Only: LINK
Video of the issue: LINK