SLIDER: Radio button :checked ~ label background color doesn't change HTML/CSS

Question

I have a slider done with HTML/CSS only. It works. However, I would like it to change the label background color according to the currently chosen slide. I have spent the entire day (8hrs+) trying to figure out why it doesn't work. I have done coded several other sliders where the labels do change color but this slider won't and I cannot figure out why. Everything seems to be perfect other sliders I created seems to be exactly the same but their background does change color.

Here is the code.

<div class="wrapper">
            <div class="container">
                <div class="slides-container">
                    <input type="radio" name="r" id="r1" checked>
                    <input type="radio" name="r" id="r2">
                    <input type="radio" name="r" id="r3">
                    <input type="radio" name="r" id="r4">
        
                    <div class="slide slide-move"><img src="1.jpg" alt=""></div>
                    <div class="slide"><img src="2.jpg" alt=""></div>
                    <div class="slide"><img src="3.jpg" alt=""></div>
                    <div class="slide"><img src="4.jpg" alt=""></div>
                </div>
        
                <div class="navigation">
                    <label for="r1" class="bar"></label>
                    <label for="r2" class="bar"></label>
                    <label for="r3" class="bar"></label>
                    <label for="r4" class="bar"></label>
                </div>
            </div>
        </div>

And the CSS:

.wrapper {
    display: flex;
    justify-content: center;
    width: 80%;
}

.container {
    width: 960px;
    height: 380px;
    background-color: #777;
    overflow:  hidden;
}

.navigation {
    display: flex;
    position: relative;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
}

.navigation label {
    height: 8px;
    width: 30px;
    margin: 6px;
    cursor: pointer;
    background-color: #18a3dd;
    border-radius: 10px;
    transition: all .4s ease-out;
    display: inline-block;
}

.bar:hover {
    opacity: .8;
    transform: scale(1.1);
}

.slides-container input {
    display: none;
}

.slides-container {
    width: 400%;
    height: 100%;
    display: flex;
}

.slide {
    width: 25%;
    transition: all .5s ease;
}

.slide img {
    width: 100%;
    height: 100%;
}

#r1:checked ~ .navigation label:nth-child(1),
#r2:checked ~ .navigation label:nth-child(2),
#r3:checked ~ .navigation label:nth-child(3),
#r4:checked ~ .navigation label:nth-child(4) {
    background-color: red;
}

#r1:checked ~ .slide-move {
    margin-left: 0;
}

#r2:checked ~ .slide-move {
    margin-left: -25%;
}

#r3:checked ~ .slide-move {
    margin-left: -50%;
}

#r4:checked ~ .slide-move {
    margin-left: -75%;
}

Sorry for the long bit of css. I have yet to learn how to post shorter pieces of code. Any advice is welcome!