.language-toggle { display: inline-block; }
.language-toggle__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 999px;
  color: #1a1a1a;
  text-decoration: none;
  border: none;
}
/* Pseudo labels and flags so we can use Drupal's link() safely */
/* Labels are real markup, no pseudo text */
.language-toggle__switch {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #cbd1d8;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.language-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0d6efd;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
  transition: transform .2s ease;
}
.language-toggle__link:hover .language-toggle__thumb { background: #0b5ed7; }

/* Position thumb to the side of the inactive code for visual cue. */
/* If inactive is MQ, move right; if FR, keep left. We infer via labels. */
.language-toggle.is-mq-active .language-toggle__thumb { transform: translateX(0); }
.language-toggle.is-fr-active .language-toggle__thumb { transform: translateX(24px); }

/* Insert the switch element between pseudo labels using generated content */
.language-toggle__link {
  position: relative;
}
/* spacing handled by gap */

/* Optional: add small flag icons via background images */
.language-flag { height: 20px; width: auto; display: inline-block; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Subtle alignment tweaks for label containers */
.language-toggle__label-left,
.language-toggle__label-right {
  display: inline-flex;
  align-items: center;
}