in stock out of stock woocomerce color badge not working

guys, I have a little problem here, maybe you know how to solve it because it’s driving me insane.
So I have this code in my Theme Functions, functions.php, that goes like this:

function webis_stoc( $atts ){
   global $product;
   echo "<div class='stoc'>";
   $stoc=$product->stock_status;
   switch($stoc){
       case "onbackorder": echo "<span class='precomanda'; style='color:orange;'; >Precomanda</span>"; break;
      case "instock": echo "<span class='inStoc'; style='color:green;' >in stoc</span>"; break;
      case "outofstock": echo "<span class='farastoc'; style='color:red;' >Stoc epuizat</span>"; break;
      default : echo $stoc; break;
   }
   echo "</div>";
}
add_shortcode  ('webis_stoc','webis_stoc' ); 

The problem here is that the CSS in every these 3 cases are not displaying (it’s always green, no red or orange, even if it’s in on backorder or out of stock, it’s still green.
How can I solve this?
here is the onbackorder that is supposed to be orange

I tried to modify the colors with background-color , but it only changed the color of the text, and I want the full button to recolor