/* --- Pill-style Polylang flags in Salient mobile header --- */

/* Position & vertical centering */
@media (max-width: 999px) {
  header#top .mobile-lang-switcher{
    height: 40px !important;          /* set the pill’s total height */
    padding: 0 12px !important;        /* horizontal only; height comes from the line above */
    display: flex !important;
    align-items: center !important;    /* center flags vertically inside */
    box-sizing: content-box !important;
    line-height: 1 !important;
  }
}

/* Horizontal list, no bullets */
header#top .mobile-lang-switcher ul {
  display: flex !important;
  align-items: center;
  gap: 12px;                       /* more space between flags */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
header#top .mobile-lang-switcher li {
  list-style: none !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 20px; !important;
  padding: 0 !important;
}
header#top .mobile-lang-switcher li::marker { content: '' !important; }

/* Clickable tap targets */
header#top .mobile-lang-switcher a,
header#top .mobile-lang-switcher span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 8px;
  line-height: 1;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
header#top .mobile-lang-switcher a:hover {
  background: rgba(0,0,0,.06);
  transform: translateY(-1px);
}

/* FLAGS: force-visible & bigger (beats lazy-load opacity/visibility rules) */
header#top .mobile-lang-switcher img {
  width: 24px !important;
  min-width: 24px !important;
  height: auto !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

/* Some lazy-loaders add classes; make sure those don't hide the flags */
header#top .mobile-lang-switcher img.lazyload,
header#top .mobile-lang-switcher img.lazy-loading,
header#top .mobile-lang-switcher img.ls-is-cached,
header#top .mobile-lang-switcher img.lazyloaded {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Optional: highlight current language */
header#top .mobile-lang-switcher li.current-lang img {
  box-shadow: 0 0 0 2px rgba(0,0,0,.22);
}