/* Файл: client/js/Widgets/RadioGroup.css
   Визуальный стиль виджета RadioGroup (см. Widgets/RadioGroup.js) — своя независимая копия
   .field-caption: это подпись именно RadioGroup, не обязана меняться вместе с Field/Select/др.

   Важно: .field-caption применяется ТОЛЬКО к настоящей подписи группы ("Answer" и т.п.) — у
   <label>, которым обёрнут КАЖДЫЙ вариант ответа (радиокнопка + текст), класса нет и не должно
   быть. Раньше оба этих <label> красились одним и тем же глобальным правилом по тегу — вариант
   ответа получал жирность и увеличенный шрифт, которые предназначались только для подписи. */

/* margin-bottom убран (2026-09-30) — расстояние до контрола теперь даёт gap родителя
   (.field-group, см. client-form.css), а не собственный отступ подписи. */
.field-caption {
    display: block;
    font-size: var(--font-size, 14px);
    font-weight: normal;
    color: #000;
}

/* Текст варианта ответа (data, см. dataStyle) — раньше без класса, только инлайн из dataStyle
   (пусто по умолчанию), наследовал голый текст страницы. Те же значения, что и caption. */
.radio-option {
    font-size: var(--font-size, 14px);
    font-weight: normal;
    color: #000;
}

/* displayStyle:'Segmented' (см. Widgets/RadioGroup.js) — тот же <input type="radio"> +
   .radio-option, что и обычный List, просто контейнер получает класс .radio-segmented и сам
   <input> визуально прячется (position:absolute;opacity:0) — остаётся в DOM и в tab-порядке ради
   доступности/синхронизации значения (client-form-events.js слушает input[type=radio] как обычно).
   Подсветка выбранного пункта — чистый CSS (:has(input:checked)), без JS-переключения классов по
   клику: один источник истины (состояние самого input), перерисовывать ничего не нужно. */
.radio-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    background: #eef2f7;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.radio-segmented .radio-option {
    position: relative;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    color: #4a5568;
}
.radio-segmented .radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.radio-segmented .radio-option:has(input:checked) {
    background: #0078d7;
    color: #fff;
    font-weight: bold;
}
.radio-segmented .radio-option:hover {
    color: #222;
}
.radio-segmented .radio-option:has(input:checked):hover {
    color: #fff;
}
.radio-segmented .radio-option:has(input:disabled) {
    cursor: default;
    opacity: 0.6;
}