/* ============================================================
   MaverRicks Green Energy — Translation Switcher CSS
   UPDATED: Better active state, current-page indicator
   ============================================================ */

:root {
  --tr-primary : #32C36C;
  --tr-dark    : #1A2A36;
  --tr-shadow  : 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Floating container ───────────────────────────────────── */
#mav-lang-switcher {
  position    : fixed;
  bottom      : 30px;
  right       : 26px;
  z-index     : 999999;
  font-family : 'Noto Sans Devanagari','Open Sans',sans-serif;
}

.mlsw-inner {
  display       : flex;
  align-items   : center;
  gap           : 5px;
  background    : #ffffff;
  border        : 1.5px solid rgba(50,195,108,0.30);
  border-radius : 50px;
  padding       : 7px 12px 7px 10px;
  box-shadow    : var(--tr-shadow);
  transition    : box-shadow 0.25s, border-color 0.25s;
  position      : relative;
  right         : 70px;
  bottom        : 15px;
}

#mav-lang-switcher:hover .mlsw-inner {
  box-shadow   : 0 12px 40px rgba(50,195,108,0.20), 0 2px 8px rgba(0,0,0,0.10);
  border-color : rgba(50,195,108,0.55);
}

/* ── Globe icon ───────────────────────────────────────────── */
.mlsw-globe {
  color       : var(--tr-primary);
  font-size   : 16px;
  line-height : 1;
  margin-right: 2px;
  flex-shrink : 0;
}

/* ── Button group ─────────────────────────────────────────── */
.mlsw-btns {
  display : flex;
  gap     : 3px;
}

.mlsw-btn {
  background    : transparent;
  border        : 1.5px solid #e2e8f0;
  border-radius : 30px;
  padding       : 5px 14px;
  font-size     : 12.5px;
  font-weight   : 700;
  color         : #555;
  cursor        : pointer;
  transition    : all 0.2s ease;
  white-space   : nowrap;
  font-family   : 'Noto Sans Devanagari','Open Sans',sans-serif;
  letter-spacing: 0.3px;
  position      : relative; /* dot ke liye */
}

.mlsw-btn:hover:not(.active) {
  border-color : var(--tr-primary);
  color        : var(--tr-primary);
  background   : #f0fdf4;
}

/* ── ACTIVE STATE — current language button ───────────────── */
.mlsw-btn.active {
  background    : var(--tr-primary);
  color         : #ffffff;
  border-color  : var(--tr-primary);
  box-shadow    : 0 3px 12px rgba(50,195,108,0.45),
                  0 0 0 3px rgba(50,195,108,0.15); /* outer glow ring */
  transform     : scale(1.05);
}

/* Active button ke neeche ek small dot indicator */
.mlsw-btn.active::after {
  content       : "";
  position      : absolute;
  bottom        : -7px;
  left          : 50%;
  transform     : translateX(-50%);
  width         : 5px;
  height        : 5px;
  background    : var(--tr-primary);
  border-radius : 50%;
  box-shadow    : 0 0 4px rgba(50,195,108,0.6);
}

/* ── Loading spinner ──────────────────────────────────────── */
.mlsw-loading {
  display      : inline-flex;
  align-items  : center;
  margin-left  : 4px;
}

.mlsw-spinner {
  width        : 14px;
  height       : 14px;
  border       : 2.5px solid #e2e8f0;
  border-top   : 2.5px solid var(--tr-primary);
  border-radius: 50%;
  animation    : mlsw-spin 0.65s linear infinite;
  display      : inline-block;
}

@keyframes mlsw-spin {
  to { transform: rotate(360deg); }
}

/* ── Tooltip ──────────────────────────────────────────────── */
.mlsw-tooltip {
  position      : absolute;
  bottom        : calc(100% + 10px);
  right         : 0;
  background    : var(--tr-dark);
  color         : #fff;
  font-size     : 11px;
  padding       : 5px 12px;
  border-radius : 8px;
  white-space   : nowrap;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity 0.2s;
  font-family   : 'Noto Sans Devanagari','Open Sans',sans-serif;
}

.mlsw-tooltip::after {
  content      : "";
  position     : absolute;
  top          : 100%;
  right        : 22px;
  border       : 5px solid transparent;
  border-top   : 5px solid var(--tr-dark);
}

/* ── Hide Google's ugly default UI ───────────────────────── */
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip-content,
.skiptranslate {
  display : none !important;
}

body {
  top : 0 !important;
}

font {
  display : contents !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 575px) {
  #mav-lang-switcher {
    bottom : 18px;
    right  : 14px;
  }

  .mlsw-inner {
    padding : 6px 9px 6px 8px;
    right   : 0;
    bottom  : 0;
  }

  .mlsw-btn {
    padding   : 4px 10px;
    font-size : 11.5px;
  }

  .mlsw-globe {
    font-size : 14px;
  }
}