/* ===============================================================
   lang.css — the language selector, in one place

   Linked by every page on getconverzo.in, including partnership.html,
   which is built on Tailwind CDN and shares none of style.css's design
   tokens — hence the var() fallbacks throughout. Keeping this out of
   style.css is what lets one selector serve both design systems instead
   of being re-styled per page.

   Rendered by the language module at the bottom of script.js.
   =============================================================== */

/* ---- Google Translate widget chrome ----
   The widget injects a top banner, a floating tooltip and a gadget we never
   show, because the site drives translation from its own selector. These
   rules used to live only inside the <style> block script.js injected at
   runtime; with that block gone they belong here, or the Google banner
   shoves the whole page down by 40px on every translated load. */

.goog-te-banner-frame,
.goog-te-banner,
.skiptranslate,
.goog-te-gadget,
#goog-gt-tt,
.goog-te-balloon-frame,
#google_translate_element,
.VIpgJd-ZGain-xl05Fe-OJuWdf {
  display: none !important;
}
body {
  top: 0 !important;
  position: static !important;
}
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}
.goog-text-highlight,
font {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ---- Mounts ---- */

.lang-slot {
  display: inline-flex;
}
.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* The desktop mount lives in .nav-cta, which style.css hides below 1100px, so
   it needs no query of its own. The mobile header is the other half of that
   switch and must hand back over at exactly the same width. These two
   disagreeing (768 vs 992) is what put two selectors on every tablet; setting
   only one of them is what then left a band with no selector at all. The
   three widths that must always agree: this rule, `.nav-links, .nav-cta` in
   style.css, and DESKTOP_QUERY in script.js. */
@media (min-width: 1100px) {
  .mobile-header-actions {
    display: none;
  }
}
.mobile-lang-drawer .lang-slot {
  width: 100%;
}

/* ---- Trigger ---- */

.lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 44x44 minimum: this is the only language affordance on a phone. */
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  color: var(--text-primary, #FFFFFF);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill, 9999px);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lang-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
}
.lang-trigger:focus-visible {
  outline: 2px solid var(--accent-green, #00E676);
  outline-offset: 2px;
}
.lang-trigger-face {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Inline SVG, not a Font Awesome glyph: the legal pages never load Font
   Awesome, so <i class="fas fa-globe"> rendered as blank space there. */
.lang-trigger .lang-globe {
  color: var(--accent-green, #00E676);
  flex-shrink: 0;
}
.lang-code-text {
  font-size: 0.688rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lang-trigger-word {
  font-size: 0.875rem;
  font-weight: 600;
}
/* Drawer variant: a full-width row that reads as a menu item, not a pill. */
.lang-trigger-wide {
  width: 100%;
  justify-content: space-between;
  padding: 0 18px;
  min-height: 48px;
  border-radius: var(--radius-sm, 8px);
}
.lang-trigger-wide .lang-code-text {
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
}

/* ---- Panel ---- */

/* Stacking: the panel has to clear three things that sit above normal page
   content — the mobile drawer (z-index 2000), Google Translate's own tooltip
   layer (10000) and the opt-in chat widget, which pins itself at the 32-bit
   maximum and otherwise covers the last row of the sheet. While the sheet is
   open it IS the modal layer, so it goes above all of them. */
.lang-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: rgba(2, 6, 16, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lang-backdrop.is-open {
  opacity: 1;
}
/* The dropdown form needs no scrim — only the bottom sheet does. */
@media (min-width: 1100px) {
  .lang-backdrop {
    background: transparent;
  }
}

.lang-panel {
  position: fixed;
  z-index: 2147483002;
  width: 248px;
  padding: 6px;
  /* Opaque, not the translucent --bg-card: this sits over page content and a
     see-through menu is where the contrast goes. */
  background: #0B1424;
  border: 1px solid var(--border-card, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

.lang-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-card, rgba(255,255,255,0.08));
}
.lang-panel-title {
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary, #A0AEC0);
}
.lang-panel-close {
  display: none;
  background: none;
  border: 0;
  color: var(--text-secondary, #A0AEC0);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.lang-panel-list {
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-primary, #FFFFFF);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-option:hover {
  background: rgba(0, 230, 118, 0.1);
  color: var(--accent-green, #00E676);
}
.lang-option:focus-visible {
  outline: 2px solid var(--accent-green, #00E676);
  outline-offset: -2px;
}
.lang-option-flag {
  font-size: 1.125rem;
  line-height: 1;
  flex-shrink: 0;
}
.lang-option-names {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.lang-option-native {
  font-size: 0.875rem;
  font-weight: 600;
}
/* The English name is not decoration: it is the way back for someone who
   picked a script they cannot read. --text-secondary is AA on this panel. */
.lang-option-english {
  font-size: 0.688rem;
  font-weight: 500;
  color: var(--text-secondary, #A0AEC0);
}
.lang-option-tick {
  flex-shrink: 0;
  color: var(--accent-green, #00E676);
  opacity: 0;
}
.lang-option.is-active .lang-option-tick {
  opacity: 1;
}
.lang-option.is-active .lang-option-native {
  color: var(--accent-green, #00E676);
}

.lang-panel-note {
  padding: 8px 12px 4px;
  margin: 4px 0 0;
  border-top: 1px solid var(--border-card, rgba(255,255,255,0.08));
  font-size: 0.688rem;
  color: var(--text-secondary, #A0AEC0);
}

/* ---- Bottom sheet below 769px ---- */

@media (max-width: 1099px) {
  .lang-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 80vh;
    padding: 6px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    transform: translateY(100%);
  }
  .lang-panel.is-open {
    transform: translateY(0);
  }
  .lang-panel-head {
    padding: 14px 8px 12px;
  }
  .lang-panel-title {
    font-size: 0.813rem;
  }
  .lang-panel-close {
    display: block;
    /* Tap target, not just a glyph. */
    min-width: 44px;
    min-height: 44px;
  }
  .lang-panel-list {
    max-height: calc(80vh - 130px);
  }
  .lang-option {
    min-height: 52px;
    padding: 10px 8px;
  }
  .lang-option-native {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-panel,
  .lang-backdrop,
  .lang-trigger,
  .lang-option {
    transition: none;
  }
}

/* Brand and product names must survive translation — Google Translate turns
   "Converzo" into transliterated noise in ar/hi/ja/zh without this. */
.notranslate {
  unicode-bidi: isolate;
}