.lf-switcher{
  --lf-bg:#fff;
  --lf-text:#143852;
  --lf-accent:#008399;
  --lf-radius:10px;
  font-size:15px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

/* Flag artwork ------------------------------------------------------------ */
.lf-switcher__flag{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
}
.lf-flag{
  display:block;
  width:24px;
  height:16px;
  border-radius:2px;
  /* Keeps white-heavy flags (NL, JP) from bleeding into a white row. */
  box-shadow:0 0 0 1px rgba(0,0,0,.16);
}

/* Inline list ------------------------------------------------------------- */
.lf-switcher--list{
  display:flex;
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.lf-switcher--list .lf-switcher__item a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--lf-text);
  text-decoration:none;
}
.lf-switcher--list .lf-switcher__item.is-current a{color:var(--lf-accent);font-weight:600}
.lf-switcher--list .lf-switcher__item a:hover,
.lf-switcher--list .lf-switcher__item a:focus-visible{color:var(--lf-accent)}

/* Dropdown ---------------------------------------------------------------- */
.lf-switcher--dropdown{position:relative;display:inline-block}

.lf-switcher__toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:9px 14px;
  font:inherit;
  color:var(--lf-text);
  background:var(--lf-bg);
  border:2px solid var(--lf-accent);
  border-radius:var(--lf-radius);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.lf-switcher__toggle:hover,
.lf-switcher__toggle:focus-visible{background:var(--lf-accent);color:#fff}
.lf-switcher__toggle:focus-visible{outline:2px solid var(--lf-accent);outline-offset:2px}

.lf-switcher__caret{
  width:0;height:0;margin-left:2px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .15s ease;
}
.lf-switcher__toggle[aria-expanded="true"] .lf-switcher__caret{transform:rotate(180deg)}

.lf-switcher__menu{
  position:absolute;
  z-index:99999;
  top:calc(100% + 6px);
  left:0;
  min-width:max(100%,190px);
  margin:0;
  /* No padding, so the highlighted row reaches the card edges. */
  padding:0;
  list-style:none;
  background:var(--lf-bg);
  border:2px solid var(--lf-accent);
  border-radius:var(--lf-radius);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  overflow:hidden;
}
.lf-switcher__menu .lf-switcher__item{margin:0}
.lf-switcher__menu .lf-switcher__item a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 18px;
  color:var(--lf-text);
  text-decoration:none;
  white-space:nowrap;
  transition:background .12s ease,color .12s ease;
}
.lf-switcher__menu .lf-switcher__item a:hover,
.lf-switcher__menu .lf-switcher__item a:focus-visible{
  background:color-mix(in srgb,var(--lf-accent) 12%,transparent);
  color:var(--lf-text);
  outline:none;
}
/* Active language: solid accent band, full bleed. */
.lf-switcher__menu .lf-switcher__item.is-current a{
  background:var(--lf-accent);
  color:#fff;
  font-weight:500;
}
.lf-switcher__menu .lf-switcher__item.is-current a:hover,
.lf-switcher__menu .lf-switcher__item.is-current a:focus-visible{
  background:var(--lf-accent);
  color:#fff;
}

/* Browsers without color-mix still get a visible hover. */
@supports not (background:color-mix(in srgb,#000 10%,transparent)){
  .lf-switcher__menu .lf-switcher__item a:hover{background:rgba(0,0,0,.06)}
}

/* Floating switcher ------------------------------------------------------- */
.lf-floater{position:fixed;z-index:99998}
.lf-floater--bottom-right{right:22px;bottom:22px}
.lf-floater--bottom-left{left:22px;bottom:22px}
.lf-floater--top-right{right:22px;top:22px}
.lf-floater--top-left{left:22px;top:22px}
.lf-floater .lf-switcher__menu{top:auto;bottom:calc(100% + 6px)}
.lf-floater--top-right .lf-switcher__menu,
.lf-floater--top-left .lf-switcher__menu{top:calc(100% + 6px);bottom:auto}
.lf-floater--bottom-right .lf-switcher__menu,
.lf-floater--top-right .lf-switcher__menu{left:auto;right:0}

/* Nav menu integration ---------------------------------------------------- */
.lf-menu-switcher .sub-menu{list-style:none}
.lf-menu-item a{display:flex;align-items:center;gap:9px}

@media (prefers-reduced-motion:reduce){
  .lf-switcher__toggle,.lf-switcher__caret,.lf-switcher__menu .lf-switcher__item a{transition:none}
}