/*********************************************
 * Checkbox + Radio
**********************************************/
.gform_wrapper {
    --gf-choice-color:#000;
    --gf-choice-bg-hover:var(--twc-color-primary);
    --gf-choice-border:1px solid var(--twc-color-primary);
    --gf-choice-border-radius:2px;
    --size:16px;
}
.ginput_container_radio {--gf-choice-border-radius:50%;}

/* bottom spacing */
.gfield_radio .gchoice:not(:last-child),
.gfield_checkbox .gchoice:not(:last-child) {margin-bottom:8px;}

/* hide default input */
.ginput_container_consent input[type="checkbox"],
.gform_wrapper .gfield-choice-input {position:absolute; opacity:0;}

/* label */
.gfield_consent_label,
.gform_wrapper .gfield-choice-input + label {
    padding-left:28px; position:relative; cursor:pointer;
    display:inline-block;
}

/* box */
.gfield_consent_label:before,
.gform_wrapper .gfield-choice-input + label:before {
    position:absolute; top:.1em; left:0;
    content:""; display:inline-block;
    border:var(--gf-choice-border); border-radius:var(--gf-choice-border-radius);
    width:var(--size); aspect-ratio:1;
    background:var(--gf-bg); backdrop-filter:blur(16px);
}

/* focus */
input:focus + .gfield_consent_label:before,
.gform_wrapper .gfield-choice-input:focus + label:before {box-shadow:none; background:var(--gf-bg);}

/* hover */
input:hover + .gfield_consent_label:before,
.gform_wrapper .gfield-choice-input:hover + label:before {box-shadow:0 0 0 2px var(--twc-color-primary); background:var(--gf-bg);}

/* error */
.gfield_error input:not(:checked) + .gfield_consent_label:before,
.gfield_error .gfield-choice-input:not(:checked) + label:before {box-shadow:0 0 0 2px var(--gf-color-error); background:var(--gf-bg);}

/* a11y */
input:focus-visible + .gfield_consent_label:before,
.gform_wrapper .gfield-choice-input:focus-visible + label:before {box-shadow:0 0 0 2px var(--twc-color-primary); background:var(--gf-bg);}


/*********************************************
 * Checkbox
**********************************************/
.gfield_consent_label:after,
.gform_wrapper .gfield-choice-input[type="checkbox"] + label:after {
    position:absolute; top:.1em; left:.1em; display:inline-block;
    content:"\e932"; font-family:var(--twc-font-icomoon); font-size:1.2em;
    width:var(--size); aspect-ratio:1; line-height:var(--size);
    transition:all .1s ease;
    background:transparent; color:var(--gf-choice-color);
}

/* checked */
input:not(:checked) + .gfield_consent_label:after,
.gform_wrapper .gfield-choice-input[type="checkbox"]:not(:checked) + label:after {
    transform:translateY(3px) rotate(-25deg) scale(.5);
    opacity:0;
}


/*********************************************
 * Radio
**********************************************/
/* checked */
.gform_wrapper .gfield-choice-input[type="radio"]:checked + label:before {background:var(--twc-color-primary);}

/* 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;}


/*********************************************
 * Style
**********************************************/
/* inline */
.gfield.gf_list_inline .gfield_radio,
.gfield.gf_list_inline .gfield_checkbox {display:flex; flex-wrap:wrap; gap:20px; 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 {columns:300px 2; width:100%;}


/*********************************************
 * Custom checkbox grid
**********************************************/
@media only screen and (min-width:768px) {
    .twc-gf-checkbox {position:relative; padding-left:20%;}
    .twc-gf-checkbox .ginput_container {display:flex; flex-wrap:wrap;}

    /* label */
    .twc-gf-checkbox .gfield_label {width:19%; padding-right:10px;}

    /* grid */
    .twc-gf-checkbox__inner {width:81%; display:flex; flex-wrap:wrap;}
    .twc-gf-checkbox__inner > div:nth-child(odd) {width:40%;}
    .twc-gf-checkbox__inner > div:nth-child(even) {width:60%;}
}