/* ── InvoiceGenie Translate ── */

/* Desktop: flag button sits in the nav row as its own <li> */
li.ig-translate-nav-item {
  display: flex !important;
  align-items: center;
  list-style: none;
  padding: 0 !important;
  margin: 0 0 0 6px !important;
  flex-shrink: 0 !important;
}

/* Mobile: pull the flag <li> out of the nav flow and pin it beside the hamburger.
   The nav <ul> is typically inside .main-navigation which collapses on mobile.
   We use position:fixed to escape that collapse and float near the hamburger. */
@media (max-width: 768px) {
  li.ig-translate-nav-item {
    display: none !important;
  }
}
@media (max-width: 1200px) {
  /* Also hide nav <li> at wider mobile/tablet breakpoints */
  li.ig-translate-nav-item {
    display: none !important;
  }
}

/* Mobile-only floating flag button — display/position rules are in the inline
   wp_head <style> block (PHP) to prevent external CSS caching from hiding it.
   Only button sizing here. */
#ig-mobile-flag-wrap .ig-lang-trigger {
  padding: 4px 10px !important;
  min-height: 36px !important;
}

/* Trigger button */
.ig-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px !important;
  min-height: 42px !important;
  background: transparent;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 100px !important;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
}

.ig-lang-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.85);
}

.ig-lang-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.85);
}

.ig-lang-trigger svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.ig-lang-chevron {
  transition: transform 0.2s;
}

.ig-lang-trigger[aria-expanded="true"] .ig-lang-chevron {
  transform: rotate(180deg);
}

.ig-lang-trigger-inner {
  display: inline-flex;
  align-items: center;
}

.ig-trigger-flag,
.ig-lang-trigger .ig-trigger-flag {
  font-size: 22px !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle;
}

/* Mobile: the shared ig-nav-actions <li> is hidden by invoicegenie-login.css */

/* ── Dropdown panel ── */
.ig-lang-dropdown {
  position: fixed;
  z-index: 999998;
  width: 210px;
  background: #120d2b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.15) inset;
  animation: igLangFadeIn 0.18s ease;
}

.ig-lang-dropdown[hidden] { display: none; }

@keyframes igLangFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ig-lang-dropdown-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 6px 10px 6px;
}

.ig-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  color: rgba(255, 255, 255, 0.75);
}

.ig-lang-option:hover {
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
}

.ig-lang-option.ig-lang-active {
  color: #fff;
  background: rgba(124, 58, 237, 0.25);
}

.ig-lang-flag {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.ig-lang-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
}

.ig-lang-check {
  flex-shrink: 0;
  opacity: 0;
  color: #4ecca3;
  transition: opacity 0.15s;
}

.ig-lang-active .ig-lang-check { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   GOOGLE TRANSLATE BAR SUPPRESSION
   .skiptranslate is the class Google adds to the banner iframe.
   Hiding it does NOT break translation — text translation is
   done by Google's JS engine, independent of these UI elements.
───────────────────────────────────────────────────────── */
body {
  top: 0 !important;
  margin-top: 0 !important;
}

/* When Google translates it adds translated-ltr/rtl to <html> — use
   that to keep body.top at 0 via pure CSS (no JS timing needed) */
html.translated-ltr body,
html.translated-rtl body {
  top: 0 !important;
  margin-top: 0 !important;
}

.skiptranslate {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

#google_translate_element,
#google_translate_element * {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}