colors change on safari - css

Question

I have a button and styles for it, let's say this color is #e67410 for main-btn::before(border-top: 14px solid #e67410;), but in the safari browser this color turns black.
Could it be because of the dark theme on the iPhone? It has something to do with the css safari rules? Thanks.
this is a normal state
it's on a iphone
more code
.main-btn {
position: relative;
display: inline-block;
outline: 1px solid #0a5078;
background: #0a5078;
border: 7px solid #0a5078;
padding: 0.2rem 1.4rem;
overflow: hidden;
cursor: pointer;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
#media screen and (max-width: 600px) {
padding: 0.4rem 1rem;
&:hover {
outline: 1px solid #e67410;
border: 7px solid #e67410;
background: #e67410;
&::before {
border-top: none !important;
border-right: none !important;
}
}
}
&.white {
outline: 1px solid #004f7a;
background: #fff;
border: 7px solid #fff;
span {
color: #004f7a;
}
#media screen and (max-width: 600px) {
&:hover {
outline: 1px solid #e67410;
border: 7px solid #e67410;
background: #e67410;
}
}
}
span {
position: relative;
color: #fff;
font-weight: normal;
font-size: 14px;
text-transform: uppercase;
z-index: 1;
}
&:hover {
&::before {
border-top: 400px solid #e67410;
border-right: 2000px solid transparent;
}
}
&::before {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 14px solid #e67410;
border-right: 14px solid transparent;
left: 0;
top: 0;
transition: 0.3s;
}
}