.rbs-styled {
  --rbs-bg: #f0f0f0;
  --rbs-color: #333;
  --rbs-hover: #e0e0e0;
  --rbs-selected: #2563eb;
  --rbs-selected-color: #fff;
  --rbs-radius: 4px;
  --rbs-width: 200px;
  --rbs-height: 50px;
}
.rbs-styled .form-item { margin-bottom: 0 !important; }
.rbs-styled .form-radio, .rbs-styled .form-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.rbs-styled label.option {
  display: flex; align-items: center; justify-content: center;
  /* Let the parent layout (grid / flex) control width — no hard
     min-width so we never overflow the form container. The grid
     columns or flex-wrap takes over for sizing. */
  width: 100%;
  min-height: var(--rbs-height);
  padding: 8px 16px; background: var(--rbs-bg); color: var(--rbs-color);
  border: 2px solid transparent; border-radius: var(--rbs-radius);
  cursor: pointer; text-align: center; font-size: 0.875rem; font-weight: 500;
  transition: all 0.15s ease; user-select: none;
  box-sizing: border-box;
}
.rbs-styled label.option:hover { background: var(--rbs-hover); }
.rbs-styled input:checked + label.option, .rbs-styled label.option.selected {
  background: var(--rbs-selected); color: var(--rbs-selected-color); border-color: var(--rbs-selected);
}
/* Layout applies to the INNER radio/checkbox container, not the
   outer <fieldset>. Drupal renders radios as:
     <fieldset class="rbs-styled rbs-layout-X">
       <legend>...</legend>
       <div class="fieldset-wrapper">
         <div id="edit-...">  <-- THIS holds the .form-item options
           <div class="form-item form-type-radio">...
           <div class="form-item form-type-radio">...
         </div>
         <div class="description">...</div>
       </div>
     </fieldset>
   The selector targets the first child of .fieldset-wrapper (the
   radio container, not the description). */
.rbs-styled .fieldset-wrapper > div:first-child {
  gap: 8px;
}
.rbs-layout-side_by_side .fieldset-wrapper > div:first-child {
  display: flex; flex-wrap: wrap;
}
.rbs-layout-grid_2 .fieldset-wrapper > div:first-child {
  display: grid; grid-template-columns: repeat(2, 1fr);
}
.rbs-layout-grid_3 .fieldset-wrapper > div:first-child {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.rbs-layout-grid_4 .fieldset-wrapper > div:first-child {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rbs-layout-stacked .fieldset-wrapper > div:first-child {
  display: flex; flex-direction: column;
}

/* Fallback when there's no .fieldset-wrapper (some Drupal contexts
   render radios as a flat <div> with the class directly on it). */
.rbs-layout-side_by_side:not(fieldset) { display: flex; flex-wrap: wrap; gap: 8px; }
.rbs-layout-grid_2:not(fieldset) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rbs-layout-grid_3:not(fieldset) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rbs-layout-grid_4:not(fieldset) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rbs-layout-stacked:not(fieldset) { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 640px) {
  .rbs-layout-grid_2 .fieldset-wrapper > div:first-child,
  .rbs-layout-grid_3 .fieldset-wrapper > div:first-child,
  .rbs-layout-grid_4 .fieldset-wrapper > div:first-child,
  .rbs-layout-side_by_side .fieldset-wrapper > div:first-child {
    grid-template-columns: 1fr; flex-direction: column;
  }
}