/* Scope all rules to the donation form's product radio fields. */
.doneer-formulier .gfield--type-product .gfield_radio {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
}

.doneer-formulier .gfield--type-product .gfield_radio .gchoice {
    position: relative;
    flex: 1 1 110px;
    margin: 0 !important;
    padding: 0;
}

/* Keep the real inputs available to keyboard and screen-reader users. */
.doneer-formulier .gfield--type-product .gfield_radio input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0 !important;
}

.doneer-formulier .gfield--type-product .gfield_radio input[type="radio"] + label {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 12px 22px;
    border: 2px solid var(--awb-color6, #3d8260);
    border-radius: 40px;
    background: var(--awb-color1, #fff);
    color: var(--awb-color7, #193c35);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}

.doneer-formulier .gfield--type-product .gfield_radio input[type="radio"]:not(:disabled) + label:hover {
    background: #e4edee;
    border-color: var(--awb-color7, #193c35);
}

.doneer-formulier .gfield--type-product .gfield_radio input[type="radio"]:checked + label {
    background: var(--awb-color7, #193c35);
    border-color: var(--awb-color7, #193c35);
    color: var(--awb-color1, #fff);
    box-shadow: inset 0 0 0 2px var(--awb-color1, #fff);
}

.doneer-formulier .gfield--type-product .gfield_radio input[type="radio"]:checked:not(:disabled) + label:hover {
    background: var(--awb-color7, #193c35);
}

.doneer-formulier .gfield--type-product .gfield_radio input[type="radio"]:focus-visible + label {
    outline: 3px solid var(--awb-color5, #f14f60);
    outline-offset: 4px;
}

.doneer-formulier .gfield--type-product .gfield_radio input[type="radio"]:disabled + label {
    opacity: .5;
    cursor: not-allowed;
}