/* Lang Switcher Component Styles */

.lang-switcher-container {
  display: flex;
  align-items: center;
  z-index: 1001;
  padding-right: 1rem; /* Add padding to the right */
}

.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.lang-switcher.scrolled {
  transform: scale(0.9); /* Slightly scale down when scrolled */
}

#lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; /* 设置固定宽度 */
  height: 2.5rem; /* 设置固定高度，与宽度相等 */
  padding: 0; /* 移除内边距，使用 flex 居中 */
  border-radius: 50%; /* 圆形 */
  border: 1px solid var(--text-color); /* 反色描边 */
  background-color: var(--color-bg-translucent); /* 使用半透明背景色 */
  color: var(--text-color); /* 文本颜色 */
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
  backdrop-filter: blur(10px); /* 默认背景模糊 */
  -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
}

#lang-toggle:active {
   transform: scale(0.95); /* 点击反馈 */
}

#lang-toggle.lang-zh {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; /* Better font for Chinese */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .lang-switcher-container {
    padding-right: 0.5rem;
  }

  #lang-toggle {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .lang-switcher-container {
    padding-right: 0.3rem;
  }

  #lang-toggle {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
  }

  .lang-switcher {
    transform: scale(0.95);
  }

  .scrolled .lang-switcher {
    transform: scale(0.85);
  }
}