/*
 * Стили поля powermail типа "buttons".
 *
 * Кнопки видны, только когда JS успешно инициализировал поле (класс
 * buttons-field--enhanced). Без JS пользователь видит обычный select —
 * поле остаётся заполняемым (graceful degradation).
 */

/* Кнопки по умолчанию скрыты: их показывает только JS-режим */
.buttons-field__buttons {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/*
 * sr-only, но только в enhanced-режиме.
 * Не display:none и не visibility:hidden — иначе поле выпадет из формы и валидации.
 */
.buttons-field--enhanced .buttons-field__select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.buttons-field--enhanced .buttons-field__buttons {
    display: flex;
    /*flex-direction: column;*/
}

/* Контейнер поля */
.buttons-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

/* Базовая кнопка */
.buttons-field__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    line-height: 1.25;
    padding: 0.5rem 1rem;
    border: 1px solid #b5b5b5;
    border-radius: 0.25rem;
    background: #fff;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.buttons-field__button:hover {
    border-color: #6c757d;
    background: #f5f5f5;
}

/* Видимый фокус только для клавиатуры */
.buttons-field__button:focus-visible {
    outline: 2px solid #2a6ebb;
    outline-offset: 2px;
}

/* Выбранная кнопка */
.buttons-field__button.is-selected {
    border-color: #2a6ebb;
    background: #2a6ebb;
    color: #fff;
}

.buttons-field__button.is-selected:hover {
    background: #245c9d;
    border-color: #245c9d;
}

/*
 * Ошибка валидации.
 * Класс powermail_field_error вешает JS на контейнер .buttons-field
 * (см. data-powermail-class-handler в ButtonsValidationAttributesViewHelper),
 * а при серверной ошибке он приходит сразу с рендера партиала.
 */
.buttons-field.powermail_field_error .buttons-field__button {
    border-color: #c0392b;
}

.buttons-field.powermail_field_error .buttons-field__button.is-selected {
    border-color: #c0392b;
    background: #c0392b;
    color: #fff;
}

/* Список сообщений, который JS добавляет в .powermail_field_error_container_{marker} */
.powermail_field_error_container {
    color: #c0392b;
    font-size: 0.9em;
    margin-top: 0.25rem;
}

.powermail_field_error_container .powermail-errors-list {
    margin: 0;
    padding-left: 1.1em;
    list-style: disc;
    color: #c0392b;
}