/*最頂部  - 跑馬燈 與 語言選單 */
/* ===== 語言按鈕（灰底白字；hover 白底黑字） ===== */
.lang-dropdown .btn {
  font-size: 0.875rem;
  border-radius: 999px;
  background-color: #6c757d;   /* 灰底 */
  color: #fff;                 /* 白字 */
  border: 1px solid #6c757d;
}
.lang-dropdown .btn:hover,
.lang-dropdown .btn:focus {
  background-color: #fff;      /* 白底 */
  color: #000;                 /* 黑字 */
  border: 1px solid #6c757d;
}

/* 旗幟（簡單用 emoji；若改用圖檔可換 background-image） */
.lang-flag {
  width: 16px; height: 16px; display: inline-block; margin-right: 8px;
  border-radius: 2px; background-size: cover; vertical-align: text-bottom;
}
.flag-zh-TW::before { content: "🇹🇼"; }
.flag-zh-CN::before { content: "🇨🇳"; }
.flag-en::before    { content: "🇺🇸"; }
.flag-ja::before    { content: "🇯🇵"; }
.flag-ko::before    { content: "🇰🇷"; }
.flag-id::before    { content: "🇮🇩"; }
.flag-fr::before    { content: "🇫🇷"; }
.flag-es::before    { content: "🇪🇸"; }
.flag-de::before    { content: "🇩🇪"; }
.flag-vi::before    { content: "🇻🇳"; }
.flag-th::before    { content: "🇹🇭"; }
.flag-ms::before    { content: "🇲🇾"; }

/* 可及性需求：使用者設定「減少動態」時停掉動畫 */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  .promo-ticker { mask-image: none; -webkit-mask-image: none; }
}

/* 把原生 Google 小工具容器藏起來（仍需出現在 DOM 讓它渲染） */
#google_translate_element {
  position: absolute;
  right: 12px; top: 12px;
  min-width: 120px; min-height: 40px; /* 先給尺寸讓其渲染 .goog-te-combo */
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* 隱藏 Google 頂部提示條，避免擠壓版面 */
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }

/* ===== Promo Bar ===== */
.promo-bar {
  background: #005691;
  color: #fff;
  font-size: 14px;
}
.promo-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 36px;
  padding: 6px 10px;
}
.promo-ticker {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.marquee {
  white-space: nowrap;
  display: inline-block;
  will-change: transform;
  animation: marquee 50s linear infinite;
}
.marquee:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee__content {
  display: inline-flex;
  gap: 28px;
  padding-right: 40px;
}
.marquee__content li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.marquee__badge {
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
}