/* --- Language Selector Styles --- */
#language-selector {
  position: fixed;
  bottom: 1.5rem;
  /* 24px */
  right: 1.5rem;
  /* 24px */
  z-index: 50;
}

#language-selector-button {
  display: none;
  align-items: center;
  gap: 0.5rem;
  /* 8px */
  padding: 0.75rem 1rem;
  /* 12px 16px */
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  /* pill shape */
  font-size: 0.875rem;
  /* 14px */
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: all 0.2s ease-in-out;
}

#language-selector-button:hover {
  background-color: #f9fafb;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

#language-selector-button .flag {
  font-size: 1.25rem;
  /* 20px */
}

#language-selector-dropdown {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  /* Position above the button */
  right: 0;
  width: 160px;
  background-color: white;
  border-radius: 0.5rem;
  /* 8px */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  border: 1px solid #f3f4f6;
  overflow: hidden;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  transform-origin: bottom right;
}

#language-selector-dropdown.hidden {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  pointer-events: none;
}

#language-selector-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  /* 8px */
}

#language-selector-dropdown li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* 12px */
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  /* 6px */
  cursor: pointer;
  font-size: 0.875rem;
  /* 14px */
  color: #374151;
  transition: background-color 0.2s ease;
}

#language-selector-dropdown li:hover {
  background-color: #f3f4f6;
}

#language-selector-dropdown li.active {
  font-weight: 600;
  background-color: #eef2ff;
  color: #4338ca;
}