/* --- 核心：疊加效果 CSS --- */

.globe-overlay-container {
  position: relative; /* 讓內層文字以此為基準定位 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;  /* 微調寬高以容納更大的文字 */
  height: 26px;
}

/* 1. 地球圖標基礎樣式 */
.globe-overlay-container .fa-globe {
  font-size: 26px; /* 同步放大地球，讓畫面更和諧 */
  color: #555;     
}

/* 2. 疊在上面的語言文字 */
.globe-overlay-container .overlay-text {
  position: absolute; 
  font-family: 'Arial Black', -apple-system, sans-serif; 
  font-size: 10px;     /* 【修改 1】放大文字 */
  letter-spacing: -0.5px; /* 【新增】緊縮字距，防止兩個字母超出地球 */
  font-weight: 900;   
  color: #ffffff;     
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); 
  text-transform: uppercase; 
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  pointer-events: none; 
}


/* --- 以下為沿用的下拉選單基礎樣式 --- */

.lang-dropdown {
  position: relative;
  display: inline-block;
  font-family: -apple-system, sans-serif;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 6px 10px;
  border-radius: 20px; 
  cursor: pointer;
}

.lang-btn:hover {
  background-color: #f5f5f5;
}

.lang-btn .arrow {
  font-size: 10px;
  color: #888;
}

/* 3. 下拉選單主體 */
.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px); /* 【修改 3】定位向下微調，空出視覺間距 */
  right: 0;
  padding: 6px 0;
  min-width: 120px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  list-style: none;
  z-index: 1000;
}

/* 【修改 3 新增】透明橋樑：用隱形盾牌填滿空隙，防止滑鼠滑過去選單消失 */
.lang-menu::before {
  content: '';
  position: absolute;
  top: -8px; /* 向上覆蓋到按鈕底部 */
  left: 0;
  width: 100%;
  height: 8px;
  background: transparent;
}

.lang-dropdown:hover .lang-menu {
  display: block;
}

.lang-menu li a {
  display: block;
  padding: 8px 16px;
  color: #444;
  text-decoration: none;
  font-size: 14px;
}

.lang-menu li a:hover {
  background-color: #f0f0f0;
}

/* 【修改 2】目前作用中（Active）選項的獨立樣式 */
.lang-menu li a.active {
  color: #0066cc;       /* 改變文字顏色 */
  font-weight: bold;    /* 字體加粗 */
  background-color: #f4f8ff; /* 加上淡淡的背景襯托（不想要可刪除此行） */
}