/* language */
.language-translate {
  cursor: pointer;
  margin: 0;
  position: relative;
  display: inline-block;
}
.icon-lang {
  background: url("/mobile/common/images/flag.svg") no-repeat;
  display: inline-block;
  height: 13px;
  vertical-align: middle;
  width: 20px;
}

.language-list {
  background: #dadada;
  color: #333333;
  display: none;
  position: absolute;
  z-index: 999;
}

.language-ja {background-position: 0 -13px;}
.language-ko {background-position: 0 -26px;}
.language-en {background-position: 0 0;}

/* 2026-09-09 추가 언어 국기.
   기존 flag.svg 는 en/ja/ko 3칸 전용이라 칸을 늘릴 수 없어,
   웹 쪽에 이미 있는 intl-tel-input 국기 스프라이트(/common/images/flags.png)를 재사용한다.
   좌표는 common/css/app.css 의 .iti-flag.<코드> 값과 동일하다. */
.language-vi,
.language-id,
.language-bn,
.language-pt,
.language-es {
  background-image: url("/common/images/flags.png");
  background-color: #DBDBDB;
  box-shadow: 0 0 1px 0 #888;
  width: 20px;
}

.language-vi {height: 14px; background-position: -5412px 0;}   /* vn */
.language-id {height: 14px; background-position: -2325px 0;}   /* id */
.language-bn {height: 12px; background-position: -418px 0;}    /* bd */
.language-pt {height: 14px; background-position: -680px 0;}    /* br */
.language-es {height: 14px; background-position: -1071px 0;}   /* co */

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .language-vi,
  .language-id,
  .language-bn,
  .language-pt,
  .language-es {
    background-image: url("/common/images/flags@2x.png");
  }
}

.lang-container .js-language{
  min-width: auto;
  cursor: pointer;
  list-style: none;
  border-radius: 4px;
}

div#language-flag{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 110px;
  height: 40px;
  gap: 8px;
  padding: 0 5px;
  font-weight: 700;
  font-size: 12px;
  color: #FFFFFF;
}

ul.lang-container {
  margin: 0;
}

ul.language-list{
  background: #0082BA;
}

ul.language-list li{
  width: 110px;
  height: 32px;
  padding: 0 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  color: #FFFFFF;
  border: 0;
}

ul.language-list li.active {
  background: linear-gradient(180deg, #FA57CC 0%, #F444B8 34.9%, #E51E8D 67.19%, #E51E8D 83.33%, #BB116D 100%);
}