/* Decorative flags: language names and existing navigation remain intact. */
.hfn-shell {
  --hfn-flag-fr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h60v40H0z%22%2F%3E%3Cpath%20fill%3D%22%23002395%22%20d%3D%22M0%200h20v40H0z%22%2F%3E%3Cpath%20fill%3D%22%23ed2939%22%20d%3D%22M40%200h20v40H40z%22%2F%3E%3C%2Fsvg%3E");
  --hfn-flag-en: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22flag%22%3E%3Cpath%20d%3D%22M0%200h60v40H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url%28%23flag%29%22%3E%3Cpath%20fill%3D%22%23012169%22%20d%3D%22M0%200h60v40H0z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%228%22%20d%3D%22m0%200%2060%2040M60%200%200%2040%22%2F%3E%3Cpath%20stroke%3D%22%23c8102e%22%20stroke-width%3D%223%22%20d%3D%22m0%200%2060%2040M60%200%200%2040%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%2213%22%20d%3D%22M30%200v40M0%2020h60%22%2F%3E%3Cpath%20stroke%3D%22%23c8102e%22%20stroke-width%3D%227%22%20d%3D%22M30%200v40M0%2020h60%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --hfn-flag-ar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Cpath%20fill%3D%22%23c1272d%22%20d%3D%22M0%200h60v40H0z%22%2F%3E%3Cpath%20d%3D%22m30%2010.5%205.58%2017.18-14.61-10.62h18.06L24.42%2027.68Z%22%20fill%3D%22none%22%20stroke%3D%22%23006233%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.hfn-shell .hfn-language > button,
.hfn-shell .hfn-language a[lang],
.hfn-shell .hfn-mobile-languages > a[lang] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.hfn-shell .hfn-language > button { display: inline-flex; gap: 7px; }
.hfn-shell .hfn-language > button::before,
.hfn-shell .hfn-language a[lang]::before,
.hfn-shell .hfn-mobile-languages > a[lang]::before {
  content: "";
  display: block;
  width: 24px;
  height: 16px;
  flex: 0 0 24px;
  border-radius: 3px;
  background-image: var(--hfn-flag-fr);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px #10274712, 0 2px 5px #10274712;
}
.hfn-shell .hfn-language > button::before { width: 21px; height: 14px; flex-basis: 21px; }
.hfn-shell :is(.hfn-language,.hfn-mobile-languages) a[lang="en"]::before,
html[lang="en"] .hfn-shell .hfn-language > button::before { background-image: var(--hfn-flag-en); }
.hfn-shell :is(.hfn-language,.hfn-mobile-languages) a[lang="ar"]::before,
html[lang="ar"] .hfn-shell .hfn-language > button::before { background-image: var(--hfn-flag-ar); }
.hfn-shell .hfn-language > div { min-width: 180px; }
.hfn-shell .hfn-mobile-languages > a[lang] > span { margin-inline-start: auto; }
