/* Modal container — fills the full viewport so overlay + panel center correctly */
.lang-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}
.lang-modal.is-open { display: flex; }
.lang-modal[hidden] { display: none !important; }

/* Overlay backdrop — sits at the bottom of the stacking order */
.lang-modal__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.50);
  /* no blur — keeps modal text crisp */
  animation: langModalFadeIn 0.2s ease-out;
  cursor: pointer;
}
@keyframes langModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Panel card — centered inside overlay via flex on the panel itself */
.lang-modal__panel {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 440px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: auto;
  flex-shrink: 0;
  /* Crisp text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  /* No transform animation to avoid GPU-layer sub-pixel blur on text */
  animation: langModalIn 0.2s ease-out;
}
@keyframes langModalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Header */
.lang-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.lang-modal__title {
  font-size: 19px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.01em;
}
.lang-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: #6b7280;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.lang-modal__close:hover {
  background: #f3f4f6;
  color: #111827;
}

/* List */
.lang-modal__list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.lang-modal__item { margin: 0; }
.lang-modal__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  text-decoration: none;
  color: #111827;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s;
  white-space: nowrap;
}
.lang-modal__link:hover { background: #f3f4f6; }
.lang-modal__item.is-current .lang-modal__link {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}
.lang-modal__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  background: #f3f4f6;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #374151;
  flex-shrink: 0;
}
.lang-modal__item.is-current .lang-modal__flag {
  background: #dbeafe;
  color: #1d4ed8;
}
.lang-modal__label { flex: 1; }
.lang-modal__check { flex-shrink: 0; margin-left: 4px; }

/* Mobile — fuller screen on small devices */
@media (max-width: 640px) {
  .lang-modal__panel {
    width: 92%;
    max-width: 360px;
    max-height: 80vh;
    border-radius: 14px;
  }
  .lang-modal__header { padding: 14px 16px; }
  .lang-modal__title { font-size: 15px; }
  .lang-modal__link { padding: 14px 16px; font-size: 16px; }
  .lang-modal__flag { width: 34px; height: 22px; font-size: 11px; }
}

/* Lang trigger button (head + drawer variants) */
.lang-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; background: transparent; border: 1px solid rgba(0,0,0,.12); border-radius: 20px; color: inherit; font: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.lang-trigger:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.24); }
.lang-trigger__flag { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.lang-trigger--head { padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); color: #1f2937; }
.lang-trigger--head:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.18); }
.lang-trigger--drawer { width: 100%; justify-content: flex-start; padding: 12px 14px; background: transparent; border: 1px solid rgba(0,0,0,.06); border-radius: 10px; color: #1f2937; font-size: 14px; }
.lang-trigger--drawer:hover { background: rgba(0,0,0,.03); }
@media (max-width: 960px) { .lang-trigger--head { display: none; } }
@media (min-width: 961px) { .lang-trigger--drawer { display: none; } }