选中单选按钮时更改容器上的边框

Question

我想使单选按钮=选中时使边框更改颜色。我将输入标签移动到标签内，使单选按钮出现在弹性项目框内。

如果您有任何提示，或者知道答案，那么如果您伸出手，我将非常高兴。谢谢！

.flex-container {
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.flex-item {
    color: var(--light-gray);
    font-size: 15px;
    margin: 5px 5px 5px 5px;
    align-content: center;
    width: 100%;
    display: block;
    cursor: pointer;
}

.flex-item label {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 14px 16px;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #b3b7ba;
}

.flex-item:hover {
    background-color: #fafafa;
}

.flex-item input[type="radio"]:checked ~ label {
    font-weight: bold;
    color: #000;
    border: 2px solid red;
}

<!-- Main card -->
    <main>

        <div class="line"></div>
        <h3 class="header">Hvor langt har du kommet?</h3>
        <div class="flex-container">
            <div class="flex-item">
                <label for="sell">
                    <input type="radio" name="format" id="sell" value="txt">
                    Bestemt meg for å selge
                </label>
            </div>
            <div class="flex-item">
                <label for="wish">
                    <input type="radio" name="format" id="wish" value="txt">
                    Ønsker kun verdivurdering
                </label>
            </div>
        </div>
        <form action="http://google.com">
            <button type="submit"> Neste </button>
        </form>
        <a class="back" href="#">Tilbake</a>
    </main>