Language Switcher

<div class="lang-switcher">
  <button class="lang-btn" id="langBtn">
    <img src="https://cdn.freeflags.org/flat-circle/united-kingdom-flag-flat-circle-64.png"
         width="24" height="24" alt="" />
    <span>English</span>
    <span>&#9662;</span>
  </button>
  <div class="lang-menu" id="langMenu">
    <button class="lang-item">
      <img src="https://cdn.freeflags.org/flat-circle/france-flag-flat-circle-64.png"
           width="24" height="24" alt="" />
      Français
    </button>
    <!-- more languages... -->
  </div>
</div>

.lang-switcher { position: relative; display: inline-block; }

.lang-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid #dce4ef;
  border-radius: 8px; background: white;
  font-size: 14px; font-weight: 700; cursor: pointer;
}

.lang-menu {
  display: none; position: absolute; top: calc(100% + 4px);
  left: 0; min-width: 180px; padding: 4px;
  border: 1px solid #dce4ef; border-radius: 8px;
  background: white; box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.lang-menu.open { display: block; }

.lang-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; border: 0;
  border-radius: 6px; background: none;
  font-size: 14px; cursor: pointer;
}

.lang-item:hover { background: #f5f8fc; }