colors change on safari

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;
    }
}