/* ============================================================
   MyHelperIndia.com — language picker (Google Translate)
   Our own control drives a hidden Google Translate widget; see lang.js.
   Stand-alone so the sign-in pages, which do not load style.css, can use
   it too. Where it sits is up to the page: the main header positions it
   in style.css, the sign-in pages float it with .lang-float.
   ============================================================ */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:46px;padding:0 12px;border-radius:11px;
  background:#fff;border:1px solid var(--line,#E7E3F2);color:var(--brand,#422F8A);
  font:600 .84rem/1 'Poppins',sans-serif;letter-spacing:.02em;
  cursor:pointer;transition:border-color .2s,background .2s;
}
.lang-btn:hover,.lang.open .lang-btn{border-color:var(--brand,#422F8A);background:#fbfaff}
.lang-btn:focus-visible,.lang-opt:focus-visible{outline:2px solid var(--brand,#422F8A);outline-offset:2px}
.lang-btn .fa-language{font-size:1.15rem}
.lang-btn .chev{font-size:.6rem;transition:transform .25s}
.lang.open .lang-btn .chev{transform:rotate(180deg)}
.lang.busy .lang-btn .fa-language{animation:langPulse 1s ease-in-out infinite}
@keyframes langPulse{50%{opacity:.35}}

.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:1100;
  width:min(290px,calc(100vw - 32px));
  max-height:calc(100dvh - 96px);overflow-y:auto;
  background:#fff;border:1px solid var(--line,#E7E3F2);border-radius:16px;
  box-shadow:0 18px 50px rgba(26,21,48,.18);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
/* visibility flips at once on open: script focuses an option in the same
   tick, and a still-hidden element refuses focus */
.lang.open .lang-menu{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .18s,transform .18s,visibility 0s;
}
.lang-head{
  display:flex;justify-content:space-between;gap:10px;
  padding:8px 10px 10px;font-size:.72rem;font-weight:600;
  color:var(--muted,#6B6580);letter-spacing:.05em;text-transform:uppercase;
}
.lang-opt{
  all:unset;box-sizing:border-box;width:100%;
  display:flex;align-items:center;gap:12px;
  padding:8px 10px;border-radius:11px;cursor:pointer;color:var(--ink,#1A1530);
  transition:background .15s;
}
.lang-opt:hover{background:#f3f0fb}
.lang-glyph{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;
  background:#f3f0fb;color:var(--brand,#422F8A);font-size:1.05rem;font-weight:600;
  transition:background .15s,color .15s;
}
.lang-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.lang-txt b{font-size:.95rem;font-weight:600}
.lang-txt small{font-size:.74rem;color:var(--muted,#6B6580)}
.lang-opt .fa-check{color:var(--brand,#422F8A);font-size:.85rem;opacity:0}
.lang-opt[aria-selected="true"]{background:#f3f0fb}
.lang-opt[aria-selected="true"] .lang-glyph{background:var(--brand,#422F8A);color:#fff}
.lang-opt[aria-selected="true"] .fa-check{opacity:1}

/* Stand-alone pages: pinned to the top-right corner */
.lang-float{position:fixed;top:14px;right:14px;z-index:1100}
.lang-float .lang-btn{box-shadow:0 6px 20px rgba(26,21,48,.12)}

/* Google's own chrome: the top banner (which also pushes <body> down and
   breaks the sticky header), hover tooltips and the loading spinner. Class
   names cover both the legacy widget and the current obfuscated build. */
body{top:0!important}
iframe.skiptranslate,.skiptranslate>iframe,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,.VIpgJd-yAWNEb-L7lbkb{display:none!important}
.goog-text-highlight,.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q{background:none!important;box-shadow:none!important}