/* i18n language selector — 100% mirrors satoverse-io Header.tsx:218-242 + Footer.tsx:135 */
.i18n-selector { position: relative; display: inline-flex; align-items: center; }
.i18n-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: #848895;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s;
}
.i18n-btn:hover { color: #fff; }
.i18n-btn .fa-globe { font-size: 16px; width: 16px; height: 16px; }
.i18n-btn .fa-chevron-down { font-size: 14px; width: 14px; height: 14px; opacity: 1; transition: transform 0.15s; }
.i18n-btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.i18n-code { margin: 0 4px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; }

.i18n-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 192px;
  max-height: 65vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.90);
  backdrop-filter: blur(12px);
  padding: 4px 0;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  z-index: 9999;
}
.i18n-menu.i18n-menu--footer { width: 176px; max-height: 288px; }

/* Ensure footer stacking context is above body content and not clipping */
#footer-container { position: relative; z-index: 50; overflow: visible !important; }
#footer-container .satoverse-footer-inner,
#footer-container .satoverse-footer-top { overflow: visible !important; position: relative; z-index: 51; }
#footer-container .i18n-selector { position: relative; z-index: 52; }
.i18n-opt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  color: rgba(255,255,255,0.60);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.i18n-opt:hover { background: rgba(255,255,255,0.08); color: #fff; }
.i18n-opt.is-active { color: #fff; background: rgba(255,255,255,0.06); }
.i18n-opt-code { font-size: 12px; color: rgba(255,255,255,0.40); text-transform: uppercase; letter-spacing: 0; margin-left: 12px; }
.i18n-opt.is-active .i18n-opt-code { color: rgba(255,255,255,0.70); }

/* Mobile bottom-sheet variant: menu appears above button */
@media (max-width: 1199px) {
  .i18n-menu--mobile { right: auto; left: 0; min-width: 160px; }
}

/* Footer top bar: drop-down to match satoverse-io Footer.tsx (top-full mt-2, not drop-up) */
.satoverse-footer-top .i18n-menu { top: 100%; bottom: auto; margin-top: 8px; right: 0; z-index: 9999; }

/* Header actions gap: gap-2 (8px) on mobile, xl:gap-3 (12px) on ≥1280px — matches satoverse-io Header.tsx gap-2 xl:gap-3 */
.header-actions { gap: 8px; }
@media (min-width: 1280px) {
  .header-actions { gap: 12px !important; }
}

/* Global header also needs high stacking */
#main-header { position: relative; z-index: 60; }
#main-header .i18n-menu { z-index: 9999; }