/* ============================================================
   ScrapLink — Language Switcher
   ============================================================ */

/* 1. Hide all non-English by default (loaded before body renders) */
[data-lang="fr"],
[data-lang="el"],
[data-lang="hi"],
[data-lang="pt"],
[data-lang="es"] { display: none; }

/* 2. When JS sets display:revert on <a data-lang> elements,
      revert gives 'inline' — but these contexts need more.
      We restore the correct display for each context explicitly. */

/* Nav menu links — need to match whatever .menu-item normally is */
#mainmenu a[data-lang],
#mainmenu li a[data-lang] { display: inline; }

/* Buttons — must stay inline-block so layout/padding isn't lost */
a.btn-main[data-lang],
a.btn-line[data-lang] { display: inline-block; }

/* Footer menu links */
footer a[data-lang] { display: inline; }

/* ============================================================
   Language Bar
   ============================================================ */

:root { --lang-bar-h: 46px; }

#lang-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--lang-bar-h);
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

body { padding-top: var(--lang-bar-h) !important; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  border-radius: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  opacity: 0.45;
  overflow: hidden;
  transition: opacity 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  flex-shrink: 0;
}

a.lang-btn img {
  width: 40px !important;
  height: 28px !important;
  object-fit: cover;
  display: block;
  border-radius: 1px;
}

.lang-btn:hover { opacity: 1; transform: scale(1.1); }
.lang-btn.active-lang { opacity: 1; border-color: rgba(255,255,255,0.65); }

@media (max-width: 767px) {
  #lang-bar { gap: 8px; }
  .lang-btn { width: 34px; height: 24px; }
  .lang-btn img { width: 34px; height: 24px; }
}