.language-dropdown {

  position: relative;

  display: inline-block;

}


.lang-pill {

  display: flex;

  align-items: center;

  gap: 6px;

  background: transparent;

  border: none;

  cursor: pointer;

  padding: 4px 8px;

  border-radius: 6px;

  transition: background 0.2s;

}


.lang-pill:hover {

  background: rgba(255, 255, 255, 0.1);

}


.lang-pill .flag-current-wrapper {

  display: flex;

  align-items: center;

}


.lang-pill .flag {

  width: 24px;

  height: 16px;

  border-radius: 2px;

}



.lang-menu {

  position: absolute;

  top: calc(100% + 8px);

  right: 0;

  min-width: 40px;

  background: var(--color-background);

  border: 1px solid var(--border-color);

  border-radius: 8px;

  padding: 6px;

  box-shadow: var(--box-shadow);

  list-style: none;

  opacity: 0;

  visibility: hidden;

  transform: translateY(-8px);

  transition: all 0.2s ease;

  z-index: 100;

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  justify-content: center;

  width: 220px;

  display: flex;

  flex-direction: column;

width: fit-content;

}


.lang-menu--open {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);


}


.lang-menu li {

  display: inline-block;

}


.lang-menu a {

  display: flex;

  align-items: center;

  padding: 4px 6px;

  border-radius: 4px;

  transition: background 0.2s;

  cursor: pointer;

}


.lang-menu a:hover {

  background: rgba(59, 130, 246, 0.1);

}


.lang-menu .flag {

  width: 24px;

  height: 16px;

  border-radius: 2px;

  display: block;

}


@media (max-width: 768px) {

  .lang-menu {

    right: 10px;

    left: 0;


  }

}