Why my custom css doesn’t apply for mapbox?

I have issue customizing my popup windows with mapboxgl.
No matter what i do in custom info_windows.scss it’s always display to default settings that are Inherited from mapbox-gl.css
I tried added a class to the popup element using the following code:
new mapboxgl.Popup({ className: ‘popups’ }) .setLngLat(coordinates) .setHTML(description) .addTo(map);
but still doesn’t pick up customize css code apply on .popups class eventhough my class popups applied on the element.
Any clue how to make this work?

_info_windows.scss

.popup {
  border-radius: 15px;
  border-color: orange;
  border-style: solid;
  overflow-y: auto;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
  padding-bottom: 25px;
  border: 2px solid #0b5cb2;
  box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 55%);
  width: 100%;
}


init_mapbox.js

const addMarkersToMap = (map, markers) => {
  markers.forEach((marker) => {
    const popup = new mapboxgl.Popup({ className: 'popup' }).setHTML(marker.info_window); // add this

    new mapboxgl.Marker()
      .setLngLat([marker.lng, marker.lat])
      .setPopup(popup)
      .addTo(map);
  });
};


application.html.erb

    <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet' />


[enter image description here][1]


  [1]: https://i.stack.imgur.com/YY6kS.png