/* ============================================================
   CheckBoxList
   ============================================================ */

.myCheckBoxList {
    display: flex;
    gap: 8px;
}

    .myCheckBoxList.is-vertical {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .myCheckBoxList.is-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 14px;
        row-gap: 6px;
    }

    .myCheckBoxList .cbl-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 22px;
        cursor: pointer;
    }

    .myCheckBoxList .cbl-label {
        line-height: 22px;
        cursor: pointer;
        user-select: none;
    }

    .myCheckBoxList input[type="checkbox"] {
        cursor: pointer;
    }

    .myCheckBoxList.is-readonly .cbl-item,
    .myCheckBoxList.is-readonly .cbl-label,
    .myCheckBoxList.is-readonly input[type="checkbox"] {
        cursor: default;
    }

/* ============================================================
   RadioButtonList
   ============================================================ */

.myRadioButtonList {
    display: flex;
    gap: 8px;
}

    .myRadioButtonList.is-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .myRadioButtonList.is-vertical {
        flex-direction: column;
        align-items: flex-start;
    }

    .myRadioButtonList .rbl-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    /* R3B FIX2 : la sélection moderne est rendue comme un bouton, pas comme un input radio. */
    .myRadioButtonList .rbl-item.btn-primary {
        background-color: var(--zen-theme-selection-accent, rgb(15, 108, 189));
        border-color: var(--zen-theme-selection-accent, rgb(15, 108, 189));
        color: var(--zen-theme-selection-text, #ffffff);
    }

        .myRadioButtonList .rbl-item.btn-primary:hover {
            background-color: var(--zen-theme-selection-accent, rgb(17, 94, 163));
            border-color: var(--zen-theme-selection-accent, rgb(17, 94, 163));
        }

        .myRadioButtonList .rbl-item.btn-primary:active {
            background-color: var(--zen-theme-selection-accent, rgb(12, 78, 138));
            border-color: var(--zen-theme-selection-accent, rgb(12, 78, 138));
        }

        .myRadioButtonList .rbl-item.btn-primary.default {
            box-shadow:
                0 0 0 1px var(--zen-theme-selection-accent, rgba(15, 108, 189, 0.6)),
                0 2px 4px rgba(0, 0, 0, 0.12);
        }

        .myRadioButtonList .rbl-item.is-selected i,
        .myRadioButtonList .rbl-item.is-selected span {
            color: inherit;
        }

    .myRadioButtonList.is-readonly .rbl-item {
        cursor: default;
    }

        .myRadioButtonList.is-readonly .rbl-item:hover {
            filter: none;
        }

    /* Neutralisation hover en lecture */
    .myRadioButtonList.is-readonly .btn-primary:hover {
        background-color: var(--zen-theme-selection-accent, rgb(15, 108, 189));
        border-color: var(--zen-theme-selection-accent, rgb(15, 108, 189));
        color: var(--zen-theme-selection-text, #ffffff);
    }

    .myRadioButtonList.is-readonly .btn-secondary:hover {
        background-color: #ffffff;
        border-color: #c8c6c4;
        color: #323130;
    }