User Commented: “try adding !important to outline: none and border-color: transparent”

I have a custom new tab page built in HTML,CSS & JS
All is well except for when I click the search bar to type. The focus triggers a block border to appear in my search container. I’ve tried to remove it via CSS but it results in the same border to appear. My other text inputs don’t do this, but this one happens to be the google text area for searching the web.

The Border in the Search Container

/* Search Container */
.search-container {
    background: rgba(255, 255, 255, 0.25); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Blur effect for the background */
    border-radius: 15px; /* Rounded corners */
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18); /* Subtle white border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    margin-top: 20px; /* Spacing from the top or other elements */
    width: 500px; /* Fixed width, adjust as necessary */
    position: relative; /* Needed for absolute positioning of inner elements */
    display: flex;
    justify-content: space-between; /* Distributes children evenly */
    align-items: center;
}

/* Search Input Field */
.search-container input[type="text"] {
    width: 80%;
    height: 40px;
    border: 1px solid transparent; /* Ensures no visible border */
    background: transparent;
    padding-left: 15px;
    font-size: 16px;
    color: #000;
    outline: none; /* Removes the focus outline */
}

.search-container input[type="text"]:focus {
    outline: none; /* Ensures no focus outline */
    border-color: transparent; /* Keeps the border transparent on focus */
}