Changing background-color of child removes box-shadow on parent

I am reading MDN Docs and a few articles, like this one, and question after question after question among others, but I can't seem to find a way around my particular problem.

I have a card-type element that includes a full-width form of radio buttons. When a button is :selected, I add a class to the button's parent div to change it's background-color. Since the parent div is full-width, the repaint removes the box-shadow on the card where that particular div touches the edge.

I can't seem to find a solution, perhaps you can help.

Here is my code. How can I ensure that the change in background-color doesn't break my box-shadow effect? Or, is this just an issue with paints and I need to add some sort of custom box-shadow to my .selected class?

$('.ClubSelect').click(function() {
    $(this).find('input[type=radio]')[0].click();
    $('.ClubSelect').removeClass('selected');
    $(this).addClass('selected');
});

* {
    box-sizing: border-box;
}

html {
    background-color: #fff;
    color: #422618;
    font-family: adobe-caslon-pro, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

div#SelectAClubLevel {
  width: 100%;
  padding: 10px;
}

.select-card {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    max-width: 580px;
    margin-bottom: 5px;
    z-index: 10;
    position: relative;
}

.ClubSelect {
    cursor: pointer;
    width: 100%;
    margin-bottom: 2px;
    background-color: #f5ddbc;
    height: 59px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

.selected {
    background-color: #d49948;
    position: relative;
    z-index: 10;
}

.ClubSelect input,
.ClubLevelTitle,
.ClubLevelAmt {
    display: inline-block;
    vertical-align: middle;
    color: #422618;
}

.ClubLevelTitle {
    font-family: freight-sans-pro, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
    font-size: 2rem;
}

.ClubSelect input {
    margin: 12px 5px 12px 20px;
    width: 1.4rem;
    height: 1.4rem;
}

.ClubLevelAmt {
    font-family: freight-sans-pro, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: lining-nums;
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
    font-size: 2rem;
    width: 130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="SelectAClubLevel">
    <h3>Please select a Monthly Giving Level</h3>
    <div class="select-card">
    
        <div id="club-84" class="ClubSelect LowerClub">
            <input ID="CLUB_LEVEL_1000" type="radio" value="84.00" name="clubselect" onclick="handleClick(this)" />
            <div class="ClubLevelAmt"><span>$84</span>/month</div>
            <div class="ClubLevelTitle">1000&nbsp;Club</div>
        </div>
        
        <div id="club-209" class="ClubSelect LowerClub">
            <input ID="CLUB_LEVEL_2500" type='radio' value="209.00" name="clubselect" onclick="handleClick(this)" />
            <div class="ClubLevelAmt"><span>$209</span>/month</div>
            <div class="ClubLevelTitle">2500&nbsp;Club</div>
        </div>
        
        <div id="club-417" class="ClubSelect LowerClub">
            <input ID="CLUB_LEVEL_FOUNDERS" type='radio' value="417.00" name="clubselect" onclick="handleClick(this)" />
            <div class="ClubLevelAmt"><span>$417</span>/month</div>
            <div class="ClubLevelTitle">Founder's Club</div>
        </div>

        <div id="club-834" class="ClubSelect UpperClub">
            <input ID="CLUB_LEVEL_CHAIRMANS" type='radio' value="834.00" name="clubselect" onclick="handleClick(this)" />
            <div class="ClubLevelAmt"><span>$834</span>/month</div>
            <div class="ClubLevelTitle">Chairman's Circle</div>
        </div>
    </div>
</div>

Solution

I think it's just a painting effect cos it doesn't break your box-shadow