/* Mentes — language toggle pill. Two visual variants share most styling. */

.mentes-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(245, 243, 238, 0.16);
  background: rgba(12, 12, 13, 0.6);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1;
  user-select: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color .2s;
}

.mentes-lang-toggle:hover {
  border-color: rgba(255, 149, 0, 0.35);
}

.mentes-lang-toggle button {
  background: transparent;
  border: none;
  color: rgba(245, 243, 238, 0.55);
  font: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  padding: 6px 8px;
  border-radius: 99px;
  cursor: pointer;
  transition: color .2s;
}

.mentes-lang-toggle button:hover {
  color: #F5F3EE;
}

.mentes-lang-toggle button.is-active {
  color: #FF9500;
}

.mentes-lang-sep {
  color: rgba(245, 243, 238, 0.25);
  font-size: 10px;
  pointer-events: none;
}

/* Light variant — for pages where the bg is light-coloured (none right now,
   but the hook is here so future pages don't need to re-style). */
.mentes-lang-toggle--light {
  background: rgba(245, 243, 238, 0.85);
  border-color: rgba(6, 6, 6, 0.10);
}
.mentes-lang-toggle--light button { color: rgba(6, 6, 6, 0.55); }
.mentes-lang-toggle--light button:hover { color: #060606; }
.mentes-lang-toggle--light button.is-active { color: #FF9500; }
.mentes-lang-toggle--light .mentes-lang-sep { color: rgba(6, 6, 6, 0.25); }

/* On the main marketing nav, the toggle sits at the end of .nav__links */
.nav__links .mentes-lang-toggle {
  margin-left: 6px;
}

/* On the pricing page header, the toggle sits between brand + back link */
.top .mentes-lang-toggle {
  margin-left: auto;
  margin-right: 18px;
}

@media (max-width: 720px) {
  .mentes-lang-toggle {
    font-size: 11px;
    padding: 3px 8px;
  }
  .mentes-lang-toggle button {
    padding: 5px 6px;
  }
}