Checkbox lar Doğru çalışmıyor

Merhaba arkadaşlar şöyle bir problemim var site de Checkbox'a tıkladığımda bir işlem olmuyor biraz üstüne tıklayınca çalışıyor çözümü olan var mı?

İşaretli yerlere tıklayınca çalışıyor

Kod Bu şekilde:

 <div class="addon-box">
                                            <div class="pretty p-default">
                                                <input type="checkbox" name="services_addon[]" value="<?php echo esc_attr( $addon_id ) ?>" <?php echo esc_attr($selected) ?> />
                                                <div class="state p-success-o">
                                                    <label></label>
                                                </div>
                                            </div>
                                            <div class="addon-meta">
                                                <label class="addon-heading"><?php echo esc_html(get_the_title($addon_id)); ?></label>
                                                <span class="addon-price"> <span><?php echo esc_html__('Addon Price ','exertio_theme'); ?></span> <?php echo fl_price_separator(get_post_meta( $addon_id, '_addon_price', true )); ?></span>
                                                <p><?php echo esc_html($addon->post_content); ?></p>
                                            </div>
                                        </div>
                                    <?php
                                    }
                                    ?>
                                        
                                </div>

CSS kodlarına baktınız mı oradan olabilir.

.fr-project-ad-content .button-bid .bid-text-checkbox .pretty {
    vertical-align: middle;
    margin-right: 10px;
    margin-top: 5px;
}
.fr-project-ad-content .button-bid .bid-text-checkbox a {
    color: #242424;
    text-transform: capitalize;
    text-decoration: underline;
}
.fr-project-ad-content .button-bid .bid-text-checkbox {
    display: flex;
    color: #777;
}
.fr-project-ad-content .button-bid {
    position: relative;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.fr-project-adons .pretty.p-icon .state .icon, .bid-text-checkbox .pretty.p-icon .state .icon {
    font-size: 10px !important;
    width: calc(1em + 5px) !important;
    height: calc(1em + 13px) !important;
    top: calc((0% - (100% - 1em)) - 8%) !important;
}
.fr-project-ad-content .button-bid .has-feedback .smk-error-msg {
    left: 0;
    text-align: left;
    bottom: -10px;

İlgili CSS Kodu bu şekilde

Sorunu masaüstü için çözdüm fakat mobilde devam ediyor