Through the below image, I have tried to explain my question.

I want to detect the checked state of the checkbox so I can set different background, border, and text colors.

Some code snippets, I have shown above which are working and which not.

Then also pasting here so you can show me correction:

.elementor-field-type-checkbox .elementor-field-option{
    background: #eaebed;
    border: 3px solid #071330;
    border-radius: 5px;
    max-width: 20% !important;
    text-align: center;
    margin: 20px !important;
    padding:10px 5px !important;
    color: #071330;
    line-height: 30px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.elementor-field-type-checkbox .elementor-field-option label{
    font-family: "Montserrat";
    color: black !important;
}


.elementor-field-type-checkbox .elementor-field-option:hover{
    background: #071330;
    border: 3px solid #fca311;
}


.elementor-field-option input:checked ~ label { 
  color: white !important; /* Change text color when checked */
  background: #071330; /* Change background-color color when checked */
  /*border: 3px solid #fca311;*/
}

.elementor-field-type-checkbox .elementor-field-option input:checked {
  /*color: white !important;  Change text color when checked */
  
  background: #071330 !important; /* Change background-color color when checked */
  border: 3px solid #fca311 !important;
}

I have tried different things but nothing worked and I was struggling for last 2 days for this.

After this I am posting my question here, I hope someone will help me for this.

Thanks for your given time.