/* eventually generics */
.radio-checkbox { position: relative; display: inline-flex; width: 100%; }
.radio-checkbox .toggle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.radio-checkbox .toggle input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.radio-checkbox .box { width: 28px; height: 28px; border: 2px solid #202124; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; transition: border-color .2s; }
.radio-checkbox .box::after { content: ""; }

.radio-checkbox .toggle.on { display: flex; }
.radio-checkbox .toggle.off { display: none; }

/* When checked, swap visible label and show green border + checkmark */
.radio-checkbox:has(.toggle.on input:checked) .toggle.on { display: none; }
.radio-checkbox:has(.toggle.on input:checked) .toggle.off { display: flex; }
.radio-checkbox:has(.toggle.on input:checked) .box { border-color: darkgreen; }
.radio-checkbox:has(.toggle.on input:checked) .box::after { content: "✔"; color: darkgreen; font-weight: bold; font-size: 28px; }