/* Центрируем блоки с радио */
.webform-options-display-buttons {
  display: flex;
  justify-content: center; /* по центру по горизонтали */
  gap: 20px; /* расстояние между кнопками */
}

/* Чтобы сами кнопки выглядели красиво */
.webform-options-display-buttons-label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}
.form-actions {
  display: flex;
  justify-content: center; /* центр по горизонтали */
}
.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper {
    display: flex;
    flex: 1 1 0; /* или flex: 1; */
}
.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper > * {
    flex: 1; /* чтобы все кнопки занимали одинаковую ширину */
}

/* Каждая кнопка внутри */
.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper > * {
    flex: 1;                    /* Все кнопки равной ширины */
    background-color: #ffffff;  /* Цвет кнопки */
    color: #ffffff;             /* Цвет текста на кнопке */
    border: none;               /* Убираем рамку, если нужно */
    padding: 1px 4px;         /* Внутренние отступы */
    text-align: center;
    cursor: pointer;
    border-radius: 4px;         /* Скругление углов */
}

/* Эффект при наведении */
.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper > *:hover {
background-color: #014f86 !important;
    border-color: #014f86 !important;
    color: #ffffff !important; /* белый текст */
}
/* Горизонтальные кнопки — одинаковая ширина и цвет */
.webform-options-display-buttons-horizontal 
.webform-options-display-buttons-wrapper > * {
    flex: 1 !important;               /* принудительно одинаковая ширина */
    background-color: #012754 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 1px 4px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
}

/* Сама кнопка — выглядит как кнопка */
.webform-options-display-buttons-horizontal 
.webform-options-display-buttons-wrapper .webform-button {
  background-color: #012754 !important;
  border: 2px solid #012754 !important;
  color: #ffffff !important;
  text-transform: uppercase !important; /* капслок */
  font-size: 14px !important;           /* шрифт чуть меньше */
  line-height: 1.2 !important;
  padding: 6px 12px !important;         /* уменьшаем кнопку */
  margin: 4px !important;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.webform-options-display-buttons-horizontal 
.webform-options-display-buttons-wrapper label.webform-options-display-buttons-label {
    font-size: 18px !important;       /* размер шрифта больше */
    font-weight: bold !important;     /* жирный текст */
    text-transform: uppercase !important; /* капслок */
    text-align: center !important;    /* выравнивание текста */
    width: 100% !important;           /* текст на всю ширину кнопки */
    display: flex !important;         
    justify-content: center !important; /* центрируем по горизонтали */
    align-items: center !important;     /* центрируем по вертикали */
}
/* Hover */
.webform-options-display-buttons-horizontal 
.webform-options-display-buttons-wrapper .webform-button:hover {
  background-color: #021f4d !important;
  border-color: red !important;
  color: #fff !important;
}

/* При выборе (активная кнопка) */
.webform-options-display-buttons-horizontal 
.webform-options-display-buttons-wrapper input:checked + label {
    background-color: #021f4d !important;  
    border: 2px solid #ff0000 !important;  /* красная рамка */
    color: #ffffff !important;
}

/* Внешний label убираем полностью */
.webform-options-display-buttons label.webform-options-display-buttons-label {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  display: contents !important; /* label не создаёт блок, но сохраняет клик */
  color: #ffffff;
}
.webform-options-display-buttons, .form-composite.webform-fieldset--title-inline .fieldset-wrapper > div.webform-options-display-buttons {
    position: relative;
    display: flex
;
    flex-wrap: wrap;
    margin: 0 150px!important;
}
.form-item, .form-actions {
    margin: 0 0 1px 0;
}
/* Конкретные длинные кнопки */
label[for="edit-e5-1"],
label[for="edit-e5-10"],
label[for="edit-s2-1"],
label[for="edit-s2-10"] {
  font-size: 6px!important;   /* уменьшенный шрифт */
  line-height: 1.2;  /* чтобы текст помещался в одну строку */
  padding: 8px 14px; /* чуть меньше кнопка */
  white-space: normal; /* разрешаем перенос */
  text-align: center;  /* выравниваем */
}

fieldset.webform-composite-hidden-title {
    margin-bottom: 0 !important;
}

/* 📱 Мобильные — ДВА ряда */
@media (max-width: 480px) {
  .webform-options-display-buttons-horizontal 
  .webform-options-display-buttons-wrapper {
      justify-content: space-between; /* раздвигаем в ряд */
  }

  .webform-options-display-buttons-horizontal 
  .webform-options-display-buttons-wrapper label.webform-options-display-buttons-label {
      flex: 0 0 48% !important; /* две кнопки в ряд */
      margin-bottom: 10px;      /* отступ вниз для второго ряда */
  }
  .webform-options-display-buttons, .form-composite.webform-fieldset--title-inline .fieldset-wrapper >       div.webform-options-display-buttons {
    margin: 0 25px!important;
   }
   .webform-options-display-buttons label.webform-options-display-buttons-label {
      color: #ffffff;
    }
    fieldset.webform-composite-hidden-title {
            margin-bottom: none!important;
     }
}