/* ============================================================
   LANGUAGE PREFERENCE TOGGLE BUTTONS
   ============================================================ */
#edit-please-select-your-preferred-language-for-documentation--wrapper {
  background: #f4f6f9;
  border: 1px solid #e0e4eb;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
#edit-please-select-your-preferred-language-for-documentation--wrapper .card-header {
  background: transparent;
  border: none;
  padding: 0 0 12px 0;
  text-align: center;
}
#edit-please-select-your-preferred-language-for-documentation--wrapper .card-body {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  justify-content: center;
}
#edit-please-select-your-preferred-language-for-documentation--wrapper-legend {
  text-align: center;
  width: 100%;
  display: block;
  margin: 0;
}
#edit-please-select-your-preferred-language-for-documentation--wrapper-legend .fieldset-legend {
  font-size: 14px;
  color: #4a4a4a;
  font-weight: 600;
}
#edit-please-select-your-preferred-language-for-documentation .form-check {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}
#edit-please-select-your-preferred-language-for-documentation .form-radio {
  display: none !important;
}
#edit-please-select-your-preferred-language-for-documentation {
  display: flex !important;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
#edit-please-select-your-preferred-language-for-documentation .form-check-label {
  display: inline-block;
  padding: 14px 20px;
  border: 2px solid #231A49;
  border-radius: 6px;
  color: #231A49;
  background: #ffffff;
  font-weight: 700;
  font-size: 18px;
  font-family: Roboto, Arial, sans-serif;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  user-select: none;
  letter-spacing: 0.5px;
}
#edit-please-select-your-preferred-language-for-documentation .form-check-label:hover {
  background: #ece9f2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(35, 26, 73, 0.25);
}
#edit-please-select-your-preferred-language-for-documentation .form-radio:checked + .form-check-label {
  background: #231A49;
  color: #fff;
  box-shadow: 0 4px 12px rgba(35, 26, 73, 0.35);
}

/* ============================================================
   PAGE TITLE (bilingual header, gradient block)
   ============================================================ */
.parent-block-style h2 {
  background: linear-gradient(135deg, #231A49, #3B2C74);
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: 24px 20px;
  margin-bottom: 10px;
  border-radius: 6px;
}
.parent-block-style h2 .title-en {
  display: block;
  font-size: 20px;
}
.parent-block-style h2 .title-fr {
  display: block;
  font-size: 20px;
  font-weight: 600;
  opacity: 1;
}

/* ============================================================
   RADIO BUTTON HOVER + SELECTED HIGHLIGHT
   Uses an absolutely-positioned ::before overlay instead of padding/
   margin on .form-check itself, so it CANNOT shift layout or
   alignment — it only paints a background behind the existing row.
   ============================================================ */
/* ============================================================
   RADIO BUTTON HOVER + SELECTED HIGHLIGHT
   box-shadow is purely visual — it never occupies layout space,
   so it cannot shift alignment, padding, or margins in any way.
   ============================================================ */
.webform-submission-form .form-check {
  border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.webform-submission-form .form-check:hover {
  background-color: rgba(35, 26, 73, 0.06);
  box-shadow: 0 0 0 4px rgba(35, 26, 73, 0.06);
}
.webform-submission-form .form-check:has(.form-radio:checked) {
  background-color: rgba(35, 26, 73, 0.10);
  box-shadow: 0 0 0 4px rgba(35, 26, 73, 0.10);
}