Help Understanding how to select css class depending on a setting from database

[aquadave]

Firstly Im new here so hopefully i have posted in the correct way,
secondly hi

I am modifying a .phtml file from a known auction script

i am trying to change the css of a listing card if the user has paid for a highlighted function

my css is set

this if not selected

.cardl {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 170px;
    word-wrap: break-word;
    background: linear-gradient(to bottom right, #ffbfba,#ff978f,#ff756b,#ff594c,#ff756b,#ff978f);
    background-clip: border-box;
    padding: 5px 10px 5px 10px;
    border: 6px solid gold;}

this for the highlighted feature

.cardl-highlighted {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background: linear-gradient(to bottom right, #ffffa4,#fff870,#fff200,#fff870,#ffffa4,#fff870);
    background-clip: border-box;
    padding: 5px 10px 5px 10px;
    border: 8px solid gold;
    border-radius: 20px;
}

and this is the command that was being used to activate a highlighted option

<?php echo ($listing['highlighted'] && $this->settings['enable_highlighted']) ? 'cardl-highlighted' : ''; ?>">

this is the line im trying to run it on.

<div class="cardl listing-card" data-listing-id="<?php echo $listing['id']; ?>">

css for the current line is correct, and the css for the "highlighted feature" very similar so think it should be correct.
i just dont know how to activate the second css style instead of the default one.

i hope i have given enough information.
Many thanks in advance

border-radius: 20px;
}[/CODE]