Почему внутренний элемент радиокнопки не центрируется, а скачет при уменьшении размера. Это можно как-то вылечить?

<div class="input-box"> 
    <div class="custom-checkbox">
        <label for="input-winter">
            <input type="radio" class="radio" id="input-winter" name="season" checked>
            <span class="pseudo-radio"></span>
            Winter
        </label>
    </div>
    <div class="custom-checkbox">
        <label for="input-spring">
            <input type="radio" class="radio" id="input-spring" name="season">
            <span class="pseudo-radio"></span>
            spring
        </label>
    </div>          
    <div class="custom-checkbox">
        <label for="input-summer">
            <input type="radio" class="radio" id="input-summer" name="season">
            <span class="pseudo-radio"></span>
            summer
        </label>
    </div>  
    <div class="custom-checkbox">   
        <label for="input-autumn">
            <input type="radio" class="radio" id="input-autumn" name="season">
            <span class="pseudo-radio"></span>
            autumn
        </label>
    </div>
</div> 

.input-box {
    display: flex;
    gap: 90px;
    margin-bottom: 40px;
}

.custom-checkbox {
    position: relative;
    display: flex;
}

.custom-checkbox label {
    padding: 5px;
    cursor: pointer;
}

.radio {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0;
    height: 0;
}

.pseudo-radio {
    position: relative;
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 1px solid #000000;
    background-color: #ffffff;
    border-radius: 50%;
    vertical-align: sub;
    margin-right: 20px;
    padding: 5px;
    cursor: pointer;
}

.pseudo-radio::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #000000;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s ease-in; 
} 

.radio:checked + .pseudo-radio::before {
    transform: translate(-50%, -50%) scale(1);
}