/* Shared language-picker styles — included on every page that renders
   <div class="hm-lang-picker"></div>. Keeps the look identical between
   the marketing site, signup flow and customer portal. */
.hm-lang-picker { position: relative; display: inline-block; }
.hm-lang-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid #d8dae4;
  background: #fff; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: #111827;
  transition: border-color .15s;
  font-family: inherit;
}
.hm-lang-trigger:hover { border-color: #1eb8e0; }
.hm-lang-flag {
  font-family: 'Twemoji Country Flags', 'Apple Color Emoji',
               'Segoe UI Emoji', sans-serif;
  font-size: 16px; line-height: 1;
}
.hm-lang-code { font-weight: 600; letter-spacing: 0.5px; }
.hm-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid #d8dae4;
  border-radius: 10px; padding: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
  min-width: 180px; z-index: 1000;
  flex-direction: column; gap: 2px;
  display: flex;
}
/* Collapsed by default — the hidden HTML attribute is overridden by the
   class-based display:flex above unless we force it back. */
.hm-lang-menu[hidden] { display: none !important; }
.hm-lang-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: transparent; border: none;
  border-radius: 6px; cursor: pointer; font-size: 14px;
  color: #111827; text-align: left; width: 100%;
  font-family: inherit;
}
.hm-lang-option:hover { background: #f7f8fc; }
.hm-lang-name { font-weight: 500; }
@media (max-width: 720px) {
  .hm-lang-trigger { padding: 4px 8px; font-size: 12px; }
}