/* --- Wrapper for Radio/Checkbox Options --- */
.cfm-options-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

/* --- Visually Hide the Default Input --- */
.cfm-options-wrapper .cfm-option-item input[type="radio"],
.cfm-options-wrapper .cfm-option-item input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* --- Style the Label to Look Like a Button --- */
.cfm-options-wrapper .cfm-selectable-option {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
    background-color: #f9f9f9;
    color: #444;
    transition: all 0.2s ease-in-out;
}

/* --- Hover State --- */
.cfm-options-wrapper .cfm-selectable-option:hover {
    border-color: #bbb;
    background-color: #f1f1f1;
}

/* --- Style for when the hidden input is checked --- */
.cfm-options-wrapper .cfm-option-item input:checked + .cfm-selectable-option {
    background-color: #1a73e8; 
    border-color: #1a73e8;
    color: #fff;
    font-weight: 500;
}

/* Main field label styling */
.cfm-field-label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.cfm-conditional-field {
    display: none;
}