.fx-checkbox-group-style label {
    float: left;
    min-width: 100px;
    cursor: pointer;
    margin-right: 10px;
    border: 1px solid #AAA;
    background-color: #DDD;
    text-align: center;
    padding: 8px;
}

.fx-checkbox-group-style [type="checkbox"]:checked + label {
    background-color: #0b7b6d;
    color: #FFF;
}
/* checkbox with inline label - start */


/* container spacing (optional) */
.fx-checkbox-row {
    display: inline-flex;
    align-items: center;
    margin: 6px;
}

/* visually hide the native checkbox but keep it accessible */
.fx-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* label handles interaction */
}

/* the label styled as a button, placed to the right */
.fx-checkbox-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #cfcfcf;
    background: white;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    transition: background .12s, box-shadow .12s, transform .06s;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* small icon indicator using pseudo-element (left side inside label) */
.fx-checkbox-btn::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #bdbdbd;
    display: inline-block;
    flex: 0 0 16px;
    background: transparent;
    transition: background .12s, border-color .12s;
    margin-right:8px;
}

/* checked state */
.fx-checkbox:checked + .fx-checkbox-btn {
    background: #042954 !important; /* your theme color */
    color: white !important;
    border-color: #042954 !important;
    box-shadow: 0 6px 18px rgba(4,41,84,0.25) !important;
}

/* tick icon color updated */
.fx-checkbox:checked + .fx-checkbox-btn::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: white;
    border: 1px solid white;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23042954' d='M6.173 13.727L1.07 8.624l1.414-1.414 3.688 3.687 7.778-7.778 1.414 1.414z'/></svg>");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/* focus-visible for keyboard users */
.fx-checkbox:focus + .fx-checkbox-btn,
.fx-checkbox-btn:focus {
    outline: 3px solid rgba(30,144,255,0.18);
    outline-offset: 2px;
}

/* hover effect */
.fx-checkbox-btn:hover {
    transform: translateY(-1px);
}

/* disabled state: input disabled + label */
.fx-checkbox:disabled + .fx-checkbox-btn {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: #f7f7f7;
    color: #8a8a8a;
    border-color: #e0e0e0;
}

/* ARIA/read-only visual (if you set data-readonly="true" on the input) */
.fx-checkbox[data-readonly="true"] + .fx-checkbox-btn {
    opacity: 0.9;
    cursor: default;
    box-shadow: none;
}





/* checkbox with inline label - end */