/* Language switcher (అ|A).
   A self-contained control: nothing here touches existing selectors.

   Placement
   - Public pages, wide screens: top-right, in the margin beside the header's
     Join / Login button, vertically centred on the gold bar.
   - Narrow screens: just under the header, right edge, so it never sits on
     the menu button.
   - Admin and member portal (the site header is hidden there): top-right, in
     the portal's own top bar, whose buttons make room for it. */

.lsw {
  position: fixed;
  z-index: 150;                 /* above the header (100), below modals (9998+) */
  top: 24px;
  right: 22px;
  font-family: inherit;
}

.lsw-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 12px 0 13px;
  border: 1.5px solid rgba(26, 26, 26, .14);
  border-radius: 999px;
  background: #fff;
  color: #1A1A1A;
  font: 800 16px/1 'Montserrat', 'Noto Sans Telugu', system-ui, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(31, 31, 31, .14);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lsw-btn:hover { transform: translateY(-1px); border-color: #E31E24; box-shadow: 0 10px 24px rgba(227, 30, 36, .22); }
.lsw-btn:focus-visible { outline: 3px solid #E31E24; outline-offset: 2px; }
.lsw-glyph { display: inline-flex; align-items: baseline; gap: 3px; }
.lsw-glyph .lsw-te { font-size: 17px; color: #E31E24; }
.lsw-glyph .lsw-bar { width: 1.5px; height: 16px; background: rgba(26, 26, 26, .28); align-self: center; }
.lsw-glyph .lsw-en { font-size: 15px; }
.lsw-caret { font-size: 10px; opacity: .6; transition: transform .18s ease; }
.lsw.is-open .lsw-caret { transform: rotate(180deg); }
/* a small red dot marks that the page is currently translated */
.lsw.is-translated .lsw-btn { border-color: #E31E24; }
.lsw.is-translated .lsw-btn::after { content: none; }
.lsw-btn { position: relative; }

.lsw-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 232px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, .08);
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(31, 31, 31, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.lsw.is-open .lsw-menu { opacity: 1; visibility: visible; transform: none; }

.lsw-head {
  margin: 4px 10px 6px;
  font: 800 10.5px/1 'Montserrat', system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a6a00;
}

.lsw-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #1A1A1A;
  text-align: left;
  cursor: pointer;
  font: 600 14.5px/1.2 'Noto Sans Telugu', 'Montserrat', system-ui, sans-serif;
  transition: background .14s ease;
}
.lsw-item small { display: block; margin-top: 2px; font: 500 11px/1 'Montserrat', system-ui, sans-serif; color: #6b6b6b; }
.lsw-item:hover, .lsw-item:focus-visible { background: #FFF4C7; outline: none; }
.lsw-item[aria-checked="true"] { background: #FFE9A0; }
.lsw-item[aria-checked="true"]::after {
  content: "\2713"; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: #E31E24; color: #fff; font-size: 12px; font-weight: 800;
}

.lsw-note {
  margin: 6px 10px 4px;
  font: 500 10.5px/1.4 'Montserrat', system-ui, sans-serif;
  color: #8a8a8a;
}

/* ---- narrower screens: tuck under the header on the right ---- */
@media (max-width: 1339px) {
  .lsw { top: calc(var(--hdr, 91px) + 10px); right: 12px; }
  .lsw-btn { height: 38px; padding: 0 10px 0 11px; }
}

/* ---- portal screens (admin / member account): the site header is hidden, so
   the switcher sits top-right, inside the portal's own top bar. The bar gets
   a little right padding so its buttons shift left and make room. ---- */
body[data-route="admin"] .lsw,
body[data-route="account"] .lsw {
  top: 12px;
  bottom: auto;
  right: 24px;
}
body[data-route="admin"] .lsw-btn,
body[data-route="account"] .lsw-btn { height: 40px; }
body[data-route="admin"] .ac-top,
body[data-route="account"] .ac-top { padding-right: 112px; }
@media (max-width: 600px) {
  body[data-route="admin"] .lsw,
  body[data-route="account"] .lsw { right: 10px; }
  body[data-route="admin"] .ac-top,
  body[data-route="account"] .ac-top { padding-right: 96px; }
}

/* ---- keep Google's own UI out of sight; our control replaces it ---- */
#lswGT { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-te-balloon-frame { display: none !important; visibility: hidden !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: none !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  .lsw-btn, .lsw-menu, .lsw-caret { transition: none; }
}
@media print { .lsw { display: none; } }

/* ---- Telugu: keep the header laid out exactly as in English ----
   Telugu words are wider than their English labels, which pushed the menu,
   phone number and Join / Login past the right edge and under the switcher.
   Only while the page is translated, the header's type and spacing come down
   a step so the same row fits on one line. English is untouched. */
@media (min-width: 821px) {
  html[class*="translated-"] .primary-nav { gap: 2px; font-size: 13px; }
  html[class*="translated-"] .primary-nav > a:not(.btn),
  html[class*="translated-"] .primary-nav .nav-menu > a { padding: 7px 8px; }
  html[class*="translated-"] .nav-tollfree { margin-left: 6px; padding: 7px 8px 7px 4px; gap: 6px; }
  html[class*="translated-"] .nav-tollfree .ntf-num { font-size: 13px; }
  html[class*="translated-"] .site-header .primary-nav > a.auth-link { margin-left: 14px; padding-left: 12px; padding-right: 12px; font-size: 12.5px; }
  html[class*="translated-"] .brand-lockup { max-width: 200px; }
}
@media (min-width: 821px) and (max-width: 1339px) {
  html[class*="translated-"] .primary-nav { font-size: 12px; }
  html[class*="translated-"] .primary-nav > a:not(.btn),
  html[class*="translated-"] .primary-nav .nav-menu > a { padding: 7px 6px; }
}

/* ---- pill switch (replaces the drop-down) ---- */
.lsw .lsw-seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px; background: #fff;
  border: 1.5px solid rgba(26, 26, 26, .10);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(31, 31, 31, .14);
}
.lsw .lsw-item {
  display: inline-flex; width: auto; justify-content: center;
  padding: 8px 12px; border-radius: 999px;
  font: 800 12.5px/1 'Montserrat', 'Noto Sans Telugu', system-ui, sans-serif;
  color: #1A1A1A; background: transparent;
  transition: background .18s ease, color .18s ease;
}
.lsw .lsw-item:hover, .lsw .lsw-item:focus-visible { background: #FFF4C7; }
.lsw .lsw-item[aria-checked="true"],
.lsw .lsw-item[aria-checked="true"]:hover { background: #E31E24; color: #fff; }
.lsw .lsw-item[aria-checked="true"]::after { content: none; }
.lsw .lsw-item:focus-visible { outline: 2px solid #E31E24; outline-offset: 1px; }