custom styling for checkbox with input within label

I am trying to custom style my checkbox. It works normally until i place my input within my label, this is needed due to a accordion wrap.

dose anyone know how to get the custom css working ?

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
    color:green;
    display: inline-block;
}
    
input[type=checkbox] + label:before { content: ""; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */
    
input[type=checkbox]:checked + label:before { content: "✔"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

<label for="c2">
    <input type="checkbox" id="c2" name="cc" />
    <p>hello</p>
</label>