/*********************************************
 * Style
 * Note: This file only contains CSS for layout of choices field, or element that created by GF.
 * To style each single checkbox or radio button, please check the form-style component.
**********************************************/
.gchoice:not(:last-child) {margin-bottom:var(--bb-spacing-10);}

/* button select all */
.gfield_radio button, .gfield_checkbox button {
    background:#fff; border:1px solid #707070; padding:3px 10px;
    font-size:16px; color:#000; font-weight:500;
}
.gfield_radio button:hover, .gfield_checkbox button:hover,
.gfield_radio button:hover, .gfield_checkbox button:focus {
    background:var(--bb-color-yellow); color:var(--bb-color-on-primary); border-color:var(--bb-color-yellow);
}
.gfield_radio button:focus-visible, .gfield_checkbox button:focus-visible {outline:2px solid var(--bb-color-primary); transition:none;}


/*********************************************
 * Radio
**********************************************/
/* other choice */
.gform_wrapper .gfield-choice-input[type="radio"][value="gf_other_choice"] ~ input {margin-top:8px;}
.gform_wrapper .gfield-choice-input[type="radio"][value="gf_other_choice"] ~ input[disabled] {display:none;}


/*********************************************
 * Ready class
**********************************************/
@media only screen and (min-width:480px) {
    /* inline */
    .gfield.gf_list_inline .gfield_radio,
    .gfield.gf_list_inline .gfield_checkbox {display:flex; flex-wrap:wrap; gap:var(--bb-spacing-10) var(--form-gap-h); width:100%;}
    .gfield.gf_list_inline .gfield_radio .gchoice:not(:last-child),
    .gfield.gf_list_inline .gfield_checkbox .gchoice:not(:last-child) {margin-bottom:0;}

    /* 2 columns */
    .gfield.gf_list_2col .gfield_radio,
    .gfield.gf_list_2col .gfield_checkbox {width:100%; display:flex; flex-wrap:wrap; gap:var(--bb-spacing-10) var(--form-gap-h);}
    .gfield.gf_list_2col .gchoice {display:inline-block; width:calc(50% - var(--form-gap-h) / 2); margin:0;}
}